wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: division

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

No Issues
This commit is contained in:
amel
2025-05-20 17:31:58 +08:00
parent 9859a8534f
commit 856c054deb
6 changed files with 244 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

267
app/(application)/division/index.tsx
View File

@@ -1,103 +1,210 @@
import BorderBottomItem from "@/components/borderBottomItem"
import ButtonTab from "@/components/buttonTab"
import InputSearch from "@/components/inputSearch"
import PaperGridContent from "@/components/paperGridContent"
import { ColorsStatus } from "@/constants/ColorsStatus"
import Styles from "@/constants/Styles"
import { AntDesign, Feather, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router, useLocalSearchParams } from "expo-router"
import { useState } from "react"
import { Pressable, SafeAreaView, ScrollView, Text, View } from "react-native"
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonTab from "@/components/buttonTab";
import InputSearch from "@/components/inputSearch";
import PaperGridContent from "@/components/paperGridContent";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetDivision } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import {
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 [isList, setList] = useState(false)
const { active, group, cat } = useLocalSearchParams<{
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
?
<View>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
entityUser.role != "user" && entityUser.role != "coadmin" ?
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => {
router.replace(`/division?active=true&search=${search}&group=${group}&cat=${cat}`);
}}
label="Aktif"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={'#384288'} />
</View>
<Feather
name="check-circle"
color={active == "false" ? "black" : "white"}
size={20}
/>
}
title="Kasi Pelayanan"
titleWeight="normal"
n={2}
/>
<BorderBottomItem
onPress={() => { }}
borderType="bottom"
<ButtonTab
active={active == "false" ? "false" : "true"}
value="false"
onPress={() => {
router.replace(`/division?active=false&search=${search}&group=${group}&cat=${cat}`);
}}
label="Tidak Aktif"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="group" size={25} color={'#384288'} />
</View>
<AntDesign
name="closecircleo"
color={active == "true" ? "black" : "white"}
size={20}
/>
}
title="Kaur TU dan Umum"
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"
n={2}
/>
</View>
:
<View>
<PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kaur Pelayanan" headerColor="primary" contentPosition="top">
<Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
</PaperGridContent>
<PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kasi Pemerintahan" headerColor="primary" contentPosition="top">
<Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
</PaperGridContent>
<PaperGridContent onPress={() => { router.push('/division/234') }} content="page" title="Kaur TU dan Umum" headerColor="primary" contentPosition="top">
<Text style={[Styles.textDefault]}>Deskripsi Divisi</Text>
</PaperGridContent>
<View style={[Styles.wrapBtnTab]}>
<ButtonTab
active={cat == "semua" ? "false" : "true"}
value="true"
onPress={() => {
router.replace(`/division?&search=${search}&group=${group}&cat=divisi-saya`);
}}
label="Divisi Saya"
icon={
<Ionicons
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>
)
}
);
}

4
app/(application)/profile.tsx
View File

@@ -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',

55
components/division/headerDivisionList.tsx
View File

@@ -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} />}
title="Filter"
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") &&
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
onPress={() => {
setVisible(false)
setFilter(true)
}}
/>
}
{
(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" />

5
lib/api.ts
View File

@@ -347,4 +347,9 @@ export const apiCheckFileProject = async ({ data, id }: { data: FormData, id: st
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;
};

14
lib/divisionUpdate.ts Normal file
View File

@@ -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;

2
lib/store.ts
View File

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