From 4db10cf04b19b6103a2feb93cecf30071866fe50 Mon Sep 17 00:00:00 2001
From: Aji Setiaji <aji.setiaji@iconpln.co.id>
Date: Thu, 11 Sep 2025 16:23:03 +0700
Subject: [PATCH] penambahan fitur search

---
 .../humanresource/employee/+page.svelte       | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/routes/backoffice/humanresource/employee/+page.svelte b/src/routes/backoffice/humanresource/employee/+page.svelte
index 4d3b022..2b90592 100644
--- a/src/routes/backoffice/humanresource/employee/+page.svelte
+++ b/src/routes/backoffice/humanresource/employee/+page.svelte
@@ -55,6 +55,8 @@
         title: string;
     };
 
+    let search: string = "";
+
     const columns: columns[] = [
         { key: "no", title: "No. " },
         { key: "employee_name", title: "Employee Name" },
@@ -112,7 +114,7 @@
 
         // Tambahkan filter pencarian jika ada
         if (searchTerm) {
-            query = query.ilike("emoloyee_name", `%${searchTerm}%`);
+            query = query.ilike("employee_name", `%${searchTerm}%`);
         }
 
         // Jalankan query
@@ -138,7 +140,7 @@
         currentPage = page;
         offset = (currentPage - 1) * rowsPerPage;
 
-        fetchEmployee(null, "created_at", "desc", currentPage - 1, rowsPerPage);
+        fetchEmployee(search, "created_at", "desc", currentPage - 1, rowsPerPage);
     }
 
     function pageRange(
@@ -173,7 +175,7 @@
         currentPage = page;
         offset = (currentPage - 1) * rowsPerPage;
 
-        fetchEmployee(null, "created_at", "desc", currentPage - 1, rowsPerPage);
+        fetchEmployee(search, "created_at", "desc", currentPage - 1, rowsPerPage);
     }
 
     onMount(() => {
@@ -310,7 +312,7 @@
         }
 
         await fetchEmployee(
-            null,
+            search,
             "created_at",
             "desc",
             (currentPage - 1) * rowsPerPage,
@@ -330,7 +332,7 @@
                 return;
             }
             await fetchEmployee(
-                null,
+                search,
                 "created_at",
                 "desc",
                 (currentPage - 1) * rowsPerPage,
@@ -385,16 +387,21 @@
                 placeholder="🔍 Search by item name..."
                 class="border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:outline-none px-4 py-2 rounded-xl text-sm w-64 transition"
                 on:input={(e) => {
-                    const searchTerm = (
+                     search = (
                         e.target as HTMLInputElement
                     ).value.toLowerCase();
-                    fetchEmployee(searchTerm, "created_at", "desc");
+
+                    if (search !== "" && search.length > 3) {
+                        fetchEmployee(search, "created_at", "desc", 0, 10);
+                    } else if (search === "") {
+                        fetchEmployee(null, "created_at", "desc", 0, 10);
+                    }
                 }}
             />
             <button
                 class="bg-gray-200 text-gray-700 px-4 py-2 rounded-xl hover:bg-gray-300 text-sm transition"
                 on:click={() =>
-                    fetchEmployee(null, "created_at", "desc", 0, 10)}
+                    fetchEmployee(search, "created_at", "desc", 0, 10)}
             >
                 🔄 Reset
             </button>