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

upd: divisi

Browse Source 
Deskripsi:
- realtime create divisi

No Issues
This commit is contained in:
amel
2024-10-16 15:41:02 +08:00
parent 0fed10cb28
commit 12b12be39e
1 changed files with 117 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
src/module/division_new/ui/list_division.tsx
View File

@@ -1,18 +1,18 @@
'use client' 'use client'
import { currentScroll, globalRole, LayoutDrawer, LayoutNavbarNew, SkeletonList, SkeletonSingle, TEMA } from '@/module/_global'; import { currentScroll, globalNotifPage, globalRole, LayoutDrawer, LayoutNavbarNew, ReloadButtonTop, SkeletonList, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core'; import { ActionIcon, Avatar, Box, Card, Center, Divider, Flex, Grid, Group, Skeleton, Text, TextInput, Title } from '@mantine/core';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import _ from 'lodash';
import { useRouter, useSearchParams } from 'next/navigation'; import { useRouter, useSearchParams } from 'next/navigation';
import React, { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import toast from 'react-hot-toast';
import { HiMenu } from 'react-icons/hi'; import { HiMenu } from 'react-icons/hi';
import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2'; import { HiMagnifyingGlass, HiMiniUserGroup, HiOutlineListBullet, HiSquares2X2 } from 'react-icons/hi2';
import { MdAccountCircle } from 'react-icons/md'; import { MdAccountCircle } from 'react-icons/md';
import DrawerDivision from './drawer_division';
import { useMediaQuery, useShallowEffect } from '@mantine/hooks';
import { IDataDivison } from '../lib/type_division';
import { funGetAllDivision } from '../lib/api_division'; import { funGetAllDivision } from '../lib/api_division';
import toast from 'react-hot-toast'; import { IDataDivison } from '../lib/type_division';
import { useHookstate } from '@hookstate/core'; import DrawerDivision from './drawer_division';
import _ from 'lodash';
export default function ListDivision() { export default function ListDivision() {
const [isList, setIsList] = useState(false) const [isList, setIsList] = useState(false)
@@ -29,8 +29,9 @@ export default function ListDivision() {
const tema = useHookstate(TEMA) const tema = useHookstate(TEMA)
const { value: containerRef } = useHookstate(currentScroll); const { value: containerRef } = useHookstate(currentScroll);
const [isPage, setPage] = useState(1) const [isPage, setPage] = useState(1)
const paddingLift = useMediaQuery('(max-width: 505px)') const paddingLift = useMediaQuery('(max-width: 505px)')
const [isRefresh, setRefresh] = useState(false)
const notifLoadPage = useHookstate(globalNotifPage)
const handleList = () => { const handleList = () => {
@@ -39,21 +40,23 @@ export default function ListDivision() {
const fetchData = async (loading: boolean) => { const fetchData = async (loading: boolean) => {
try { try {
if (loading)
setLoading(true); setLoading(loading);
if (isPage == 1) {
setData([])
}
const response = await funGetAllDivision('?search=' + searchQuery + '&group=' + group + '&page=' + isPage) const response = await funGetAllDivision('?search=' + searchQuery + '&group=' + group + '&page=' + isPage)
if (response.success) { if (response.success) {
setJumlah(response.total) setJumlah(response.total)
setNameGroup(response.filter.name) setNameGroup(response.filter.name)
if (isPage == 1) { if (isPage == 1) {
setData(response.data) setData(response.data)
}else{ } else {
setData([...data, ...response.data]) setData((data) => [...data, ...response.data])
} }
} else { } else {
toast.error(response.message); toast.error(response.message);
} }
setLoading(false);
} catch (error) { } catch (error) {
toast.error("Gagal mendapatkan divisi, coba lagi nanti"); toast.error("Gagal mendapatkan divisi, coba lagi nanti");
console.error(error); console.error(error);
@@ -74,28 +77,46 @@ export default function ListDivision() {
useShallowEffect(() => { useShallowEffect(() => {
fetchData(false) fetchData(false)
}, [isPage]) }, [isPage])
useEffect(() => { useEffect(() => {
const handleScroll = async () => { const handleScroll = async () => {
if (containerRef && containerRef.current) { if (containerRef && containerRef.current) {
const scrollTop = containerRef.current.scrollTop; const scrollTop = containerRef.current.scrollTop;
const containerHeight = containerRef.current.clientHeight; const containerHeight = containerRef.current.clientHeight;
const scrollHeight = containerRef.current.scrollHeight; const scrollHeight = containerRef.current.scrollHeight;
if (scrollTop + containerHeight >= scrollHeight) { if (scrollTop + containerHeight >= scrollHeight) {
setPage(isPage + 1) setPage(isPage + 1)
} }
} }
}; };
const container = containerRef?.current; const container = containerRef?.current;
container?.addEventListener("scroll", handleScroll); container?.addEventListener("scroll", handleScroll);
return () => { return () => {
container?.removeEventListener("scroll", handleScroll); container?.removeEventListener("scroll", handleScroll);
}; };
}, [containerRef, isPage]); }, [containerRef, isPage]);
useShallowEffect(() => {
if (notifLoadPage.get().category == 'division' && notifLoadPage.get().load == true) {
setRefresh(true)
}
}, [notifLoadPage.get().load])
function onRefresh() {
notifLoadPage.set({
category: '',
load: false
})
setRefresh(false)
setPage(1)
setTimeout(() => {
fetchData(false)
}, 500)
}
return ( return (
@@ -109,6 +130,14 @@ export default function ListDivision() {
} /> } />
<Box p={20}> <Box p={20}>
{
isRefresh &&
<ReloadButtonTop
onReload={() => { onRefresh() }}
title='UPDATE'
/>
}
<Grid justify='center' align='center'> <Grid justify='center' align='center'>
<Grid.Col span={10}> <Grid.Col span={10}>
<TextInput <TextInput
@@ -139,12 +168,12 @@ export default function ListDivision() {
</Grid> </Grid>
<Box pt={20}> <Box pt={20}>
{roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>} {roleLogin.get() == 'supadmin' && <Text>Filter by: {nameGroup}</Text>}
<Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}> <Box bg={tema.get().bgTotalKegiatan} p={10} style={{ borderRadius: 10 }}>
<Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text> <Text fw={'bold'} c={tema.get().utama}>Total Divisi</Text>
<Flex justify={'center'} align={'center'} h={'100%'}> <Flex justify={'center'} align={'center'} h={'100%'}>
<Text fz={40} fw={'bold'} c={tema.get().utama}>{jumlah}</Text> <Text fz={40} fw={'bold'} c={tema.get().utama}>{jumlah}</Text>
</Flex> </Flex>
</Box> </Box>
</Box> </Box>
{isList ? ( {isList ? (
<Box pt={20}> <Box pt={20}>
@@ -153,66 +182,66 @@ export default function ListDivision() {
.fill(null) .fill(null)
.map((_, i) => ( .map((_, i) => (
<Box key={i}> <Box key={i}>
<SkeletonList/> <SkeletonList />
</Box> </Box>
)) ))
: :
_.isEmpty(data) _.isEmpty(data)
? ?
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}> <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '50vh' }}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text> <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Divisi</Text>
</Box> </Box>
: :
data?.map((v: any, i: any) => { data?.map((v: any, i: any) => {
return ( return (
<Box key={i}> <Box key={i}>
<Grid align='center' onClick={() => router.push(`/division/${v.id}`)}> <Grid align='center' onClick={() => router.push(`/division/${v.id}`)}>
<Grid.Col span={{ <Grid.Col span={{
base: 1, base: 1,
xs: 1, xs: 1,
sm: 1, sm: 1,
md: 1, md: 1,
lg: 1, lg: 1,
xl: 1 xl: 1
}}> }}>
<Group > <Group >
<Center> <Center>
<ActionIcon <ActionIcon
variant="gradient" variant="gradient"
size={50} size={50}
aria-label="Gradient action icon" aria-label="Gradient action icon"
radius={100} radius={100}
bg={tema.get().bgFiturHome} bg={tema.get().bgFiturHome}
> >
<HiMiniUserGroup size={25} color={tema.get().utama} /> <HiMiniUserGroup size={25} color={tema.get().utama} />
</ActionIcon> </ActionIcon>
</Center> </Center>
</Group> </Group>
</Grid.Col> </Grid.Col>
<Grid.Col span={{ <Grid.Col span={{
base: 11, base: 11,
xs: 11, xs: 11,
sm: 11, sm: 11,
md: 11, md: 11,
lg: 11, lg: 11,
xl: 11, xl: 11,
}}> }}>
<Box> <Box>
<Box w={{ <Box w={{
base: 280, base: 280,
xl: 430 xl: 430
}}> }}>
<Text truncate="end" pl={paddingLift ? 30 : 20}> <Text truncate="end" pl={paddingLift ? 30 : 20}>
{v.name} {v.name}
</Text> </Text>
</Box>
</Box> </Box>
</Box> </Grid.Col>
</Grid.Col> </Grid>
</Grid> <Divider my="sm" />
<Divider my="sm" /> </Box>
</Box> );
); })
})
} }
</Box> </Box>
) : ( ) : (