diff --git a/src/module/division_new/ui/create_division.tsx b/src/module/division_new/ui/create_division.tsx index 6618c5a..4cfab78 100644 --- 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 { @@ -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}`, }}> - diff --git a/src/module/division_new/ui/edit_division.tsx b/src/module/division_new/ui/edit_division.tsx index 8610fd3..a1d09fd 100644 --- 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({ - 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() { : <> { - 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 ) } />