upd: division

Deskripsi:
- load data all division
- search data all division
- filter data division
- user role pada halaman  division

No Issues

app/(application)/division/index.tsx

@@ -1,103 +1,210 @@
-import BorderBottomItem from "@/components/borderBottomItem"
+import BorderBottomItem from "@/components/borderBottomItem";
-import ButtonTab from "@/components/buttonTab"
+import ButtonTab from "@/components/buttonTab";
-import InputSearch from "@/components/inputSearch"
+import InputSearch from "@/components/inputSearch";
-import PaperGridContent from "@/components/paperGridContent"
+import PaperGridContent from "@/components/paperGridContent";
-import { ColorsStatus } from "@/constants/ColorsStatus"
+import { ColorsStatus } from "@/constants/ColorsStatus";
-import Styles from "@/constants/Styles"
+import Styles from "@/constants/Styles";
-import { AntDesign, Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
+import { apiGetDivision } from "@/lib/api";
-import { router, useLocalSearchParams } from "expo-router"
+import { useAuthSession } from "@/providers/AuthProvider";
-import { useState } from "react"
+import {
-import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
+   AntDesign,
+   Feather,
+   Ionicons,
+   MaterialCommunityIcons,
+   MaterialIcons,
+} from "@expo/vector-icons";
+import { router, useLocalSearchParams } from "expo-router";
+import { useEffect, useState } from "react";
+import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native";
+import { useSelector } from "react-redux";
+
+type Props = {
+   id: string;
+   name: string;
+   desc: string;
+   jumlah_member: number;
+};
 
 export default function ListDivision() {
-   const { active } = useLocalSearchParams<{ active?: string }>()
+   const { active, group, cat } = useLocalSearchParams<{
-   const [isList, setList] = useState(false)
+      active?: string;
+      group?: string;
+      cat?: string;
+   }>();
+   const [isList, setList] = useState(false);
+   const entityUser = useSelector((state: any) => state.user);
+   const { token, decryptToken } = useAuthSession();
+   const [search, setSearch] = useState("");
+   const [nameGroup, setNameGroup] = useState("");
+   const [data, setData] = useState<Props[]>([]);
+
+   async function handleLoad() {
+      try {
+         const hasil = await decryptToken(String(token?.current));
+         const response = await apiGetDivision({
+            user: hasil,
+            active: String(active),
+            search: search,
+            group: String(group),
+            kategori: String(cat),
+         });
+
+         if (response.success) {
+            setData(response.data);
+            setNameGroup(response.filter.name);
+         }
+      } catch (error) {
+         console.error(error);
+      }
+   }
+
+   useEffect(() => {
+      handleLoad();
+   }, [active, search, group, cat]);
 
    return (
       <SafeAreaView>
          <ScrollView>
             <View style={[Styles.p15, Styles.mb100]}>
-               <View style={[Styles.wrapBtnTab]}>
-                  <ButtonTab
-                     active={active == "false" ? "false" : "true"}
-                     value="true"
-                     onPress={() => { router.push('/division?active=true') }}
-                     label="Aktif"
-                     icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
-                     n={2} />
-                  <ButtonTab
-                     active={active == "false" ? "false" : "true"}
-                     value="false"
-                     onPress={() => { router.push('/division?active=false') }}
-                     label="Tidak Aktif"
-                     icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
-                     n={2} />
-               </View>
-               <View style={[Styles.rowSpaceBetween]}>
-                  <InputSearch width={68} />
-                  <Pressable onPress={() => { setList(!isList) }}>
-                     <MaterialCommunityIcons name={isList ? 'format-list-bulleted' : 'view-grid'} color={"black"} size={30} />
-                  </Pressable>
-               </View>
-               <View style={[Styles.mv05]}>
-                  <Text>Filter : Dinas</Text>
-               </View>
                {
-                  isList
+                  entityUser.role != "user" && entityUser.role != "coadmin" ?
-                     ?
+                     <View style={[Styles.wrapBtnTab]}>
-                     <View>
+                        <ButtonTab
-                        <BorderBottomItem
+                           active={active == "false" ? "false" : "true"}
-                           onPress={() => { }}
+                           value="true"
-                           borderType="bottom"
+                           onPress={() => {
+                              router.replace(`/division?active=true&search=${search}&group=${group}&cat=${cat}`);
+                           }}
+                           label="Aktif"
                            icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                              <Feather
-                                 <MaterialIcons name="group" size={25} color={'#384288'} />
+                                 name="check-circle"
-                              </View>
+                                 color={active == "false" ? "black" : "white"}
+                                 size={20}
+                              />
                            }
-                           title="Kasi Pelayanan"
+                           n={2}
-                           titleWeight="normal"
                         />
-                        <BorderBottomItem
+                        <ButtonTab
-                           onPress={() => { }}
+                           active={active == "false" ? "false" : "true"}
-                           borderType="bottom"
+                           value="false"
+                           onPress={() => {
+                              router.replace(`/division?active=false&search=${search}&group=${group}&cat=${cat}`);
+                           }}
+                           label="Tidak Aktif"
                            icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                              <AntDesign
-                                 <MaterialIcons name="group" size={25} color={'#384288'} />
+                                 name="closecircleo"
-                              </View>
+                                 color={active == "true" ? "black" : "white"}
+                                 size={20}
+                              />
                            }
-                           title="Kaur TU dan Umum"
+                           n={2}
-                           titleWeight="normal"
-                        />
-                        <BorderBottomItem
-                           onPress={() => { }}
-                           borderType="bottom"
-                           icon={
-                              <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
-                                 <MaterialIcons name="group" size={25} color={'#384288'} />
-                              </View>
-                           }
-                           title="Kasi Pemerintahan"
-                           titleWeight="normal"
                         />
                      </View>
                      :
-
+                     <View style={[Styles.wrapBtnTab]}>
-                     <View>
+                        <ButtonTab
-                        <PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kaur Pelayanan" headerColor="primary" contentPosition="top">
+                           active={cat == "semua" ? "false" : "true"}
-                           <Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
+                           value="true"
-                        </PaperGridContent>
+                           onPress={() => {
-                        <PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kasi Pemerintahan" headerColor="primary" contentPosition="top">
+                              router.replace(`/division?&search=${search}&group=${group}&cat=divisi-saya`);
-                           <Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
+                           }}
-                        </PaperGridContent>
+                           label="Divisi Saya"
-                        <PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kaur TU dan Umum" headerColor="primary" contentPosition="top">
+                           icon={
-                           <Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
+                              <Ionicons
-                        </PaperGridContent>
+                                 name="file-tray-outline"
+                                 color={cat == "semua" ? "black" : "white"}
+                                 size={20}
+                              />
+                           }
+                           n={2}
+                        />
+                        <ButtonTab
+                           active={cat == "semua" ? "false" : "true"}
+                           value="false"
+                           onPress={() => {
+                              router.replace(`/division?&search=${search}&group=${group}&cat=semua`);
+                           }}
+                           label="Semua Divisi"
+                           icon={
+                              <Ionicons
+                                 name="file-tray-stacked-outline"
+                                 color={cat == "semua" ? "white" : "black"}
+                                 size={20}
+                              />
+                           }
+                           n={2}
+                        />
                      </View>
                }
 
+               <View style={[Styles.rowSpaceBetween]}>
+                  <InputSearch width={68} onChange={setSearch} />
+                  <Pressable
+                     onPress={() => {
+                        setList(!isList);
+                     }}
+                  >
+                     <MaterialCommunityIcons
+                        name={isList ? "format-list-bulleted" : "view-grid"}
+                        color={"black"}
+                        size={30}
+                     />
+                  </Pressable>
+               </View>
+               {(entityUser.role == "supadmin" ||
+                  entityUser.role == "developer") && (
+                     <View style={[Styles.mv05]}>
+                        <Text>Filter : {nameGroup}</Text>
+                     </View>
+                  )}
 
+               {
+                  data.length == 0 ? (
+                     <View style={[Styles.mt15]}>
+                        <Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
+                     </View>
+                  ) : (
+                     isList ? (
+                        <View>
+                           {data.map((item, index) => (
+                              <BorderBottomItem
+                                 key={index}
+                                 onPress={() => { }}
+                                 borderType="bottom"
+                                 icon={
+                                    <View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
+                                       <MaterialIcons name="group" size={25} color={"#384288"} />
+                                    </View>
+                                 }
+                                 title={item.name}
+                                 titleWeight="normal"
+                              />
+                           ))}
+                        </View>
+                     ) : (
+                        <View>
+                           {data.map((item, index) => (
+                              <PaperGridContent
+                                 key={index}
+                                 onPress={() => {
+                                    router.push(`/division/${item.id}`);
+                                 }}
+                                 content="page"
+                                 title={item.name}
+                                 headerColor="primary"
+                                 contentPosition="top"
+                              >
+                                 <Text style={[Styles.textDefault]} numberOfLines={2} ellipsizeMode="tail">{item.desc}</Text>
+                              </PaperGridContent>
+                           ))}
+                        </View>
+                     )
+                  )
+               }
             </View>
          </ScrollView>
       </SafeAreaView>
-   )
+   );
 }

