upd: position

Deskripsi:
- update load list data position
- update filter page
- update select form
- tambah data position

No Issues

app/(application)/position/_layout.tsx

@@ -9,22 +9,88 @@ import ModalSelect from "@/components/modalSelect"
 import SelectForm from "@/components/selectForm"
 import { Headers } from "@/constants/Headers"
 import Styles from "@/constants/Styles"
+import { apiCreatePosition } from "@/lib/api"
+import { setUpdatePosition } from "@/lib/positionSlice"
+import { useAuthSession } from "@/providers/AuthProvider"
 import { AntDesign } from "@expo/vector-icons"
 import { router, Stack } from "expo-router"
 import { useState } from "react"
 import { ToastAndroid, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
 
 export default function RootLayout() {
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.positionUpdate)
+   const { token, decryptToken } = useAuthSession()
+   const entityUser = useSelector((state: any) => state.user)
    const [isVisible, setVisible] = useState(false)
    const [isVisibleTambah, setVisibleTambah] = useState(false)
    const [isFilter, setFilter] = useState(false)
    const [isSelect, setSelect] = useState(false)
    const [choose, setChoose] = useState({ val: '', label: '' })
+   const [dataForm, setDataForm] = useState({
+      name: "",
+      idGroup: "",
+   })
+   const [error, setError] = useState({
+      name: false,
+      idGroup: false
+   });
+
+   function validationForm(val: any, cat: 'name' | 'idGroup') {
+      if (cat === 'name') {
+         setDataForm({ ...dataForm, name: val })
+         if (val == "") {
+            setError({ ...error, name: true })
+         } else {
+            setError({ ...error, name: false })
+         }
+      } else if (cat === "idGroup") {
+         setDataForm({ ...dataForm, idGroup: val })
+         if (val == "") {
+            setError({ ...error, idGroup: true })
+         } else {
+            setError({ ...error, idGroup: false })
+         }
+      }
+   }
+
+   function checkAll() {
+      let nilai = true
+      if (dataForm.name == "") {
+         setError(error => ({ ...error, name: true }))
+         nilai = false
+      }
+
+      if ((entityUser.role == "supadmin" || entityUser.role == "developer") && (dataForm.idGroup == "" || String(dataForm.idGroup) == "null")) {
+         setError(error => ({ ...error, idGroup: true }))
+         nilai = false
+      }
+
+      return nilai
+   }
+
+   function onCheck() {
+      const check = checkAll()
+      if (!check)
+         return false
+      handleTambah()
+   }
+
+
+   async function handleTambah() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiCreatePosition({ user: hasil, name: dataForm.name, idGroup: dataForm.idGroup })
+         dispatch(setUpdatePosition(!update))
+      } catch (error) {
+         console.error(error)
+      } finally {
+         setVisibleTambah(false)
+         setVisible(false)
+         ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
+      }
 
-   function handleTambah() {
-      setVisibleTambah(false)
-      setVisible(false)
-      ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
    }
 
    return (
@@ -34,7 +100,7 @@ export default function RootLayout() {
                headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
                headerTitle: 'Jabatan',
                headerTitleAlign: 'center',
-               headerRight: () => <ButtonMenuHeader onPress={() => { setVisible(true) }} />
+               headerRight: () => entityUser.role != 'user' ? <ButtonMenuHeader onPress={() => { setVisible(true) }} /> : <></>
             }} />
          </Stack>
 
@@ -48,25 +114,47 @@ export default function RootLayout() {
                      setVisibleTambah(true)
                   }}
                />
