370 lines
13 KiB
TypeScript
370 lines
13 KiB
TypeScript
"use client"
|
|
import { LayoutNavbarNew, TEMA } from '@/module/_global';
|
|
import { Avatar, Box, Button, Divider, Flex, Grid, Group, Input, NumberInput, rem, Select, SimpleGrid, Stack, Text, Textarea, TextInput } from '@mantine/core';
|
|
import { DateInput, TimeInput } from '@mantine/dates';
|
|
import React, { useState } from 'react';
|
|
import { IoIosArrowDropright } from 'react-icons/io';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import LayoutModal from '@/module/_global/layout/layout_modal';
|
|
import toast from 'react-hot-toast';
|
|
import moment from 'moment';
|
|
import { useHookstate } from '@hookstate/core';
|
|
import { globalCalender, globalUlangiEvent } from '../lib/val_calender';
|
|
import { IFormMemberCalender, IFormUlangiEvent } from '../lib/type_calender';
|
|
import { funCreateCalender } from '../lib/api_calender';
|
|
import CreateUserCalender from './create_user_calender';
|
|
import { useMediaQuery } from '@mantine/hooks';
|
|
|
|
export default function NavbarCreateDivisionCalender() {
|
|
const [value, setValue] = useState<Date | null>(null);
|
|
const router = useRouter()
|
|
const [isModal, setModal] = useState(false)
|
|
const member = useHookstate(globalCalender)
|
|
const memberValue = member.get() as IFormMemberCalender[]
|
|
const [openMember, setOpenMember] = useState(false)
|
|
const param = useParams<{ id: string, detail: string }>()
|
|
const tema = useHookstate(TEMA)
|
|
const isMobile = useMediaQuery('(max-width: 369px)');
|
|
const [touched, setTouched] = useState({
|
|
title: false,
|
|
dateStart: false,
|
|
timeStart: false,
|
|
timeEnd: false,
|
|
repeatEventTyper: false,
|
|
desc: false,
|
|
repeatValue: false
|
|
})
|
|
const [isData, setData] = useState({
|
|
idDivision: "",
|
|
title: "",
|
|
dateStart: "",
|
|
timeStart: "",
|
|
timeEnd: "",
|
|
linkMeet: "",
|
|
repeatEventTyper: "",
|
|
desc: "",
|
|
repeatValue: "1"
|
|
})
|
|
|
|
async function onSubmit(val: boolean) {
|
|
try {
|
|
if (val) {
|
|
if (isData.timeStart > isData.timeEnd) {
|
|
return toast.error("Waktu Akhir Tidak tepat");
|
|
}
|
|
const response = await funCreateCalender({
|
|
idDivision: param.id,
|
|
title: isData.title,
|
|
dateStart: isData.dateStart,
|
|
timeStart: isData.timeStart,
|
|
timeEnd: isData.timeEnd,
|
|
linkMeet: isData.linkMeet,
|
|
repeatEventTyper: isData.repeatEventTyper,
|
|
desc: isData.desc,
|
|
repeatValue: isData.repeatValue,
|
|
member: memberValue
|
|
})
|
|
|
|
if (response.success) {
|
|
setModal(false)
|
|
router.push(`/division/${param.id}/calender`)
|
|
toast.success(response.message)
|
|
member.set([])
|
|
} else {
|
|
toast.error(response.message)
|
|
setModal(false)
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error(error)
|
|
setModal(false)
|
|
toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
|
|
} finally {
|
|
setModal(false)
|
|
}
|
|
}
|
|
|
|
if (openMember) return <CreateUserCalender onClose={() => setOpenMember(false)} />
|
|
|
|
return (
|
|
<Box>
|
|
<LayoutNavbarNew back={`/division/${param.id}/calender/`} title="Tambah Acara" menu />
|
|
<Box p={20}>
|
|
<Stack pb={100}>
|
|
<TextInput
|
|
required
|
|
styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
size="md"
|
|
placeholder="Nama Acara"
|
|
label="Nama Acara"
|
|
value={isData.title}
|
|
onChange={(event) => {
|
|
setData({ ...isData, title: event.target.value })
|
|
setTouched({ ...touched, title: false })
|
|
}}
|
|
onBlur={() => setTouched({ ...touched, title: true })}
|
|
error={
|
|
touched.title && (
|
|
isData.title == "" ? "Nama Acara Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<DateInput
|
|
required
|
|
styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
size="md"
|
|
value={value}
|
|
onChange={(val) => {
|
|
setValue(val);
|
|
setData({ ...isData, dateStart: moment(val).format("YYYY-MM-DD") });
|
|
setTouched({ ...touched, dateStart: false });
|
|
}}
|
|
placeholder="Input Tanggal"
|
|
label="Tanggal"
|
|
onBlur={() => setTouched({ ...touched, dateStart: true })}
|
|
error={
|
|
touched.dateStart && (
|
|
isData.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<SimpleGrid
|
|
cols={{ base: 2, sm: 2, lg: 2 }}
|
|
>
|
|
<TimeInput
|
|
required
|
|
styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
size="md"
|
|
label="Waktu Awal"
|
|
value={isData.timeStart}
|
|
onChange={(event) => setData({ ...isData, timeStart: event.target.value })}
|
|
onBlur={() => setTouched({ ...touched, timeStart: true })}
|
|
error={
|
|
touched.timeStart && (
|
|
isData.timeStart == "" ? "Waktu Awal Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<TimeInput
|
|
required
|
|
styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
size="md"
|
|
label="Waktu Akhir"
|
|
value={isData.timeEnd}
|
|
onChange={(event) => setData({ ...isData, timeEnd: event.target.value })}
|
|
onBlur={() => setTouched({ ...touched, timeEnd: true })}
|
|
error={
|
|
touched.timeEnd && (
|
|
isData.timeEnd == "" ? "Waktu Akhir Tidak Boleh Kosong" : null
|
|
) ||
|
|
(isData.timeStart > isData.timeEnd ? "Waktu Akhir Tidak Tepat" : null)
|
|
}
|
|
/>
|
|
</SimpleGrid>
|
|
<TextInput
|
|
styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
size="md"
|
|
placeholder="Link Meet"
|
|
label="Link Meet"
|
|
value={isData.linkMeet}
|
|
onChange={(event) => setData({ ...isData, linkMeet: event.target.value })}
|
|
/>
|
|
<Select
|
|
required
|
|
styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
size="md"
|
|
placeholder="Ulangi Acara"
|
|
label="Ulangi Acara"
|
|
data={[
|
|
{ value: 'once', label: 'Acara 1 Kali' },
|
|
{ value: 'daily', label: 'Setiap Hari' },
|
|
// { value: 'weekdays', label: 'Hari Kerja (Sen - Jum)' },
|
|
{ value: 'weekly', label: 'Mingguan' },
|
|
{ value: 'monthly', label: 'Bulanan' },
|
|
{ value: 'yearly', label: 'Tahunan' },
|
|
]}
|
|
value={isData.repeatEventTyper}
|
|
onChange={(val: any) => {
|
|
setData({ ...isData, repeatEventTyper: val })
|
|
setTouched({ ...touched, repeatEventTyper: false })
|
|
}
|
|
}
|
|
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
|
|
error={
|
|
touched.repeatEventTyper && (
|
|
isData.repeatEventTyper == "" ? "Ulangi Acara Tidak Boleh Kosong" : null
|
|
)
|
|
}
|
|
/>
|
|
<TextInput styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
type='number'
|
|
required
|
|
label="Jumlah pengulangan"
|
|
size="md"
|
|
placeholder='Jumlah pengulangan'
|
|
value={isData.repeatValue}
|
|
onChange={(event) => {
|
|
setData({ ...isData, repeatValue: String(event.currentTarget.value) })
|
|
setTouched({ ...touched, repeatValue: false })
|
|
}}
|
|
onBlur={() => setTouched({ ...touched, repeatValue: true })}
|
|
error={
|
|
touched.repeatValue && (
|
|
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null ||
|
|
Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh 0" : null
|
|
)
|
|
}
|
|
/>
|
|
<Textarea styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
value={isData.desc}
|
|
size="md" placeholder='Deskripsi' label="Deskripsi"
|
|
onChange={(event) => setData({ ...isData, desc: event.target.value })}
|
|
/>
|
|
<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>
|
|
{
|
|
member.length > 0 &&
|
|
<Box pt={30} mb={60}>
|
|
<Group justify="space-between">
|
|
<Text c={tema.get().utama}>Anggota Terpilih</Text>
|
|
<Text c={tema.get().utama}>Total {member.length} Anggota</Text>
|
|
</Group>
|
|
<Box pt={10}>
|
|
<Box mb={20}>
|
|
<Box
|
|
style={{
|
|
border: `1px solid ${"#C7D6E8"}`,
|
|
borderRadius: 10,
|
|
}}
|
|
px={20}
|
|
py={10}
|
|
>
|
|
{member.length == 0 ?
|
|
<Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '10vh' }}>
|
|
<Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada Anggota</Text>
|
|
</Box>
|
|
:
|
|
|
|
member.get().map((v: any, i: any) => {
|
|
return (
|
|
<Box key={i}>
|
|
<Grid align='center' mt={10}
|
|
>
|
|
<Grid.Col span={9}>
|
|
<Group>
|
|
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={isMobile ? 'md' : 'lg'} />
|
|
<Box w={{
|
|
base: isMobile ? 130 : 140,
|
|
xl: 270
|
|
}}>
|
|
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} fz={isMobile ? 14 : 16} >
|
|
{v.name}
|
|
</Text>
|
|
</Box>
|
|
</Group>
|
|
</Grid.Col>
|
|
<Grid.Col span={3}>
|
|
<Text c={tema.get().utama} fw={"bold"} ta={'end'} fz={isMobile ? 13 : 16}>
|
|
Anggota
|
|
</Text>
|
|
</Grid.Col>
|
|
</Grid>
|
|
<Box mt={10}>
|
|
<Divider size={"xs"} />
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
}
|
|
</Stack>
|
|
</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={() => {
|
|
if (
|
|
isData.title !== "" &&
|
|
isData.dateStart !== " " &&
|
|
isData.timeStart !== "" &&
|
|
isData.timeEnd !== "" &&
|
|
isData.repeatEventTyper !== ""
|
|
) {
|
|
setModal(true);
|
|
} else {
|
|
toast.error("Mohon lengkapi semua form");
|
|
}
|
|
}}
|
|
>
|
|
Simpan
|
|
</Button>
|
|
</Box>
|
|
<LayoutModal opened={isModal} onClose={() => setModal(false)}
|
|
description="Apakah Anda yakin ingin menambahkan data?"
|
|
onYes={(val) => { onSubmit(val) }} />
|
|
</Box>
|
|
);
|
|
}
|