Merge pull request 'amalia/07-agustus-25' (#16) from amalia/07-agustus-25 into join

Reviewed-on: bip/mobile-darmasaba#16
2025-08-07 14:09:10 +08:00
parent 24c07efb97 9cb848ddd2
commit 0c8297f785
8 changed files with 237 additions and 43 deletions
--- a/app/(application)/edit-profile.tsx
+++ b/app/(application)/edit-profile.tsx
@@ -8,6 +8,7 @@ import Styles from "@/constants/Styles";
 import { apiEditProfile, apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
@@ -229,8 +230,8 @@ export default function EditProfile() {
               ),
            }}
         />
-         <ScrollView>
-            <View style={[Styles.p15, Styles.mb100]}>
+         <ScrollView style={[Styles.h100]}>
+            <View style={[Styles.p15]}>
               <View style={{ justifyContent: "center", alignItems: "center" }}>
                  {
                     selectedImage != undefined ? (
@@ -244,16 +245,20 @@ export default function EditProfile() {
                              style={[Styles.userProfileBig]}
                              onError={() => { setErrorImg(true) }}
                           />
+                           <View style={[Styles.absoluteIconPicker]}>
+                              <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                           </View>
                        </Pressable>
                     ) : (
                        <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) }}
                           />
-                           }
+                           <View style={[Styles.absoluteIconPicker]}>
+                              <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                           </View>
                        </Pressable>
                     )
                  }
--- a/app/(application)/member/create.tsx
+++ b/app/(application)/member/create.tsx
@@ -10,6 +10,7 @@ import { apiCreateUser } from "@/lib/api";
 import { setUpdateMember } from "@/lib/memberSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
 import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useHeaderHeight } from '@react-navigation/elements';
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
@@ -24,7 +25,6 @@ import {
 } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import { useHeaderHeight } from '@react-navigation/elements';

 export default function CreateMember() {
   const headerHeight = useHeaderHeight();
@@ -147,7 +147,7 @@ export default function CreateMember() {
   }, [error, dataForm])

   useEffect(() => {
-      if(entityUser.role !="supadmin" && entityUser.role != "developer"){
+      if (entityUser.role != "supadmin" && entityUser.role != "developer") {
         validationForm("group", entities.idGroup, entities.group)
      }
   }, [])
@@ -173,7 +173,7 @@ export default function CreateMember() {
            fd.append("file", "undefined")
         }

-         const response = await apiCreateUser({data: fd})
+         const response = await apiCreateUser({ data: fd })
         if (response.success) {
            Toast.show({ type: 'small', text1: 'Berhasil menambahkan data', })
            dispatch(setUpdateMember(!update))
@@ -184,7 +184,7 @@ export default function CreateMember() {
      } catch (error) {
         console.error(error)
         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
-      }finally{
+      } finally {
         setLoading(false)
      }
   }
@@ -237,17 +237,16 @@ export default function CreateMember() {
                     {selectedImage != undefined ? (
                        <Pressable onPress={pickImageAsync}>
                           <Image src={selectedImage} style={[Styles.userProfileBig]} />
+                           <View style={[Styles.absoluteIconPicker]}>
+                              <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                           </View>
                        </Pressable>
                     ) : (
-                        <Pressable
-                           onPress={pickImageAsync}
-                           style={[Styles.iconContent, ColorsStatus.gray]}
-                        >
-                           <MaterialCommunityIcons
-                              name="account-tie"
-                              size={100}
-                              color={"gray"}
-                           />
+                        <Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]} >
+                           <MaterialCommunityIcons name="account-tie" size={85} color={"gray"} />
+                           <View style={[Styles.absoluteIconPicker]}>
+                              <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                           </View>
                        </Pressable>
                     )}
                  </View>
--- a/app/(application)/member/edit/[id].tsx
+++ b/app/(application)/member/edit/[id].tsx
@@ -8,6 +8,8 @@ import Styles from "@/constants/Styles";
 import { apiEditUser, apiGetProfile } from "@/lib/api";
 import { setUpdateMember } from "@/lib/memberSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useHeaderHeight } from '@react-navigation/elements';
 import * as ImagePicker from "expo-image-picker";
 import { router, Stack, useLocalSearchParams } from "expo-router";
 import { useEffect, useState } from "react";
@@ -22,7 +24,6 @@ import {
 } from "react-native";
 import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";
-import { useHeaderHeight } from '@react-navigation/elements';

 type Props = {
   id: string;
@@ -208,7 +209,7 @@ export default function EditMember() {
      } catch (error) {
         console.error(error)
         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
-      }finally{
+      } finally {
         setLoading(false)
      }
   }
