QC Job

# fix
- Loading card
- Loading button
- Size image
- Mandatori form
- Share wa
## No Issuu

src/app_modules/component_global/loading_card.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { Overlay, Center, Loader } from "@mantine/core";
+
+export default function ComponentGlobal_CardLoadingOverlay({
+  size,
+  variant,
+}: {
+  size?: number;
+  variant?: any;
+}) {
+  return (
+    <>
+      <Overlay h={"100%"} opacity={0.1}>
+        <Center h={"100%"}>
+          <Loader
+            variant={variant ? variant : "dots"}
+            size={size ? size : 20}
+            color="gray"
+          />
+        </Center>
+      </Overlay>
+    </>
+  );
+}

src/app_modules/job/component/card_view_status.tsx

@@ -8,6 +8,8 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_gl
 import { MODEL_JOB } from "../model/interface";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import { IconChevronRight } from "@tabler/icons-react";
+import { useState } from "react";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
 
 export default function ComponentJob_CardViewStatus({
   listData,
@@ -17,6 +19,9 @@ export default function ComponentJob_CardViewStatus({
   path?: any;
 }) {
   const router = useRouter();
+  const [jobId, setJobId] = useState("");
+  const [visible, setVisible] = useState(false);
+
   if (_.isEmpty(listData))
     return (
       <>
@@ -40,7 +45,11 @@ export default function ComponentJob_CardViewStatus({
                   "Path tidak ditemukan"
                 );
               } else {
-                router.push(path + e.id);
+                visible
+                  ? ""
+                  : (setJobId(e?.id),
+                    setVisible(true),
+                    router.push(path + e?.id));
               }
             }}
           >
@@ -49,12 +58,17 @@ export default function ComponentJob_CardViewStatus({
                 <Grid.Col span={"auto"}>
                   <Center h={"100%"}>
                     <Text fw={"bold"} lineClamp={1}>
-                      {e.title}
+                      {e?.title}
                     </Text>
                   </Center>
                 </Grid.Col>
               </Grid>
             </Card.Section>
+            {visible && e?.id === jobId ? (
+              <ComponentGlobal_CardLoadingOverlay />
+            ) : (
+              ""
+            )}
           </Card>
         ))}
       </Stack>

src/app_modules/job/detail/arsip/view.tsx

@@ -10,6 +10,7 @@ import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/
 import { useAtom } from "jotai";
 import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
 import { gs_job_status, gs_job_hot_menu } from "../../global_state";
+import { useState } from "react";
 
 export default function Job_DetailArsip({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
@@ -24,6 +25,7 @@ export default function Job_DetailArsip({ dataJob }: { dataJob: MODEL_JOB }) {
 
 function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
   const [status, setStatus] = useAtom(gs_job_status);
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
 
@@ -33,6 +35,7 @@ function ButtonAction({ jobId }: { jobId: string }) {
         setStatus("Publish");
         setHotMenu(1);
         ComponentGlobal_NotifikasiBerhasil("Berhasil Diarsipkan");
+        setLoading(true);
         router.replace(RouterJob.beranda);
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
@@ -42,6 +45,8 @@ function ButtonAction({ jobId }: { jobId: string }) {
   return (
     <>
       <Button
+        loaderPosition="center"
+        loading={isLoading ? true : false}
         radius={"xl"}
         color="green"
         mb={30}

src/app_modules/job/detail/publish/view.tsx

@@ -11,6 +11,7 @@ import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_gl
 import { Job_funEditArsipById } from "../../fun/edit/fun_edit_arsip_by_id";
 import { MODEL_JOB } from "../../model/interface";
 import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
+import { useState } from "react";
 
 export default function Job_DetailPublish({ dataJob }: { dataJob: MODEL_JOB }) {
   return (
@@ -25,6 +26,8 @@ export default function Job_DetailPublish({ dataJob }: { dataJob: MODEL_JOB }) {
 
 function ButtonAction({ jobId }: { jobId: string }) {
   const router = useRouter();
+  const [isLoading, setLoading] = useState(false);
+
   const [status, setStatus] = useAtom(gs_job_status);
   const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
 
@@ -34,6 +37,7 @@ function ButtonAction({ jobId }: { jobId: string }) {
         setStatus("Publish");
         setHotMenu(3);
         ComponentGlobal_NotifikasiBerhasil("Berhasil Diarsipkan");
+        setLoading(true);
         router.replace(RouterJob.arsip);
       } else {
         ComponentGlobal_NotifikasiGagal(res.message);
@@ -43,6 +47,8 @@ function ButtonAction({ jobId }: { jobId: string }) {
   return (
     <>
       <Button
+        loading={isLoading ? true : false}
+        loaderPosition="center"
         radius={"xl"}
         color="green"
         mb={30}

src/app_modules/job/main/beranda.tsx

@@ -27,6 +27,7 @@ import _ from "lodash";
 import ComponentJob_IsEmptyData from "../component/is_empty_data";
 import { useState } from "react";
 import { useWindowScroll } from "@mantine/hooks";
+import ComponentGlobal_CardLoadingOverlay from "@/app_modules/component_global/loading_card";
 
 export default function Job_Beranda({ listJob }: { listJob: MODEL_JOB[] }) {
   const router = useRouter();
@@ -73,9 +74,9 @@ export default function Job_Beranda({ listJob }: { listJob: MODEL_JOB[] }) {
               </Card.Section>
               <Card.Section
                 onClick={() => {
-                  setVisible(true);
-                  setJobId(e.id);
-                  router.push(RouterJob.main_detail + e.id);
+                  visible ? "" : setJobId(e.id),
+                    setVisible(true),
+                    router.push(RouterJob.main_detail + e.id);
                 }}
                 mt={"lg"}
               >
@@ -90,11 +91,7 @@ export default function Job_Beranda({ listJob }: { listJob: MODEL_JOB[] }) {
                 </Grid>
               </Card.Section>
               {visible && e.id === jobId ? (
-                <Overlay h={"100%"} opacity={0.1}>
-                  <Center h={"100%"}>
-                    <Loader color="gray" />
-                  </Center>
-                </Overlay>
+                <ComponentGlobal_CardLoadingOverlay />
               ) : (
                 ""
               )}

src/app_modules/job/main/layout.tsx

@@ -6,6 +6,7 @@ import {
   Center,
   Footer,
   Grid,
+  Loader,
   Stack,
   Text,
 } from "@mantine/core";
@@ -25,7 +26,8 @@ export default function LayoutJob_Main({
   children: React.ReactNode;
 }) {
   const router = useRouter();
-  const [hotMenu, setHotMenu] = useAtom(gs_job_hot_menu);
+  const [hotMenuId, setHotMenuId] = useAtom(gs_job_hot_menu);
+  const [isLoading, setLoading] = useState(false);
 
   const listFooter = [
     {
@@ -68,19 +70,27 @@ export default function LayoutJob_Main({
                     span={"auto"}
                     pt={"md"}
                     onClick={() => {
+                      // setLoading(true);
+                      // setTimeout(() => router.replace(e.path), 3000);
                       router.replace(e.path);
-                      setHotMenu(e.id);
+                      setHotMenuId(e.id);
+                      // setTimeout(() => setLoading(false), 1000);
                     }}
                   >
                     <Center>
                       <Stack align="center" spacing={0}>
                         <ActionIcon
                           variant="transparent"
-                          c={hotMenu === e.id ? "blue" : "white"}
+                          c={hotMenuId === e.id ? "blue" : "white"}
                         >
                           {e.icon}
+                          {/* {isLoading && hotMenuId === e.id ? (
+                            <Loader />
+                          ) : (
+                            e.icon
+                          )} */}
                         </ActionIcon>
-                        <Text fz={10} c={hotMenu === e.id ? "blue" : "white"}>
+                        <Text fz={10} c={hotMenuId === e.id ? "blue" : "white"}>
                           {e.name}
                         </Text>
                       </Stack>

src/app_modules/job/main/status/draft.tsx

@@ -5,10 +5,13 @@ import ComponentJob_CardViewStatus from "../../component/card_view_status";
 import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import ComponentJob_CardPreview from "../../component/card_preview";
 
-export default function Job_Draft({ listDraft }: { listDraft : any}) {
+export default function Job_Draft({ listDraft }: { listDraft: any }) {
   return (
     <>
-      <ComponentJob_CardViewStatus listData={listDraft} path={RouterJob.detail_draft} />
+      <ComponentJob_CardViewStatus
+        listData={listDraft}
+        path={RouterJob.detail_draft}
+      />
     </>
   );
 }

src/app_modules/job/main/status/publish.tsx

@@ -7,42 +7,13 @@ import { RouterJob } from "@/app/lib/router_hipmi/router_job";
 import ComponentJob_CardPreview from "../../component/card_preview";
 import { Job_getListStatusByStatusId } from "../../fun/get/get_list_status_by_status_id";
 
-export default function Job_Publish({ listPublish }: { listPublish : any}) {
+export default function Job_Publish({ listPublish }: { listPublish: any }) {
   return (
     <>
       <ComponentJob_CardViewStatus
         listData={listPublish}
         path={RouterJob.detail_publish}
       />
-      {/* <Stack>
-        {Array(2)
-          .fill(0)
-          .map((e, i) => (
-            <Card key={i} shadow="lg" withBorder radius={"md"}>
-              <Card.Section>
-                <Grid>
-                  <Grid.Col span={6}>
-                    <Image alt="foto" src={"/aset/no-file.png"} />
-                  </Grid.Col>
-                  <Grid.Col span={6}>
-                    <Stack justify="center" h={"100%"}>
-                      <Text fw={"bold"} fz={20} truncate>
-                        Judul Lowongan Kerja
-                      </Text>
-                      <Text lineClamp={3}>
-                        Lorem ipsum dolor sit amet consectetur, adipisicing
-                        elit. Laboriosam est id neque iste voluptatem
-                        consequuntur veritatis dolorem illo et, repellat
-                        praesentium maiores amet omnis voluptas aliquid tenetur
-                        nam sint obcaecati.
-                      </Text>
-                    </Stack>
-                  </Grid.Col>
-                </Grid>
-              </Card.Section>
-            </Card>
-          ))}
-      </Stack> */}
     </>
   );
 }

src/util/app_config.ts

@@ -6,7 +6,7 @@ const app_config = {
   host:
     os.platform() === "darwin"
       ? "http://localhost:3000"
-      : "https://test-hipmi.wibudev.com",
+      : "https://test2-hipmi.wibudev.com",
   isLocal: os.platform() === "darwin",
 };