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