127 lines
3.5 KiB
TypeScript
127 lines
3.5 KiB
TypeScript
"use client"
|
|
import { LayoutNavbarNew, WARNA } from '@/module/_global';
|
|
import { Box, Center, Flex, Grid, Group, 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";
|
|
|
|
const history = [
|
|
{
|
|
dateStart: "21",
|
|
data: [
|
|
{
|
|
id: 1,
|
|
title: "Pembahasan Mengenai Darmasaba",
|
|
timeEnd: "10:00",
|
|
timeStart: "10.00",
|
|
status: "Selesai",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "Pembahasan Mengenai Darmasaba",
|
|
timeEnd: "10:00",
|
|
timeStart: "13.00 - 14.00",
|
|
},
|
|
]
|
|
},
|
|
{
|
|
dateStart: "21",
|
|
data: [
|
|
{
|
|
id: 1,
|
|
title: "Pembahasan Mengenai Darmasaba",
|
|
timeEnd: "10:00",
|
|
timeStart: "10.00",
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "Pembahasan Mengenai Darmasaba",
|
|
timeEnd: "10:00",
|
|
timeStart: "13.00",
|
|
},
|
|
{
|
|
id: 1,
|
|
title: "Pembahasan Mengenai Darmasaba",
|
|
timeEnd: "10:00",
|
|
timeStart: "15.00",
|
|
},
|
|
]
|
|
},
|
|
]
|
|
|
|
export default function HistoryDivisionCalender() {
|
|
const [isData, setData] = useState<IHistoryCalender[]>([])
|
|
const router = useRouter()
|
|
const param = useParams<{ id: string, detail: string }>()
|
|
const [searchQuery, setSearchQuery] = useState('')
|
|
|
|
const getData = async () => {
|
|
try {
|
|
const response = await funGetHostory('?division=' + param.id + '&search=' + searchQuery)
|
|
setData(response.data)
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
}
|
|
|
|
useShallowEffect(() => {
|
|
getData()
|
|
}, [searchQuery])
|
|
return (
|
|
<Box>
|
|
<LayoutNavbarNew back="/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
|
|
}}>
|
|
{isData.map((v, i) => {
|
|
return (
|
|
<Grid key={i}>
|
|
<Grid.Col span={2}>
|
|
<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={'auto'}>
|
|
{v.data.map((d, x) => {
|
|
return (
|
|
<Box mb={10} key={x} >
|
|
<Text fw={"bold"}>{d.title}</Text>
|
|
<Text>{d.timeStart} | {d.timeEnd}</Text>
|
|
</Box>
|
|
)
|
|
})}
|
|
</Grid.Col>
|
|
</Grid>
|
|
)
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|