style: update skelaton

2024-08-23 14:12:01 +08:00
parent 6fef9ae028
commit f1121afee6
16 changed files with 756 additions and 278 deletions
--- a/src/module/user/member/ui/create_member.tsx
+++ b/src/module/user/member/ui/create_member.tsx
@@ -10,6 +10,7 @@ import { HiUser } from "react-icons/hi2";
 import { IDataPositionMember, IDataROleMember } from "../lib/type_member";
 import { funGetAllPosition } from "@/module/position/lib/api_position";
 import { funCreateMember, funGetRoleUser } from "../lib/api_member";
+import _ from "lodash";

 export default function CreateMember() {
  const router = useRouter();
@@ -17,6 +18,16 @@ export default function CreateMember() {
  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 [listData, setListData] = useState({
    nik: "",
@@ -80,24 +91,29 @@ export default function CreateMember() {

  async function onSubmit(val: boolean) {
    try {
-      const res = await funCreateMember({
-        nik: listData.nik,
-        name: listData.name,
-        phone: listData.phone,
-        email: listData.email,
-        gender: listData.gender,
-        idGroup: listData.idGroup,
-        idPosition: listData.idPosition,
-        idUserRole: listData.idUserRole,
-      });
-
-      if (res.success) {
-        toast.success(res.message);
-        setModal(false);
-        router.push("/member?active=true");
-      } else {
-        toast.error(res.message);
+      if (_.isEmpty(listData)) {
+        return;
      }
+      if (val) {
+        const res = await funCreateMember({
+          nik: listData.nik,
+          name: listData.name,
+          phone: listData.phone,
+          email: listData.email,
+          gender: listData.gender,
+          idGroup: listData.idGroup,
+          idPosition: listData.idPosition,
+          idUserRole: listData.idUserRole,
+        });
+        if (res.success) {
+          toast.success(res.message);
+          setModal(false);
+          router.push("/member?active=true");
+        } else {
+          toast.error(res.message);
+        }
+      }
+      setModal(false);
    } catch (error) {
      toast.error("Error");
    } finally {
@@ -142,14 +158,20 @@ export default function CreateMember() {
          data={
            listGroup
              ? listGroup.map((data) => ({
-                  value: data.id,
-                  label: data.name,
-                }))
+                value: data.id,
+                label: data.name,
+              }))
              : []
          }
          onChange={(val: any) => {
            changeGrup(val);
          }}
+          onBlur={() => setTouched({ ...touched, idGroup: true })}
+          error={
+            touched.idGroup && (
+              listData.idGroup == "" ? "Grup Tidak Boleh Kosong" : null
+            )
+          }
        />
        <Select
          placeholder="Pilih Jabatan"
@@ -169,9 +191,9 @@ export default function CreateMember() {
          data={
            listPosition
              ? listPosition.map((data) => ({
-                  value: data.id,
-                  label: data.name,
-                }))
+                value: data.id,
+                label: data.name,
+              }))
              : []
          }
          onChange={(val: any) =>
@@ -181,6 +203,12 @@ export default function CreateMember() {
            })
          }
          value={listData.idPosition == "" ? null : listData.idPosition}
+          onBlur={() => setTouched({ ...touched, idPosition: true })}
+          error={
+            touched.idPosition && (
+              listData.idPosition == "" ? "Jabatan Tidak Boleh Kosong" : null
+            )
+          }
        />
        <Select
          placeholder="Pilih Role"
@@ -200,9 +228,9 @@ export default function CreateMember() {
          data={
            listUserRole
              ? listUserRole.map((data) => ({
-                  value: data.id,
-                  label: data.name,
-                }))
+                value: data.id,
+                label: data.name,
+              }))
              : []
          }
          onChange={(val: any) =>
@@ -211,6 +239,12 @@ export default function CreateMember() {
              idUserRole: val,
            })
          }
+          onBlur={() => setTouched({ ...touched, idUserRole: true })}
+          error={
+            touched.idUserRole && (
+              listData.idUserRole == "" ? "Role Tidak Boleh Kosong" : null
+            )
+          }
        />
        <TextInput
          size="md"
@@ -227,11 +261,16 @@ export default function CreateMember() {
              borderColor: WARNA.biruTua,
            },
          }}
-          onChange={(event: any) =>
-            setListData({
-              ...listData,
-              nik: event.target.value,
-            })
+          onChange={(event: any) => {
+            setListData({ ...listData, nik: event.target.value });
+            setTouched({ ...touched, nik: true });
+          }}
+          onBlur={() => setTouched({ ...touched, nik: true })}
+          error={
+            touched.nik && (
+              listData.nik == "" ? "NIK Tidak Boleh Kosong" :
+                listData.nik.length < 16 ? "NIK Harus 16 Karakter" : null
+            )
          }
        />
        <TextInput
@@ -255,6 +294,12 @@ export default function CreateMember() {
              name: event.target.value,
            })
          }
+          onBlur={() => setTouched({ ...touched, name: true })}
+          error={
+            touched.name && (
+              listData.name == "" ? "Nama Tidak Boleh Kosong" : null
+            )
+          }
        />
        <TextInput
          size="md"
@@ -277,6 +322,13 @@ export default function CreateMember() {
              email: event.target.value,
            })
          }
+          onBlur={() => setTouched({ ...touched, email: true })}
+          error={
+            touched.email && (
+              listData.email == "" ? "Email Tidak Boleh Kosong" :
+                !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(listData.email) ? "Email tidak valid" : null
+            )
+          }
        />
        <TextInput
          size="md"
@@ -299,6 +351,13 @@ export default function CreateMember() {
              phone: event.target.value,
            })
          }
+          onBlur={() => setTouched({ ...touched, phone: true })}
+          error={
+            touched.phone && (
+              listData.phone == "" ? "Nomor Telepon Tidak Boleh Kosong" :
+                listData.phone.length < 10 ? "Nomor Telepon harus 10 digit" : null
+            )
+          }
        />
        <Select
          placeholder="Pilih Gender"
@@ -325,6 +384,12 @@ export default function CreateMember() {
              gender: val,
            })
          }
+          onBlur={() => setTouched({ ...touched, gender: true })}
+          error={
+            touched.gender && (
+              listData.gender == "" ? "Gender Tidak Boleh Kosong" : null
+            )
+          }
        />
      </Stack>
      <Box mt={30} mx={20} pb={20}>
@@ -334,7 +399,22 @@ export default function CreateMember() {
          size="md"
          radius={30}
          fullWidth
-          onClick={() => setModal(true)}
+          onClick={() => {
+            if (
+              listData.nik !== "" &&
+              listData.name !== "" &&
+              listData.email !== "" &&
+              listData.phone !== "" &&
+              listData.gender !== "" &&
+              listData.idGroup !== "" &&
+              listData.idPosition !== "" &&
+              listData.idUserRole !== ""
+            ) {
+              setModal(true);
+            } else {
+              toast.error("Mohon lengkapi semua form");
+            }
+          }}
        >
          Simpan
        </Button>
--- a/src/module/user/member/ui/edit_member.tsx
+++ b/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?"