wibu/sistem-desa-mandiri
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : update filter dll

Browse Source 
Deskripsi
- position
- project
- announcement
- calneder
- division
- document
- home

No Issue
This commit is contained in:
lukman
2024-08-29 15:52:54 +08:00
parent 390c46e2da
commit e2df0beb9f
16 changed files with 444 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/module/position/ui/drawer_list_position.tsx
View File

@@ -82,7 +82,7 @@ export default function DrawerListPosition({ onCreated }: { onCreated: (val: boo
<Text ta={'center'} c={WARNA.biruTua}>Tambah Jabatan</Text>
</Box>
</Flex>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push('/position?page=filter')}>
<Flex justify={'center'} align={'center'} direction={'column'} onClick={() => router.push('/position?active=true&page=filter')}>
<Box>
<RiFilter2Line size={30} color={WARNA.biruTua} />
</Box>

119
src/module/position/ui/list_position_active.tsx
View File

@@ -12,6 +12,7 @@ import { funGetAllPosition } from "../lib/api_position";
import { IDataPosition } from "../lib/type_position";
import { useHookstate } from "@hookstate/core";
import { globalRefreshPosition } from "../lib/val_posisition";
import { funGetAllGroup, IDataGroup } from "@/module/group";
export default function ListPositionActive() {
@@ -29,7 +30,7 @@ export default function ListPositionActive() {
async function getAllPosition() {
try {
setDataPosition([]);
// setDataPosition([]);
setLoading(true)
const res = await funGetAllPosition('?active=' + status + '&group=' + group + '&search=' + searchQuery)
setDataPosition(res.data);
@@ -46,6 +47,31 @@ export default function ListPositionActive() {
getAllPosition();
}, [status, group, searchQuery, refresh.get()])
const [checked, setChecked] = useState<IDataGroup[]>([]);
const groupNameMap = (groupId: string) => {
const groupName = checked.find((group) => group.id === groupId)?.name;
return groupName || '-';
};
async function getAllGroupFilter() {
try {
const response = await funGetAllGroup('?active=true')
if (response.success) {
setChecked(response.data);
} else {
toast.error(response.message);
}
} catch (error) {
console.error(error);
toast.error("Gagal mendapatkan grup, coba lagi nanti");
}
}
useShallowEffect(() => {
getAllGroupFilter();
}, []);
return (
<Box pt={20}>
<TextInput
@@ -67,51 +93,56 @@ export default function ListPositionActive() {
<SkeletonSingle />
</Box>
)) :
_.isEmpty(isDataPosition) ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
</Box>
:
isDataPosition.map((v, i) => {
return (
<Box pt={20} key={i}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
}}
onClick={() => {
setData(v.name);
setOpenDrawer(true);
setSelectId(v.id);
setActive(v.isActive);
}}
>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
<Box pt={20}>
{group && <Text>Filter by: {groupNameMap(group)}</Text>}
{isDataPosition.length == 0 ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada jabatan</Text>
</Box>
:
<Box >
{isDataPosition.map((v, i) => {
return (
<Box pb={20} key={i}>
<Group
align="center"
style={{
border: `1px solid ${"#DCEED8"}`,
padding: 10,
borderRadius: 10,
}}
onClick={() => {
setData(v.name);
setOpenDrawer(true);
setSelectId(v.id);
setActive(v.isActive);
}}
>
<FaUserTie color={WARNA.biruTua} size={25} />
</ActionIcon>
<Box>
<ActionIcon
variant="light"
bg={"#DCEED8"}
size={50}
radius={100}
aria-label="icon"
>
<FaUserTie color={WARNA.biruTua} size={25} />
</ActionIcon>
</Box>
<Box>
<Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
<Text fw={"lighter"} fz={12}>
{v.group}
</Text>
</Box>
</Group>
</Box>
<Box>
<Text fw={"bold"} c={WARNA.biruTua}>
{v.name}
</Text>
<Text fw={"lighter"} fz={12}>
{v.group}
</Text>
</Box>
</Group>
</Box>
);
})
);
})}
</Box>}
</Box>
}
<LayoutDrawer
opened={openDrawer}

5
src/module/position/ui/tab_list_position.tsx
View File

@@ -10,6 +10,7 @@ export default function TabListPosition() {
const router = useRouter()
const searchParams = useSearchParams()
const status = searchParams.get('active')
const group = searchParams.get("group");
return (
<Box p={20}>
@@ -26,7 +27,7 @@ export default function TabListPosition() {
value="true"
w={"45%"}
leftSection={<IoMdCheckmarkCircleOutline style={iconStyle} />}
onClick={() => { router.push("/position?active=true") }}
onClick={() => { router.push("/position?active=true&group=" + group) }}
>
Aktif
</Tabs.Tab>
@@ -34,7 +35,7 @@ export default function TabListPosition() {
value="false"
w={"53%"}
leftSection={<IoCloseCircleOutline style={iconStyle} />}
onClick={() => { router.push("/position?active=false") }}
onClick={() => { router.push("/position?active=false&group=" + group) }}
>
Tidak Aktif
</Tabs.Tab>