From f34df12b2f10c08bc33e2f3284bdd1b7d8e8e189 Mon Sep 17 00:00:00 2001 From: amaliadwiy Date: Mon, 2 Feb 2026 17:29:24 +0800 Subject: [PATCH] rev: filter tahun Deskripsi: - tampilan modal filter - tampilan filter disemua fitur yg ada filter nya - pengaplikasian api No Issues --- app/(application)/discussion/index.tsx | 5 +- app/(application)/division/index.tsx | 6 +- app/(application)/member/index.tsx | 6 +- app/(application)/position/index.tsx | 6 +- app/(application)/project/index.tsx | 28 ++-- components/labelStatus.tsx | 13 +- components/modalFilter.tsx | 167 ++++++++++++++++++----- components/project/headerProjectList.tsx | 4 +- constants/Styles.ts | 29 ++++ lib/api.ts | 9 +- 10 files changed, 215 insertions(+), 58 deletions(-) diff --git a/app/(application)/discussion/index.tsx b/app/(application)/discussion/index.tsx index 4fb07fa..b5714c5 100644 --- a/app/(application)/discussion/index.tsx +++ b/app/(application)/discussion/index.tsx @@ -121,8 +121,9 @@ export default function Discussion() { { (entityUser.role == "supadmin" || entityUser.role == "developer") && - - Filter : {nameGroup} + + Filter : + } diff --git a/app/(application)/division/index.tsx b/app/(application)/division/index.tsx index 20b2083..8bb68b9 100644 --- a/app/(application)/division/index.tsx +++ b/app/(application)/division/index.tsx @@ -1,6 +1,7 @@ import BorderBottomItem from "@/components/borderBottomItem"; import ButtonTab from "@/components/buttonTab"; import InputSearch from "@/components/inputSearch"; +import LabelStatus from "@/components/labelStatus"; import PaperGridContent from "@/components/paperGridContent"; import Skeleton from "@/components/skeleton"; import SkeletonTwoItem from "@/components/skeletonTwoItem"; @@ -195,8 +196,9 @@ export default function ListDivision() { {(entityUser.role == "supadmin" || entityUser.role == "developer") && ( - - Filter : {nameGroup} + + Filter : + )} diff --git a/app/(application)/member/index.tsx b/app/(application)/member/index.tsx index 855576c..85a9156 100644 --- a/app/(application)/member/index.tsx +++ b/app/(application)/member/index.tsx @@ -2,6 +2,7 @@ import BorderBottomItem from "@/components/borderBottomItem"; import ButtonTab from "@/components/buttonTab"; import ImageUser from "@/components/imageNew"; import InputSearch from "@/components/inputSearch"; +import LabelStatus from "@/components/labelStatus"; import SkeletonTwoItem from "@/components/skeletonTwoItem"; import Text from "@/components/Text"; import { ConstEnv } from "@/constants/ConstEnv"; @@ -124,8 +125,9 @@ export default function Index() { { (entityUser.role == "supadmin" || entityUser.role == "developer") && - - Filter : {nameGroup} + + Filter : + } diff --git a/app/(application)/position/index.tsx b/app/(application)/position/index.tsx index 3bde226..f9d303c 100644 --- a/app/(application)/position/index.tsx +++ b/app/(application)/position/index.tsx @@ -5,6 +5,7 @@ import ButtonTab from "@/components/buttonTab"; import DrawerBottom from "@/components/drawerBottom"; import { InputForm } from "@/components/inputForm"; import InputSearch from "@/components/inputSearch"; +import LabelStatus from "@/components/labelStatus"; import MenuItemRow from "@/components/menuItemRow"; import SkeletonTwoItem from "@/components/skeletonTwoItem"; import Text from "@/components/Text"; @@ -166,8 +167,9 @@ export default function Index() { { (entityUser.role == "supadmin" || entityUser.role == "developer") && - - Filter : {nameGroup} + + Filter : + } diff --git a/app/(application)/project/index.tsx b/app/(application)/project/index.tsx index 2dd5097..c6f4feb 100644 --- a/app/(application)/project/index.tsx +++ b/app/(application)/project/index.tsx @@ -32,16 +32,18 @@ type Props = { }; export default function ListProject() { - const { status, group, cat } = useLocalSearchParams<{ + const { status, group, cat, year } = useLocalSearchParams<{ status?: string; group?: string; cat?: string; + year?: string; }>(); const [statusFix, setStatusFix] = useState<'0' | '1' | '2' | '3'>('0') const { token, decryptToken } = useAuthSession(); const entityUser = useSelector((state: any) => state.user) const [search, setSearch] = useState("") const [nameGroup, setNameGroup] = useState("") + const [isYear, setYear] = useState("") const [data, setData] = useState([]) const [isList, setList] = useState(false) const update = useSelector((state: any) => state.projectUpdate) @@ -63,11 +65,13 @@ export default function ListProject() { search: search, group: String(group), kategori: String(cat), - page: thisPage + page: thisPage, + year: String(year) }); if (response.success) { setNameGroup(response.filter.name); + setYear(response.tahun) if (thisPage == 1) { setData(response.data); } else if (thisPage > 1 && response.data.length > 0) { @@ -91,7 +95,7 @@ export default function ListProject() { useEffect(() => { handleLoad(true, 1); - }, [statusFix, search, group, cat]); + }, [statusFix, search, group, cat, year]); const loadMoreData = () => { if (waiting) return @@ -194,17 +198,25 @@ export default function ListProject() { { - entityUser.role != 'cosupadmin' && entityUser.role != 'admin' && - Filter : + // entityUser.role != 'cosupadmin' && entityUser.role != 'admin' && + + Filter : { - (entityUser.role == "supadmin" || entityUser.role == "developer") && nameGroup + (entityUser.role == "supadmin" || entityUser.role == "developer") && + } { (entityUser.role == 'user' || entityUser.role == 'coadmin') - ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? 'Kegiatan Saya' : 'Semua Kegiatan' + ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? : : '' } - + + {/* { + (entityUser.role == 'user' || entityUser.role == 'coadmin') + ? (cat == 'null' || cat == 'undefined' || cat == undefined || cat == '' || cat == 'data-saya') ? : + : '' + } */} + } diff --git a/components/labelStatus.tsx b/components/labelStatus.tsx index 6ab5d10..5540c17 100644 --- a/components/labelStatus.tsx +++ b/components/labelStatus.tsx @@ -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 } -export default function LabelStatus({ category, text, size }: Props) { +export default function LabelStatus({ category, text, size, style }: Props) { return ( - + {text} ) diff --git a/components/modalFilter.tsx b/components/modalFilter.tsx index cd88dd7..71ec9b4 100644 --- a/components/modalFilter.tsx +++ b/components/modalFilter.tsx @@ -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 ( - + - - { - category == "filter-data" - ? - data.map((item: any, index: any) => ( - { setChooseGroup(item.id) }}> - {item.name} - { - chooseGroup == item.id && - } - - )) - : - entities.map((item: any, index: any) => ( - { setChooseGroup(item.id) }}> - {item.name} - { - chooseGroup == item.id && - } - - )) - } - + { + category != "year-only" && + + {category == "filter-data" ? "Filter Data" : "Lembaga Desa"} + + { + category == "filter-data" + ? + data.map((item: any, index: any) => ( + { setChooseGroup(item.id) }} + > + {/* {chooseGroup == item.id && ( + + + + )} */} + + + {item.name} + + + // { setChooseGroup(item.id) }}> + // {item.name} + // { + // chooseGroup == item.id && + // } + // + )) + : + entities.map((item: any, index: any) => ( + { setChooseGroup(item.id) }} + > + {/* {chooseGroup == item.id && ( + + + + )} */} + + + {item.name} + + + // { setChooseGroup(item.id) }}> + // {item.name} + // { + // chooseGroup == item.id && + // } + // + )) + } + + + } + + {page == "project" && ( + + Tahun + + { + dataTahun.map((item: { id: string, name: string }, index: number) => ( + { setChooseYear(item.id) }} + > + + {item.name} + + + )) + } + + + )} { 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}`) }} /> diff --git a/components/project/headerProjectList.tsx b/components/project/headerProjectList.tsx index 56818e6..9652fbc 100644 --- a/components/project/headerProjectList.tsx +++ b/components/project/headerProjectList.tsx @@ -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") && } 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"} /> ) diff --git a/constants/Styles.ts b/constants/Styles.ts index 8bb7e96..1bc5a43 100644 --- a/constants/Styles.ts +++ b/constants/Styles.ts @@ -651,6 +651,35 @@ const Styles = StyleSheet.create({ width: 40, alignItems: 'center', }, + chip: { + paddingVertical: 5, + paddingHorizontal: 15, + borderRadius: 5, + backgroundColor: "#F3F4F6", + borderWidth: 1, + borderColor: "transparent", + marginRight: 10, + marginBottom: 10, + }, + chipSelected: { + backgroundColor: "#FFF5F2", + borderColor: "#FF5A3C", + }, + chipText: { + fontSize: 16, + color: "#222", + }, + chipTextSelected: { + color: "#FF5A3C", + }, + checkIcon: { + position: "absolute", + top: -6, + left: -6, + backgroundColor: "#FF5A3C", + borderRadius: 10, + padding: 2, + }, }) export default Styles; \ No newline at end of file diff --git a/lib/api.ts b/lib/api.ts index 7bfacd1..1328eee 100644 --- a/lib/api.ts +++ b/lib/api.ts @@ -315,8 +315,13 @@ export const apiDeleteAnnouncement = async (data: { user: string }, id: string) return response.data }; -export const apiGetProject = async ({ user, status, search, group, kategori, page }: { user: string, status: string, search: string, group?: string, kategori?: string, page?: number }) => { - const response = await api.get(`mobile/project?user=${user}&status=${status}&group=${group}&search=${search}&cat=${kategori}&page=${page}`); +export const apiGetTahunProject = async ({ user }: { user: string }) => { + const response = await api.get(`mobile/project/tahun?user=${user}`); + return response.data; +}; + +export const apiGetProject = async ({ user, status, search, group, kategori, page, year }: { user: string, status: string, search: string, group?: string, kategori?: string, page?: number, year?: string }) => { + const response = await api.get(`mobile/project?user=${user}&status=${status}&group=${group}&search=${search}&cat=${kategori}&page=${page}&year=${year}`); return response.data; }; -- 2.49.1