fix admin job

- new page detail review
2025-03-19 15:20:48 +08:00
parent f5d9242daa
commit ebf563019e
10 changed files with 504 additions and 127 deletions
--- a/src/app_modules/admin/job/_view/detail.tsx
+++ b/src/app_modules/admin/job/_view/detail.tsx
@@ -9,11 +9,13 @@ import { useShallowEffect } from "@mantine/hooks";
 import { clientLogger } from "@/util/clientLogger";
 import { apiGetOneJobById } from "../lib/api_fetch_admin_job";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
-import { AdminJob_DetailPublish } from "../_components/detail_status";
+import { AdminJob_DetailPublish } from "../_components/detail/publish";
+import { MODEL_JOB } from "@/app_modules/job/model/interface";
+import { AdminJob_DetailReview } from "../_components/detail/review";

 export function AdminJob_ViewDetailPublish() {
-  const param = useParams<{ id: string; status: string }>();
-  const [data, setData] = useState();
+  const param = useParams<{ id: string }>();
+  const [data, setData] = useState<MODEL_JOB>();

  useShallowEffect(() => {
    handleLoadData();
@@ -37,16 +39,19 @@ export function AdminJob_ViewDetailPublish() {
  return (
    <>
      <Stack>
-        <ComponentAdminGlobal_HeaderTamplate name={`Detail ${param.status} `} />
+        <ComponentAdminGlobal_HeaderTamplate name={`Detail data`} />
        <AdminGlobal_ComponentBackButton />

        {!data ? (
          <SimpleGrid cols={2}>
            <CustomSkeleton height={500} width={"100%"} />
-            <CustomSkeleton height={500} width={"100%"} />
          </SimpleGrid>
-        ) : (
+        ) : data.MasterStatus.name === "Publish" ? (
          <AdminJob_DetailPublish data={data} />
+        ) : data.MasterStatus.name === "Review" ? (
+          <AdminJob_DetailReview data={data} />
+        ) : (
+          ""
        )}
      </Stack>
    </>
--- a/src/app_modules/admin/job/_view/view_table_review.tsx
+++ b/src/app_modules/admin/job/_view/view_table_review.tsx
@@ -1,8 +1,5 @@
 import { RouterAdminGlobal } from "@/lib";
-import {
-  gs_adminJob_triggerReview,
-  IRealtimeData,
-} from "@/lib/global_state";
+import { gs_adminJob_triggerReview, IRealtimeData } from "@/lib/global_state";
 import { ComponentGlobal_InputCountDown } from "@/app_modules/_global/component";
 import {
  ComponentGlobal_NotifikasiBerhasil,
@@ -25,6 +22,7 @@ import {
  Text,
  Affix,
  rem,
+  Box,
 } from "@mantine/core";
 import { useShallowEffect } from "@mantine/hooks";
 import {
@@ -45,10 +43,15 @@ import { AdminJob_funEditStatusPublishById } from "../fun/edit/fun_edit_status_p
 import adminJob_getListReview from "../fun/get/get_list_review";
 import { useAtom } from "jotai";
 import { AccentColor } from "@/app_modules/_global/color";
-import { AdminColor, MainColor } from "@/app_modules/_global/color/color_pallet";
+import {
+  AdminColor,
+  MainColor,
+} from "@/app_modules/_global/color/color_pallet";
 import { clientLogger } from "@/util/clientLogger";
 import { apiGetAdminJobByStatus } from "../lib/api_fetch_admin_job";
 import CustomSkeleton from "@/app_modules/components/CustomSkeleton";
+import Admin_DetailButton from "../../_admin_global/_component/button/detail_button";
+import { RouterAdminJob } from "@/lib/router_admin/router_admin_job";

 export default function AdminJob_ViewTavleReview() {
  const router = useRouter();
@@ -61,6 +64,8 @@ export default function AdminJob_ViewTavleReview() {
  const [jobId, setJobId] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [catatan, setCatatan] = useState("");
+  const [isLoadingShowImage, setLoadingShowImage] = useState(false);
+  const [dataId, setDataId] = useState("");

  // Realtime
  const [isAdminJob_TriggerReview, setIsAdminJob_TriggerReview] = useAtom(
@@ -72,28 +77,26 @@ export default function AdminJob_ViewTavleReview() {
    loadInitialData();
  }, [activePage, isSearch]);

-
  const loadInitialData = async () => {
    try {
      const response = await apiGetAdminJobByStatus({
        name: "Review",
        page: `${activePage}`,
-        search: isSearch
-      })
-
+        search: isSearch,
+      });

      if (response?.success && response?.data.data) {
        setData(response.data.data);
        setNPage(response.data.nPage || 1);
      } else {
-        console.error("Invliad data format recieved", response)
+        console.error("Invliad data format recieved", response);
        setData([]);
      }
    } catch (error) {
      clientLogger.error("Error get data table publish", error);
      setData([]);
    }
-  }
+  };
  async function onLoadData() {
    loadInitialData();
    setIsLoading(false);
@@ -104,11 +107,11 @@ export default function AdminJob_ViewTavleReview() {
  const onSearch = async (searchTerm: string) => {
    setSearch(searchTerm);
    setActivePage(1);
-  }
+  };

  const onPageClick = (page: number) => {
    setActivePage(page);
-  }
+  };

  const renderTableBody = () => {
    if (!Array.isArray(data) || data.length === 0) {
@@ -120,45 +123,46 @@ export default function AdminJob_ViewTavleReview() {
            </Center>
          </td>
        </tr>
-      )
+      );
    }
-    return data.map((e, i) => (
+    return data?.map((e, i) => (
      <tr key={i}>
        <td>
-          <Center w={150}>
+          <Center>
            <Text c={AdminColor.white}>{e?.Author?.username}</Text>
          </Center>
        </td>
+
        <td>
-          <Spoiler
-            c={AdminColor.white}
-            w={150}
-            maxHeight={50}
-            hideLabel="sembunyikan"
-            showLabel="tampilkan"
-          >
-            {e.title}
-          </Spoiler>
+          <Center>
+            <Box w={150}>
+              <Text c={"white"} truncate>
+                {e.title}
+              </Text>
+            </Box>
+          </Center>
        </td>
        <td>
-          <Center w={150}>
+          <Center>
            {e.imageId ? (
              <Button
                loaderPosition="center"
-                loading={isLoading && jobId == e?.id}
+                loading={isLoadingShowImage && e.id === dataId}
                color="green"
                radius={"xl"}
                leftIcon={<IconPhotoCheck />}
                onClick={() => {
-                  setJobId(e?.id);
-                  setIsLoading(true);
-                  router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
+                  setLoadingShowImage(true);
+                  setDataId(e.id);
+                  router.push(
+                    RouterAdminGlobal.preview_image({ id: e.imageId })
+                  );
                }}
              >
                Lihat
              </Button>
            ) : (
-              <Center w={150}>
+              <Center>
                <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
                  Tidak ada poster
                </Text>
@@ -167,66 +171,121 @@ export default function AdminJob_ViewTavleReview() {
          </Center>
        </td>
        <td>
-          <Spoiler
-            style={{ color: AdminColor.white }}
-            hideLabel="sembunyikan"
-            w={250}
-            maxHeight={50}
-            showLabel="tampilkan"
-          >
-            <div dangerouslySetInnerHTML={{ __html: e.content }} />
-          </Spoiler>
-        </td>
-        <td>
-          <Spoiler
-            style={{ color: AdminColor.white }}
-            hideLabel="sembunyikan"
-            w={400}
-            maxHeight={50}
-            showLabel="tampilkan"
-          >
-            <div dangerouslySetInnerHTML={{ __html: e.deskripsi }} />
-          </Spoiler>
-        </td>
-        <td>
-          <Stack>
-            <Stack align="center">
-              <Button
-                color={"green"}
-                leftIcon={<IconCircleCheck />}
-                radius={"xl"}
-                onClick={() => {
-                  setJobId(e?.id);
-                  setPublish(true);
-                }
-
-                }
-              >
-                Publish
-              </Button>
-              <Button
-                color={"red"}
-                leftIcon={<IconBan />}
-                radius={"xl"}
-                onClick={() => {
-                  setReject(true);
-                  setJobId(e.id);
-                }}
-              >
-                Reject
-              </Button>
-            </Stack>
-          </Stack>
+          <Center>
+            <Admin_DetailButton path={RouterAdminJob.detail({ id: e.id })} />
+          </Center>
        </td>
      </tr>
    ));
-  }

+    // return data.map((e, i) => (
+    //   <tr key={i}>
+    //     <td>
+    //       <Center w={150}>
+    //         <Text c={AdminColor.white}>{e?.Author?.username}</Text>
+    //       </Center>
+    //     </td>
+    //     <td>
+    //       <Spoiler
+    //         c={AdminColor.white}
+    //         w={150}
+    //         maxHeight={50}
+    //         hideLabel="sembunyikan"
+    //         showLabel="tampilkan"
+    //       >
+    //         {e.title}
+    //       </Spoiler>
+    //     </td>
+    //     <td>
+    //       <Center w={150}>
+    //         {e.imageId ? (
+    //           <Button
+    //             loaderPosition="center"
+    //             loading={isLoading && jobId == e?.id}
+    //             color="green"
+    //             radius={"xl"}
+    //             leftIcon={<IconPhotoCheck />}
+    //             onClick={() => {
+    //               setJobId(e?.id);
+    //               setIsLoading(true);
+    //               router.push(RouterAdminGlobal.preview_image({ id: e.imageId }));
+    //             }}
+    //           >
+    //             Lihat
+    //           </Button>
+    //         ) : (
+    //           <Center w={150}>
+    //             <Text c={AdminColor.white} fw={"bold"} fz={"xs"} fs={"italic"}>
+    //               Tidak ada poster
+    //             </Text>
+    //           </Center>
+    //         )}
+    //       </Center>
+    //     </td>
+    //     <td>
+    //       <Spoiler
+    //         style={{ color: AdminColor.white }}
+    //         hideLabel="sembunyikan"
+    //         w={250}
+    //         maxHeight={50}
+    //         showLabel="tampilkan"
+    //       >
+    //         <div dangerouslySetInnerHTML={{ __html: e.content }} />
+    //       </Spoiler>
+    //     </td>
+    //     <td>
+    //       <Spoiler
+    //         style={{ color: AdminColor.white }}
+    //         hideLabel="sembunyikan"
+    //         w={400}
+    //         maxHeight={50}
+    //         showLabel="tampilkan"
+    //       >
+    //         <div dangerouslySetInnerHTML={{ __html: e.deskripsi }} />
+    //       </Spoiler>
+    //     </td>
+    //     <td>
+    //       <Stack>
+    //         <Stack align="center">
+    //           <Button
+    //             color={"green"}
+    //             leftIcon={<IconCircleCheck />}
+    //             radius={"xl"}
+    //             onClick={() => {
+    //               setJobId(e?.id);
+    //               setPublish(true);
+    //             }
+
+    //             }
+    //           >
+    //             Publish
+    //           </Button>
+    //           <Button
+    //             color={"red"}
+    //             leftIcon={<IconBan />}
+    //             radius={"xl"}
+    //             onClick={() => {
+    //               setReject(true);
+    //               setJobId(e.id);
+    //             }}
+    //           >
+    //             Reject
+    //           </Button>
+    //         </Stack>
+    //       </Stack>
+    //     </td>
+    //   </tr>
+    // ));
+  };

  return (
    <>
      <Modal
-        styles={{ header: { backgroundColor: AdminColor.softBlue }, body: { backgroundColor: AdminColor.softBlue}, title: { color: AdminColor.white } }}
+        styles={{
+          header: { backgroundColor: AdminColor.softBlue },
+          body: { backgroundColor: AdminColor.softBlue },
+          title: { color: AdminColor.white },
+        }}
        title={"Apakah anda yakin ingin mempublish job ini?"}
        withCloseButton={false}
        opened={publish}
@@ -251,7 +310,7 @@ export default function AdminJob_ViewTavleReview() {
                    setData(val.data);
                    setNPage(val.nPage);
                  },
-                })
+                });
                setPublish(false);
              }}
            >
@@ -262,7 +321,11 @@ export default function AdminJob_ViewTavleReview() {
      </Modal>

      <Modal
-        styles={{ header: { backgroundColor: AdminColor.softBlue }, body: { backgroundColor: AdminColor.softBlue}, title: { color: AdminColor.white } }}
+        styles={{
+          header: { backgroundColor: AdminColor.softBlue },
+          body: { backgroundColor: AdminColor.softBlue },
+          title: { color: AdminColor.white },
+        }}
        opened={reject}
        onClose={() => {
          setReject(false);
@@ -278,7 +341,11 @@ export default function AdminJob_ViewTavleReview() {
              maxRows={5}
              maxLength={300}
              autosize
-              label={<Text c={AdminColor.white} fw={"bold"}>Alasan Penolakan</Text>}
+              label={
+                <Text c={AdminColor.white} fw={"bold"}>
+                  Alasan Penolakan
+                </Text>
+              }
              placeholder="Masukkan alasan penolakan lowongan ini"
              onChange={(val) => setCatatan(val.currentTarget.value)}
            />
@@ -292,7 +359,7 @@ export default function AdminJob_ViewTavleReview() {
              Batal
            </Button>
            <Button
-              style={{ transition: "0.5s", }}
+              style={{ transition: "0.5s" }}
              bg={MainColor.green}
              disabled={catatan === "" ? true : false}
              radius={"xl"}
@@ -314,7 +381,6 @@ export default function AdminJob_ViewTavleReview() {
        </Stack>
      </Modal>

-
      <Stack spacing={"xs"} h={"100%"}>
        <ComponentAdminGlobal_TitlePage
          name="Review"
@@ -365,7 +431,6 @@ export default function AdminJob_ViewTavleReview() {
                p={"md"}
                w={"100%"}
                h={"100%"}
-
              >
                <thead>
                  <tr>
@@ -373,17 +438,11 @@ export default function AdminJob_ViewTavleReview() {
                      <Center c={AdminColor.white}>Author</Center>
                    </th>
                    <th>
-                      <Text c={AdminColor.white}>Judul</Text>
+                      <Center c={AdminColor.white}>Judul</Center>
                    </th>
                    <th>
                      <Center c={AdminColor.white}>Poster</Center>
                    </th>
-                    <th>
-                      <Text c={AdminColor.white}>Syarat Ketentuan</Text>
-                    </th>
-                    <th>
-                      <Text c={AdminColor.white}>Deskripsi</Text>
-                    </th>
                    <th>
                      <Center c={AdminColor.white}>Aksi</Center>
                    </th>