upd: divisi

Deskripsi:
- validasi tambah divisi
- validasi edit diviis

No Issues

src/module/division_new/ui/create_division.tsx

@@ -1,29 +1,15 @@
 "use client";
 import { LayoutNavbarNew, TEMA } from "@/module/_global";
-import { useHookstate } from "@hookstate/core";
-import {
-    Avatar,
-    Box,
-    Button,
-    Divider,
-    Flex,
-    Grid,
-    Group,
-    rem,
-    Select,
-    Stack,
-    Text,
-    Textarea,
-    TextInput,
-} from "@mantine/core";
-import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
-import { useRouter } from "next/navigation";
-import React, { useState } from "react";
-import { IoIosArrowDropright } from "react-icons/io";
-import { globalMemberDivision } from "../lib/val_division";
-import toast from "react-hot-toast";
 import { funGetUserByCookies } from "@/module/auth";
 import { funGetAllGroup, IDataGroup } from "@/module/group";
+import { useHookstate } from "@hookstate/core";
+import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, Stack, Text, Textarea, TextInput } from "@mantine/core";
+import { useMediaQuery, useShallowEffect } from "@mantine/hooks";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import toast from "react-hot-toast";
+import { IoIosArrowDropright } from "react-icons/io";
+import { globalMemberDivision } from "../lib/val_division";
 import NavbarAdminDivision from "./navbar_admin_division";
 import NavbarCreateUsers from "./navbar_create_users";
 
@@ -58,23 +44,14 @@ export default function CreateDivision() {
         setRoleUser(loadUser.idUserRole)
     }
 
