style: update skelaton

src/module/user/member/ui/edit_member.tsx

@@ -11,6 +11,7 @@ import toast from "react-hot-toast";
 import { HiUser } from "react-icons/hi2";
 import { IDataPositionMember, IDataROleMember, IEditDataMember, IFormMember } from "../lib/type_member";
 import { funEditMember, funGetOneMember, funGetRoleUser } from "../lib/api_member";
+import _ from "lodash";
 
 
 export default function EditMember({ id }: { id: string }) {
@@ -19,6 +20,16 @@ export default function EditMember({ id }: { id: string }) {
    const [listGroup, setListGorup] = useState<IDataGroup[]>([])
    const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
    const [listUserRole, setListUserRole] = useState<IDataROleMember[]>([])
+   const [touched, setTouched] = useState({
+      nik: false,
+      name: false,
+      phone: false,
+      email: false,
+      gender: false,
+      idGroup: false,
+      idPosition: false,
+      idUserRole: false
+    });
    const [data, setData] = useState<IEditDataMember>({
       id: "",
       nik: "",
@@ -95,21 +106,25 @@ export default function EditMember({ id }: { id: string }) {
 
    async function onSubmit(val: boolean) {
       try {
-
-         const res = await funEditMember(id, {
-            id: data.id,
-            nik: data.nik,
-            name: data.name,
-            phone: data.phone,
-            email: data.email,
-            gender: data.gender,
-            idGroup: data.idGroup,
-            idPosition: data.idPosition,
-            idUserRole: data.idUserRole
-         })
-
-         toast.success(res.message)
-         router.push(`/member?active=true`)
+         if (_.isEmpty(data)) {
+            return
+         }
+         if (val) {
+            const res = await funEditMember(id, {
+               id: data.id,
+               nik: data.nik,
+               name: data.name,
+               phone: data.phone,
+               email: data.email,
+               gender: data.gender,
+               idGroup: data.idGroup,
+               idPosition: data.idPosition,
+               idUserRole: data.idUserRole
+            })
+   
+            toast.success(res.message)
+            router.push(`/member?active=true`)
+         }
 
       } catch (error) {
          toast.error('Error');
@@ -152,6 +167,12 @@ export default function EditMember({ id }: { id: string }) {
                   changeGrup(val)
                }}
                value={data?.idGroup}
+               onBlur={() => setTouched({ ...touched, idGroup: true })}
+               error={
+                 touched.idGroup && (
+                   data.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+                 )
+               }
             />
             <Select
                placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
@@ -172,6 +193,12 @@ export default function EditMember({ id }: { id: string }) {
                }
                onChange={(val: any) => setData({ ...data, idPosition: val })}
                value={(data?.idPosition == "") ? null : data.idPosition}
+               onBlur={() => setTouched({ ...touched, idPosition: true })}
+               error={
+                 touched.idPosition && (
+                   data.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
+                 )
+               }
             />
             <Select
                placeholder="Pilih Role" label="User Role" w={"100%"} size="md" required withAsterisk radius={30}
@@ -192,6 +219,12 @@ export default function EditMember({ id }: { id: string }) {
                }
                onChange={(val: any) => setData({ ...data, idUserRole: val })}
                value={data?.idUserRole}
+               onBlur={() => setTouched({ ...touched, idUserRole: true })}
+               error={
+                 touched.idUserRole && (
+                   data.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
+                 )
+               }
             />
             <TextInput
                size="md" type="number" radius={30} placeholder="NIK" withAsterisk label="NIK" w={"100%"}
@@ -204,6 +237,13 @@ export default function EditMember({ id }: { id: string }) {
                }}
                onChange={(e) => setData({ ...data, nik: e.target.value })}
                value={data.nik}
+               onBlur={() => setTouched({ ...touched, nik: true })}
+               error={
+                 touched.nik && (
+                   data.nik == "" ? "NIK Tidak Boleh Kosong" :
+                     data.nik.length < 16 ? "NIK Harus 16 Karakter" : null
+                 )
+               }
             />
             <TextInput
                size="md" type="text" radius={30} placeholder="Nama" withAsterisk label="Nama" w={"100%"}
@@ -216,6 +256,12 @@ export default function EditMember({ id }: { id: string }) {
                }}
                onChange={(e) => setData({ ...data, name: e.target.value })}
                value={data.name}
+               onBlur={() => setTouched({ ...touched, name: true })}
+               error={
+                 touched.name && (
+                   data.name == "" ? "Nama Tidak Boleh Kosong" : null
+                 )
+               }
             />
             <TextInput
                size="md" type="email" radius={30} placeholder="Email" withAsterisk label="Email" w={"100%"}
@@ -228,6 +274,13 @@ export default function EditMember({ id }: { id: string }) {
                }}
                onChange={(e) => setData({ ...data, email: e.target.value })}
                value={data.email}
+               onBlur={() => setTouched({ ...touched, email: true })}
+               error={
+                 touched.email && (
+                   data.email == "" ? "Email Tidak Boleh Kosong" :
+                     !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(data.email) ? "Email tidak valid" : null
+                 )
+               }
             />
             <TextInput
                size="md" type="number" radius={30} placeholder="+62...." withAsterisk label="Nomor Telepon" w={"100%"}
@@ -240,6 +293,13 @@ export default function EditMember({ id }: { id: string }) {
                }}
                onChange={(e) => setData({ ...data, phone: e.target.value })}
                value={data.phone}
+               onBlur={() => setTouched({ ...touched, phone: true })}
+               error={
+                 touched.phone && (
+                   data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
+                     data.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
+                 )
+               }
             />
             <Select
                placeholder="Pilih Gender" label="Gender" w={"100%"} size="md" required withAsterisk radius={30}
@@ -264,19 +324,40 @@ export default function EditMember({ id }: { id: string }) {
                }
                onChange={(val: any) => setData({ ...data, gender: val })}
                value={data.gender}
+               onBlur={() => setTouched({ ...touched, gender: true })}
+               error={
+                 touched.gender && (
+                   data.gender == "" ? "Gender Tidak Boleh Kosong" : null
+                 )
+               }
             />
          </Stack>
          <Box mt={30} mx={20} pb={20}>
-            <Button
-               c={"white"}
-               bg={WARNA.biruTua}
-               size="md"
-               radius={30}
-               fullWidth
-               onClick={() => setModal(true)}
-            >
-               Simpan
-            </Button>
+         <Button
+          c={"white"}
+          bg={WARNA.biruTua}
+          size="md"
+          radius={30}
+          fullWidth
+          onClick={() => {
+            if (
+              data.nik !== "" &&
+              data.name !== "" &&
+              data.email !== "" &&
+              data.phone !== "" &&
+              data.gender !== "" &&
+              data.idGroup !== "" &&
+              data.idPosition !== "" &&
+              data.idUserRole !== ""
+            ) {
+              setModal(true);
+            } else {
+              toast.error("Mohon lengkapi semua form");
+            }
+          }}
+        >
+          Simpan
+        </Button>
          </Box>
          <LayoutModal opened={isModal} onClose={() => setModal(false)}
             description="Apakah Anda yakin ingin mengubah data?"