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

feat : update validation

Browse Source
This commit is contained in:
lukman
2024-08-26 17:33:14 +08:00
parent 5f169a7e5f
commit 80c6eb7f9a
27 changed files with 762 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

212
src/module/calender/ui/detail_event_division.tsx
View File

@@ -1,6 +1,6 @@
'use client'
import { LayoutDrawer, LayoutNavbarNew, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, CopyButton, Flex, Group, Stack, Text, Tooltip } from '@mantine/core';
import { LayoutDrawer, LayoutNavbarNew, SkeletonSingle, WARNA } from '@/module/_global';
import { ActionIcon, Avatar, Box, CopyButton, Flex, Group, Skeleton, Stack, Text, Tooltip } from '@mantine/core';
import React, { useState } from 'react';
import { BsCalendar2Event, BsCalendarDate } from 'react-icons/bs';
import { MdEventNote, MdOutlineFormatListBulleted } from "react-icons/md";
@@ -15,6 +15,7 @@ import { useShallowEffect } from '@mantine/hooks';
import moment from "moment";
import "moment/locale/id";
import { IDataDetailByIdCalender, IDataDetailByIdMember } from '../lib/type_calender';
import SkeletonDetailEvent from './skeleton_detail_event';
export default function DetailEventDivision() {
const [openDrawer, setOpenDrawer] = useState(false)
@@ -22,16 +23,21 @@ export default function DetailEventDivision() {
const [isDataCalender, setDataCalender] = useState<IDataDetailByIdCalender>()
const [isDataAnggota, setDataAnggota] = useState<IDataDetailByIdMember[]>([])
const [isLengthMember, setLengthMember] = useState()
const [loading, setLoading] = useState(true)
const getData = async () => {
try {
setLoading(true)
const response = await funGetOneCalender(param.detail)
setDataCalender(response.data.calender)
setDataAnggota(response.data.member)
setLengthMember(response.data.total)
setLoading(false)
} catch (error) {
console.log(error)
} finally {
setLoading(false)
}
}
@@ -41,104 +47,142 @@ export default function DetailEventDivision() {
return (
<Box>
<LayoutNavbarNew back="" title="Detail Event"
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Detail Event"
menu={<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />
</ActionIcon>} />
<Box p={20}>
<Box style={{
border: `1px solid ${"#D8D8F1"}`,
padding: 20,
borderRadius: 10
}}>
<Stack ml={10}>
<Group mb={10} gap={30}>
<BsCalendar2Event size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.title}</Text>
</Group>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
</Group>
<Group mb={10} gap={30}>
<LuClock size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</Group>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<Text>
{isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
''}
</Text>
</Group>
<Group mb={10} gap={30}>
<LuLink size={25} color={WARNA.biruTua} />
<Group justify='space-between'>
<Text>{isDataCalender?.linkMeet}</Text>
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
{({ copied, copy }) => (
<Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
<ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
{copied ? (
<FaCheck size={20} />
) : (
<TbCopy size={20} />
)}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
{loading
?
<SkeletonDetailEvent/>
:
<Box style={{
border: `1px solid ${"#D8D8F1"}`,
padding: 20,
borderRadius: 10
}}>
<Stack ml={10}>
<Group mb={10} gap={30}>
<BsCalendar2Event size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.title}</Text>
</Group>
</Group>
<Group gap={30}>
<MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.desc}</Text>
</Group>
</Stack>
</Box>
<Box pt={20}>
<Group justify='space-between'>
<Text fw={"bold"}>Total Anggota</Text>
<Text>{isLengthMember} Anggota</Text>
</Group>
<Box mb={20}>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<Text>{moment(isDataCalender?.dateStart).format('LL')}</Text>
</Group>
<Group mb={10} gap={30}>
<LuClock size={25} color={WARNA.biruTua} />
<Text>{isDataCalender?.timeStart} | {isDataCalender?.timeEnd} </Text>
</Group>
<Group mb={10} gap={30}>
<BsCalendarDate size={25} color={WARNA.biruTua} />
<Text>
{isDataCalender?.repeatEventTyper.toString() === '1' ? 'Acara 1 Kali' :
isDataCalender?.repeatEventTyper.toString() === '2' ? 'Hari Kerja (senin - jumat)' :
isDataCalender?.repeatEventTyper.toString() === '3' ? 'Minggu' :
isDataCalender?.repeatEventTyper.toString() === '4' ? 'Bulanan' :
isDataCalender?.repeatEventTyper.toString() === '5' ? 'Tahunan' :
''}
</Text>
</Group>
<Group mb={10} gap={30}>
<LuLink size={25} color={WARNA.biruTua} />
{isDataCalender?.linkMeet ? (
<Group justify='space-between'>
<Text>{isDataCalender?.linkMeet}</Text>
<CopyButton value={String(isDataCalender?.linkMeet)} timeout={2000}>
{({ copied, copy }) => (
<Tooltip label={copied ? 'Copied' : 'Copy'} withArrow position="right">
<ActionIcon color={copied ? 'teal' : WARNA.biruTua} variant="subtle" onClick={copy}>
{copied ? (
<FaCheck size={20} />
) : (
<TbCopy size={20} />
)}
</ActionIcon>
</Tooltip>
)}
</CopyButton>
</Group>
) : (
<Text>-</Text>
)
}
</Group>
<Group gap={30}>
<MdOutlineFormatListBulleted size={25} color={WARNA.biruTua} />
{isDataCalender?.desc ? (
<Text>{isDataCalender?.desc}</Text>
) : (
<Text>-</Text>
)
}
</Group>
</Stack>
</Box>
}
{loading ?
<Box pt={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
pt={20}
pb={20}
>
{isDataAnggota.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mb={20}
{Array(4)
.fill(null)
.map((_, i) => (
<Box
key={i}
>
<Group>
<Avatar src={""} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
<Text c={"#5A687D"} fz={14}>
{v.email}
</Text>
</Box>
</Group>
</Flex>
);
})}
<SkeletonSingle />
</Box>
))}
</Box>
</Box>
</Box>
:
<Box pt={20}>
<Group justify='space-between'>
<Text fw={"bold"}>Total Anggota</Text>
<Text>{isLengthMember} Anggota</Text>
</Group>
<Box mb={20}>
<Box
style={{
border: `1px solid ${"#C7D6E8"}`,
borderRadius: 10,
}}
px={20}
pt={20}
>
{isDataAnggota.map((v, i) => {
return (
<Flex
justify={"space-between"}
align={"center"}
mb={20}
key={i}
>
<Group>
<Avatar src={""} alt="it's me" size="lg" />
<Box>
<Text c={WARNA.biruTua} fw={"bold"}>
{v.name}
</Text>
<Text c={"#5A687D"} fz={14}>
{v.email}
</Text>
</Box>
</Group>
</Flex>
);
})}
</Box>
</Box>
</Box>
}
</Box>
<LayoutDrawer opened={openDrawer} title={'Menu'} onClose={() => setOpenDrawer(false)}>
<DrawerDetailEvent />

14
src/module/calender/ui/navbar_create_division_calender.tsx
View File

@@ -27,7 +27,6 @@ export default function NavbarCreateDivisionCalender() {
dateStart: false,
timeStart: false,
timeEnd: false,
linkMeet: false,
repeatEventTyper: false,
desc: false
})
@@ -94,7 +93,7 @@ export default function NavbarCreateDivisionCalender() {
return (
<Box>
<LayoutNavbarNew back="/calender" title="tambah kalender" menu />
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="tambah kalender" menu />
<Box p={20}>
<Stack>
<TextInput
@@ -179,12 +178,12 @@ export default function NavbarCreateDivisionCalender() {
error={
touched.timeEnd && (
isData.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
)
) ||
(isData.timeStart > isData.timeEnd ? "Waktu Akhir Tidak Tepat" : null)
}
/>
</SimpleGrid>
<TextInput
required
styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -196,12 +195,6 @@ export default function NavbarCreateDivisionCalender() {
label="Link Meet"
value={isData.linkMeet}
onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
onBlur={() => setTouched({ ...touched, linkMeet: true })}
error={
touched.linkMeet && (
isData.linkMeet == "" ? "Link Meet Tidak Boleh Kosong" : null
)
}
/>
<Select
required
@@ -312,7 +305,6 @@ export default function NavbarCreateDivisionCalender() {
isData.dateStart !== " " &&
isData.timeStart !== "" &&
isData.timeEnd !== "" &&
isData.linkMeet !== "" &&
isData.repeatEventTyper !== ""
) {
setModal(true);

4
src/module/calender/ui/navbar_division_calender.tsx
View File

@@ -5,12 +5,14 @@ import React, { useState } from 'react';
import { HiMenu } from 'react-icons/hi';
import DawerDivisionCalender from './dawer_division_calender';
import DateEventDivision from './date_event_division';
import { useParams } from 'next/navigation';
export default function NavbarDivisionCalender() {
const [openDrawer, setOpenDrawer] = useState(false)
const param = useParams<{ id: string }>()
return (
<div>
<LayoutNavbarNew back="" title="Divisi - kalender"
<LayoutNavbarNew back={`/division/${param.id}`} title="Divisi - kalender"
menu={
<ActionIcon variant="light" onClick={() => setOpenDrawer(true)} bg={WARNA.bgIcon} size="lg" radius="lg" aria-label="Settings">
<HiMenu size={20} color='white' />

40
src/module/calender/ui/skeleton_detail_event.tsx Normal file
View File

@@ -0,0 +1,40 @@
import { Box, Group, Skeleton, Stack } from '@mantine/core';
import React from 'react';
export default function SkeletonDetailEvent() {
return (
<Box style={{
border: `1px solid ${"#D8D8F1"}`,
padding: 20,
borderRadius: 10
}}>
<Stack ml={10}>
<Group mb={10} gap={30}>
<Skeleton height={30} width={30} radius="md" />
<Skeleton height={20} width={"60%"} radius="md" />
</Group>
<Group mb={10} gap={30}>
<Skeleton height={30} width={30} radius="md" />
<Skeleton height={20} width={"60%"} radius="md" />
</Group>
<Group mb={10} gap={30}>
<Skeleton height={30} width={30} radius="md" />
<Skeleton height={20} width={"60%"} radius="md" />
</Group>
<Group mb={10} gap={30}>
<Skeleton height={30} width={30} radius="md" />
<Skeleton height={20} width={"60%"} radius="md" />
</Group>
<Group mb={10} gap={30}>
<Skeleton height={30} width={30} radius="md" />
<Skeleton height={20} width={"60%"} radius="md" />
</Group>
<Group gap={30}>
<Skeleton height={30} width={30} radius="md" />
<Skeleton height={20} width={"60%"} radius="md" />
</Group>
</Stack>
</Box>
);
}

64
src/module/calender/ui/update_division_calender.tsx
View File

@@ -23,6 +23,14 @@ export default function UpdateDivisionCalender() {
const memberValue = memberUser.get() as IFormMemberCalender[]
const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
const [openMember, setOpenMember] = useState(false)
const [touched, setTouched] = useState({
title: false,
dateStart: false,
timeStart: false,
timeEnd: false,
repeatEventTyper: false,
desc: false
})
const fetchGetOne = async () => {
try {
@@ -40,7 +48,6 @@ export default function UpdateDivisionCalender() {
const [value, setValue] = useState<Date | null>(null);
const router = useRouter()
async function onSubmit(val: boolean) {
try {
if (val) {
@@ -77,7 +84,7 @@ export default function UpdateDivisionCalender() {
return (
<Box>
<LayoutNavbarNew back={`/division/${param.id}/calender`} title="Edit kalender" menu />
<LayoutNavbarNew back={`/division/${param.id}/calender/${param.detail}`} title="Edit kalender" menu />
<Box p={20}>
<Stack>
<TextInput
@@ -99,6 +106,9 @@ export default function UpdateDivisionCalender() {
})
}
}
onBlur={() => setTouched({ ...touched, title: true })}
required
error={touched.title && !isDataCalender?.title ? "Nama Acara Tidak Boleh Kosong" : null}
/>
<DateInput
styles={{
@@ -122,6 +132,10 @@ export default function UpdateDivisionCalender() {
}
placeholder="Input Tanggal"
label="Tanggal"
minDate={new Date()}
onBlur={() => setTouched({ ...touched, dateStart: true })}
error={touched.dateStart && !isDataCalender?.dateStart ? "Tanggal Tidak Boleh Kosong" : null}
required
/>
<SimpleGrid
cols={{ base: 2, sm: 2, lg: 2 }}
@@ -145,6 +159,9 @@ export default function UpdateDivisionCalender() {
})
}
}
onBlur={() => setTouched({ ...touched, timeStart: true })}
error={touched.timeStart && !isDataCalender?.timeStart ? "Waktu Awal Tidak Boleh Kosong" : null}
required
/>
<TimeInput
styles={{
@@ -165,6 +182,14 @@ export default function UpdateDivisionCalender() {
})
}
}
onBlur={() => setTouched({ ...touched, timeEnd: true })}
required
error={
touched.timeEnd && (
isDataCalender?.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
) ||
(String(isDataCalender?.timeStart) > String(isDataCalender?.timeEnd) ? "Waktu Akhir Tidak Tepat" : null)
}
/>
</SimpleGrid>
<TextInput
@@ -215,20 +240,14 @@ export default function UpdateDivisionCalender() {
})
}
}
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
error={
touched.repeatEventTyper && (
isDataCalender?.repeatEventTyper == "" ? "Ulangi Event Tidak Boleh Kosong" : null
)
}
required
/>
<Box mt={5} onClick={() => setOpenMember(true)}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Anggota</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Textarea styles={{
input: {
border: `1px solid ${"#D6D8F6"}`,
@@ -236,7 +255,7 @@ export default function UpdateDivisionCalender() {
},
}}
size="md" placeholder='Deskripsi' label="Deskripsi"
// value={isDataCalender?.desc}
// value={isDataCalender?.desc}
defaultValue={isDataCalender?.desc}
onChange={
(event) => {
@@ -247,6 +266,19 @@ export default function UpdateDivisionCalender() {
}
}
/>
<Box mt={5} onClick={() => setOpenMember(true)}>
<Group
justify="space-between"
p={10}
style={{
border: `1px solid ${"#D6D8F6"}`,
borderRadius: 10,
}}
>
<Text>Tambah Anggota *</Text>
<IoIosArrowDropright size={25} />
</Group>
</Box>
<Box pt={30}>
<Group justify="space-between">
<Text c={WARNA.biruTua}>Anggota Terpilih</Text>