upd: division

Deskripsi:
- tambah divisi

nb: blm selesai

No Issues

app/(application)/division/create.tsx

@@ -1,49 +1,122 @@
-import ButtonBackHeader from "@/components/buttonBackHeader"
-import ButtonSaveHeader from "@/components/buttonSaveHeader"
-import ButtonSelect from "@/components/buttonSelect"
-import { InputForm } from "@/components/inputForm"
-import SelectForm from "@/components/selectForm"
-import Styles from "@/constants/Styles"
-import { router, Stack } from "expo-router"
-import { useState } from "react"
-import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonNextHeader from "@/components/buttonNextHeader";
+import { InputForm } from "@/components/inputForm";
+import ModalSelect from "@/components/modalSelect";
+import SelectForm from "@/components/selectForm";
+import Styles from "@/constants/Styles";
+import { setFormCreateDivision } from "@/lib/divisionCreate";
+import { router, Stack } from "expo-router";
+import { useState } from "react";
+import { SafeAreaView, ScrollView, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
 
 export default function CreateDivision() {
-   const [chooseGroup, setChooseGroup] = useState({ val: '', label: '' })
+   const [isSelect, setSelect] = useState(false);
+   const [chooseGroup, setChooseGroup] = useState({ val: "", label: "" });
+   const dispatch = useDispatch();
+   const update = useSelector((state: any) => state.divisionCreate);
+   const [error, setError] = useState({
+      idGroup: false,
+      name: false,
+   });
+   const [dataForm, setDataForm] = useState({
+      idGroup: "",
+      name: "",
+      desc: "",
+   });
+
+   function validationForm(cat: string, val: any, label?: string) {
+      if (cat == "group") {
+         setChooseGroup({ val, label: String(label) });
+         dispatch(setFormCreateDivision({ ...update, member: [], admin: [] }));
+         setDataForm({ ...dataForm, idGroup: val });
+         if (val == "" || val == "null") {
+            setError((error) => ({ ...error, group: true }));
+         } else {
+            setError((error) => ({ ...error, group: false }));
+         }
+      } else if (cat == "name") {
+         setDataForm({ ...dataForm, name: val });
+         if (val == "" || val == "null") {
+            setError((error) => ({ ...error, name: true }));
+         } else {
+            setError((error) => ({ ...error, name: false }));
+         }
+      } else if (cat == "desc") {
+         setDataForm({ ...dataForm, desc: val });
+         if (val == "" || val == "null") {
+            setError((error) => ({ ...error, desc: true }));
+         } else {
+            setError((error) => ({ ...error, desc: false }));
+         }
+      }
+   }
+
+   function handleSetData() {
+      dispatch(setFormCreateDivision({ data: dataForm }))
+      router.push(`./create/add-member`)
+   }
 
    return (
       <SafeAreaView>
          <Stack.Screen
             options={{
-               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
-               headerTitle: 'Tambah Divisi',
-               headerTitleAlign: 'center',
-               headerRight: () => <ButtonSaveHeader category="create" onPress={() => {
-                  ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
-                  router.push('/division')
-               }} />
+               headerLeft: () => (
+                  <ButtonBackHeader
+                     onPress={() => {
+                        router.back();
+                     }}
+                  />
+               ),
+               headerTitle: "Tambah Divisi",
+               headerTitleAlign: "center",
+               headerRight: () => (
+                  <ButtonNextHeader
+                     onPress={() => { handleSetData() }}
+                     disable={error.idGroup || error.name || chooseGroup.val == "" || chooseGroup.val == "null" || dataForm.name == "" || dataForm.name == "null"}
+                  />
+               ),
             }}
          />
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
-               <SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={chooseGroup.label} required onPress={() => { }} />
-               <InputForm label="Nama Divisi" type="default" placeholder="Nama Divisi" required />
-               <InputForm label="Deskripsi" type="default" placeholder="Deskripsi Divisi" />
-               <ButtonSelect value="Pilih Anggota" />
-               {/* <ButtonForm
-                  text="SIMPAN"
-                  onPress={() => {
-                     AlertKonfirmasi({
-                        title: 'Konfirmasi',
-                        desc: 'Apakah anda yakin ingin menambahkan data?',
-                        onPress: () => {
-                           ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
-                           router.push('/division/123')
-                        }
-                     })
-                  }} /> */}
+               <SelectForm
+                  label="Lembaga Desa"
+                  placeholder="Pilih Lembaga Desa"
+                  value={chooseGroup.label}
+                  required
+                  onPress={() => { setSelect(true) }}
+               />
+               <InputForm
+                  label="Nama Divisi"
+                  type="default"
+                  placeholder="Nama Divisi"
+                  required
+                  value={dataForm.name}
+                  onChange={(val) => validationForm('name', val)}
+                  error={error.name}
+                  errorText="Nama divisi tidak boleh kosong"
+               />
+               <InputForm
+                  label="Deskripsi"
+                  type="default"
+                  placeholder="Deskripsi Divisi"
+                  value={dataForm.desc}
+                  onChange={(val) => setDataForm({ ...dataForm, desc: val })}
+               />
             </View>
          </ScrollView>
+
+         <ModalSelect
+            category={"group"}
+            close={setSelect}
+            onSelect={(value) => {
+               validationForm('group', value.val, value.label);
+            }}
+            title="Lembaga Desa"
+            open={isSelect}
+            valChoose={chooseGroup.val}
+         />
       </SafeAreaView>
-   )
-}
+   );
+}