app/(application)/profile.tsx

@@ -6,7 +6,7 @@ import Styles from "@/constants/Styles";
 import { apiGetProfile } from "@/lib/api";
 import { setEntities } from "@/lib/entitiesSlice";
 import { useAuthSession } from "@/providers/AuthProvider";
-import { Octicons } from "@expo/vector-icons";
+import { AntDesign, Octicons } from "@expo/vector-icons";
 import { router, Stack } from "expo-router";
 import { useEffect, useState } from "react";
 import { Image, SafeAreaView, ScrollView, Text, View } from "react-native";
@@ -40,7 +40,7 @@ export default function Profile() {
                headerTitleAlign: 'center',
                headerShadowVisible: false,
                headerRight: () => <ButtonHeader
-                  item={<Octicons name="sign-out" size={20} color="white" />}
+                  item={<AntDesign name="logout" size={20} color="white" />}
                   onPress={() => {
                      AlertKonfirmasi({
                         title: 'Keluar',

components/division/headerDivisionList.tsx

@@ -1,19 +1,25 @@
+import Styles from "@/constants/Styles"
+import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"
+import { router } from "expo-router"
 import { useState } from "react"
+import { View } from "react-native"
+import { useSelector } from "react-redux"
 import ButtonMenuHeader from "../buttonMenuHeader"
 import DrawerBottom from "../drawerBottom"
-import { View } from "react-native"
-import Styles from "@/constants/Styles"
 import MenuItemRow from "../menuItemRow"
-import { AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"
 import ModalFilter from "../modalFilter"
-import { router } from "expo-router"
 
 export default function HeaderRightDivisionList() {
    const [isVisible, setVisible] = useState(false)
    const [isFilter, setFilter] = useState(false)
+   const entityUser = useSelector((state: any) => state.user)
+
    return (
       <>
-         <ButtonMenuHeader onPress={() => { setVisible(true) }} />
+         {
+            entityUser.role != "user" && entityUser.role != "coadmin" &&
+            <ButtonMenuHeader onPress={() => { setVisible(true) }} />
+         }
          <DrawerBottom animation="slide" isVisible={isVisible} setVisible={setVisible} title="Menu">
             <View style={Styles.rowItemsCenter}>
                <MenuItemRow
@@ -24,22 +30,29 @@ export default function HeaderRightDivisionList() {
                      router.push('/division/create')
                   }}
                />
-               <MenuItemRow
+               {
-                  icon={<AntDesign name="filter" color="black" size={25} />}
+                  (entityUser.role == "supadmin" || entityUser.role == "developer") &&
-                  title="Filter"
+                  <MenuItemRow
-                  onPress={() => {
+                     icon={<AntDesign name="filter" color="black" size={25} />}
-                     setVisible(false)
+                     title="Filter"
-                     setFilter(true)
+                     onPress={() => {
-                  }}
+                        setVisible(false)
-               />
+                        setFilter(true)
-               <MenuItemRow
+                     }}
-                  icon={<MaterialCommunityIcons name="chart-bar" color="black" size={25} />}
+                  />
-                  title="Laporan"
+               }
-                  onPress={() => {
+
-                     setVisible(false)
+               {
-                     router.push('/division/report')
+                  (entityUser.role == "supadmin" || entityUser.role == "developer" || entityUser.role == "cosupadmin") &&
-                  }}
+                  <MenuItemRow
-               />
+                     icon={<MaterialCommunityIcons name="chart-bar" color="black" size={25} />}
+                     title="Laporan"
+                     onPress={() => {
+                        setVisible(false)
+                        router.push('/division/report')
+                     }}
+                  />
+               }
             </View>
          </DrawerBottom>
          <ModalFilter close={() => { setFilter(false) }} open={isFilter} page="division" />

lib/api.ts

@@ -348,3 +348,8 @@ export const apiDeleteFileProject = async (data: { user: string }, id: string) =
    const response = await api.delete(`/mobile/project/file/${id}`, { data })
    return response.data;
 };
+
+export const apiGetDivision = async ({ user, search, group, kategori, active }: { user: string, search: string, group?: string, kategori?: string, active?: string }) => {
+   const response = await api.get(`mobile/division?user=${user}&active=${active}&group=${group}&search=${search}&cat=${kategori}`);
+   return response.data;
+};

lib/divisionUpdate.ts

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

lib/store.ts

@@ -11,6 +11,7 @@ import positionUpdate from './positionSlice';
 import projectUpdate from './projectUpdate';
 import taskCreate from './taskCreate';
 import userReducer from './userSlice';
+import divisionUpdate from './divisionUpdate';
 
 const store = configureStore({
    reducer: {
@@ -26,6 +27,7 @@ const store = configureStore({
       announcementUpdate: announcementUpdate,
       projectUpdate: projectUpdate,
       taskCreate: taskCreate,
+      divisionUpdate: divisionUpdate,
    }
 });