upd: position

Deskripsi:
- update validasi tambah positiion
- update validasi edit position
- loading button tambah position
- loading button edit position

No Issues

src/module/position/ui/drawer_detail_position.tsx

@@ -18,6 +18,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [isModal, setModal] = useState(false)
    const refresh = useHookstate(globalRefreshPosition)
    const [loading, setLoading] = useState(true)
+   const [loadingEdit, setLoadingEdit] = useState(false)
    const tema = useHookstate(TEMA)
    const [data, setData] = useState<any>({
       id: id,
@@ -27,7 +28,6 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
    const [listGroup, setListGorup] = useState<IDataPosition[]>([])
    const [touched, setTouched] = useState({
       name: false,
-      idGroup: false
    });
 
    function onCLose() {
@@ -70,6 +70,7 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
    async function onSubmit() {
       try {
+         setLoadingEdit(true)
          const res = await funEditPosition(id, {
             name: data.name,
             idGroup: data.idGroup
@@ -88,6 +89,8 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
       } catch (error) {
          toast.error('Error');
          toast.error("Edit jabatan gagal, coba lagi nanti");
+      } finally {
+         setLoadingEdit(false)
       }
    }
 
@@ -98,20 +101,20 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
 
    function onCheck() {
       if (Object.values(touched).some((v) => v == true))
-        return false
+         return false
       onSubmit()
    }
 
    function onValidation(kategori: string, val: string) {
       if (kategori == 'name') {
-         setData({...data, name: val})
-        if (val == "" || val.length < 3) {
-          setTouched({ ...touched, name: true })
-        } else {
-          setTouched({ ...touched, name: false })
-        }
+         setData({ ...data, name: val })
+         if (val == "" || val.length < 3) {
+            setTouched({ ...touched, name: true })
+         } else {
+            setTouched({ ...touched, name: false })
+         }
       }
-    }
+   }
 
    async function nonActive(val: boolean) {
       try {
@@ -189,13 +192,12 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                         size="md"
                         value={String(data.name)}
                         onChange={(e) => { onValidation('name', e.target.value) }}
-                        onBlur={() => setTouched({ ...touched, name: true })}
                         error={
                            touched.name &&
                            (data.name == "" ? "Error! harus memasukkan Nama Jabatan" :
                               data.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
                            )
-                         }
+                        }
                         radius={10}
                         placeholder="Nama Jabatan"
                      />
@@ -208,7 +210,8 @@ export default function DrawerDetailPosition({ onUpdated, id, isActive }: {
                      size="lg"
                      radius={30}
                      fullWidth
-                     onClick={onSubmit}
+                     onClick={() => { onCheck() }}
+                     loading={loadingEdit}
                   >
                      EDIT
                   </Button>

src/module/position/ui/drawer_list_position.tsx

@@ -15,6 +15,7 @@ import { globalRefreshPosition } from "../lib/val_posisition";
 export default function DrawerListPosition({ onCreated }: { onCreated: (val: boolean) => void }) {
    const roleLogin = useHookstate(globalRole)
    const [openDrawerGroup, setOpenDrawerGroup] = useState(false)
+   const [loadingSave, setLoadingSave] = useState(false)
    const router = useRouter()
    const [listGroup, setListGorup] = useState<IDataGroup[]>([])
    const refresh = useHookstate(globalRefreshPosition)
@@ -52,6 +53,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
 
    async function onSubmit() {
       try {
+         setLoadingSave(true)
          const res = await funCreatePosition({
             name: listData.name,
             idGroup: listData.idGroup
@@ -70,23 +72,41 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
 
       } catch (error) {
          toast.error('Error')
+      } finally {
+         setLoadingSave(false)
       }
    }
 
    function onCheck() {
-      if (Object.values(touched).some((v) => v == true))
-        return false
+      const check = checkAll()
+      if (!check)
+         return false
       onSubmit()
    }
-   
+
+   function checkAll() {
+      let nilai = true
+      if (listData.name == "" || listData.name.length < 3) {
+         setTouched(touched => ({ ...touched, name: true }))
+         nilai = false
+      }
+
+      if (roleLogin.get() == "supadmin" && listData.idGroup == "") {
+         setTouched(touched => ({ ...touched, idGroup: true }))
+         nilai = false
+      }
+
+      return nilai
+   }
+
    function onValidation(kategori: string, val: string) {
       if (kategori == 'name') {
-         setListData({...listData, name: val})
-        if (val == "" || val.length < 3) {
-          setTouched({ ...touched, name: true })
-        } else {
-          setTouched({ ...touched, name: false })
-        }
+         setListData({ ...listData, name: val })
+         if (val == "" || val.length < 3) {
+            setTouched({ ...touched, name: true })
+         } else {
+            setTouched({ ...touched, name: false })
+         }
       } else if (kategori == 'idGroup') {
          setListData({ ...listData, idGroup: val })
          if (val == "") {
@@ -95,7 +115,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
             setTouched({ ...touched, idGroup: false })
          }
       }
-    }
+   }
 
    return (
       <Box>
@@ -130,7 +150,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                sm: "67vh",
                lg: "67vh",
                xl: "70vh"
-               
+
             }}>
                {
                   roleLogin.get() == "supadmin" &&
@@ -149,8 +169,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      radius={10}
                      mb={5}
                      withAsterisk
-                     onChange={(e: any) => 
-                        { onValidation('idGroup', e) }
+                     onChange={(e: any) => { onValidation('idGroup', e) }
                      }
                      styles={{
                         input: {
@@ -185,7 +204,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      (listData.name == "" ? "Error! harus memasukkan Nama Jabatan" :
                         listData.name.length < 3 ? "Masukkan Minimal 3 karakter" : ""
                      )
-                   }
+                  }
                   required
                />
                <Box pos={"absolute"} bottom={10} left={0} right={0}>
@@ -196,6 +215,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
                      radius={30}
                      fullWidth
                      onClick={() => { onCheck() }}
+                     loading={loadingSave}
                   >
                      SIMPAN
                   </Button>