-    function onSubmit() {
+    function onCheck() {
-        if (roleUser == "supadmin" && (body.idGroup == "" || body.idGroup == null)) {
+        const cek = checkAll()
-            return toast.error("Error! grup harus diisi")
+        if (!cek)
-        }
+            return false
-
+        if (member.length == 0)
-        if (body.name == "") {
-            return toast.error("Error! nama divisi harus diisi")
-        }
-
-        if (member.length == 0) {
             return toast.error("Error! belum ada anggota yang terdaftar")
-        }
-
-
 
         setChooseAdmin(true)
-
     }
 
     function onToChooseAnggota() {
@@ -86,7 +63,7 @@ export default function CreateDivision() {
 
     function onChooseGroup(val: any) {
         member.set([])
-        setBody({ ...body, idGroup: val })
+        onValidation('idGroup', val)
     }
 
 
@@ -95,6 +72,39 @@ export default function CreateDivision() {
         loadData();
     }, []);
 
+    function onValidation(kategori: string, val: any) {
+        if (kategori == 'name') {
+            setBody({ ...body, name: val })
+            if (val === "") {
+                setTouched({ ...touched, name: true })
+            } else {
+                setTouched({ ...touched, name: false })
+            }
+        } else if (kategori == 'idGroup') {
+            setBody({ ...body, idGroup: val, })
+            if (val === "" || String(val) == "null") {
+                setTouched(touched => ({ ...touched, idGroup: true }))
+            } else {
+                setTouched({ ...touched, idGroup: false })
+            }
+        } else if (kategori == 'desc') {
+            setBody({ ...body, desc: val })
+        }
+    }
+
+    function checkAll() {
+        let nilai = true
+        if (roleUser == "supadmin" && (body.idGroup === "" || String(body.idGroup) == "null")) {
+            setTouched(touched => ({ ...touched, idGroup: true }))
+            nilai = false
+        }
+        if (body.name === "") {
+            setTouched(touched => ({ ...touched, name: true }))
+            nilai = false
+        }
+        return nilai
+    }
+
 
 
     if (isChooseAdmin) return <NavbarAdminDivision data={body} onSuccess={(val) => {
@@ -133,10 +143,9 @@ export default function CreateDivision() {
                                 onChange={(val) => {
                                     onChooseGroup(val)
                                 }}
-                                onBlur={() => setTouched({ ...touched, idGroup: true })}
                                 error={
                                     touched.idGroup && (
-                                        body.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+                                        body.idGroup == "" || String(body.idGroup) == "null" ? "Grup Tidak Boleh Kosong" : null
                                     )
                                 }
                                 value={body.idGroup}
@@ -150,11 +159,10 @@ export default function CreateDivision() {
                         required
                         radius={10}
                         value={body.name}
-                        onChange={(val) => { setBody({ ...body, name: val.target.value }) }}
+                        onChange={(val) => { onValidation('name', val.target.value) }}
-                        onBlur={() => setTouched({ ...touched, name: true })}
                         error={
                             touched.name && (
-                                body.name == "" ? "Nama Tidak Boleh Kosong" : null
+                                body.name == "" ? "Nama Divisi Tidak Boleh Kosong" : null
                             )
                         }
                     />
@@ -230,16 +238,7 @@ export default function CreateDivision() {
                 zIndex: 999,
                 backgroundColor: `${tema.get().bgUtama}`,
             }}>
-                <Button
+                <Button color="white" bg={tema.get().utama} size="lg" radius={30} fullWidth onClick={() => { onCheck() }} >
-                    color="white"
-                    bg={tema.get().utama}
-                    size="lg"
-                    radius={30}
-                    fullWidth
-                    onClick={() => {
-                        onSubmit()
-                    }}
-                >
                     Simpan
                 </Button>
             </Box>

src/module/division_new/ui/edit_division.tsx

@@ -1,25 +1,22 @@
 "use client"
 import { LayoutNavbarNew, TEMA } from '@/module/_global';
 import LayoutModal from '@/module/_global/layout/layout_modal';
-import { Box, Button, rem, Select, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
+import { useHookstate } from '@hookstate/core';
+import { Box, Button, rem, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
 import { useShallowEffect } from '@mantine/hooks';
 import { useParams, useRouter } from 'next/navigation';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import toast from 'react-hot-toast';
 import { funEditDivision, funGetDivisionById } from '../lib/api_division';
-import { funGetAllGroup, IDataGroup } from '@/module/group';
-import { funGetUserByCookies } from '@/module/auth';
-import { useHookstate } from '@hookstate/core';
-
 
 export default function EditDivision() {
   const [openModal, setOpenModal] = useState(false)
   const router = useRouter()
   const param = useParams<{ id: string }>()
   const tema = useHookstate(TEMA)
+  const [loadingModal, setLoadingModal] = useState(false)
   const [loading, setLoading] = useState(false)
   const [body, setBody] = useState<any>({
-    idGroup: "",
     name: "",
     desc: "",
   });
@@ -28,6 +25,36 @@ export default function EditDivision() {
     name: false,
   });
 
+  function onValidation(kategori: string, val: any) {
+    if (kategori == 'name') {
+      setBody({ ...body, name: val })
+      if (val === "") {
+        setTouched({ ...touched, name: true })
+      } else {
+        setTouched({ ...touched, name: false })
+      }
+    } else if (kategori == "desc") {
+      setBody({ ...body, desc: val })
+    }
+  }
+
+  function onCheck() {
+    const cek = checkAll()
+    if (!cek)
+      return false
+    setOpenModal(true)
+  }
+
+  function checkAll() {
+    let nilai = true
+    if (body.name === "") {
+      setTouched(touched => ({ ...touched, name: true }))
+      nilai = false
+    }
+    return nilai
+  }
+
+
 
   async function getOneData() {
     try {
@@ -56,17 +83,19 @@ export default function EditDivision() {
 
   async function onUpdate() {
     try {
+      setLoadingModal(true)
       const res = await funEditDivision(param.id, body)
       if (res.success) {
         toast.success(res.message)
       } else {
         toast.error(res.message)
       }
-      setOpenModal(false)
     } catch (error) {
       console.error(error)
-      setOpenModal(false)
       toast.error("Gagal mengedit divisi, coba lagi nanti");
+    } finally {
+      setLoadingModal(false)
+      setOpenModal(false)
     }
 
   }
@@ -88,26 +117,22 @@ export default function EditDivision() {
             :
             <>
               <TextInput
-                placeholder="Judul"
+                placeholder="Nama Divisi"
-                label="Judul"
+                label="Nama Divisi"
                 size="md"
                 required
-                radius={40}
+                radius={10}
                 value={body.name}
-                onChange={(e) => {
+                onChange={(e) => { onValidation('name', e.currentTarget.value) }}
-                  setBody({ ...body, name: e.target.value })
-                  setTouched({ ...touched, name: false })
-                }}
-                onBlur={() => setTouched({ ...touched, name: true })}
                 error={
                   touched.name && (
-                    body.name == "" ? "Judul Tidak Boleh Kosong" : null
+                    body.name == "" ? "Nama Divisi Tidak Boleh Kosong" : null
                   )
                 }
               />
               <Textarea placeholder="Deskripsi" label="Deskripsi" size="md" radius={10}
                 value={body.desc}
-                onChange={(e) => { setBody({ ...body, desc: e.currentTarget.value }) }}
+                onChange={(e) => { onValidation('desc', e.currentTarget.value) }}
                 styles={{
                   input: {
                     height: "40vh"
@@ -132,21 +157,13 @@ export default function EditDivision() {
             size="lg"
             radius={30}
             fullWidth
-            onClick={() => {
+            onClick={() => { onCheck() }}
-              if (
-                body.name !== ""
-              ) {
-                setOpenModal(true)
-              } else {
-                toast.error("Judul Tidak Boleh Kosong")
-              }
-            }}
           >
             Simpan
           </Button>
         }
       </Box>
-      <LayoutModal opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
+      <LayoutModal loading={loadingModal} opened={openModal} onClose={() => setOpenModal(false)} description='Apakah Anda yakin ingin edit data'
         onYes={(val) => {
           if (val) {
             onUpdate()

src/module/division_new/ui/information_division.tsx

@@ -135,9 +135,9 @@ export default function InformationDivision() {
                     </Stack>
                   ))
                 :
-                (deskripsi != null && deskripsi != undefined) ?
+                (deskripsi != null && deskripsi != undefined && deskripsi != "") ?
                   <Text ta={"justify"}>{deskripsi}</Text>
-                  : <></>
+                  : <Text ta={"center"} c={"dimmed"} fs={"italic"}>Tidak ada deskripsi</Text>
             }
           </Box>
         </Box>
@@ -195,12 +195,12 @@ export default function InformationDivision() {
                           }}
                         >
                           <Grid.Col span={1}>
-                              <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
+                            <Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
                           </Grid.Col>
                           <Grid.Col span={8}>
-                                <Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
+                            <Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
-                                  {v.name}
+                              {v.name}
-                                </Text>
+                            </Text>
                           </Grid.Col>
                           <Grid.Col span={3}>
                             <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>