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

Reviewed-on: bip/mobile-darmasaba#16

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>
+         <ScrollView style={[Styles.h100]}>
-            <View style={[Styles.p15, Styles.mb100]}>
+            <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
-                              <Image
+                              source={errorImg ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
-                                 source={errorImg ? require("../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
+                              style={[Styles.userProfileBig]}
-                                 style={[Styles.userProfileBig]}
+                              onError={() => { setErrorImg(true) }}
-                                 onError={() => { setErrorImg(true) }}
+                           />
-                              />
+                           <View style={[Styles.absoluteIconPicker]}>
-                           }
+                              <MaterialCommunityIcons name="image" color={'white'} size={15} />
+                           </View>
                         </Pressable>
                      )
                   }

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)
       }
    }
@@ -227,9 +227,9 @@ export default function CreateMember() {
             }}
          />
          <KeyboardAvoidingView
-             style={[Styles.h100]}
+            style={[Styles.h100]}
-             behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-             keyboardVerticalOffset={headerHeight}
+            keyboardVerticalOffset={headerHeight}
          >
             <ScrollView>
                <View style={[Styles.p15]}>
@@ -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
+                        <Pressable onPress={pickImageAsync} style={[Styles.iconContent, ColorsStatus.gray]} >
-                           onPress={pickImageAsync}
+                           <MaterialCommunityIcons name="account-tie" size={85} color={"gray"} />
-                           style={[Styles.iconContent, ColorsStatus.gray]}
+                           <View style={[Styles.absoluteIconPicker]}>
-                        >
+                              <MaterialCommunityIcons name="image" color={'white'} size={15} />
-                           <MaterialCommunityIcons
+                           </View>
-                              name="account-tie"
-                              size={100}
-                              color={"gray"}
-                           />
                         </Pressable>
                      )}
                   </View>

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
-                                 <Image
+                                 source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
-                                    source={errorImg ? require("../../../../assets/images/user.jpg") : { uri: `https://wibu-storage.wibudev.com/api/files/${data?.img}` }}
+                                 style={[Styles.userProfileBig]}
-                                    style={[Styles.userProfileBig]}
+                                 onError={() => { setErrorImg(true) }}
-                                    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

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);
+                           // setSelect(true);
-                           setValSelect("member");
+                           // 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);
+                        router.push(`/project/create/member`);
-                        setValChoose(userLogin.idGroup)
+                        // validationForm('group', userLogin.idGroup, userLogin.group);
-                        setSelect(true);
+                        // setValChoose(userLogin.idGroup)
-                        setValSelect("member");
+                        // setSelect(true);
+                        // setValSelect("member");
                      }
                   }}
                   error={error.member}

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>
+   )
+}

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'
    }
 })
 

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;

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,
    }
 });