From 96084b22c040b828c1556c81c05194a3faa6d10b Mon Sep 17 00:00:00 2001
From: amel <amel@amel.local>
Date: Thu, 26 Dec 2024 15:15:45 +0800
Subject: [PATCH] upd: user

Deskripsi:
- tambah input select jabatan pada edit profile
- tambah loading pada input select jabatan halaman edit profile
- tambah loading pada input select jabatan halaman edit member

No Issues
---
 src/app/api/user/profile/route.ts             |   5 +-
 src/module/user/member/ui/edit_member.tsx     |  19 +-
 src/module/user/member/ui/tab_list_member.tsx |  11 +-
 src/module/user/profile/lib/type_profile.ts   |   1 +
 src/module/user/profile/ui/edit_profile.tsx   | 339 ++++++++++--------
 5 files changed, 214 insertions(+), 161 deletions(-)

diff --git a/src/app/api/user/profile/route.ts b/src/app/api/user/profile/route.ts
index 96d8d85..4676f6e 100644
--- a/src/app/api/user/profile/route.ts
+++ b/src/app/api/user/profile/route.ts
@@ -66,7 +66,7 @@ export async function PUT(request: Request) {
         const file = body.get("file") as File;
         const data = body.get("data");
 
-        const { name, email, phone, nik, gender } = JSON.parse(data as string)
+        const { name, email, phone, nik, gender, idPosition } = JSON.parse(data as string)
 
         const cekNIK = await prisma.user.count({
             where: {
@@ -108,7 +108,8 @@ export async function PUT(request: Request) {
                 email: email,
                 phone: "62" + phone,
                 nik: nik,
-                gender: gender
+                gender: gender,
+                idPosition: idPosition
             },
             select: {
                 img: true
diff --git a/src/module/user/member/ui/edit_member.tsx b/src/module/user/member/ui/edit_member.tsx
index c67d99d..f9acc2e 100644
--- a/src/module/user/member/ui/edit_member.tsx
+++ b/src/module/user/member/ui/edit_member.tsx
@@ -30,6 +30,7 @@ export default function EditMember({ id }: { id: string }) {
    const [loading, setLoading] = useState(true)
    const roleLogin = useHookstate(globalRole)
    const tema = useHookstate(TEMA)
+   const [loadingPosition, setLoadingPosition] = useState(true)
    const [touched, setTouched] = useState({
       nik: false,
       name: false,
@@ -83,6 +84,7 @@ export default function EditMember({ id }: { id: string }) {
 
    async function getAllPosition(val: any) {
       try {
+         setLoadingPosition(true)
          const res = await funGetAllPosition(
             "?active=true" + "&group=" + `${val}`
          );
@@ -90,6 +92,8 @@ export default function EditMember({ id }: { id: string }) {
 
       } catch (error) {
          console.error(error)
+      } finally {
+         setLoadingPosition(false)
       }
    }
 
@@ -233,19 +237,14 @@ export default function EditMember({ id }: { id: string }) {
                </Indicator>
             }
             {loading ?
-               <>
-                  <Skeleton height={40} mt={20} radius={30} />
-                  <Skeleton height={40} mt={10} radius={30} />
-                  <Skeleton height={40} mt={10} radius={30} />
-                  <Skeleton height={40} mt={10} radius={30} />
-                  <Skeleton height={40} mt={10} radius={30} />
-                  <Skeleton height={40} mt={10} radius={30} />
-                  <Skeleton height={40} mt={10} radius={30} />
-               </>
+               [...Array(6)].map((_, index) => (
+                  <Skeleton key={index} height={40} mt={20} radius={30} />
+               ))
                :
                <>
                   <Select
-                     placeholder="Pilih Jabatan" label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
+                     placeholder={loadingPosition ? "Loading.. " : "Pilih Jabatan"}
+                     label="Jabatan" w={"100%"} size="md" required withAsterisk radius={30}
                      styles={{
                         input: {
                            color: tema.get().utama,
diff --git a/src/module/user/member/ui/tab_list_member.tsx b/src/module/user/member/ui/tab_list_member.tsx
index 2f3cf1c..e517c51 100644
--- a/src/module/user/member/ui/tab_list_member.tsx
+++ b/src/module/user/member/ui/tab_list_member.tsx
@@ -10,6 +10,7 @@ import { HiMagnifyingGlass } from "react-icons/hi2"
 import { useWibuRealtime } from "wibu-realtime"
 import { funGetAllmember } from "../lib/api_member"
 import { IListMember } from "../lib/type_member"
+import { funGetUserByCookies } from "@/module/auth"
 
 
 export default function TabListMember() {
@@ -32,16 +33,18 @@ export default function TabListMember() {
       project: "sdm"
    })
    const [isRefresh, setRefresh] = useState(false)
+   const [userLogin, setUserLogin] = useState<any>('')
 
 
    async function getAllUser(loading: boolean) {
       try {
-         if (loading)
-            setLoading(true)
+         setLoading(loading)
          const res = await funGetAllmember('?active=' + status + '&group=' + group + '&search=' + searchQuery + '&page=' + isPage)
+         const user = await funGetUserByCookies()
          if (res.success) {
             setNameGroup(res.filter.name)
             setIdGroup(res.filter.id)
+            setUserLogin(user.id)
             if (isPage == 1) {
                setDataMember(res.data)
             } else {
@@ -148,9 +151,7 @@ export default function TabListMember() {
                      dataMember.map((v, i) => {
                         return (
                            <Box my={10} key={i}>
-                              <Box onClick={() => {
-                                 router.push(`/member/${v.id}`)
-                              }}>
+                              <Box onClick={() => { userLogin == v.id ? router.push(`/profile`) : router.push(`/member/${v.id}`) }}>
                                  <Grid p={5} align="center">
                                     <Grid.Col
                                        span={{
diff --git a/src/module/user/profile/lib/type_profile.ts b/src/module/user/profile/lib/type_profile.ts
index e1b8acc..fa386ad 100644
--- a/src/module/user/profile/lib/type_profile.ts
+++ b/src/module/user/profile/lib/type_profile.ts
@@ -18,5 +18,6 @@ export interface IEditDataProfile {
   phone: string;
   email: string;
   gender: string;
+  idPosition: string;
   img: string;
 }
\ No newline at end of file
diff --git a/src/module/user/profile/ui/edit_profile.tsx b/src/module/user/profile/ui/edit_profile.tsx
index 37d68e8..beee85b 100644
--- a/src/module/user/profile/ui/edit_profile.tsx
+++ b/src/module/user/profile/ui/edit_profile.tsx
@@ -12,10 +12,13 @@ import toast from "react-hot-toast";
 import { FaCamera } from "react-icons/fa6";
 import { funEditProfileByCookies, funGetProfileByCookies, } from "../lib/api_profile";
 import { IEditDataProfile, IProfileById } from "../lib/type_profile";
+import { IDataPositionMember } from "../../member/lib/type_member";
+import { funGetAllPosition } from "@/module/position/lib/api_position";
 
 export default function EditProfile() {
   const [isValModal, setValModal] = useState(false);
   const [isDataEdit, setDataEdit] = useState<IProfileById[]>([]);
+  const [listPosition, setListPosition] = useState<IDataPositionMember[]>([])
   const openRef = useRef<() => void>(null);
   const [img, setIMG] = useState<any | null>();
   const [imgForm, setImgForm] = useState<any>();
@@ -23,6 +26,7 @@ export default function EditProfile() {
   const [loading, setLoading] = useState(true);
   const tema = useHookstate(TEMA);
   const [loadingKonfirmasi, setLoadingKonfirmasi] = useState(false);
+  const [loadingPosition, setLoadingPosition] = useState(true)
 
   const [touched, setTouched] = useState({
     nik: false,
@@ -30,6 +34,7 @@ export default function EditProfile() {
     phone: false,
     email: false,
     gender: false,
+    idPosition: false
   });
 
   const [data, setData] = useState<IEditDataProfile>({
@@ -40,13 +45,30 @@ export default function EditProfile() {
     email: "",
     gender: "",
     img: "",
+    idPosition: ""
   });
 
+  async function getAllPosition(val: any) {
+    try {
+      setLoadingPosition(true)
+      const res = await funGetAllPosition(
+        "?active=true" + "&group=" + `${val}`
+      );
+      setListPosition(res.data);
+
+    } catch (error) {
+      console.error(error)
+    } finally {
+      setLoadingPosition(false)
+    }
+  }
+
   async function getAllProfile() {
     try {
       setLoading(true);
       const res = await funGetProfileByCookies();
       setData(res.data);
+      getAllPosition(res.data.idGroup);
       setIMG(`https://wibu-storage.wibudev.com/api/files/${res.data.img}`);
       setLoading(false);
     } catch (error) {
@@ -111,7 +133,7 @@ export default function EditProfile() {
       }
     } else if (kategori == 'phone') {
       setData({ ...data, phone: val })
-      if (val == "" || !(val.length >= 10 && val.length <= 15)) {
+      if (val == "" || !(val.length >= 9 && val.length <= 15)) {
         setTouched({ ...touched, phone: true })
       } else {
         setTouched({ ...touched, phone: false })
@@ -130,6 +152,13 @@ export default function EditProfile() {
       } else {
         setTouched({ ...touched, gender: false })
       }
+    } else if (kategori == 'idPosition') {
+      setData({ ...data, idPosition: val })
+      if (val == "" || String(val) == "null") {
+        setTouched({ ...touched, idPosition: true })
+      } else {
+        setTouched({ ...touched, idPosition: false })
+      }
     }
   }
 
@@ -181,150 +210,172 @@ export default function EditProfile() {
             />
           </Indicator>
         )}
-        {loading ? (
-          <>
-            <Skeleton height={40} mt={20} radius={10} />
-            <Skeleton height={40} mt={20} radius={10} />
-            <Skeleton height={40} mt={20} radius={10} />
-            <Skeleton height={40} mt={20} radius={10} />
-            <Skeleton height={40} mt={20} radius={10} />
-          </>
-        ) : (
-          <>
-            <TextInput
-              size="md"
-              type="number"
-              radius={10}
-              placeholder="NIK"
-              withAsterisk
-              label="NIK"
-              w={"100%"}
-              styles={{
-                input: {
-                  color: tema.get().utama,
-                  borderRadius: tema.get().utama,
-                  borderColor: tema.get().utama,
-                },
-              }}
-              onChange={(e) => { onValidation('nik', e.target.value) }}
-              value={data.nik}
-              error={
-                touched.nik &&
-                (data.nik === ""
-                  ? "NIK Tidak Boleh Kosong"
-                  : data.nik.length !== 16
-                    ? "NIK Harus 16 Karakter"
-                    : null)
-              }
-            />
-            <TextInput
-              size="md"
-              type="text"
-              radius={10}
-              placeholder="Nama"
-              withAsterisk
-              label="Nama"
-              w={"100%"}
-              styles={{
-                input: {
-                  color: tema.get().utama,
-                  borderRadius: tema.get().utama,
-                  borderColor: tema.get().utama,
-                },
-              }}
-              onChange={(e) => { onValidation('name', e.target.value) }}
-              value={data.name}
-              error={
-                touched.name &&
-                (data.name == "" ? "Nama Tidak Boleh Kosong" : null)
-              }
-            />
-            <TextInput
-              size="md"
-              type="email"
-              radius={10}
-              placeholder="Email"
-              withAsterisk
-              label="Email"
-              w={"100%"}
-              styles={{
-                input: {
-                  color: tema.get().utama,
-                  borderRadius: tema.get().utama,
-                  borderColor: tema.get().utama,
-                },
-              }}
-              onChange={(e) => { onValidation('email', e.target.value) }}
-              value={data.email}
-              error={
-                touched.email &&
-                (data.email == ""
-                  ? "Email Tidak Boleh Kosong"
-                  : !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
-                    data.email
+        {loading ?
+          [...Array(6)].map((_, index) => (
+            <Skeleton key={index} height={40} mt={20} radius={10} />
+          ))
+          : (
+            <>
+              <Select
+                placeholder={loadingPosition ? "Loading.. " : "Pilih Jabatan"}
+                label="Jabatan" w={"100%"} size="md" required withAsterisk radius={10}
+                styles={{
+                  input: {
+                    color: tema.get().utama,
+                    borderRadius: tema.get().utama,
+                    borderColor: tema.get().utama,
+                  },
+                }}
+                data={
+                  listPosition
+                    ? listPosition.map((data) => ({
+                      value: data.id,
+                      label: data.name,
+                    }))
+                    : []
+                }
+                onChange={(val: any) => { onValidation('idPosition', val) }}
+                value={(data?.idPosition == "") ? null : data.idPosition}
+                error={
+                  touched.idPosition && (
+                    data.idPosition == "" || String(data.idPosition) == "null" ? "Jabatan Tidak Boleh Kosong" : null
                   )
-                    ? "Email tidak valid"
-                    : null)
-              }
-            />
-            <TextInput
-              size="md"
-              type="number"
-              radius={10}
-              placeholder="8xx xxxx xxxx"
-              withAsterisk
-              label="Nomor Telepon"
-              w={"100%"}
-              styles={{
-                input: {
-                  color: tema.get().utama,
-                  borderRadius: tema.get().utama,
-                  borderColor: tema.get().utama,
-                },
-              }}
-              leftSection={<Text>+62</Text>}
-              onChange={(e) => { onValidation('phone', e.target.value); }}
-              value={data.phone}
-              error={
-                touched.phone &&
-                (data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong"
-                  : !(data.phone.length >= 10 && data.phone.length <= 15) ? "Nomor Telepon Tidak Valid" : null)
-              }
-            />
-            <Select
-              placeholder="Jenis Kelamin"
-              label="Jenis Kelamin"
-              w={"100%"}
-              size="md"
-              required
-              withAsterisk
-              radius={10}
-              styles={{
-                input: {
-                  color: tema.get().utama,
-                  borderRadius: tema.get().utama,
-                  borderColor: tema.get().utama,
-                },
-              }}
-              data={[
-                {
-                  value: "M",
-                  label: "Laki-laki",
-                },
-                {
-                  value: "F",
-                  label: "Perempuan",
-                },
-              ]}
-              onChange={(val: any) => { onValidation('gender', val) }}
-              value={data.gender}
-              error={
-                touched.gender &&
-                (data.gender == "" || data.gender == null ? "Jenis Kelamin Tidak Boleh Kosong" : null)
-              }
-            />
-          </>
-        )}
+                }
+              />
+              <TextInput
+                size="md"
+                type="number"
+                radius={10}
+                placeholder="NIK"
+                withAsterisk
+                label="NIK"
+                w={"100%"}
+                styles={{
+                  input: {
+                    color: tema.get().utama,
+                    borderRadius: tema.get().utama,
+                    borderColor: tema.get().utama,
+                  },
+                }}
+                onChange={(e) => { onValidation('nik', e.target.value) }}
+                value={data.nik}
+                error={
+                  touched.nik &&
+                  (data.nik === ""
+                    ? "NIK Tidak Boleh Kosong"
+                    : data.nik.length !== 16
+                      ? "NIK Harus 16 Karakter"
+                      : null)
+                }
+              />
+              <TextInput
+                size="md"
+                type="text"
+                radius={10}
+                placeholder="Nama"
+                withAsterisk
+                label="Nama"
+                w={"100%"}
+                styles={{
+                  input: {
+                    color: tema.get().utama,
+                    borderRadius: tema.get().utama,
+                    borderColor: tema.get().utama,
+                  },
+                }}
+                onChange={(e) => { onValidation('name', e.target.value) }}
+                value={data.name}
+                error={
+                  touched.name &&
+                  (data.name == "" ? "Nama Tidak Boleh Kosong" : null)
+                }
+              />
+              <TextInput
+                size="md"
+                type="email"
+                radius={10}
+                placeholder="Email"
+                withAsterisk
+                label="Email"
+                w={"100%"}
+                styles={{
+                  input: {
+                    color: tema.get().utama,
+                    borderRadius: tema.get().utama,
+                    borderColor: tema.get().utama,
+                  },
+                }}
+                onChange={(e) => { onValidation('email', e.target.value) }}
+                value={data.email}
+                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={10}
+                placeholder="8xx xxxx xxxx"
+                withAsterisk
+                label="Nomor Telepon"
+                w={"100%"}
+                styles={{
+                  input: {
+                    color: tema.get().utama,
+                    borderRadius: tema.get().utama,
+                    borderColor: tema.get().utama,
+                  },
+                }}
+                leftSection={<Text>+62</Text>}
+                onChange={(e) => { onValidation('phone', e.target.value); }}
+                value={data.phone}
+                error={
+                  touched.phone &&
+                  (data.phone == "" ? "Nomor Telepon Tidak Boleh Kosong"
+                    : !(data.phone.length >= 9 && data.phone.length <= 15) ? "Nomor Telepon Tidak Valid" : null)
+                }
+              />
+              <Select
+                placeholder="Jenis Kelamin"
+                label="Jenis Kelamin"
+                w={"100%"}
+                size="md"
+                required
+                withAsterisk
+                radius={10}
+                styles={{
+                  input: {
+                    color: tema.get().utama,
+                    borderRadius: tema.get().utama,
+                    borderColor: tema.get().utama,
+                  },
+                }}
+                data={[
+                  {
+                    value: "M",
+                    label: "Laki-laki",
+                  },
+                  {
+                    value: "F",
+                    label: "Perempuan",
+                  },
+                ]}
+                onChange={(val: any) => { onValidation('gender', val) }}
+                value={data.gender}
+                error={
+                  touched.gender &&
+                  (data.gender == "" || data.gender == null ? "Jenis Kelamin Tidak Boleh Kosong" : null)
+                }
+              />
+            </>
+          )}
       </Stack>
       <Box
         pos={"fixed"}