app/(application)/division/create/add-admin-division.tsx

@@ -0,0 +1,110 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonSaveHeader from "@/components/buttonSaveHeader";
+import ImageUser from "@/components/imageNew";
+import Styles from "@/constants/Styles";
+import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function CreateDivisionAddAdmin() {
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const update = useSelector((state: any) => state.divisionCreate)
+   const dispatch = useDispatch()
+
+   async function handleLoadMember() {
+      setData(update.member)
+   }
+
+   useEffect(() => {
+      handleLoadMember()
+   }, [])
+
+   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(setUpdateDivision({ ...update, admin: selectMember }))
+         // router.push(`./add-admin-division`)
+      } catch (error) {
+         console.error(error)
+         ToastAndroid.show('Gagal menambahkan anggota', ToastAndroid.SHORT)
+      }
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pilih Admin Divisi',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonSaveHeader
+                     category="update"
+                     disable={selectMember.length > 0 ? false : true}
+                     onPress={() => {
+                        handleAddMember()
+                     }}
+                  />
+               )
+            }}
+         />
+         <View style={[Styles.p15]}>
+            <ScrollView>
+               {
+                  data.length > 0 ?
+                     data.map((item: any, index: any) => {
+                        const found = dataOld.some((i: any) => i.idUser == item.id)
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 !found && 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]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
+                                    {
+                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                    }
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

app/(application)/division/create/add-member.tsx

@@ -0,0 +1,136 @@
+import ButtonBackHeader from "@/components/buttonBackHeader";
+import ButtonNextHeader from "@/components/buttonNextHeader";
+import ImageUser from "@/components/imageNew";
+import ImageWithLabel from "@/components/imageWithLabel";
+import InputSearch from "@/components/inputSearch";
+import Styles from "@/constants/Styles";
+import { apiGetUser } from "@/lib/api";
+import { setUpdateDivision } from "@/lib/divisionUpdate";
+import { useAuthSession } from "@/providers/AuthProvider";
+import { AntDesign } from "@expo/vector-icons";
+import { router, Stack, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   idUser: string,
+   name: string,
+   img: string
+}
+
+export default function CreateDivisionAddMember() {
+   const { token, decryptToken } = useAuthSession()
+   const { id } = useLocalSearchParams<{ id: string }>()
+   const [dataOld, setDataOld] = useState<Props[]>([])
+   const [data, setData] = useState<Props[]>([])
+   const [selectMember, setSelectMember] = useState<any[]>([])
+   const [search, setSearch] = useState('')
+   const update = useSelector((state: any) => state.divisionCreate)
+   const dispatch = useDispatch()
+
+
+   async function handleLoadMember() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetUser({ user: hasil, active: "true", search: search, group: String(update.data.idGroup) })
+      setData(response.data.filter((i: any) => i.idUserRole != 'supadmin'))
+      if (update.member.length > 0) {
+         setSelectMember(update.member)
+      }
+   }
+
+   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() {
+      dispatch(setUpdateDivision({ ...update, member: selectMember }))
+      router.push(`./add-admin-division`)
+   }
+
+
+   return (
+      <SafeAreaView>
+         <Stack.Screen
+            options={{
+               headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
+               headerTitle: 'Pilih Anggota',
+               headerTitleAlign: 'center',
+               headerRight: () => (
+                  <ButtonNextHeader
+                     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) => {
+                        const found = dataOld.some((i: any) => i.idUser == item.id)
+                        return (
+                           <Pressable
+                              key={index}
+                              style={[Styles.itemSelectModal]}
+                              onPress={() => {
+                                 !found && 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]} numberOfLines={1} ellipsizeMode="tail">{item.name}</Text>
+                                    {
+                                       found && <Text style={[Styles.textInformation, Styles.cGray]}>sudah menjadi anggota</Text>
+                                    }
+                                 </View>
+                              </View>
+                              {
+                                 selectMember.some((i: any) => i.idUser == item.id) && <AntDesign name="check" size={20} />
+                              }
+                           </Pressable>
+                        )
+                     }
+                     )
+                     :
+                     <Text style={[Styles.textDefault, { textAlign: 'center' }]}>Tidak ada data</Text>
+               }
+            </ScrollView>
+         </View>
+      </SafeAreaView>
+   )
+}

components/buttonNextHeader.tsx

@@ -0,0 +1,20 @@
+import { Feather } from "@expo/vector-icons"
+import { ButtonHeader } from "./buttonHeader"
+
+type Props = {
+   onPress?: () => void
+   disable?: boolean
+}
+
+export default function ButtonNextHeader({ onPress, disable }: Props) {
+   return (
+      <>
+         <ButtonHeader
+            item={<Feather name="chevron-right" size={20} color={disable ? "grey" : "white"} />}
+            onPress={() => {
+               !disable && onPress && onPress()
+            }}
+         />
+      </>
+   )
+}

lib/api.ts

@@ -399,6 +399,12 @@ export const apiGetDivisionMember = async ({ user, id, search }: { user: string,
    return response.data;
 };
 
+export const apiCreateDivision = async (data: { data: { idGroup: string, name: string, desc: string }, member: [], admin: string[] }) => {
+   const response = await api.post(`/mobile/division`, data)
+   return response.data;
+};
+
+
 export const apiGetDiscussion = async ({ user, search, division, active }: { user: string, search: string, division: string, active?: string }) => {
    const response = await api.get(`mobile/discussion?user=${user}&active=${active}&search=${search}&division=${division}`);
    return response.data;

lib/divisionCreate.ts

@@ -0,0 +1,20 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const divisionCreate = createSlice({
+   name: 'divisionCreate',
+   initialState: {
+      data: {
+         idGroup: "",
+         name: "",
+         desc: "",
+      }, member: [], admin: [],
+   },
+   reducers: {
+      setFormCreateDivision: (state, action) => {
+         return action.payload;
+      },
+   },
+});
+
+export const { setFormCreateDivision } = divisionCreate.actions;
+export default divisionCreate.reducer;

lib/store.ts

@@ -4,6 +4,7 @@ import bannerReducer from './bannerSlice';
 import calendarUpdate from './calendarUpdate';
 import discussionGeneralDetailUpdate from './discussionGeneralDetail';
 import discussionUpdate from './discussionUpdate';
+import divisionCreate from './divisionCreate';
 import divisionUpdate from './divisionUpdate';
 import entitiesReducer from './entitiesSlice';
 import filterSlice from './filterSlice';
@@ -34,6 +35,7 @@ const store = configureStore({
       discussionUpdate: discussionUpdate,
       calendarUpdate: calendarUpdate,
       taskUpdate: taskUpdate,
+      divisionCreate: divisionCreate,
    }
 });