upd: member

Deskripsi:
- detail member
- aktivasi member
- edit member

No Issues

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>
@@ -15,7 +51,7 @@ export default function MemberDetail() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Anggota',
                headerTitleAlign: 'center',
-               headerRight: () => <HeaderRightMemberDetail id={id} />,
+               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.textSubtitle, Styles.cWhite, Styles.mt10]}>{data?.name}</Text>
-                  <Text style={[Styles.textMediumNormal, Styles.cWhite]}>Super Admin</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="nik" value={data?.nik} />
-                  <ItemDetailMember category="group" value="Dinas" />
+                  <ItemDetailMember category="group" value={data?.group} />
-                  <ItemDetailMember category="position" value="Sekretaris" />
+                  <ItemDetailMember category="position" value={data?.position} />
-                  <ItemDetailMember category="phone" value="08980873782" />
+                  <ItemDetailMember category="phone" value={`+62${data?.phone}`} />
-                  <ItemDetailMember category="email" value="putri@gmail.com" />
+                  <ItemDetailMember category="email" value={data?.email} />
-                  <ItemDetailMember category="gender" value="Perempuan" />
+                  <ItemDetailMember category="gender" value={data?.gender == "F" ? "Perempuan" : "Laki-Laki"} />
                </View>
             </View>
          </ScrollView>

app/(application)/member/edit/[id].tsx

@@ -1,22 +1,194 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
+import ButtonBackHeader from "@/components/buttonBackHeader";
-import ButtonSaveHeader from "@/components/buttonSaveHeader"
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
-import { InputForm } from "@/components/inputForm"
+import { InputForm } from "@/components/inputForm";
-import SelectForm from "@/components/selectForm"
+import ModalSelect from "@/components/modalSelect";
-import { ColorsStatus } from "@/constants/ColorsStatus"
+import SelectForm from "@/components/selectForm";
-import Styles from "@/constants/Styles"
+import Styles from "@/constants/Styles";
-import { MaterialCommunityIcons } from "@expo/vector-icons"
+import { apiEditUser, apiGetProfile } from "@/lib/api";
-import * as ImagePicker from 'expo-image-picker'
+import { useAuthSession } from "@/providers/AuthProvider";
-import { router, Stack } from "expo-router"
+import * as ImagePicker from "expo-image-picker";
-import { useState } from "react"
+import { router, Stack, useLocalSearchParams } from "expo-router";
-import { Image, Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
+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() }} />,
+               headerLeft: () => (
-               headerTitle: 'Edit Anggota',
+                  <ButtonBackHeader
-               headerTitleAlign: 'center',
+                     onPress={() => {
-               headerRight: () => <ButtonSaveHeader category="update" onPress={() => { router.back() }} />
+                        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
-               <SelectForm label="User Role" placeholder="Pilih Role" value={chooseGroup.label} required onPress={() => { }} />
+                  label="Jabatan"
-               <InputForm label="NIK" type="numeric" placeholder="NIK" required />
+                  placeholder="Pilih Jabatan"
-               <InputForm label="Nama" type="default" placeholder="Nama" required />
+                  value={choosePosition.label}
-               <InputForm label="Email" type="default" placeholder="Email" required />
+                  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"
                   onPress={() => {
-                     AlertKonfirmasi({
+                     setValChoose(choosePosition.val);
-                        title: 'Konfirmasi',
+                     setValSelect("position");
-                        desc: 'Apakah anda yakin ingin mengubah data?',
+                     setSelect(true);
-                        onPress: () => {
+                  }}
-                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
+                  error={error.position}
-                           router.back()
+                  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>
-      </SafeAreaView>
+
-   )
+         <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>
+   );
 }

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
 }
 

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)
+                           handleActive()
-                           ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
                         }
                      })
                   }}

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) {

lib/api.ts

@@ -128,3 +128,21 @@ 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;
+};