fix: fixing super admin

Deskripsi: - tugas divisi - kegiatan - home - filter No Issues
2024-10-28 16:56:30 +08:00
parent 163e84c833
commit 16e62c7c09
22 changed files with 560 additions and 263 deletions
--- a/src/module/project/ui/add_detail_task_project.tsx
+++ b/src/module/project/ui/add_detail_task_project.tsx
@@ -2,7 +2,7 @@
 import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
-import { Box, Button, Group, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
+import { Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, TextInput } from '@mantine/core';
 import { DatePicker } from '@mantine/dates';
 import moment from 'moment';
 import { useParams, useRouter } from 'next/navigation';
@@ -10,6 +10,7 @@ import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { useWibuRealtime } from 'wibu-realtime';
 import { funCreateDetailProject } from '../lib/api_project';
+import { useShallowEffect } from '@mantine/hooks';

 export default function AddDetailTaskProject() {
   const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -19,24 +20,16 @@ export default function AddDetailTaskProject() {
   const [loadingModal, setLoadingModal] = useState(false)
   const param = useParams<{ id: string }>()
   const tema = useHookstate(TEMA)
+   const [acuan, setAcuan] = useState(false)
   const [touched, setTouched] = useState({
-      name: false,
+      title: false,
+      date: false
   });
   const [dataRealTime, setDataRealtime] = useWibuRealtime({
      WIBU_REALTIME_TOKEN: keyWibu,
      project: "sdm"
   })

-   function onVerification() {
-      if (value[0] == null || value[1] == null)
-         return toast.error("Error! harus memilih tanggal")
-
-      if (name == "")
-         return toast.error("Error! harus memasukkan judul tugas")
-
-      setOpenModal(true)
-   }
-
   async function onSubmit() {
      try {
         setLoadingModal(true)
@@ -65,9 +58,59 @@ export default function AddDetailTaskProject() {
      }
   }

+   function onCheck() {
+      const cek = checkAll()
+      if (!cek)
+         return false
+      setOpenModal(true)
+   }
+
+   function checkAll() {
+      let nilai = true
+
+      if (name == "") {
+         setTouched(touched => ({ ...touched, title: true }))
+         nilai = false
+      }
+
+      if (value[0] == null || value[1] == null) {
+         setTouched(touched => ({ ...touched, date: true }))
+         nilai = false
+      }
+
+      return nilai
+
+   }
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'title') {
+         setName(val)
+         if (val === "") {
+            setTouched({ ...touched, title: true })
+         } else {
+            setTouched({ ...touched, title: false })
+         }
+      } else if (kategori == 'date') {
+         const array = val.split(",")
+         if (array[0] == '' || array[1] == '') {
+            setTouched({ ...touched, date: true })
+         } else {
+            setTouched({ ...touched, date: false })
+         }
+      }
+   }
+
+   useShallowEffect(() => {
+      if (acuan) {
+         onValidation('date', String(value))
+      } else {
+         setAcuan(true)
+      }
+   }, [value])
+
   return (
      <Box>
-         <LayoutNavbarNew back="" title={"Tambah Kegiatan"} menu />
+         <LayoutNavbarNew back="" title={"Tambah Tugas"} menu />
         <Box p={20}>
            <Group
               justify="center"
@@ -86,7 +129,9 @@ export default function AddDetailTaskProject() {
            </Group>
            <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
               <Box>
-                  <Text>Tanggal Mulai</Text>
+                  <Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
+                     <Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
+                  </Flex>
                  <Group
                     justify="center"
                     bg={"white"}
@@ -97,7 +142,9 @@ export default function AddDetailTaskProject() {
                  </Group>
               </Box>
               <Box>
-                  <Text>Tanggal Berakhir</Text>
+                  <Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
+                     <Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
+                  </Flex>
                  <Group
                     justify="center"
                     bg={"white"}
@@ -108,6 +155,11 @@ export default function AddDetailTaskProject() {
                  </Group>
               </Box>
            </SimpleGrid>
+            {
+               (touched && touched.date)
+                  ? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
+                  : <></>
+            }
            <Stack pt={15} pb={100}>
               <TextInput
                  styles={{
@@ -116,19 +168,17 @@ export default function AddDetailTaskProject() {
                        borderRadius: 10,
                     },
                  }}
-                  placeholder="Input Nama Tahapan"
-                  label="Judul Tahapan"
+                  placeholder="Input Judul Tugas"
+                  label="Judul Tugas"
                  required
                  size="md"
                  value={name}
                  onChange={(e) => {
-                     setName(e.target.value)
-                     setTouched({ ...touched, name: false })
+                     onValidation('title', e.target.value)
                  }}
-                  onBlur={() => setTouched({ ...touched, name: true })}
                  error={
-                     touched.name && (
-                        name == "" ? "Judul Tidak Boleh Kosong" : null
+                     touched.title && (
+                        name == "" ? "Judul Tugas Tidak Boleh Kosong" : null
                     )
                  }
               />
@@ -145,7 +195,7 @@ export default function AddDetailTaskProject() {
               size="lg"
               radius={30}
               fullWidth
-               onClick={() => { onVerification() }}
+               onClick={() => { onCheck() }}
            >
               Simpan
            </Button>
--- a/src/module/project/ui/create_date_end_task.tsx
+++ b/src/module/project/ui/create_date_end_task.tsx
@@ -1,36 +1,24 @@
 "use client";
 import { LayoutNavbarNew, TEMA } from "@/module/_global";
-import {
-  ActionIcon,
-  Avatar,
-  Box,
-  Button,
-  Flex,
-  Group,
-  Input,
-  rem,
-  SimpleGrid,
-  Stack,
-  Text,
-  TextInput,
-} from "@mantine/core";
-import React, { useState } from "react";
-import { DatePicker } from "@mantine/dates";
-import { useRouter } from "next/navigation";
-import toast from "react-hot-toast";
-import moment from "moment";
-import { IFormDateProject } from "../lib/type_project";
-import { HiChevronLeft } from "react-icons/hi2";
 import { useHookstate } from "@hookstate/core";
+import { ActionIcon, Box, Button, Flex, Group, rem, SimpleGrid, Stack, Text, TextInput } from "@mantine/core";
+import { DatePicker } from "@mantine/dates";
+import moment from "moment";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { HiChevronLeft } from "react-icons/hi2";
+import { IFormDateProject } from "../lib/type_project";
+import { useShallowEffect } from "@mantine/hooks";


-export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: boolean) => void, onSet: (val: IFormDateProject) => void }) {
+export default function ViewDateEndTask({ onClose, onSet }: { onClose: (val: boolean) => void, onSet: (val: IFormDateProject) => void }) {
  const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
-  const router = useRouter()
  const [title, setTitle] = useState("")
  const tema = useHookstate(TEMA)
+  const [acuan, setAcuan] = useState(false)
  const [touched, setTouched] = useState({
-    title: false
+    title: false,
+    date: false
  });

  function onSubmit() {
@@ -40,16 +28,64 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
    if (title == "")
      return toast.error("Error! harus memasukkan judul tugas")

-    onSet(
-      {
-        dateStart: value[0],
-        dateEnd: value[1],
-        title: title
-      }
-    )
+    onSet({
+      dateStart: value[0],
+      dateEnd: value[1],
+      title: title
+    })
+  }
+
+  function onCheck() {
+    const cek = checkAll()
+    if (!cek)
+      return false
+    onSubmit()
+  }
+
+  function checkAll() {
+    let nilai = true
+
+    if (title == "") {
+      setTouched(touched => ({ ...touched, title: true }))
+      nilai = false
+    }
+
+    if (value[0] == null || value[1] == null) {
+      setTouched(touched => ({ ...touched, date: true }))
+      nilai = false
+    }
+
+    return nilai

  }

+
+  function onValidation(kategori: string, val: string) {
+    if (kategori == 'title') {
+      setTitle(val)
+      if (val === "") {
+        setTouched({ ...touched, title: true })
+      } else {
+        setTouched({ ...touched, title: false })
+      }
+    } else if (kategori == 'date') {
+      const array = val.split(",")
+      if (array[0] == '' || array[1] == '') {
+        setTouched({ ...touched, date: true })
+      } else {
+        setTouched({ ...touched, date: false })
+      }
+    }
+  }
+
+  useShallowEffect(() => {
+    if (acuan) {
+      onValidation('date', String(value))
+    } else {
+      setAcuan(true)
+    }
+  }, [value])
+
  return (
    <Box>
      <LayoutNavbarNew state={
@@ -77,7 +113,9 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
        </Group>
        <SimpleGrid cols={{ base: 2, sm: 2, lg: 2 }} mt={20}>
          <Box>
-            <Text>Tanggal Mulai</Text>
+            <Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
+              <Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
+            </Flex>
            <Group
              justify="center"
              bg={"white"}
@@ -88,7 +126,9 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
            </Group>
          </Box>
          <Box>
-            <Text>Tanggal Berakhir</Text>
+            <Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
+              <Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
+            </Flex>
            <Group
              justify="center"
              bg={"white"}
@@ -99,6 +139,11 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
            </Group>
          </Box>
        </SimpleGrid>
+        {
+          (touched && touched.date)
+            ? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
+            : <></>
+        }
        <Stack pt={15} pb={100}>
          <TextInput
            styles={{
@@ -107,40 +152,38 @@ export default function ViewDateEndTask({ onClose, onSet }: {onClose: (val: bool
                borderRadius: 10,
              },
            }}
-            placeholder="Input Judul Tahapan"
-            label="Judul Tahapan"
+            placeholder="Input Judul Tugas"
+            label="Judul Tugas"
            required
            size="md"
            value={title}
            onChange={(e) => {
-              setTitle(e.target.value)
-              setTouched({ ...touched, title: false })
+              onValidation('title', e.target.value)
            }}
-            onBlur={() => setTouched({ ...touched, title: true })}
            error={
              touched.title && (
-                title == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
+                title == "" ? "Judul Tugas Tidak Boleh Kosong" : null
              )
            }
          />
        </Stack>
      </Box>
-        <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
-            maxWidth: rem(550),
-            zIndex: 999,
-            backgroundColor: `${tema.get().bgUtama}`,
-         }}>
-          <Button
-            c={"white"}
-            bg={tema.get().utama}
-            size="lg"
-            radius={30}
-            fullWidth
-            onClick={() => { onSubmit() }}
-          >
-            Simpan
-          </Button>
-        </Box>
+      <Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
+        maxWidth: rem(550),
+        zIndex: 999,
+        backgroundColor: `${tema.get().bgUtama}`,
+      }}>
+        <Button
+          c={"white"}
+          bg={tema.get().utama}
+          size="lg"
+          radius={30}
+          fullWidth
+          onClick={() => { onCheck() }}
+        >
+          Simpan
+        </Button>
+      </Box>
    </Box>
  );
 }
--- a/src/module/project/ui/edit_detail_task_project.tsx
+++ b/src/module/project/ui/edit_detail_task_project.tsx
@@ -1,15 +1,15 @@
 "use client"
-import { useParams, useRouter } from 'next/navigation';
-import React, { useState } from 'react';
-import toast from 'react-hot-toast';
-import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';
-import moment from 'moment';
-import { useShallowEffect } from '@mantine/hooks';
-import { Box, Button, Group, Input, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
-import { DatePicker } from '@mantine/dates';
 import LayoutModal from '@/module/_global/layout/layout_modal';
 import { useHookstate } from '@hookstate/core';
+import { Box, Button, Flex, Group, rem, SimpleGrid, Skeleton, Stack, Text, TextInput } from '@mantine/core';
+import { DatePicker } from '@mantine/dates';
+import { useShallowEffect } from '@mantine/hooks';
+import moment from 'moment';
+import { useParams, useRouter } from 'next/navigation';
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { funEditDetailProject, funGetDetailProject } from '../lib/api_project';

 export default function EditDetailTaskProject() {
   const [value, setValue] = useState<[Date | null, Date | null]>([null, null]);
@@ -18,9 +18,11 @@ export default function EditDetailTaskProject() {
   const param = useParams<{ id: string }>()
   const [openModal, setOpenModal] = useState(false)
   const [loading, setLoading] = useState(true)
+   const [loadingModal, setLoadingModal] = useState(false)
   const tema = useHookstate(TEMA)
   const [touched, setTouched] = useState({
      title: false,
+      date: false,
   });
   const router = useRouter()

@@ -32,6 +34,7 @@ export default function EditDetailTaskProject() {
         return toast.error("Error! harus memasukkan judul tugas")

      try {
+         setLoadingModal(true)
         const res = await funEditDetailProject(param.id, {
            title: name,
            dateStart: value[0],
@@ -48,6 +51,9 @@ export default function EditDetailTaskProject() {
      } catch (error) {
         console.error(error);
         toast.error("Gagal edit detail tugas Kegiatan, coba lagi nanti");
+      } finally {
+         setLoadingModal(false)
+         setOpenModal(false)
      }
   }

@@ -78,6 +84,36 @@ export default function EditDetailTaskProject() {
      getOneData();
   }, [param.id])

+   function onCheck() {
+      if (Object.values(touched).some((v) => v == true))
+         return false
+      setOpenModal(true)
+   }
+
+
+   function onValidation(kategori: string, val: string) {
+      if (kategori == 'title') {
+         setName(val)
+         if (val === "") {
+            setTouched({ ...touched, title: true })
+         } else {
+            setTouched({ ...touched, title: false })
+         }
+      } else if (kategori == 'date') {
+         const array = val.split(",")
+         if (array[0] == '' || array[1] == '') {
+            setTouched({ ...touched, date: true })
+         } else {
+            setTouched({ ...touched, date: false })
+         }
+      }
+   }
+
+
+   useShallowEffect(() => {
+      onValidation('date', String(value))
+   }, [value])
+
   return (
      <Box>
         <LayoutNavbarNew back="" title={"Edit Tanggal dan tugas"} menu />
@@ -103,7 +139,9 @@ export default function EditDetailTaskProject() {
                     <Skeleton height={45} mt={20} radius={10} />
                     :
                     <>
-                        <Text>Tanggal Mulai</Text>
+                        <Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
+                           <Text fw={500}>Tanggal Mulai</Text> <Text c={"red"}>*</Text>
+                        </Flex>
                        <Group
                           justify="center"
                           bg={"white"}
@@ -120,7 +158,9 @@ export default function EditDetailTaskProject() {
                     <Skeleton height={45} mt={20} radius={10} />
                     :
                     <>
-                        <Text>Tanggal Berakhir</Text>
+                        <Flex justify="flex-start" align="flex-start" direction="row" wrap="nowrap" gap={5}>
+                           <Text fw={500}>Tanggal Berakhir</Text> <Text c={"red"}>*</Text>
+                        </Flex>
                        <Group
                           justify="center"
                           bg={"white"}
@@ -133,6 +173,11 @@ export default function EditDetailTaskProject() {
                  }
               </Box>
            </SimpleGrid>
+            {
+               (!loading && touched && touched.date)
+                  ? <Text size="sm" c={"red"}>Tanggal Tidak Boleh Kosong</Text>
+                  : <></>
+            }
            <Stack pt={15} pb={100}>
               {loading ?
                  <Skeleton height={40} mt={20} radius={10} />
@@ -144,16 +189,15 @@ export default function EditDetailTaskProject() {
                           borderRadius: 10,
                        },
                     }}
-                     placeholder="Input Judul Tahapan"
-                     label="Judul Tahapan"
+                     placeholder="Input Judul Tugas"
+                     label="Judul Tugas"
                     required
                     size="md"
                     value={name}
-                     onChange={(e) => { setName(e.target.value) }}
-                     onBlur={() => setTouched({ ...touched, title: true })}
+                     onChange={(e) => { onValidation('title', e.target.value) }}
                     error={
                        touched.title && (
-                           name == "" ? "Judul Tahapan Tidak Boleh Kosong" : null
+                           name == "" ? "Judul Tugas Tidak Boleh Kosong" : null
                        )
                     }
                  />
@@ -174,28 +218,21 @@ export default function EditDetailTaskProject() {
                  size="lg"
                  radius={30}
                  fullWidth
-                  onClick={() => {
-                     if (
-                        name !== ""
-                     ) {
-                        setOpenModal(true)
-                     } else {
-                        toast.error("Judul Tidak Boleh Kosong")
-                     }
-                  }}
+                  onClick={() => { onCheck() }}
               >
                  Simpan
               </Button>
            }
         </Box>

-         <LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
+         <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)}
            description="Apakah Anda yakin ingin mengubah data?"
            onYes={(val) => {
               if (val) {
                  onSubmit()
+               } else {
+                  setOpenModal(false)
               }
-               setOpenModal(false)
            }} />
      </Box>
   );
--- a/src/module/project/ui/edit_task_project.tsx
+++ b/src/module/project/ui/edit_task_project.tsx
@@ -7,8 +7,8 @@ import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
 import { useState } from 'react';
 import toast from 'react-hot-toast';
-import { funEditProject, funGetOneProjectById } from '../lib/api_project';
 import { useWibuRealtime } from 'wibu-realtime';
+import { funEditProject, funGetOneProjectById } from '../lib/api_project';

 export default function EditTaskProject() {
  const router = useRouter()