131 lines
4.1 KiB
JavaScript
131 lines
4.1 KiB
JavaScript
import { Grid, html } from "gridjs";
|
|
import { addThousandSeparators } from "../global-config";
|
|
|
|
class PublicSearch {
|
|
constructor() {
|
|
this.table = null;
|
|
const baseInput = document.getElementById("base_url_datatable");
|
|
this.baseUrl = baseInput ? baseInput.value.split("?")[0] : "";
|
|
this.keywordInput = document.getElementById("search_input");
|
|
this.searchButton = document.getElementById("search_button");
|
|
|
|
this.datatableUrl = this.buildUrl(this.keywordInput.value);
|
|
}
|
|
|
|
init() {
|
|
this.bindSearchButton();
|
|
this.initDatatable();
|
|
}
|
|
|
|
bindSearchButton() {
|
|
const handleSearch = () => {
|
|
const newKeyword = this.keywordInput.value.trim();
|
|
|
|
// 1. Update datatable URL and reload
|
|
this.datatableUrl = this.buildUrl(newKeyword);
|
|
this.initDatatable();
|
|
|
|
// 2. Update URL query string (tanpa reload page)
|
|
const newUrl = `${window.location.pathname}${
|
|
newKeyword ? `?keyword=${encodeURIComponent(newKeyword)}` : ""
|
|
}`;
|
|
window.history.pushState({ path: newUrl }, "", newUrl);
|
|
|
|
// 3. Update visible keyword text di <em>{{ $keyword }}</em>>
|
|
const keywordDisplay = document.querySelector(".qs-header em");
|
|
if (keywordDisplay) {
|
|
keywordDisplay.textContent = newKeyword || "-";
|
|
}
|
|
};
|
|
|
|
this.searchButton.addEventListener("click", handleSearch);
|
|
|
|
this.keywordInput.addEventListener("keydown", (event) => {
|
|
if (event.key === "Enter") {
|
|
event.preventDefault();
|
|
handleSearch();
|
|
}
|
|
});
|
|
}
|
|
|
|
buildUrl(keyword) {
|
|
const url = new URL(this.baseUrl, window.location.origin);
|
|
|
|
if (keyword && keyword.trim() !== "") {
|
|
url.searchParams.set("search", keyword);
|
|
} else {
|
|
url.searchParams.delete("search"); // pastikan tidak ada search param
|
|
}
|
|
|
|
return url.toString();
|
|
}
|
|
|
|
initDatatable() {
|
|
const tableContainer = document.getElementById(
|
|
"datatable-public-search"
|
|
);
|
|
|
|
const config = {
|
|
columns: [
|
|
"ID",
|
|
{ name: "Nama Pemohon" },
|
|
{ name: "Nama Pemilik" },
|
|
{ name: "Kondisi" },
|
|
"Nomor Registrasi",
|
|
"Status",
|
|
"Jenis Fungsi",
|
|
{ name: "Nama Bangunan" },
|
|
"Jenis Konsultasi",
|
|
{ name: "Tanggal Jatuh Tempo" },
|
|
{ name: "Retribusi" },
|
|
],
|
|
search: false,
|
|
pagination: {
|
|
limit: 15,
|
|
server: {
|
|
url: (prev, page) =>
|
|
`${prev}${prev.includes("?") ? "&" : "?"}page=${
|
|
page + 1
|
|
}`,
|
|
},
|
|
},
|
|
sort: true,
|
|
server: {
|
|
url: this.datatableUrl,
|
|
then: (data) =>
|
|
data.data.map((item) => [
|
|
item.id,
|
|
item.name,
|
|
item.owner_name,
|
|
item.condition,
|
|
item.registration_number,
|
|
item.status_name,
|
|
item.function_type,
|
|
item.name_building,
|
|
item.consultation_type,
|
|
item.due_date,
|
|
addThousandSeparators(item.nilai_retribusi_bangunan),
|
|
]),
|
|
total: (data) => data.total,
|
|
},
|
|
};
|
|
|
|
if (this.table) {
|
|
this.table
|
|
.updateConfig({
|
|
...config,
|
|
server: { ...config.server, url: this.datatableUrl },
|
|
})
|
|
.forceRender();
|
|
} else {
|
|
tableContainer.innerHTML = "";
|
|
this.table = new Grid(config).render(tableContainer);
|
|
}
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const app = new PublicSearch();
|
|
app.init();
|
|
});
|