create public search

2025-08-26 02:33:09 +07:00
parent 38493063c4
commit c6257b79bf
6 changed files with 363 additions and 0 deletions
--- a/resources/js/public-search/index.js
+++ b/resources/js/public-search/index.js
@@ -0,0 +1,130 @@
+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();
+});