-               <MenuItemRow
+               {
-                  icon={<AntDesign name="filter" color="black" size={25} />}
+                  (entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
-                  title="Filter"
+                  <MenuItemRow
-                  onPress={() => { setFilter(true) }}
+                     icon={<AntDesign name="filter" color="black" size={25} />}
-               />
+                     title="Filter"
+                     onPress={() => { setFilter(true) }}
+                  />
+               }
             </View>
          </DrawerBottom>
 
-         <DrawerBottom animation="slide" isVisible={isVisibleTambah} setVisible={setVisibleTambah} title="Tambah Lembaga Desa">
+         <DrawerBottom animation="slide" height={45} isVisible={isVisibleTambah} setVisible={setVisibleTambah} title="Tambah Jabatan">
-            <View style={{ justifyContent: 'space-between', flex: 1 }}>
+            <View style={{ flex: 1, justifyContent: 'space-between' }}>
                <View>
-                  <SelectForm label="Lembaga Desa" placeholder="Pilih Lembaga Desa" value={choose.label} required onPress={() => {
+                  {
-                     setVisibleTambah(false)
+                     (entityUser.role == 'supadmin' || entityUser.role == 'developer') &&
-                     setSelect(true)
+                     <SelectForm
-                  }} />
+                        label="Lembaga Desa"
-                  <InputForm type="default" placeholder="Nama Jabatan" required label="Jabatan" />
+                        placeholder="Pilih Lembaga Desa"
+                        value={choose.label}
+                        required
+                        onPress={() => {
+                           setVisibleTambah(false)
+                           setSelect(true)
+                        }}
+                        error={error.idGroup}
+                        errorText="Lembaga Desa harus diisi"
+                     />
+                  }
+                  <InputForm
+                     type="default"
+                     placeholder="Nama Jabatan"
+                     required
+                     label="Jabatan"
+                     onChange={(value) => { validationForm(value, 'name') }}
+                     error={error.name}
+                     errorText="Nama jabatan harus diisi"
+                  />
                </View>
-               <View>
+               <View style={Styles.mb30}>
-                  <ButtonForm text="SIMPAN" onPress={() => { handleTambah() }} />
+                  <ButtonForm text="SIMPAN" onPress={() => { onCheck() }} />
                </View>
             </View>
          </DrawerBottom>
@@ -80,12 +168,12 @@ export default function RootLayout() {
             category="group"
             close={setSelect}
             onSelect={(value) => {
+               validationForm(value.val, 'idGroup')
                setChoose(value)
                setSelect(false)
                setVisibleTambah(true)
             }}
             title="Lembaga Desa"
-            choose={choose.val}
             open={isSelect}
          />
       </>

app/(application)/position/index.tsx

@@ -8,15 +8,49 @@ import InputSearch from "@/components/inputSearch";
 import MenuItemRow from "@/components/menuItemRow";
 import { ColorsStatus } from "@/constants/ColorsStatus";
 import Styles from "@/constants/Styles";
+import { apiGetPosition } from "@/lib/api";
+import { useAuthSession } from "@/providers/AuthProvider";
 import { AntDesign, Feather, MaterialCommunityIcons } from "@expo/vector-icons";
 import { router, useLocalSearchParams } from "expo-router";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native";
+import { useDispatch, useSelector } from "react-redux";
+
+type Props = {
+   name: string;
+   idGroup: string;
+   group: string;
+   id: string;
+   isActive: boolean
+}
 
 export default function Index() {
-   const { active } = useLocalSearchParams<{ active?: string }>()
+   const { token, decryptToken } = useAuthSession()
+   const entityUser = useSelector((state: any) => state.user)
+   const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
    const [isModal, setModal] = useState(false)
    const [isVisibleEdit, setVisibleEdit] = useState(false)
+   const [data, setData] = useState<Props[]>([])
+   const [search, setSearch] = useState('')
+   const [nameGroup, setNameGroup] = useState('')
+
+   const dispatch = useDispatch()
+   const update = useSelector((state: any) => state.positionUpdate)
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current))
+         const response = await apiGetPosition({ user: hasil, active: String(active), search: search, group: String(group) })
+         setData(response.data)
+         setNameGroup(response.filter.name)
+      } catch (error) {
+         console.error(error)
+      }
+   }
+
+   useEffect(() => {
+      handleLoad()
+   }, [active, search, group, update])
 
    function handleEdit() {
       setVisibleEdit(false)
@@ -44,77 +78,35 @@ export default function Index() {
                      icon={<AntDesign name="closecircleo" color={active == "false" ? 'white' : 'black'} size={20} />}
                      n={2} />
                </View>
-               <InputSearch />
+               <InputSearch onChange={setSearch} />
-               <View style={[Styles.mv05]}>
+               {
-                  <Text>Filter : Dinas</Text>
+                  (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-               </View>
+                  <View style={[Styles.mv05]}>
+                     <Text>Filter : {nameGroup}</Text>
+                  </View>
+               }
                <View>
-                  <BorderBottomItem
+                  {
-                     onPress={() => { setModal(true) }}
+                     data.length > 0 ?
-                     borderType="all"
+                        data.map((item, index) => {
-                     icon={
+                           return (
-                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                              <BorderBottomItem
-                           <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
+                                 key={index}
-                        </View>
+                                 onPress={() => { setModal(true) }}
-                     }
+                                 borderType="all"
-                     title="Anggota"
+                                 icon={
-                     subtitle="Dinas"
+                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                  />
+                                       <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
-                  <BorderBottomItem
+                                    </View>
-                     onPress={() => { setModal(true) }}
+                                 }
-                     borderType="all"
+                                 title={item.name}
-                     icon={
+                                 subtitle={item.group}
-                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                              />
-                           <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
+                           )
-                        </View>
+                        })
-                     }
+                        :
-                     title="Bendahara"
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
-                     subtitle="Dinas"
+                  }
-                  />
-                  <BorderBottomItem
-                     onPress={() => { setModal(true) }}
-                     borderType="all"
-                     icon={
-                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                           <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
-                        </View>
-                     }
-                     title="Ketua"
-                     subtitle="Dinas"
-                  />
-                  <BorderBottomItem
-                     onPress={() => { setModal(true) }}
-                     borderType="all"
-                     icon={
-                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                           <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
-                        </View>
-                     }
-                     title="Sekretaris"
-                     subtitle="Dinas"
-                  />
-                  <BorderBottomItem
-                     onPress={() => { setModal(true) }}
-                     borderType="all"
-                     icon={
-                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                           <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
-                        </View>
-                     }
-                     title="Kepala TU"
-                     subtitle="Dinas"
-                  />
-                  <BorderBottomItem
-                     onPress={() => { setModal(true) }}
-                     borderType="all"
-                     icon={
-                        <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                           <MaterialCommunityIcons name="account-tie" size={25} color={'#384288'} />
-                        </View>
-                     }
-                     title="Wakil Kepala TU"
-                     subtitle="Dinas"
-                  />
                </View>
             </View>
          </ScrollView>

components/modalFilter.tsx

@@ -1,9 +1,14 @@
-import { Pressable, Text, View } from "react-native"
-import DrawerBottom from "./drawerBottom"
-import { AntDesign } from "@expo/vector-icons"
 import Styles from "@/constants/Styles"
-import { ButtonForm } from "./buttonForm"
+import { apiGetGroup } from "@/lib/api"
+import { setEntityFilterGroup } from "@/lib/filterSlice"
+import { useAuthSession } from "@/providers/AuthProvider"
+import { AntDesign } from "@expo/vector-icons"
 import { router } from "expo-router"
+import { useEffect, useState } from "react"
+import { Pressable, ScrollView, Text, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+import { ButtonForm } from "./buttonForm"
+import DrawerBottom from "./drawerBottom"
 
 
 type Props = {
@@ -13,31 +18,50 @@ type Props = {
 }
 
 export default function ModalFilter({ open, close, page }: Props) {
+   const { token, decryptToken } = useAuthSession()
+   const dispatch = useDispatch()
+   const entities = useSelector((state: any) => state.filterGroup)
+   const [chooseGroup, setChooseGroup] = useState('')
+
+   async function handleLoad() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetGroup({ active: 'true', user: hasil, search: '' })
+      dispatch(setEntityFilterGroup(response.data))
+   }
+
+   useEffect(() => {
+      if (entities.length == 0) {
+         handleLoad()
+      }
+   }, [dispatch]);
+
+
+
+
    return (
       <DrawerBottom animation="slide" isVisible={open} setVisible={close} title="Filter" height={75}>
          <View style={{ justifyContent: 'space-between', flex: 1 }}>
-            <View>
+            <ScrollView>
-               <Pressable style={[Styles.itemSelectModal]}>
+               <View>
-                  <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
+                  {
-                  <AntDesign name="check" size={20} />
+                     entities.map((item: any, index: any) => (
-               </Pressable>
+                        <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
-               <Pressable style={[Styles.itemSelectModal]}>
+                           <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
-                  <Text>Adat</Text>
+                           {
-               </Pressable>
+                              chooseGroup == item.id && <AntDesign name="check" size={20} />
-               <Pressable style={[Styles.itemSelectModal]}>
+                           }
-                  <Text>Karang Taruna</Text>
+                        </Pressable>
-               </Pressable>
+                     ))
-               <Pressable style={[Styles.itemSelectModal]}>
+                  }
-                  <Text>PKK</Text>
+               </View>
-               </Pressable>
+            </ScrollView>
-            </View>
             <View>
                <ButtonForm text="Terapkan" onPress={() => {
                   close(false)
                   page == 'project' ?
                      router.push(`/${page}?status=0`)
                      :
-                     router.push(`/${page}?active=true`)
+                     router.push(`/${page}?active=true&group=${chooseGroup}`)
                }} />
             </View>
          </View>

components/modalSelect.tsx

@@ -1,62 +1,78 @@
-import { Pressable, Text, View } from "react-native"
-import DrawerBottom from "./drawerBottom"
 import Styles from "@/constants/Styles"
+import { apiGetGroup } from "@/lib/api"
+import { setEntityFilterGroup } from "@/lib/filterSlice"
+import { useAuthSession } from "@/providers/AuthProvider"
 import { AntDesign } from "@expo/vector-icons"
-import { useState } from "react"
+import { useEffect, useState } from "react"
+import { Pressable, ScrollView, Text, View } from "react-native"
+import { useDispatch, useSelector } from "react-redux"
+import DrawerBottom from "./drawerBottom"
 
 type Props = {
    open: boolean
    close: (value: boolean) => void
    title: string
    category: 'group' | 'status-task'
-   choose: string
+
    onSelect: (value: { val: string, label: string }) => void
 }
 
-export default function ModalSelect({ open, close, title, category, choose, onSelect }: Props) {
+export default function ModalSelect({ open, close, title, category, onSelect }: Props) {
-   const [isChoose, setChoose] = useState(choose)
+   // const [isChoose, setChoose] = useState(choose)
+   const { token, decryptToken } = useAuthSession()
+   const dispatch = useDispatch()
+   const entitiesGroup = useSelector((state: any) => state.filterGroup)
+   const [chooseValue, setChooseValue] = useState({ val: '', label: '' })
+
+   async function handleLoadGroup() {
+      const hasil = await decryptToken(String(token?.current))
+      const response = await apiGetGroup({ active: 'true', user: hasil, search: '' })
+      dispatch(setEntityFilterGroup(response.data))
+   }
+
+   useEffect(() => {
+      if (entitiesGroup.length == 0 && category == 'group') {
+         handleLoadGroup()
+      }
+   }, [dispatch]);
+
+   function onChoose(val: string, label: string) {
+      setChooseValue({ val, label })
+      onSelect({ val, label })
+      close(false)
+   }
 
    return (
       <DrawerBottom animation="none" isVisible={open} setVisible={close} title={title} height={75}>
-         <View>
+         <ScrollView>
-            {
+            <View>
-               category == 'group' ?
+               {
-                  <>
+                  category == 'group' ?
-                     <Pressable style={[Styles.itemSelectModal]} onPress={() => {
+                     entitiesGroup.map((item: any, index: any) => (
-                        onSelect({ val: 'dinas', label: 'Dinas' })
+                        <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { onChoose(item.id, item.name) }}>
-                        setChoose('dinas')
+                           <Text style={[chooseValue.val == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
-                        close(false)
+                           {
-                     }}>
+                              chooseValue.val == item.id && <AntDesign name="check" size={20} />
-                        <Text style={[Styles.textDefaultSemiBold]}>Dinas</Text>
+                           }
-                        <AntDesign name="check" size={20} />
+                        </Pressable>
-                     </Pressable>
+                     ))
-                     <Pressable style={[Styles.itemSelectModal]}>
+                     :
-                        <Text>Adat</Text>
+                     <>
-                     </Pressable>
+                        <Pressable style={[Styles.itemSelectModal]} onPress={() => {
-                     <Pressable style={[Styles.itemSelectModal]}>
+                           onSelect({ val: 'blm-dikerjakan', label: 'Belum Dikerjakan' })
-                        <Text>Karang Taruna</Text>
+                           close(false)
-                     </Pressable>
+                        }}>
-                     <Pressable style={[Styles.itemSelectModal]}>
+                           <Text style={[Styles.textDefaultSemiBold]}>Belum Dikerjakan</Text>
-                        <Text>PKK</Text>
+                           <AntDesign name="check" size={20} />
-                     </Pressable>
+                        </Pressable>
-                  </>
+                        <Pressable style={[Styles.itemSelectModal]}>
-                  :
+                           <Text>Selesai</Text>
-                  <>
+                        </Pressable>
-                     <Pressable style={[Styles.itemSelectModal]} onPress={() => {
+                     </>
-                        onSelect({ val: 'blm-dikerjakan', label: 'Belum Dikerjakan' })
+               }
-                        setChoose('blm-dikerjakan')
-                        close(false)
-                     }}>
-                        <Text style={[Styles.textDefaultSemiBold]}>Belum Dikerjakan</Text>
-                        <AntDesign name="check" size={20} />
-                     </Pressable>
-                     <Pressable style={[Styles.itemSelectModal]}>
-                        <Text>Selesai</Text>
-                     </Pressable>
-                  </>
-            }
 
-         </View>
+            </View>
+         </ScrollView>
       </DrawerBottom>
    )
 }

components/sectionTanggalTugas.tsx

@@ -76,7 +76,6 @@ export default function SectionTanggalTugas({ category }: Props) {
                ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
             }}
             title="Status"
-            choose={choose.val}
             open={isSelect}
          />
       </>

lib/api.ts

@@ -81,6 +81,20 @@ export const apiDeleteGroup = async (data: { user: string, isActive: boolean },
       });
 };
 
+export const apiGetPosition = async ({ user, active, search, group }: { user: string, active: string, search: string, group?: string }) => {
+   const response = await api.get(`mobile/position?user=${user}&active=${active}&group=${group}&search=${search}`);
+   return response.data;
+};
+
+export const apiCreatePosition = async (data: { user: string, name: string, idGroup: string }) => {
+   await api.post('mobile/position', data).then(response => {
+      return response.data;
+   })
+      .catch(error => {
+         console.error('Error:', error);
+      });
+};
+
 
 // export const updateEntityById = async (id: any, updatedEntity: any) => {
 //    const response = await api.put(`/entities/${id}`, updatedEntity);

lib/filterSlice.ts

@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const filterSlice = createSlice({
+   name: 'filterGroup',
+   initialState: [],
+   reducers: {
+      setEntityFilterGroup: (state, action) => {
+         return action.payload;
+      },
+   },
+});
+
+export const { setEntityFilterGroup } = filterSlice.actions;
+export default filterSlice.reducer;

lib/positionSlice.ts

@@ -0,0 +1,14 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+const positionUpdate = createSlice({
+   name: 'positionUpdate',
+   initialState: false,
+   reducers: {
+      setUpdatePosition: (state, action) => {
+         return action.payload;
+      },
+   },
+});
+
+export const { setUpdatePosition } = positionUpdate.actions;
+export default positionUpdate.reducer;

lib/store.ts

@@ -1,7 +1,9 @@
 import { configureStore } from '@reduxjs/toolkit';
 import bannerReducer from './bannerSlice';
 import entitiesReducer from './entitiesSlice';
+import filterSlice from './filterSlice';
 import groupUpdate from './groupSlice';
+import positionUpdate from './positionSlice';
 import userReducer from './userSlice';
 
 
@@ -10,7 +12,9 @@ const store = configureStore({
       entities: entitiesReducer,
       banner: bannerReducer,
       user: userReducer,
-      groupUpdate: groupUpdate
+      groupUpdate: groupUpdate,
+      positionUpdate: positionUpdate,
+      filterGroup: filterSlice,
    }
 });