feat(event): pagination page

Author: wanasart

client/my-app/src/components/features/events/EventCardGrid.tsx

@@ -24,11 +24,13 @@ export default function EventCardGrid({
   const [error, setError] = useState<string | null>(null);
   const [busyId, setBusyId] = useState<Event["event_id"] | null>(null);
 
+  const PAGE_SIZE = 4;
+  const [page, setPage] = useState(1);
+
   const doFetch: Fetcher =
     fetcher ?? (typeof fetch !== "undefined" ? fetch : (async () => new Response()) as any);
 
   function handleUpdated(updated: Event) {
-    // อัปเดต event ที่ถูกแก้ไขใน state ของ items
     setItems(prev => prev.map(it => it.event_id === updated.event_id ? updated : it));
   }
 
@@ -53,24 +55,31 @@ export default function EventCardGrid({
         if (alive) setLoading(false);
       }
     })();
-    return () => {
-      alive = false;
-    };
+    return () => { alive = false; };
   }, [endpoint, doFetch]);
 
-  /** รวมค่าปัจจุบัน + ที่จะเปลี่ยน แล้วยิง PUT */
+  /** --- Pagination --- */
+  const total = items.length;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  const start = (page - 1) * PAGE_SIZE;
+  const end = Math.min(start + PAGE_SIZE, total);
+  const pageItems = items.slice(start, end);
+
+  useEffect(() => {
+    if (page > totalPages) setPage(totalPages);
+  }, [totalPages]);
+
+  /** --- PUT / Toggle functions --- */
   async function putMerged(id: number, patch: Partial<Pick<Event, "sensitivity" | "priority" | "status">>) {
-    // หา current
     const cur = items.find(x => x.event_id === id);
     if (!cur) return;
 
     const merged: Pick<Event, "sensitivity" | "priority" | "status"> = {
-      sensitivity: (patch.sensitivity ?? cur.sensitivity) as any,
-      priority: (patch.priority ?? cur.priority) as any,
-      status: (patch.status ?? cur.status) as boolean,
+      sensitivity: patch.sensitivity ?? cur.sensitivity,
+      priority: patch.priority ?? cur.priority,
+      status: patch.status ?? cur.status,
     };
 
-    // optimistic
     setItems(prev => prev.map(it => it.event_id === id ? { ...it, ...merged } : it));
 
     try {
@@ -79,39 +88,24 @@ export default function EventCardGrid({
         method: "PUT",
         credentials: "include",
         cache: "no-store",
-        headers: {
-          "Content-Type": "application/json",
-          Accept: "application/json",
-        },
-        body: JSON.stringify({
-          sensitivity: merged.sensitivity,
-          priority: merged.priority,
-          status: merged.status,
-        }),
+        headers: { "Content-Type": "application/json", Accept: "application/json" },
+        body: JSON.stringify(merged),
       });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
     } catch (err) {
-      // rollback ง่ายๆด้วยการดึงของเดิมจาก cur
       setItems(prev => prev.map(it => it.event_id === id ? cur : it));
       console.error(err);
     } finally {
       setBusyId(null);
     }
   }
 
-  // Toggle → เรียก PUT พร้อมรวมค่าปัจจุบันของ sensitivity/priority
   async function toggleEnabled(id: Event["event_id"], next: boolean) {
     await putMerged(id, { status: next });
   }
 
-  // จาก dropdown → onEdit ส่ง item ทั้งตัวมา เราใช้เฉพาะ field ที่เกี่ยวแล้ว PUT
   async function updateItem(next: Event) {
-    const patch: Partial<Pick<Event, "sensitivity" | "priority" | "status">> = {};
-    // เราถือว่า next คือค่าที่ “ถูกแก้แล้ว” จากการ์ด
-    patch.sensitivity = next.sensitivity;
-    patch.priority = next.priority;
-    patch.status = next.status;
-    await putMerged(next.event_id, patch);
+    await putMerged(next.event_id, { sensitivity: next.sensitivity, priority: next.priority, status: next.status });
   }
 
   const gridCols = useMemo(
@@ -138,22 +132,53 @@ export default function EventCardGrid({
   }
 
   return (
-    <div className={`${gridCols} ${className ?? ""}`}>
-      {items.map((it) => (
-        <EventCard
-          key={it.event_id}
-          item={it}
-          onToggle={toggleEnabled}
-          onEdit={(v) => (onEdit ? onEdit(v) : updateItem(v))}
-          onUpdated={handleUpdated}
-          onDelete={(deletedItem: Event) => {
-            setItems(prev => prev.filter(x => x.event_id !== deletedItem.event_id));
-            onDelete?.(deletedItem);
-          }}
-          disabled={busyId === it.event_id}
-        />
-      ))}
-    </div>
+    <>
+      <div className={`${gridCols} ${className ?? ""}`}>
+        {pageItems.map(it => (
+          <EventCard
+            key={it.event_id}
+            item={it}
+            onToggle={toggleEnabled}
+            onEdit={(v) => (onEdit ? onEdit(v) : updateItem(v))}
+            onUpdated={handleUpdated}
+            onDelete={(deletedItem: Event) => {
+              setItems(prev => prev.filter(x => x.event_id !== deletedItem.event_id));
+              onDelete?.(deletedItem);
+            }}
+            disabled={busyId === it.event_id}
+          />
+        ))}
+      </div>
 
+      {/* --- Pagination bar --- */}
+      <div className="mt-4 flex items-center justify-between">
+        <div className="text-xs text-gray-500">
+          Showing <span className="font-medium">{total ? start + 1 : 0}</span>–
+          <span className="font-medium">{end}</span> of <span className="font-medium">{total}</span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <button
+            onClick={() => setPage(p => Math.max(1, p - 1))}
+            disabled={page <= 1}
+            className={`px-3 py-1 rounded-md border text-sm ${page <= 1 ? "text-gray-400 border-gray-200" : "text-gray-700 border-gray-300 hover:bg-gray-50"}`}
+          >
+            Previous
+          </button>
+
+          <div className="text-sm tabular-nums">
+            {page} / {totalPages}
+          </div>
+
+          <button
+            onClick={() => setPage(p => Math.min(totalPages, p + 1))}
+            disabled={page >= totalPages}
+            className={`px-3 py-1 rounded-md border text-sm ${page >= totalPages ? "text-gray-400 border-gray-200" : "text-gray-700 border-gray-300 hover:bg-gray-50"}`}
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </>
   );
 }

client/my-app/src/components/forms/events/EditEventForm.tsx

@@ -73,7 +73,6 @@ export default function EditEventForm({
     setSaveMsg("");
     setSaveStatus("info");
   }, [item]);
-  console.log(item.icon_name);
 
   async function updateEvent(payload: {
     icon_name: string;