upd: member

Deskripsi: - detail member - aktivasi member - edit member No Issues
2025-05-05 12:15:24 +08:00
parent be56495383
commit 9756a05d2a
6 changed files with 422 additions and 64 deletions
--- a/app/(application)/member/[id].tsx
+++ b/app/(application)/member/[id].tsx
@@ -1,12 +1,48 @@
 import ButtonBackHeader from "@/components/buttonBackHeader";
 import ItemDetailMember from "@/components/itemDetailMember";
 import HeaderRightMemberDetail from "@/components/member/headerMemberDetail";
+import { valueRoleUser } from "@/constants/RoleUser";
 import Styles from "@/constants/Styles";
+import { apiGetProfile } from "@/lib/api";
 import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
 import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string,
+   name: string,
+   nik: string,
+   email: string,
+   phone: string,
+   gender: string,
+   position: string,
+   group: string,
+   img: string,
+   isActive: boolean,
+   role: string
+}

 export default function MemberDetail() {
-   const { id } = useLocalSearchParams();
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const [data, setData] = useState<Props>()
+   const [error, setError] = useState(false)
+   const entityUser = useSelector((state: any) => state.user)
+   const [isEdit, setEdit] = useState(false)
+
+   async function handleLoad() {
+      try {
+         const response = await apiGetProfile({ id: id })
+         setData(response.data)
+         setEdit(valueRoleUser.filter((v) => v.login == entityUser.role)[0]?.data.some((i: any) => i.id == response.data.idUserRole))
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad()
+   }, []);

   return (
      <SafeAreaView>
@@ -14,8 +50,8 @@ export default function MemberDetail() {
            options={{
               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
               headerTitle: 'Anggota',
-               headerTitleAlign:'center',
-               headerRight: () => <HeaderRightMemberDetail id={id} />,
+               headerTitleAlign: 'center',
+               headerRight: () => (entityUser.role != "user") && isEdit && <HeaderRightMemberDetail active={data?.isActive} id={id} />,
               headerShadowVisible: false
            }}
         />
@@ -23,22 +59,23 @@ export default function MemberDetail() {
            <View style={{ flexDirection: 'column' }}>
               <View style={[Styles.wrapHeadViewMember]}>
                  <Image
-                     source={require("../../../assets/images/user.jpeg")}
+                     source={error ? require("../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
+                     onError={() => { setError(true) }}
                     style={[Styles.userProfileBig]}
                  />
-                  <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>Putri Ayu Dewi</Text>
-                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>Super Admin</Text>
+                  <Text style={[Styles.textSubtitle, Styles.cWhite, Styles.mt10]}>{data?.name}</Text>
+                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>{data?.role}</Text>
               </View>
               <View style={[Styles.p15]}>
                  <View style={[Styles.rowSpaceBetween]}>
                     <Text style={[Styles.textDefaultSemiBold]}>Informasi</Text>
                  </View>
-                  <ItemDetailMember category="nik" value="123456789" />
-                  <ItemDetailMember category="group" value="Dinas" />
-                  <ItemDetailMember category="position" value="Sekretaris" />
-                  <ItemDetailMember category="phone" value="08980873782" />
-                  <ItemDetailMember category="email" value="putri@gmail.com" />
-                  <ItemDetailMember category="gender" value="Perempuan" />
+                  <ItemDetailMember category="nik" value={data?.nik} />
+                  <ItemDetailMember category="group" value={data?.group} />
+                  <ItemDetailMember category="position" value={data?.position} />
+                  <ItemDetailMember category="phone" value={`+62${data?.phone}`} />
+                  <ItemDetailMember category="email" value={data?.email} />
+                  <ItemDetailMember category="gender" value={data?.gender == "F" ? "Perempuan" : "Laki-Laki"} />
               </View>
            </View>
         </ScrollView>
--- a/app/(application)/member/edit/[id].tsx
+++ b/app/(application)/member/edit/[id].tsx
@@ -1,22 +1,194 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
-import ButtonSaveHeader from "@/components/buttonSaveHeader"
-import { InputForm } from "@/components/inputForm"
-import SelectForm from "@/components/selectForm"
-import { ColorsStatus } from "@/constants/ColorsStatus"
-import Styles from "@/constants/Styles"
-import { MaterialCommunityIcons } from "@expo/vector-icons"
-import * as ImagePicker from 'expo-image-picker'
-import { router, Stack } from "expo-router"
-import { useState } from "react"
-import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import { InputForm } from "@/components/inputForm";
+import ModalSelect from "@/components/modalSelect";
+import SelectForm from "@/components/selectForm";
+import Styles from "@/constants/Styles";
+import { apiEditUser, apiGetProfile } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
+import * as ImagePicker from "expo-image-picker";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import {
+   Image,
+   Pressable,
+   SafeAreaView,
+   ScrollView,
+   Text,
+   ToastAndroid,
+   View,
+} from "react-native";
+
+type Props = {
+   id: string;
+   name: string;
+   nik: string;
+   email: string;
+   phone: string;
+   gender: string;
+   img: string;
+   isActive: boolean;
+   idGroup: string;
+   idPosition: string;
+   idUserRole: string;
+};

 export default function EditMember() {
-   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>();
+   const [errorImg, setErrorImg] = useState(false)
   const [selectedImage, setSelectedImage] = useState<string | undefined>(undefined);
+   const [choosePosition, setChoosePosition] = useState({ val: "", label: "" });
+   const [chooseRole, setChooseRole] = useState({ val: "", label: "" });
+   const [chooseGender, setChooseGender] = useState({ val: "", label: "" });
+   const [valSelect, setValSelect] = useState<"group" | "position" | "role" | "gender">("group");
+   const [isSelect, setSelect] = useState(false);
+   const [disableBtn, setDisableBtn] = useState(false)
+   const [valChoose, setValChoose] = useState("")
+   const [data, setData] = useState<Props>({
+      id: "",
+      name: "",
+      nik: "",
+      email: "",
+      phone: "",
+      gender: "",
+      img: "",
+      isActive: false,
+      idGroup: "",
+      idPosition: "",
+      idUserRole: "",
+   });
+   const [error, setError] = useState({
+      position: false,
+      nik: false,
+      name: false,
+      phone: false,
+      email: false,
+      gender: false,
+      role: false,
+   });
+
+   async function handleLoad() {
+      try {
+         const response = await apiGetProfile({ id: id });
+         setData(response.data);
+         setChoosePosition({
+            val: response.data.idPosition,
+            label: response.data.position,
+         });
+         setChooseRole({
+            val: response.data.idUserRole,
+            label: response.data.role,
+         });
+         setChooseGender({
+            val: response.data.gender,
+            label: response.data.gender == "M" ? "Laki-laki" : "Perempuan",
+         })
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, []);
+
+   function validationForm(cat: string, val: any, label?: string) {
+      if (cat == "position") {
+         setChoosePosition({ val, label: String(label) });
+         setData({ ...data, idPosition: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, position: true });
+         } else {
+            setError({ ...error, position: false });
+         }
+      } else if (cat == "role") {
+         setChooseRole({ val, label: String(label) });
+         setData({ ...data, idUserRole: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, role: true });
+         } else {
+            setError({ ...error, role: false });
+         }
+      } else if (cat == "nik") {
+         setData({ ...data, nik: val });
+         if (val == "" || val.length !== 16) {
+            setError({ ...error, nik: true });
+         } else {
+            setError({ ...error, nik: false });
+         }
+      } else if (cat == "name") {
+         setData({ ...data, name: val });
+         if (val == "") {
+            setError({ ...error, name: true });
+         } else {
+            setError({ ...error, name: false });
+         }
+      } else if (cat == "email") {
+         setData({ ...data, email: val });
+         if (
+            val == "" ||
+            !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(val)
+         ) {
+            setError({ ...error, email: true });
+         } else {
+            setError({ ...error, email: false });
+         }
+      } else if (cat == "phone") {
+         setData({ ...data, phone: val });
+         if (val == "" || !(val.length >= 10 && val.length <= 15)) {
+            setError({ ...error, phone: true });
+         } else {
+            setError({ ...error, phone: false });
+         }
+      } else if (cat == "gender") {
+         setChooseGender({ val, label: String(label) });
+         setData({ ...data, gender: val });
+         if (val == "" || val == "null") {
+            setError({ ...error, gender: true });
+         } else {
+            setError({ ...error, gender: false });
+         }
+      }
+
+   }
+
+   function checkForm() {
+      if (Object.values(error).some((v) => v == true) == true || Object.values(data).some((v) => v == "") == true) {
+         setDisableBtn(true)
+      } else {
+         setDisableBtn(false)
+      }
+   }
+
+   useEffect(() => {
+      checkForm()
+   }, [error, data])
+
+   async function handleEdit() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const fd = new FormData()
+         fd.append("data", JSON.stringify(
+            { user: hasil, ...data }
+         ))
+         const response = await apiEditUser(fd, id)
+         if (response.success) {
+            ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+            router.replace(`/member/${id}`);
+         } else {
+            ToastAndroid.show(response.message, ToastAndroid.SHORT)
+         }
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+

   const pickImageAsync = async () => {
      let result = await ImagePicker.launchImageLibraryAsync({
-         mediaTypes: ['images'],
+         mediaTypes: ["images"],
         allowsEditing: true,
         quality: 1,
      });
@@ -24,7 +196,7 @@ export default function EditMember() {
      if (!result.canceled) {
         setSelectedImage(result.assets[0].uri);
      } else {
-         alert('Tidak ada gambar yang dipilih');
+         alert("Tidak ada gambar yang dipilih");
      }
   };

@@ -32,16 +204,39 @@ export default function EditMember() {
      <SafeAreaView>
         <Stack.Screen
            options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Edit Anggota',
-               headerTitleAlign: 'center',
-               headerRight: () => <ButtonSaveHeader category="update" onPress={() => { router.back() }} />
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Edit Anggota",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     disable={disableBtn}
+                     category="update"
+                     onPress={() => {
+                        handleEdit()
+                     }}
+                  />
+               ),
            }}
         />
         <ScrollView>
            <View style={[Styles.p15, Styles.mb100]}>
-               <View style={{ justifyContent: 'center', alignItems: 'center' }}>
-                  {
+               <View style={{ justifyContent: "center", alignItems: "center" }}>
+                  <Pressable onPress={pickImageAsync}>
+                     {
+                        <Image
+                           source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
+                           style={[Styles.userProfileBig]}
+                           onError={() => { setErrorImg(true) }}
+                        />
+                     }
+                  </Pressable>
+                  {/* {
                     selectedImage != undefined ? (
                        <Pressable onPress={pickImageAsync}>
                           <Image src={selectedImage} style={[Styles.userProfileBig]} />
@@ -51,29 +246,118 @@ export default function EditMember() {
                           <MaterialCommunityIcons name="account-tie" size={100} color={'gray'} />
                        </Pressable>
                     )
-                  }
+                  } */}
               </View>
-               <SelectForm label="Jabatan" placeholder="Pilih Jabatan" value={chooseGroup.label} required onPress={() => { }} />
-               <SelectForm label="User Role" placeholder="Pilih Role" value={chooseGroup.label} required onPress={() => { }} />
-               <InputForm label="NIK" type="numeric" placeholder="NIK" required />
-               <InputForm label="Nama" type="default" placeholder="Nama" required />
-               <InputForm label="Email" type="default" placeholder="Email" required />
-               <InputForm label="Nomor Telepon" type="numeric" placeholder="8XX-XXX-XXX" required itemLeft={<Text>+62</Text>} />
-               <SelectForm label="Jenis Kelamin" placeholder="Pilih Jenis Kelamin" value={chooseGroup.label} required onPress={() => { }} />
-               {/* <ButtonForm
-                  text="SIMPAN"
+               <SelectForm
+                  label="Jabatan"
+                  placeholder="Pilih Jabatan"
+                  value={choosePosition.label}
+                  required
                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin mengubah data?',
-                        onPress: () => {
-                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
-                           router.back()
-                        }
-                     })
-                  }} /> */}
+                     setValChoose(choosePosition.val);
+                     setValSelect("position");
+                     setSelect(true);
+                  }}
+                  error={error.position}
+                  errorText="Jabatan tidak boleh kosong"
+               />
+               <SelectForm
+                  label="User Role"
+                  placeholder="Pilih Role"
+                  value={chooseRole.label}
+                  required
+                  onPress={() => {
+                     setValChoose(chooseRole.val);
+                     setValSelect("role");
+                     setSelect(true);
+                  }}
+                  error={error.role}
+                  errorText="Role tidak boleh kosong"
+               />
+               <InputForm
+                  label="NIK"
+                  type="numeric"
+                  placeholder="NIK"
+                  required
+                  value={data?.nik}
+                  error={error.nik}
+                  errorText="NIK Harus 16 Karakter"
+                  onChange={val => {
+                     validationForm("nik", val)
+                  }}
+               />
+               <InputForm
+                  label="Nama"
+                  type="default"
+                  placeholder="Nama"
+                  required
+                  value={data?.name}
+                  error={error.name}
+                  errorText="Nama tidak boleh kosong"
+                  onChange={val => {
+                     validationForm("name", val)
+                  }}
+               />
+               <InputForm
+                  label="Email"
+                  type="default"
+                  placeholder="Email"
+                  required
+                  value={data?.email}
+                  error={error.email}
+                  errorText="Email tidak valid"
+                  onChange={val => {
+                     validationForm("email", val)
+                  }}
+               />
+               <InputForm
+                  label="Nomor Telepon"
+                  type="numeric"
+                  placeholder="8XX-XXX-XXX"
+                  required
+                  itemLeft={<Text>+62</Text>}
+                  value={data?.phone}
+                  error={error.phone}
+                  errorText="Nomor Telepon tidak valid"
+                  onChange={val => {
+                     validationForm("phone", val)
+                  }}
+               />
+               <SelectForm
+                  label="Jenis Kelamin"
+                  placeholder="Pilih Jenis Kelamin"
+                  value={chooseGender.label}
+                  required
+                  onPress={() => {
+                     setValChoose(chooseGender.val);
+                     setValSelect("gender");
+                     setSelect(true);
+                  }}
+                  error={error.gender}
+                  errorText="Jenis Kelamin tidak boleh kosong"
+               />
            </View>
         </ScrollView>
+
+         <ModalSelect
+            category={valSelect}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm(valSelect, value.val, value.label);
+            }}
+            title={
+               valSelect == "group"
+                  ? "Lembaga Desa"
+                  : valSelect == "position"
+                     ? "Jabatan"
+                     : valSelect == "role"
+                        ? "User Role"
+                        : "Jenis Kelamin"
+            }
+            open={isSelect}
+            idParent={valSelect == "position" ? data?.idGroup : ""}
+            valChoose={valChoose}
+         />
      </SafeAreaView>
-   )
-}
+   );
+}
--- a/components/itemDetailMember.tsx
+++ b/components/itemDetailMember.tsx
@@ -4,7 +4,7 @@ import { Text, View } from "react-native";

 type Props = {
   category: 'nik' | 'group' | 'position' | 'phone' | 'email' | 'gender' | 'dokumen' | 'type' | 'location' | 'owner' | 'calendar' | 'share'
-   value: string
+   value: string | undefined
   border?: boolean
 }