@@ -268,13 +269,14 @@ export default function EditMember() {
                     {
                        errorImg ?
                           <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) }}
                              />
-                              }
+                              <View style={[Styles.absoluteIconPicker]}>
+                                 <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                              </View>
                           </Pressable>
                           :
                           selectedImage != undefined ? (
@@ -288,6 +290,9 @@ export default function EditMember() {
                                    style={[Styles.userProfileBig]}
                                    onError={() => { setErrorImg(true) }}
                                 />
+                                 <View style={[Styles.absoluteIconPicker]}>
+                                    <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                                 </View>
                              </Pressable>
                           ) : (
                              <Image
--- a/app/(application)/project/create.tsx
+++ b/app/(application)/project/create.tsx
@@ -12,6 +12,7 @@ import SelectForm from "@/components/selectForm";
 import Text from "@/components/Text";
 import Styles from "@/constants/Styles";
 import { apiCreateProject } from "@/lib/api";
+import { setGroupChoose } from "@/lib/groupChoose";
 import { setMemberChoose } from "@/lib/memberChoose";
 import { setUpdateProject } from "@/lib/projectUpdate";
 import { setTaskCreate } from "@/lib/taskCreate";
@@ -29,7 +30,7 @@ import Toast from "react-native-toast-message";
 import { useDispatch, useSelector } from "react-redux";

 export default function CreateProject() {
-   const [loading, setLoading] =useState(false)
+   const [loading, setLoading] = useState(false)
   const { token, decryptToken } = useAuthSession();
   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
   const dispatch = useDispatch();
@@ -40,7 +41,6 @@ export default function CreateProject() {
   const taskCreate = useSelector((state: any) => state.taskCreate);
   const update = useSelector((state: any) => state.projectUpdate)
   const entityUser = useSelector((state: any) => state.user);
-   const userLogin = useSelector((state: any) => state.entities)
   const [fileForm, setFileForm] = useState<any[]>([])
   const [indexDelFile, setIndexDelFile] = useState<number>(0)
   const [disableBtn, setDisableBtn] = useState(true)
@@ -56,10 +56,21 @@ export default function CreateProject() {
      member: false,
   });
   const [hitung, setHitung] = useState(0)
+   let hitungRefresh = 0;
+
+   useEffect(() => {
+      if (hitungRefresh == 0) {
+         dispatch(setGroupChoose(''));
+         dispatch(setTaskCreate([]));
+         dispatch(setMemberChoose([]));
+      }
+      hitungRefresh++;
+   }, []);

   function validationForm(cat: string, val: any, label?: string) {
      if (cat == "group") {
         setChooseGroup({ val, label: String(label) });
+         dispatch(setGroupChoose(val));
         dispatch(setMemberChoose([]));
         setDataForm({ ...dataForm, idGroup: val });
         if (val == "" || val == "null") {
@@ -92,6 +103,7 @@ export default function CreateProject() {
   }

   function handleBack() {
+      dispatch(setGroupChoose(''));
      dispatch(setTaskCreate([]));
      dispatch(setMemberChoose([]));
      router.back();
@@ -130,7 +142,7 @@ export default function CreateProject() {
      } catch (error) {
         console.error(error)
         Toast.show({ type: 'small', text1: 'Terjadi kesalahan', })
-      }finally{
+      } finally {
         setLoading(false)
      }
   }
@@ -239,16 +251,18 @@ export default function CreateProject() {
                  onPress={() => {
                     if (entityUser.role == "supadmin" || entityUser.role == "developer") {
                        if (chooseGroup.val != "") {
-                           setSelect(true);
-                           setValSelect("member");
+                           // setSelect(true);
+                           // setValSelect("member");
+                           router.push(`/project/create/member`);
                        } else {
                           Toast.show({ type: 'small', text1: "Pilih Lembaga Desa terlebih dahulu", })
                        }
                     } else {
-                        validationForm('group', userLogin.idGroup, userLogin.group);
-                        setValChoose(userLogin.idGroup)
-                        setSelect(true);
-                        setValSelect("member");
+                        router.push(`/project/create/member`);
+                        // validationForm('group', userLogin.idGroup, userLogin.group);
+                        // setValChoose(userLogin.idGroup)
+                        // setSelect(true);
+                        // setValSelect("member");
                     }
                  }}
                  error={error.member}
--- a/app/(application)/project/create/member.tsx
+++ b/app/(application)/project/create/member.tsx
@@ -0,0 +1,147 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Text from "@/components/Text";
+import Styles from "@/constants/Styles";
+import { apiGetUser } from "@/lib/api";
+import { setMemberChoose } from "@/lib/memberChoose";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, View } from "react-native";
+import Toast from "react-native-toast-message";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function AddMemberCreateProject() {
+   const dispatch = useDispatch()
+   const { token, decryptToken } = useAuthSession()
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+   const entitiesMember = useSelector((state: any) => state.memberChoose)
+   const entitiesGroup = useSelector((state: any) => state.groupChoose)
+   const entityUser = useSelector((state: any) => state.user)
+   const userLogin = useSelector((state: any) => state.entities)
+
+   async function handleLoadMember() {
+      const hasil = await decryptToken(String(token?.current))
+      let groupFix = userLogin.idGroup
+      if (entityUser.role == 'supadmin' || entityUser.role == 'developer') {
+         groupFix = entitiesGroup
+      }
+
+      const responMemberDivision = await apiGetUser({ user: hasil, active: "true", search: search, group: groupFix })
+      setData(responMemberDivision.data.filter((i: any) => i.idUserRole != 'supadmin'))
+      if (entitiesMember.length > 0) {
+         setSelectMember(entitiesMember)
+      }
+   }
+
+   useEffect(() => {
+      handleLoadMember()
+   }, [search]);
+
+   function onChoose(val: string, label: string, img?: string) {
+      if (selectMember.some((i: any) => i.idUser == val)) {
+         setSelectMember(selectMember.filter((i: any) => i.idUser != val))
+      } else {
+         setSelectMember([...selectMember, { idUser: val, name: label, img }])
+      }
+   }
+
+   async function handleAddMember() {
+      try {
+         dispatch(setMemberChoose(selectMember))
+         router.back()
+      } catch (error) {
+         console.error(error)
+         Toast.show({ type: 'small', text1: 'Gagal menambahkan anggota', })
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pilih Anggota',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="create"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => {
+                        handleAddMember()
+                     }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <InputSearch onChange={(val) => setSearch(val)} value={search} />
+
+            {
+               selectMember.length > 0
+                  ?
+                  <View>
+                     <ScrollView horizontal style={[Styles.mb10, Styles.pv10]}>
+                        {
+                           selectMember.map((item: any, index: any) => (
+                              <ImageWithLabel
+                                 key={index}
+                                 label={item.name}
+                                 src={`https://wibu-storage.wibudev.com/api/files/${item.img}`}
+                                 onClick={() => onChoose(item.idUser, item.name, item.img)}
+                              />
+                           ))
+                        }
+                     </ScrollView>
+                  </View>
+
+                  :
+                  <Text style={[Styles.textDefault, Styles.cGray, Styles.pv05, { textAlign: 'center' }]}>Tidak ada member yang dipilih</Text>
+            }
+            <ScrollView>
+
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 onChoose(item.id, item.name, item.img)
+                              }}
+                           >
+                              <View style={[Styles.rowItemsCenter]}>
+                                 <ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} border />
+                                 <View style={[Styles.ml10]}>
+                                    <Text style={[Styles.textDefault]}>{item.name}</Text>
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} color={'black'} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}
--- a/constants/Styles.ts
+++ b/constants/Styles.ts
@@ -585,6 +585,14 @@ const Styles = StyleSheet.create({
      width: '90%',
      borderWidth: 1,
      borderColor: '#d6d8f6',
+   },
+   absoluteIconPicker: {
+      backgroundColor: '#384288',
+      padding: 5,
+      borderRadius: 100,
+      bottom: 5,
+      right: 5,
+      position: 'absolute'
   }
 })

--- a/lib/groupChoose.ts
+++ b/lib/groupChoose.ts
@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const groupChoose = createSlice({
+   name: 'groupChoose',
+   initialState: '',
+   reducers: {
+      setGroupChoose: (state, action) => {
+         return action.payload;
+      },
+   },
+});
+
+export const { setGroupChoose } = groupChoose.actions;
+export default groupChoose.reducer;
--- a/lib/store.ts
+++ b/lib/store.ts
@@ -19,6 +19,7 @@ import projectUpdate from './projectUpdate';
 import taskCreate from './taskCreate';
 import taskUpdate from './taskUpdate';
 import userReducer from './userSlice';
+import groupChoose from './groupChoose';

 const store = configureStore({
   reducer: {
@@ -42,6 +43,7 @@ const store = configureStore({
      dokumenUpdate: dokumenUpdate,
      notificationUpdate: notificationUpdate,
      calendarCreate: calendarCreate,
+      groupChoose: groupChoose,
   }
 });