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

rev: calender

Browse Source 
Deskripsi:
- tampilan list data konflik

No Issues
This commit is contained in:
amel
2025-01-14 11:51:37 +08:00
parent 40a33f8453
commit 3a22a50e57
4 changed files with 154 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/module/calender/ui/create_calender_division_caleder.tsx
View File

@@ -1,8 +1,8 @@
'use client'
import { keyWibu, LayoutNavbarNew, TEMA } from '@/module/_global';
import { keyWibu, LayoutModalNew, LayoutNavbarNew, TEMA } from '@/module/_global';
import LayoutModal from '@/module/_global/layout/layout_modal';
import { useHookstate } from '@hookstate/core';
import { Avatar, Box, Button, Divider, Grid, Group, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
import { Avatar, Box, Button, Divider, Flex, Grid, Group, Modal, rem, Select, SimpleGrid, Stack, Table, Text, Textarea, TextInput } from '@mantine/core';
import { DateInput, TimeInput } from '@mantine/dates';
import { useMediaQuery } from '@mantine/hooks';
import moment from 'moment';
@@ -15,16 +15,19 @@ import { funCheckCalender, funCreateCalender } from '../lib/api_calender';
import { IFormMemberCalender } from '../lib/type_calender';
import { globalCalender } from '../lib/val_calender';
import CreateUserCalender from './create_user_calender';
import ViewDataConflict from './create_view_event_conflict';
export default function CreateCalenderDivisionCaleder() {
const [value, setValue] = useState<Date | null>(null);
const router = useRouter()
const [isModal, setModal] = useState(false)
const [isModalKonfirmasiTglSama, setModalKonfirmasiTglSama] = useState(false)
const [isModalViewData, setModalViewData] = useState(false)
const [loadingModal, setLoadingModal] = useState(false)
const [loadingModalKonfirmasiTglSama, setLoadingModalKonfirmasiTglSama] = useState(false)
const member = useHookstate(globalCalender)
const memberValue = member.get() as IFormMemberCalender[]
const [dataAcaraKonflik, setDataAcaraKonflik] = useState<any[]>([])
const [openMember, setOpenMember] = useState(false)
const param = useParams<{ id: string, detail: string }>()
const tema = useHookstate(TEMA)
@@ -75,6 +78,7 @@ export default function CreateCalenderDivisionCaleder() {
onSubmit()
} else {
setModalKonfirmasiTglSama(true)
setDataAcaraKonflik(response.data)
}
} catch (error) {
console.error(error)
@@ -217,6 +221,7 @@ export default function CreateCalenderDivisionCaleder() {
}
if (openMember) return <CreateUserCalender onClose={() => setOpenMember(false)} />
if (isModalViewData) return <ViewDataConflict onClose={() => setModalViewData(false)} data={dataAcaraKonflik} />
return (
<Box>
@@ -468,7 +473,7 @@ export default function CreateCalenderDivisionCaleder() {
}} />
<LayoutModal loading={loadingModalKonfirmasiTglSama} opened={isModalKonfirmasiTglSama}
<LayoutModalNew loading={loadingModalKonfirmasiTglSama} opened={isModalKonfirmasiTglSama} onCheck={(val) => { val ? setModalViewData(true) : setModalViewData(false) }}
onClose={() => {
setModalKonfirmasiTglSama(false)
setModal(false)

101
src/module/calender/ui/create_view_event_conflict.tsx Normal file
View File

@@ -0,0 +1,101 @@
import { LayoutNavbarNew, TEMA } from '@/module/_global';
import { useHookstate } from '@hookstate/core';
import { ActionIcon, Avatar, Box, Button, Divider, Flex, Grid, rem, Stack, Table, Text } from '@mantine/core';
import moment from 'moment';
import { HiChevronLeft } from 'react-icons/hi2';
import "moment/locale/id";
import { FaCheck } from 'react-icons/fa6';
import { useMediaQuery } from '@mantine/hooks';
import { MdOutlineEventNote } from 'react-icons/md';
export default function ViewDataConflict({ onClose, data }: { onClose: (val: any) => void, data: any[] }) {
const tema = useHookstate(TEMA)
const isMobile2 = useMediaQuery("(max-width: 438px)");
return (
<Box>
<LayoutNavbarNew
// back=""
title="Data Acara"
state={
<Box>
<ActionIcon variant="light" onClick={() => { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiChevronLeft size={20} color='white' />
</ActionIcon>
</Box>
}
menu={<></>}
/>
<Box p={20}>
{
(data.length === 0) ?
<Stack align="stretch" justify="center" w={"100%"} h={"60vh"}>
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada data</Text>
</Stack>
:
<Box mt={20} mb={100}>
{data.map((v, i) => {
return (
<Box my={10} key={i}>
<Grid align='center' >
<Grid.Col
span={{
base: 1,
xs: 1,
sm: 1,
md: 1,
lg: 1,
xl: 1,
}}
>
<ActionIcon variant="light" bg={tema.get().utama} size={50} radius={100} aria-label="icon" >
<MdOutlineEventNote color={"white"} size={25} />
</ActionIcon>
</Grid.Col>
<Grid.Col
span={{
base: 11,
xs: 11,
sm: 11,
md: 11,
lg: 11,
xl: 11,
}}
>
<Flex justify='space-between' align={"center"}>
<Flex direction={'column'} align="flex-start" justify="flex-start">
<Text pl={isMobile2 ? 40 : 30} lineClamp={1}>{v.title}</Text>
<Text pl={isMobile2 ? 40 : 30} c={"dimmed"} lineClamp={1}>{moment.utc(v.timeStart).format("HH:mm")} - {moment.utc(v.timeEnd).format("HH:mm")}</Text>
</Flex>
{/* {isSelected ? <FaCheck /> : null} */}
</Flex>
</Grid.Col>
</Grid>
<Box mt={10}>
<Divider size={"xs"} />
</Box>
</Box>
);
})}
</Box>
}
</Box>
<Box pos={'fixed'} bottom={0} p={rem(20)} w={"100%"} style={{
maxWidth: rem(550),
zIndex: 999,
backgroundColor: `${tema.get().bgUtama}`,
}}>
<Button
c={"white"}
bg={tema.get().utama}
size="lg"
radius={30}
fullWidth
onClick={() => { onClose(true) }}
>
Tutup
</Button>
</Box>
</Box>
);
}