upd: divisi

Deskripsi: - validasi tambah divisi - validasi edit diviis No Issues
2024-10-05 14:50:35 +08:00
parent d019a8c1c0
commit 02fbd27d60
3 changed files with 103 additions and 87 deletions
--- a/src/module/division_new/ui/create_division.tsx
+++ b/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() {
-        if (roleUser == "supadmin" && (body.idGroup == "" || body.idGroup == null)) {
-            return toast.error("Error! grup harus diisi")
-        }
-
-        if (body.name == "") {
-            return toast.error("Error! nama divisi harus diisi")
-        }
-
-        if (member.length == 0) {
+    function onCheck() {
+        const cek = checkAll()
+        if (!cek)
+            return false
+        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 }) }}
-                        onBlur={() => setTouched({ ...touched, name: true })}
+                        onChange={(val) => { onValidation('name', val.target.value) }}
                        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
-                    color="white"
-                    bg={tema.get().utama}
-                    size="lg"
-                    radius={30}
-                    fullWidth
-                    onClick={() => {
-                        onSubmit()
-                    }}
-                >
+                <Button color="white" bg={tema.get().utama} size="lg" radius={30} fullWidth onClick={() => { onCheck() }} >
                    Simpan
                </Button>
            </Box>
--- a/src/module/division_new/ui/edit_division.tsx
+++ b/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"
-                label="Judul"
+                placeholder="Nama Divisi"
+                label="Nama Divisi"
                size="md"
                required
-                radius={40}
+                radius={10}
                value={body.name}
-                onChange={(e) => {
-                  setBody({ ...body, name: e.target.value })
-                  setTouched({ ...touched, name: false })
-                }}
-                onBlur={() => setTouched({ ...touched, name: true })}
+                onChange={(e) => { onValidation('name', e.currentTarget.value) }}
                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={() => {
-              if (
-                body.name !== ""
-              ) {
-                setOpenModal(true)
-              } else {
-                toast.error("Judul Tidak Boleh Kosong")
-              }
-            }}
+            onClick={() => { onCheck() }}
          >
            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()
--- a/src/module/division_new/ui/information_division.tsx
+++ b/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}>
-                                  {v.name}
-                                </Text>
+                            <Text c={tema.get().utama} fw={"bold"} truncate="end" pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16}>
+                              {v.name}
+                            </Text>
                          </Grid.Col>
                          <Grid.Col span={3}>
                            <Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>