last update feat quick search

resources/js/quick-search/detail.js

@@ -0,0 +1,70 @@
+import { Grid } from "gridjs";
+class QuickSearchDetail {
+    init() {
+        this.initTablePbgTaskAssignments();
+    }
+
+    initTablePbgTaskAssignments() {
+        let tableContainer = document.getElementById(
+            "table-pbg-task-assignments"
+        );
+
+        let url_task_assignments = document.getElementById(
+            "url_task_assignments"
+        ).value;
+
+        new Grid({
+            columns: [
+                "ID",
+                "Nama",
+                "Email",
+                "Nomor Telepon",
+                "Keahlian",
+                "Status",
+            ],
+            search: {
+                server: {
+                    url: (prev, keyword) => `${prev}?search=${keyword}`,
+                },
+                debounceTimeout: 1000,
+            },
+            pagination: {
+                limit: 15,
+                server: {
+                    url: (prev, page) =>
+                        `${prev}${prev.includes("?") ? "&" : "?"}page=${
+                            page + 1
+                        }`,
+                },
+            },
+            sort: true,
+            server: {
+                url: `${url_task_assignments}`,
+                then: (data) => {
+                    return data.data.map((item) => {
+                        const expertiseArray =
+                            typeof item.expertise === "string"
+                                ? JSON.parse(item.expertise)
+                                : item.expertise;
+
+                        return [
+                            item.id,
+                            item.name,
+                            item.email,
+                            item.phone_number,
+                            Array.isArray(expertiseArray)
+                                ? expertiseArray.map((e) => e.name).join(", ")
+                                : "-",
+                            item.status_name,
+                        ];
+                    });
+                },
+                total: (data) => data.meta.total,
+            },
+        }).render(tableContainer);
+    }
+}
+
+document.addEventListener("DOMContentLoaded", function (e) {
+    new QuickSearchDetail().init();
+});

resources/js/quick-search/result.js

@@ -4,13 +4,56 @@ class QuickSearchResult {
     constructor() {
         this.table = null;
         const baseInput = document.getElementById("base_url_datatable");
-        this.datatableUrl = baseInput ? baseInput.value : "";
+        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();
+            if (newKeyword !== "") {
+                // 1. Update datatable URL and reload
+                this.datatableUrl = this.buildUrl(newKeyword);
+                this.initDatatable();
+
+                // 2. Update URL query string (without reloading the page)
+                const newUrl = `${
+                    window.location.pathname
+                }?keyword=${encodeURIComponent(newKeyword)}`;
+                window.history.pushState({ path: newUrl }, "", newUrl);
+
+                // 3. Update visible keyword text in <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);
+        url.searchParams.set("search", keyword);
+        return url.toString();
+    }
+
     initDatatable() {
         const tableContainer = document.getElementById(
             "datatable-quick-search-result"
@@ -73,7 +116,12 @@ class QuickSearchResult {
         };
 
         if (this.table) {
-            this.table = this.table.updateConfig(config).forceRender();
+            this.table
+                .updateConfig({
+                    ...config,
+                    server: { ...config.server, url: this.datatableUrl },
+                })
+                .forceRender();
         } else {
             tableContainer.innerHTML = "";
             this.table = new Grid(config).render(tableContainer);