--- a/components/member/headerMemberDetail.tsx
+++ b/components/member/headerMemberDetail.tsx
@@ -1,20 +1,38 @@
 import Styles from "@/constants/Styles"
+import { apiDeleteUser } from "@/lib/api"
+import { useAuthSession } from "@/providers/AuthProvider"
 import { MaterialCommunityIcons } from "@expo/vector-icons"
+import { router } from "expo-router"
 import { useState } from "react"
 import { ToastAndroid, View } from "react-native"
 import AlertKonfirmasi from "../alertKonfirmasi"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
 import MenuItemRow from "../menuItemRow"
-import { router } from "expo-router"

 type Props = {
-   id: string | string[]
+   active: any,
+   id: string
 }

-export default function HeaderRightMemberDetail({ id }: Props) {
+export default function HeaderRightMemberDetail({ active, id }: Props) {
+   const { token, decryptToken } = useAuthSession()
   const [isVisible, setVisible] = useState(false)

+   async function handleActive() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiDeleteUser({ user: hasil, isActive: active }, id)
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setVisible(false)
+         ToastAndroid.show('Berhasil mengupdate data', ToastAndroid.SHORT)
+         router.replace(`/member/${id}`);
+      }
+
+   }
+
   return (
      <>
         <ButtonMenuHeader onPress={() => { setVisible(true) }} />
@@ -22,14 +40,13 @@ export default function HeaderRightMemberDetail({ id }: Props) {
            <View style={Styles.rowItemsCenter}>
               <MenuItemRow
                  icon={<MaterialCommunityIcons name="toggle-switch-off-outline" color="black" size={25} />}
-                  title="Non Aktifkan"
+                  title={active ? "Non Aktifkan" : "Aktifkan"}
                  onPress={() => {
                     AlertKonfirmasi({
                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menonaktifkan data?',
+                        desc: active ? 'Apakah anda yakin ingin menonaktifkan user?' : 'Apakah anda yakin ingin mengaktifkan user?',
                        onPress: () => {
-                           setVisible(false)
-                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                           handleActive()
                        }
                     })
                  }}
--- a/components/modalSelect.tsx
+++ b/components/modalSelect.tsx
@@ -17,14 +17,15 @@ type Props = {
   category: 'group' | 'status-task' | 'position' | 'role' | 'gender'
   idParent?: string
   onSelect: (value: { val: string, label: string }) => void
+   valChoose?: string
 }

-export default function ModalSelect({ open, close, title, category, idParent, onSelect }: Props) {
+export default function ModalSelect({ open, close, title, category, idParent, onSelect, valChoose }: Props) {
   const { token, decryptToken } = useAuthSession()
   const entityUser = useSelector((state: any) => state.user)
   const dispatch = useDispatch()
   const entitiesGroup = useSelector((state: any) => state.filterGroup)
-   const [chooseValue, setChooseValue] = useState({ val: '', label: '' })
+   const [chooseValue, setChooseValue] = useState({ val: valChoose, label: '' })
   const [data, setData] = useState<any>([])

   async function handleLoadGroup() {
@@ -65,6 +66,7 @@ export default function ModalSelect({ open, close, title, category, idParent, on
      } else if (category == "gender") {
         handleLoadGender()
      }
+      setChooseValue({ ...chooseValue, val: valChoose })
   }, [dispatch, open]);

   function onChoose(val: string, label: string) {
--- a/lib/api.ts
+++ b/lib/api.ts
@@ -127,4 +127,22 @@ export const apiCreateUser = async (data: FormData) => {
      },
   })
   return response.data;
-};
+};
+
+export const apiDeleteUser = async (data: { user: string, isActive: boolean }, id: string) => {
+   await api.delete(`mobile/user/${id}`, { data }).then(response => {
+      return response.data;
+   })
+      .catch(error => {
+         console.error('Error:', error);
+      });
+};
+
+export const apiEditUser = async (data: FormData, id: string) => {
+   const response = await api.put(`/mobile/user/${id}`, data, {
+      headers: {
+         'Content-Type': 'multipart/form-data',
+      },
+   })
+   return response.data;
+};