123 lines
4.4 KiB
TypeScript
123 lines
4.4 KiB
TypeScript
"use client"
|
|
import { LayoutNavbarNew, WARNA } from '@/module/_global';
|
|
import { Box, Center, Flex, Grid, Group, Skeleton, Text, TextInput } from '@mantine/core';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import React, { useState } from 'react';
|
|
import { HiMagnifyingGlass } from 'react-icons/hi2';
|
|
import { IDataCalender, IHistoryCalender } from '../lib/type_calender';
|
|
import { funGetAllCalender, funGetHostory } from '../lib/api_calender';
|
|
import { useShallowEffect } from '@mantine/hooks';
|
|
import moment from 'moment';
|
|
import "moment/locale/id";
|
|
import _ from 'lodash';
|
|
|
|
export default function HistoryDivisionCalender() {
|
|
const [isData, setData] = useState<IHistoryCalender[]>([])
|
|
const router = useRouter()
|
|
const param = useParams<{ id: string, detail: string }>()
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
const [loading, setLoading] = useState(true)
|
|
|
|
|
|
const getData = async () => {
|
|
try {
|
|
setLoading(true)
|
|
const response = await funGetHostory('?division=' + param.id + '&search=' + searchQuery)
|
|
setData(response.data)
|
|
setLoading(false)
|
|
} catch (error) {
|
|
console.error(error)
|
|
} finally {
|
|
setLoading(false)
|
|
}
|
|
}
|
|
|
|
useShallowEffect(() => {
|
|
getData()
|
|
}, [searchQuery])
|
|
return (
|
|
<Box>
|
|
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Riwayat kalender" menu />
|
|
<Box p={20}>
|
|
<TextInput
|
|
styles={{
|
|
input: {
|
|
color: WARNA.biruTua,
|
|
borderRadius: WARNA.biruTua,
|
|
borderColor: WARNA.biruTua,
|
|
},
|
|
}}
|
|
size="md"
|
|
radius={30}
|
|
leftSection={<HiMagnifyingGlass size={20} />}
|
|
placeholder="Pencarian"
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
<Box mt={30}>
|
|
<Box bg={"#DBE9D8"} style={{
|
|
borderRadius: 10,
|
|
padding: 20
|
|
}}>
|
|
{loading ?
|
|
Array(6)
|
|
.fill(null)
|
|
.map((_, i) => (
|
|
<Box key={i} mb={10}>
|
|
<Grid >
|
|
<Grid.Col span={2}>
|
|
<Flex justify={"center"} direction={'column'}>
|
|
<Skeleton height={30} width={"100%"} radius={"md"} />
|
|
<Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
|
|
</Flex>
|
|
</Grid.Col>
|
|
<Grid.Col span={'auto'}>
|
|
{[...Array(1)].map((_, x) => (
|
|
<Box mb={10} key={x}>
|
|
<Skeleton height={20} width={"100%"} radius={"md"} />
|
|
<Skeleton height={20} width={"100%"} radius={"md"} mt={10} />
|
|
</Box>
|
|
))}
|
|
</Grid.Col>
|
|
</Grid>
|
|
</Box>
|
|
))
|
|
:
|
|
_.isEmpty(isData)
|
|
?
|
|
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '60vh' }}>
|
|
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada history</Text>
|
|
</Box>
|
|
:
|
|
isData.map((v, i) => {
|
|
return (
|
|
<Grid key={i} align='center'>
|
|
<Grid.Col span={3}>
|
|
<Flex justify={"center"} direction={'column'}>
|
|
<Text ta={"center"} fz={20} fw={'bold'}>{moment(v.dateStart).format('D MMM')}</Text>
|
|
<Text ta={"center"} fz={15}>{moment(v.dateStart).format('dddd')}</Text>
|
|
</Flex>
|
|
</Grid.Col>
|
|
<Grid.Col span={9}>
|
|
{v.data.map((d, x) => {
|
|
return (
|
|
<Box mb={9} key={x}
|
|
onClick={() => router.push(`/division/${param.id}/calender/${d.id}`)}
|
|
>
|
|
<Text fw={"bold"} lineClamp={1}>{d.title}</Text>
|
|
<Text>{d.timeStart} | {d.timeEnd}</Text>
|
|
</Box>
|
|
)
|
|
})}
|
|
</Grid.Col>
|
|
</Grid>
|
|
)
|
|
})
|
|
}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|