From 3a22a50e57240bdb44df33d48c27ebf19ae27d46 Mon Sep 17 00:00:00 2001 From: amel Date: Tue, 14 Jan 2025 11:51:37 +0800 Subject: [PATCH] rev: calender Deskripsi: - tampilan list data konflik No Issues --- src/module/_global/index.ts | 2 + .../_global/layout/layout_modal_new.tsx | 43 ++++++++ .../ui/create_calender_division_caleder.tsx | 11 +- .../ui/create_view_event_conflict.tsx | 101 ++++++++++++++++++ 4 files changed, 154 insertions(+), 3 deletions(-) create mode 100644 src/module/_global/layout/layout_modal_new.tsx create mode 100644 src/module/calender/ui/create_view_event_conflict.tsx diff --git a/src/module/_global/index.ts b/src/module/_global/index.ts index a592424..d7ea5e1 100644 --- a/src/module/_global/index.ts +++ b/src/module/_global/index.ts @@ -28,6 +28,7 @@ import SkeletonList from "./components/skeleton_list"; import { funViewDir } from "./fun/view_dir"; import { funSendWebPush } from "./fun/send_web_push"; import ViewFilterData from "./view/view_filter_kategori_data"; +import LayoutModalNew from "./layout/layout_modal_new"; export { WARNA }; export { LayoutLogin }; @@ -65,3 +66,4 @@ export { keyWibu } export { funViewDir } export { funSendWebPush } export { ViewFilterData } +export { LayoutModalNew } diff --git a/src/module/_global/layout/layout_modal_new.tsx b/src/module/_global/layout/layout_modal_new.tsx new file mode 100644 index 0000000..3ade286 --- /dev/null +++ b/src/module/_global/layout/layout_modal_new.tsx @@ -0,0 +1,43 @@ +import { Button, Flex, Modal, SimpleGrid, Text } from '@mantine/core'; +import { useMediaQuery } from '@mantine/hooks'; +import { BsQuestionCircleFill } from 'react-icons/bs'; + +export default function LayoutModalNew({ opened, onClose, description, onYes, loading, onCheck }: { opened: boolean, onClose: () => void, loading?: boolean, description: string, onYes: (val: boolean) => void, onCheck: (val: boolean) => void }) { + const isMobile = useMediaQuery('(max-width: 768px)'); + return ( + + + + {description} + + + + {isMobile ? + <> + + + + : + <> + + + + + } + + + ); +} + diff --git a/src/module/calender/ui/create_calender_division_caleder.tsx b/src/module/calender/ui/create_calender_division_caleder.tsx index 8730faa..f92c985 100644 --- a/src/module/calender/ui/create_calender_division_caleder.tsx +++ b/src/module/calender/ui/create_calender_division_caleder.tsx @@ -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(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([]) 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 setOpenMember(false)} /> + if (isModalViewData) return setModalViewData(false)} data={dataAcaraKonflik} /> return ( @@ -468,7 +473,7 @@ export default function CreateCalenderDivisionCaleder() { }} /> - { val ? setModalViewData(true) : setModalViewData(false) }} onClose={() => { setModalKonfirmasiTglSama(false) setModal(false) diff --git a/src/module/calender/ui/create_view_event_conflict.tsx b/src/module/calender/ui/create_view_event_conflict.tsx new file mode 100644 index 0000000..f6635ce --- /dev/null +++ b/src/module/calender/ui/create_view_event_conflict.tsx @@ -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 ( + + + { onClose(true) }} bg={tema.get().bgIcon} size="lg" radius="lg" aria-label="Settings"> + + + + } + menu={<>} + /> + + { + (data.length === 0) ? + + Tidak ada data + + : + + {data.map((v, i) => { + return ( + + + + + + + + + + + {v.title} + {moment.utc(v.timeStart).format("HH:mm")} - {moment.utc(v.timeEnd).format("HH:mm")} + + {/* {isSelected ? : null} */} + + + + + + + + ); + })} + + } + + + + + + ); +}