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

rev: filter tahun

Browse Source 
Deskripsi:
- tampilan modal filter
- tampilan filter disemua fitur yg ada filter nya
- pengaplikasian api

No Issues
This commit is contained in:
amaliadwiy
2026-02-02 17:29:24 +08:00
parent a24a698f86
commit f34df12b2f
10 changed files with 215 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
components/labelStatus.tsx
View File

@@ -1,16 +1,23 @@
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { View } from "react-native";
import { View, StyleProp, ViewStyle } from "react-native";
import Text from "./Text";
type Props = {
category: 'error' | 'success' | 'warning' | 'primary' | 'secondary'
text: string
size: 'small' | 'default'
style?: StyleProp<ViewStyle>
}
export default function LabelStatus({ category, text, size }: Props) {
export default function LabelStatus({ category, text, size, style }: Props) {
return (
<View style={[size == "small" ? Styles.labelStatusSmall : Styles.labelStatus, ColorsStatus[category], Styles.round10, Styles.contentItemCenter]}>
<View style={[
size == "small" ? Styles.labelStatusSmall : Styles.labelStatus,
ColorsStatus[category],
Styles.round10,
Styles.contentItemCenter,
style
]}>
<Text style={[size == "small" ? Styles.textSmallSemiBold : Styles.textMediumSemiBold, Styles.cWhite, { textAlign: 'center' }]}>{text}</Text>
</View>
)

167
components/modalFilter.tsx
View File

@@ -1,25 +1,26 @@
import Styles from "@/constants/Styles"
import { apiGetGroup } from "@/lib/api"
import { apiGetGroup, apiGetTahunProject } 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, View } from "react-native"
import Text from './Text';
import { ScrollView, TouchableOpacity, View } from "react-native"
import { useDispatch, useSelector } from "react-redux"
import { ButtonForm } from "./buttonForm"
import DrawerBottom from "./drawerBottom"
import Text from './Text'
type Props = {
open: boolean,
close: (value: boolean) => void
page: 'position' | 'member' | 'discussion' | 'project' | 'division'
category?: 'filter-group' | 'filter-data'
category?: 'filter-group' | 'filter-data' | 'year-only',
valueGroup?: string,
valueYear?: string,
}
export default function ModalFilter({ open, close, page, category }: Props) {
export default function ModalFilter({ open, close, page, category, valueGroup, valueYear }: Props) {
const data = [
{
id: "data-saya",
@@ -34,58 +35,154 @@ export default function ModalFilter({ open, close, page, category }: Props) {
const dispatch = useDispatch()
const entities = useSelector((state: any) => state.filterGroup)
const update = useSelector((state: any) => state.groupUpdate)
const [chooseGroup, setChooseGroup] = useState('')
const [chooseGroup, setChooseGroup] = useState(valueGroup || '')
const [chooseYear, setChooseYear] = useState(valueYear || '')
const [dataTahun, setDataTahun] = useState<{ id: string, name: string }[]>([])
async function handleLoad() {
const hasil = await decryptToken(String(token?.current))
const response = await apiGetGroup({ active: 'true', user: hasil, search: '' })
dispatch(setEntityFilterGroup(response.data))
if (page === 'project') {
const responseTahun = await apiGetTahunProject({ user: hasil })
setDataTahun(responseTahun.data)
}
}
useEffect(() => {
handleLoad()
handleLoad()
}, [dispatch, update]);
return (
<DrawerBottom animation="slide" isVisible={open} setVisible={close} title="Filter" height={75}>
<DrawerBottom animation="slide" isVisible={open} setVisible={close} title="Pilih Preferensi" height={75}>
<View style={{ justifyContent: 'space-between', flex: 1 }}>
<ScrollView>
<View>
{
category == "filter-data"
?
data.map((item: any, index: any) => (
<Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
<Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
{
chooseGroup == item.id && <AntDesign name="check" size={20} color={'black'}/>
}
</Pressable>
))
:
entities.map((item: any, index: any) => (
<Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
<Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
{
chooseGroup == item.id && <AntDesign name="check" size={20} color={'black'}/>
}
</Pressable>
))
}
</View>
{
category != "year-only" &&
<View>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>{category == "filter-data" ? "Filter Data" : "Lembaga Desa"}</Text>
<View style={[Styles.rowOnly, { flexWrap: 'wrap' }]}>
{
category == "filter-data"
?
data.map((item: any, index: any) => (
<TouchableOpacity
key={index}
style={[
Styles.chip,
chooseGroup == item.id && Styles.chipSelected,
]}
activeOpacity={0.8}
onPress={() => { setChooseGroup(item.id) }}
>
{/* {chooseGroup == item.id && (
<View style={Styles.checkIcon}>
<Ionicons name="checkmark" size={14} color="white" />
</View>
)} */}
<Text
style={[
Styles.chipText,
chooseGroup == item.id && Styles.chipTextSelected,
]}
>
{item.name}
</Text>
</TouchableOpacity>
// <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
// <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
// {
// chooseGroup == item.id && <AntDesign name="check" size={20} color={'black'} />
// }
// </Pressable>
))
:
entities.map((item: any, index: any) => (
<TouchableOpacity
key={index}
style={[
Styles.chip,
chooseGroup == item.id && Styles.chipSelected,
]}
activeOpacity={0.8}
onPress={() => { setChooseGroup(item.id) }}
>
{/* {chooseGroup == item.id && (
<View style={Styles.checkIcon}>
<Ionicons name="checkmark" size={14} color="white" />
</View>
)} */}
<Text
style={[
Styles.chipText,
chooseGroup == item.id && Styles.chipTextSelected,
]}
>
{item.name}
</Text>
</TouchableOpacity>
// <Pressable key={index} style={[Styles.itemSelectModal]} onPress={() => { setChooseGroup(item.id) }}>
// <Text style={[chooseGroup == item.id ? Styles.textDefaultSemiBold : Styles.textDefault]}>{item.name}</Text>
// {
// chooseGroup == item.id && <AntDesign name="check" size={20} color={'black'}/>
// }
// </Pressable>
))
}
</View>
</View>
}
{page == "project" && (
<View>
<Text style={[Styles.textDefaultSemiBold, Styles.mb05]}>Tahun</Text>
<View style={[Styles.rowOnly, { flexWrap: 'wrap' }]}>
{
dataTahun.map((item: { id: string, name: string }, index: number) => (
<TouchableOpacity
key={index}
style={[
Styles.chip,
chooseYear == item.id && Styles.chipSelected,
]}
activeOpacity={0.8}
onPress={() => { setChooseYear(item.id) }}
>
<Text
style={[
Styles.chipText,
chooseYear == item.id && Styles.chipTextSelected,
]}
>
{item.name}
</Text>
</TouchableOpacity>
))
}
</View>
</View>
)}
</ScrollView>
<View>
<ButtonForm text="Terapkan" onPress={() => {
close(false)
page == 'project' ?
category == "filter-data"
category == "year-only"
?
router.replace(`/${page}?status=0&cat=${chooseGroup}`)
router.replace(`/${page}?status=0&year=${chooseYear}`)
:
router.replace(`/${page}?status=0&group=${chooseGroup}`)
category == "filter-data"
?
router.replace(`/${page}?status=0&cat=${chooseGroup}&year=${chooseYear}`)
:
router.replace(`/${page}?status=0&group=${chooseGroup}&year=${chooseYear}`)
:
router.replace(`/${page}?active=true&group=${chooseGroup}`)
}} />

4
components/project/headerProjectList.tsx
View File

@@ -31,7 +31,7 @@ export default function HeaderRightProjectList() {
/>
}
{
(entityUser.role == "user" || entityUser.role == "coadmin" || entityUser.role == "supadmin" || entityUser.role == "developer") &&
// (entityUser.role == "user" || entityUser.role == "coadmin" || entityUser.role == "supadmin" || entityUser.role == "developer") &&
<MenuItemRow
icon={<AntDesign name="filter" color="black" size={25} />}
title="Filter"
@@ -50,7 +50,7 @@ export default function HeaderRightProjectList() {
close={() => { setFilter(false) }}
open={isFilter}
page="project"
category={entityUser.role == "supadmin" || entityUser.role == "developer" ? "filter-group" : "filter-data"}
category={entityUser.role == "admin" || entityUser.role == "cosupadmin" ? 'year-only' : entityUser.role == "supadmin" || entityUser.role == "developer" ? "filter-group" : "filter-data"}
/>
</>
)