API Detail Publish Event Data Peserta

2025-02-13 01:16:46 +08:00
parent 8a1afe7375
commit 4c81fe753a
10 changed files with 467 additions and 206 deletions
--- a/src/app_modules/admin/event/_lib/api_fecth_admin_event.ts
+++ b/src/app_modules/admin/event/_lib/api_fecth_admin_event.ts
@@ -5,7 +5,8 @@ export {
  apiGetAdminEventByStatus as apiGetDataEventByStatus,
  apiGetAdminEventRiwayat,
  apiGetAdminEventTipeAcara,
-  apiGetAdminDetailEventById
+  apiGetAdminDetailEventById,
+  apiGetAdminDetailEventPesertaById
 };

 const apiGetAdminEventStatusCountDashboard = async ({
@@ -150,3 +151,31 @@ const apiGetAdminDetailEventById = async ({ id }: { id: string }) => {

  return await response.json().catch(() => null);
 }
+
+const apiGetAdminDetailEventPesertaById = async ({
+  page,
+  search,
+  id
+}: {
+  page: string;
+  search: string;
+  id: string
+}) => {
+  const { token } = await fetch("/api/get-cookie").then((res) => res.json());
+  if (!token) return await token.json().catch(() => null);
+
+  const isPage = page ? `?page=${page}` : "";
+  const isSearch = search ? `&search=${search}` : "";
+
+  const response = await fetch(`/api/admin/event/${id}/peserta${isPage}${isSearch}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+      "Access-Control-Allow-Origin": "*",
+      Authorization: `Bearer ${token}`,
+    },
+  })
+
+  return await response.json().catch(() => null);
+}  
--- a/src/app_modules/admin/event/_ui/ui_detail_peserta.tsx
+++ b/src/app_modules/admin/event/_ui/ui_detail_peserta.tsx
@@ -6,21 +6,13 @@ import { AdminEvent_ViewDetailPeserta } from "../_view";
 import { MODEL_EVENT_PESERTA } from "@/app_modules/event/_lib/interface";
 import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";

-export function AdminEvent_UiDetailPeserta({
-  dataPeserta,
-  eventId,
-}: {
-  dataPeserta: any;
-  eventId: string
-}) {
+export function AdminEvent_UiDetailPeserta() {
  return (
    <>
      <Stack>
        <AdminGlobal_ComponentBackButton />
        <ComponentAdminGlobal_TitlePage name="Detail Peserta" />
        <AdminEvent_ViewDetailPeserta
-          dataPeserta={dataPeserta as any}
-          eventId={eventId}
        />
      </Stack>
    </>
--- a/src/app_modules/admin/event/_view/view_detail_peserta.tsx
+++ b/src/app_modules/admin/event/_view/view_detail_peserta.tsx
@@ -10,6 +10,8 @@ import {
  ScrollArea,
  Stack,
  Table,
+  Text,
+  TextInput,
  Title,
 } from "@mantine/core";
 import { useState } from "react";
@@ -17,32 +19,68 @@ import { adminEvent_getListPesertaById } from "../fun";
 import _ from "lodash";
 import ComponentAdminGlobal_IsEmptyData from "../../_admin_global/is_empty_data";
 import { AdminColor } from "@/app_modules/_global/color/color_pallet";
+import { useShallowEffect } from "@mantine/hooks";
+import { clientLogger } from "@/util/clientLogger";
+import { apiGetAdminDetailEventPesertaById } from "../_lib/api_fecth_admin_event";
+import { useParams } from "next/navigation";
+import { IconSearch } from "@tabler/icons-react";
+import { ComponentAdminGlobal_TitlePage } from "../../_admin_global/_component";
+import CustomSkeleton from "@/app_modules/components/CustomSkeleton";

-export function AdminEvent_ViewDetailPeserta({
-  dataPeserta,
-  eventId,
-}: {
-  dataPeserta: any;
-  eventId: string;
-}) {
-  const [data, setData] = useState<MODEL_EVENT_PESERTA[]>(dataPeserta.data);
-  const [isNPage, setNPage] = useState(dataPeserta.nPage);
+export function AdminEvent_ViewDetailPeserta() {
+  const params = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_EVENT_PESERTA[] | null>(null);
+  const [isNPage, setNPage] = useState<number>(1);
  const [isActivePage, setActivePage] = useState(1);
+  const [isSearch, setSearch] = useState("");

+  useShallowEffect(() => {
+    loadInitialData();
+  }, [isActivePage, isSearch])

-  async function onPageClick(p: any) {
-    setActivePage(p);
-    const loadData = await adminEvent_getListPesertaById({
-      eventId: eventId,
-      page: p,
-    });
-    setData(loadData.data as any);
-    setNPage(loadData.nPage);
+  const loadInitialData = async () => {
+    try {
+      const response = await apiGetAdminDetailEventPesertaById({
+        id: params.id,
+        page: `${isActivePage}`,
+        search: isSearch,
+      })
+
+      if (response?.success && response?.data.data) {
+        setData(response.data.data)
+        setNPage(response.data.nPage || 1)
+      } else {
+        console.error("Invalid data format recieved:", response);
+        setData([]);
+      }
+    } catch (error) {
+      clientLogger.error("Invalid data format recieved:", error);
+      setData([]);
+    }
  }

-  const tableRow = _.isEmpty(data)
-    ? []
-    : data.map((e, i) => (
+  const onSearch = async (searchTerm: string) => {
+    setSearch(searchTerm);
+    setActivePage(1);
+  }
+  const onPageClick = (page: number) => {
+    setActivePage(page);
+  }
+
+  const renderTableBody = () => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return (
+        <tr>
+          <td colSpan={12}>
+            <Center>
+              <Text color={"gray"}>Tidak ada data</Text>
+            </Center>
+          </td>
+        </tr>
+      );
+    }
+
+    return data?.map((e, i) => (
      <tr key={i}>
        <td>
          <Center c={AdminColor.white}>{e?.User?.username}</Center>
@@ -67,65 +105,81 @@ export function AdminEvent_ViewDetailPeserta({
        </td>
      </tr>
    ));
+  }

  return (
    <>
      <Stack spacing={"xs"} h={"100%"}>
-        <Paper bg={AdminColor.softBlue}
-          p={"xs"}
-          style={{ borderRadius: "6px" }}>
-          <Title c={AdminColor.white} order={4}>Daftar Peserta</Title>
-        </Paper>
-        <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"75vh"}>
-          <ScrollArea w={"100%"} h={"90%"}>
-            <Table
-              verticalSpacing={"md"}
-              horizontalSpacing={"md"}
-              p={"md"}
-              w={"100%"}
-              
-            >
-              <thead>
-                <tr>
-                  <th>
-                    <Center c={AdminColor.white}>Username</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Name</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Nomor</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Email</Center>
-                  </th>
-                  <th>
-                    <Center c={AdminColor.white}>Konfirmasi Kehadiran</Center>
-                  </th>
-                </tr>
-              </thead>
-              <tbody>{tableRow}</tbody>
-            </Table>
-            {_.isEmpty(data) ? (
-              <ComponentAdminGlobal_IsEmptyData
-                text="Tidak ada peserta"
-                marginTop={100}
-              />
-            ) : (
-              ""
-            )}
-          </ScrollArea>
-
-          <Center mt={"xl"}>
-            <Pagination
-              value={isActivePage}
-              total={isNPage}
+        <ComponentAdminGlobal_TitlePage
+          name="Daftar Peserta"
+          color={AdminColor.softBlue}
+          component={
+            <TextInput
+              disabled={!data}
+              icon={<IconSearch size={20} />}
+              radius={"xl"}
+              placeholder="Masukan username"
              onChange={(val) => {
-                onPageClick(val);
+                onSearch(val.currentTarget.value);
              }}
            />
-          </Center>
-        </Paper>
+          }
+        />
+        {!data ? (
+            <CustomSkeleton height={"80vh"} width="100%" />
+        ): (
+           <Paper p={"md"} bg={AdminColor.softBlue} shadow="lg" h={"75vh"}>
+           <ScrollArea w={"100%"} h={"90%"}>
+             <Table
+               verticalSpacing={"md"}
+               horizontalSpacing={"md"}
+               p={"md"}
+               w={"100%"}
+ 
+             >
+               <thead>
+                 <tr>
+                   <th>
+                     <Center c={AdminColor.white}>Username</Center>
+                   </th>
+                   <th>
+                     <Center c={AdminColor.white}>Name</Center>
+                   </th>
+                   <th>
+                     <Center c={AdminColor.white}>Nomor</Center>
+                   </th>
+                   <th>
+                     <Center c={AdminColor.white}>Email</Center>
+                   </th>
+                   <th>
+                     <Center c={AdminColor.white}>Konfirmasi Kehadiran</Center>
+                   </th>
+                 </tr>
+               </thead>
+               <tbody>{renderTableBody()}</tbody>
+             </Table>
+             {_.isEmpty(data) ? (
+               <ComponentAdminGlobal_IsEmptyData
+                 text="Tidak ada peserta"
+                 marginTop={100}
+               />
+             ) : (
+               ""
+             )}
+           </ScrollArea>
+ 
+           <Center mt={"xl"}>
+             <Pagination
+               value={isActivePage}
+               total={isNPage}
+               onChange={(val) => {
+                 onPageClick(val);
+               }}
+             />
+           </Center>
+         </Paper>
+        )}
+       
      </Stack>
      {/* <pre>{JSON.stringify(dataPeserta, null, 2)}</pre> */}
    </>
--- a/src/app_modules/admin/event/table_status/detail_publish.tsx
+++ b/src/app_modules/admin/event/table_status/detail_publish.tsx
@@ -53,7 +53,7 @@ function AdminEvent_DetailPublish() {
          <AdminEvent_ViewDetailData />
        ) : null}
        {selectPage == "2" ? (
-          <AdminEvent_ViewDetailPeserta dataPeserta={{}} eventId={""}/>
+          <AdminEvent_ViewDetailPeserta />
        ) : null}
        {selectPage == "3" ? (
          <AdminEvent_DetailDataSponsor />