upd: calender
Deskripsi: - update validasi calender - update validasi edit calender No Issues
This commit is contained in:
amel
@@ -1,11 +1,428 @@
|
||||
import { Box } from '@mantine/core';
|
||||
import React from 'react';
|
||||
import NavbarCreateDivisionCalender from './navbar_create_division_calender';
|
||||
'use client'
|
||||
import { 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 { DateInput, TimeInput } from '@mantine/dates';
|
||||
import { useMediaQuery } from '@mantine/hooks';
|
||||
import moment from 'moment';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { IoIosArrowDropright } from 'react-icons/io';
|
||||
import { funCreateCalender } from '../lib/api_calender';
|
||||
import { IFormMemberCalender } from '../lib/type_calender';
|
||||
import { globalCalender } from '../lib/val_calender';
|
||||
import CreateUserCalender from './create_user_calender';
|
||||
|
||||
export default function CreateCalenderDivisionCaleder() {
|
||||
const [value, setValue] = useState<Date | null>(null);
|
||||
const router = useRouter()
|
||||
const [isModal, setModal] = useState(false)
|
||||
const [loadingModal, setLoadingModal] = 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 isMobile2 = useMediaQuery("(max-width: 438px)");
|
||||
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 {
|
||||
setLoadingModal(true)
|
||||
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)
|
||||
toast.error("Gagal menambahkan pengumuman, coba lagi nanti");
|
||||
} finally {
|
||||
setModal(false)
|
||||
setLoadingModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
function onCheck() {
|
||||
const cek = checkAll()
|
||||
if (!cek)
|
||||
return false
|
||||
|
||||
if (memberValue.length == 0)
|
||||
return toast.error("Error! silahkan pilih anggota")
|
||||
|
||||
setModal(true)
|
||||
}
|
||||
|
||||
function checkAll() {
|
||||
let nilai = true
|
||||
if (isData.title === "") {
|
||||
setTouched(touched => ({ ...touched, title: true }))
|
||||
nilai = false
|
||||
}
|
||||
if (isData.dateStart === "") {
|
||||
setTouched(touched => ({ ...touched, dateStart: true }))
|
||||
nilai = false
|
||||
}
|
||||
if (isData.timeStart == "") {
|
||||
setTouched(touched => ({ ...touched, timeStart: true }))
|
||||
nilai = false
|
||||
}
|
||||
if (isData.timeEnd == "" || isData.timeStart > isData.timeEnd) {
|
||||
setTouched(touched => ({ ...touched, timeEnd: true }))
|
||||
nilai = false
|
||||
}
|
||||
if (isData.repeatEventTyper == "" || String(isData.repeatEventTyper) == "null") {
|
||||
setTouched(touched => ({ ...touched, repeatEventTyper: true }))
|
||||
nilai = false
|
||||
}
|
||||
if (isData.repeatValue === "" || Number(isData.repeatValue) <= 0) {
|
||||
setTouched(touched => ({ ...touched, repeatValue: true }))
|
||||
nilai = false
|
||||
}
|
||||
|
||||
return nilai
|
||||
}
|
||||
|
||||
function onValidation(kategori: string, val: any) {
|
||||
if (kategori == 'title') {
|
||||
setData({ ...isData, title: val })
|
||||
if (val === "") {
|
||||
setTouched({ ...touched, title: true })
|
||||
} else {
|
||||
setTouched({ ...touched, title: false })
|
||||
}
|
||||
} else if (kategori == 'dateStart') {
|
||||
setValue(val)
|
||||
setData({ ...isData, dateStart: moment(val).format("YYYY-MM-DD") })
|
||||
if (val === "") {
|
||||
setTouched({ ...touched, dateStart: true })
|
||||
} else {
|
||||
setTouched({ ...touched, dateStart: false })
|
||||
}
|
||||
} else if (kategori == 'timeStart') {
|
||||
setData({ ...isData, timeStart: val })
|
||||
if (val == "") {
|
||||
setTouched({ ...touched, timeStart: true })
|
||||
} else {
|
||||
setTouched({ ...touched, timeStart: false })
|
||||
}
|
||||
} else if (kategori == 'timeEnd') {
|
||||
setData({ ...isData, timeEnd: val })
|
||||
if (val == "" || isData.timeStart > val) {
|
||||
setTouched({ ...touched, timeEnd: true })
|
||||
} else {
|
||||
setTouched({ ...touched, timeEnd: false })
|
||||
}
|
||||
} else if (kategori == 'repeatEventTyper') {
|
||||
setData(isData => ({ ...isData, repeatEventTyper: val }))
|
||||
if (val == "once") {
|
||||
setData(isData => ({ ...isData, repeatValue: "1" }))
|
||||
}
|
||||
if (val == "" || String(val) == "null") {
|
||||
setTouched({ ...touched, repeatEventTyper: true })
|
||||
} else {
|
||||
setTouched({ ...touched, repeatEventTyper: false })
|
||||
}
|
||||
} else if (kategori == 'repeatValue') {
|
||||
setData(isData => ({ ...isData, repeatValue: val, }))
|
||||
if (val === "" || Number(val) <= 0) {
|
||||
setTouched(touched => ({ ...touched, repeatValue: true }))
|
||||
} else {
|
||||
setTouched({ ...touched, repeatValue: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (openMember) return <CreateUserCalender onClose={() => setOpenMember(false)} />
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<NavbarCreateDivisionCalender />
|
||||
<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) => { onValidation('title', event.target.value) }}
|
||||
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) => { onValidation('dateStart', val) }}
|
||||
placeholder="Input Tanggal"
|
||||
label="Tanggal"
|
||||
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) => onValidation('timeStart', event.target.value)}
|
||||
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) => onValidation('timeEnd', event.target.value)}
|
||||
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: 'weekly', label: 'Mingguan' },
|
||||
{ value: 'monthly', label: 'Bulanan' },
|
||||
{ value: 'yearly', label: 'Tahunan' },
|
||||
]}
|
||||
value={isData.repeatEventTyper}
|
||||
onChange={(val: any) => { onValidation('repeatEventTyper', val) }}
|
||||
error={
|
||||
touched.repeatEventTyper && (
|
||||
isData.repeatEventTyper == "" || String(isData.repeatEventTyper) == "null" ? "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}
|
||||
min={1}
|
||||
disabled={(isData.repeatEventTyper == "once") ? true : false}
|
||||
onChange={(event) => { onValidation('repeatValue', event.currentTarget.value) }}
|
||||
error={
|
||||
touched.repeatValue && (
|
||||
isData.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
|
||||
Number(isData.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
|
||||
)
|
||||
}
|
||||
/>
|
||||
<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={1}>
|
||||
<Avatar src={`https://wibu-storage.wibudev.com/api/files/${v.img}`} alt="it's me" size={'lg'} />
|
||||
</Grid.Col>
|
||||
<Grid.Col span={8}>
|
||||
<Text c={tema.get().utama} fw={"bold"} lineClamp={1} pl={isMobile2 ? 40 : 30} fz={isMobile ? 14 : 16} >
|
||||
{v.name}
|
||||
</Text>
|
||||
</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={() => { onCheck() }}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
</Box>
|
||||
<LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
|
||||
description="Apakah Anda yakin ingin menambahkan data?"
|
||||
onYes={(val) => {
|
||||
if (val) {
|
||||
onSubmit(val)
|
||||
} else {
|
||||
setModal(false)
|
||||
}
|
||||
}} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,21 +1,22 @@
|
||||
"use client"
|
||||
import { LayoutNavbarNew, TEMA } from '@/module/_global';
|
||||
import { Box, Button, Group, rem, Select, SimpleGrid, Skeleton, Stack, Text, Textarea, TextInput } from '@mantine/core';
|
||||
import { DateInput, TimeInput } from '@mantine/dates';
|
||||
import React, { useState } from 'react';
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import LayoutModal from '@/module/_global/layout/layout_modal';
|
||||
import toast from 'react-hot-toast';
|
||||
import { funEditCalenderById, funGetOneCalender, funGetOneCalenderByIdCalendar, } from '../lib/api_calender';
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
import { Box, Button, Group, rem, Select, SimpleGrid, Skeleton, Stack, Textarea, TextInput } from '@mantine/core';
|
||||
import { DateInput, TimeInput } from '@mantine/dates';
|
||||
import { useShallowEffect } from '@mantine/hooks';
|
||||
import { IDetailByIdCalender } from '../lib/type_calender';
|
||||
import moment from 'moment';
|
||||
import "moment/locale/id";
|
||||
import { useParams, useRouter } from 'next/navigation';
|
||||
import { useState } from 'react';
|
||||
import toast from 'react-hot-toast';
|
||||
import { funEditCalenderById, funGetOneCalenderByIdCalendar } from '../lib/api_calender';
|
||||
import { IDetailByIdCalender } from '../lib/type_calender';
|
||||
import UpdateListUsers from './update_list_users';
|
||||
import { useHookstate } from '@hookstate/core';
|
||||
|
||||
export default function UpdateDivisionCalender() {
|
||||
const [isModal, setModal] = useState(false)
|
||||
const [loadingModal, setLoadingModal] = useState(false)
|
||||
const param = useParams<{ id: string, detail: string }>()
|
||||
const [isDataCalender, setDataCalender] = useState<IDetailByIdCalender>()
|
||||
const [openMember, setOpenMember] = useState(false)
|
||||
@@ -54,35 +55,89 @@ export default function UpdateDivisionCalender() {
|
||||
|
||||
const [value, setValue] = useState<Date | null>(null);
|
||||
const router = useRouter()
|
||||
async function onSubmit(val: boolean) {
|
||||
try {
|
||||
if (val) {
|
||||
const response = await funEditCalenderById(param.detail, {
|
||||
title: isDataCalender?.title,
|
||||
dateStart: isDataCalender?.dateStart,
|
||||
timeStart: isDataCalender?.timeStart,
|
||||
timeEnd: isDataCalender?.timeEnd,
|
||||
linkMeet: isDataCalender?.linkMeet,
|
||||
repeatEventTyper: isDataCalender?.repeatEventTyper,
|
||||
desc: isDataCalender?.desc,
|
||||
repeatValue: isDataCalender?.repeatValue
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
setModal(false)
|
||||
router.push(`/division/${param.id}/calender`)
|
||||
toast.success(response.message)
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
function onCheck() {
|
||||
if (Object.values(touched).some((v) => v == true))
|
||||
return false
|
||||
setModal(true)
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
try {
|
||||
setLoadingModal(true)
|
||||
const response = await funEditCalenderById(param.detail, {
|
||||
title: isDataCalender?.title,
|
||||
dateStart: isDataCalender?.dateStart,
|
||||
timeStart: isDataCalender?.timeStart,
|
||||
timeEnd: isDataCalender?.timeEnd,
|
||||
linkMeet: isDataCalender?.linkMeet,
|
||||
repeatEventTyper: isDataCalender?.repeatEventTyper,
|
||||
desc: isDataCalender?.desc,
|
||||
repeatValue: isDataCalender?.repeatValue
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
router.push(`/division/${param.id}/calender`)
|
||||
toast.success(response.message)
|
||||
} else {
|
||||
toast.error(response.message)
|
||||
}
|
||||
setModal(false)
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
toast.error("Terjadi kesalahan! Silahkan coba kembali");
|
||||
setModal(false)
|
||||
} finally {
|
||||
setModal(false)
|
||||
setLoadingModal(false)
|
||||
}
|
||||
}
|
||||
|
||||
function onValidation(kategori: string, val: any) {
|
||||
if (kategori == 'title') {
|
||||
setDataCalender({ ...isDataCalender, title: val })
|
||||
if (val === "") {
|
||||
setTouched({ ...touched, title: true })
|
||||
} else {
|
||||
setTouched({ ...touched, title: false })
|
||||
}
|
||||
} else if (kategori == 'dateStart') {
|
||||
setValue(val)
|
||||
setDataCalender({ ...isDataCalender, dateStart: moment(val).format("YYYY-MM-DD") })
|
||||
if (val === "") {
|
||||
setTouched({ ...touched, dateStart: true })
|
||||
} else {
|
||||
setTouched({ ...touched, dateStart: false })
|
||||
}
|
||||
} else if (kategori == 'timeStart') {
|
||||
setDataCalender({ ...isDataCalender, timeStart: val })
|
||||
if (val == "") {
|
||||
setTouched({ ...touched, timeStart: true })
|
||||
} else {
|
||||
setTouched({ ...touched, timeStart: false })
|
||||
}
|
||||
} else if (kategori == 'timeEnd') {
|
||||
setDataCalender({ ...isDataCalender, timeEnd: val })
|
||||
if (val == "" || String(isDataCalender?.timeStart) > String(val)) {
|
||||
setTouched({ ...touched, timeEnd: true })
|
||||
} else {
|
||||
setTouched({ ...touched, timeEnd: false })
|
||||
}
|
||||
} else if (kategori == 'repeatEventTyper') {
|
||||
setDataCalender(isDataCalender => ({ ...isDataCalender, repeatEventTyper: val }))
|
||||
if (val == "once") {
|
||||
setDataCalender(isDataCalender => ({ ...isDataCalender, repeatValue: "1" }))
|
||||
}
|
||||
if (val == "" || String(val) == "null") {
|
||||
setTouched({ ...touched, repeatEventTyper: true })
|
||||
} else {
|
||||
setTouched({ ...touched, repeatEventTyper: false })
|
||||
}
|
||||
} else if (kategori == 'repeatValue') {
|
||||
setDataCalender(isDataCalender => ({ ...isDataCalender, repeatValue: val, }))
|
||||
if (val === "" || Number(val) <= 0) {
|
||||
setTouched(touched => ({ ...touched, repeatValue: true }))
|
||||
} else {
|
||||
setTouched({ ...touched, repeatValue: false })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,16 +172,7 @@ export default function UpdateDivisionCalender() {
|
||||
placeholder="Acara"
|
||||
label="Acara"
|
||||
defaultValue={isDataCalender?.title}
|
||||
onChange={
|
||||
(event) => {
|
||||
setDataCalender({
|
||||
...isDataCalender,
|
||||
title: event.target.value
|
||||
})
|
||||
setTouched({ ...touched, title: false })
|
||||
}
|
||||
}
|
||||
onBlur={() => setTouched({ ...touched, title: true })}
|
||||
onChange={(event) => { onValidation('title', event.target.value) }}
|
||||
required
|
||||
error={
|
||||
touched.title && (
|
||||
@@ -145,20 +191,10 @@ export default function UpdateDivisionCalender() {
|
||||
value={
|
||||
(isDataCalender?.dateStart == '' || isDataCalender?.dateStart == null) ? null : new Date(isDataCalender.dateStart)
|
||||
}
|
||||
onChange={
|
||||
(val) => {
|
||||
setValue(val);
|
||||
setDataCalender({
|
||||
...isDataCalender,
|
||||
dateStart: moment(val).format("YYYY-MM-DD")
|
||||
})
|
||||
setTouched({ ...touched, dateStart: false })
|
||||
}
|
||||
}
|
||||
onChange={(val) => { onValidation('dateStart', val) }}
|
||||
placeholder="Input Tanggal"
|
||||
label="Tanggal"
|
||||
minDate={new Date()}
|
||||
onBlur={() => setTouched({ ...touched, dateStart: true })}
|
||||
error={
|
||||
touched.dateStart && (
|
||||
isDataCalender?.dateStart == "" ? "Tanggal Tidak Boleh Kosong" : null
|
||||
@@ -178,17 +214,8 @@ export default function UpdateDivisionCalender() {
|
||||
}}
|
||||
size="md"
|
||||
label="Waktu Awal"
|
||||
// value={isDataCalender?.timeStart}
|
||||
defaultValue={isDataCalender?.timeStart}
|
||||
onChange={
|
||||
(event) => {
|
||||
setDataCalender({
|
||||
...isDataCalender,
|
||||
timeStart: event.target.value
|
||||
})
|
||||
}
|
||||
}
|
||||
onBlur={() => setTouched({ ...touched, timeStart: true })}
|
||||
onChange={(event) => { onValidation('timeStart', event.target.value) }}
|
||||
error={touched.timeStart && !isDataCalender?.timeStart ? "Waktu Awal Tidak Boleh Kosong" : null}
|
||||
required
|
||||
/>
|
||||
@@ -201,17 +228,8 @@ export default function UpdateDivisionCalender() {
|
||||
}}
|
||||
size="md"
|
||||
label="Waktu Akhir"
|
||||
// value={isDataCalender?.timeEnd}
|
||||
defaultValue={isDataCalender?.timeEnd}
|
||||
onChange={
|
||||
(event) => {
|
||||
setDataCalender({
|
||||
...isDataCalender,
|
||||
timeEnd: event.target.value
|
||||
})
|
||||
}
|
||||
}
|
||||
onBlur={() => setTouched({ ...touched, timeEnd: true })}
|
||||
onChange={(event) => { onValidation('timeEnd', event.target.value) }}
|
||||
required
|
||||
error={
|
||||
touched.timeEnd && (
|
||||
@@ -232,14 +250,7 @@ export default function UpdateDivisionCalender() {
|
||||
placeholder="Link Meet"
|
||||
label="Link Meet"
|
||||
defaultValue={isDataCalender?.linkMeet}
|
||||
onChange={
|
||||
(event) => {
|
||||
setDataCalender({
|
||||
...isDataCalender,
|
||||
linkMeet: event.target.value
|
||||
})
|
||||
}
|
||||
}
|
||||
onChange={(event) => { setDataCalender({ ...isDataCalender, linkMeet: event.target.value }) }}
|
||||
/>
|
||||
<Select
|
||||
styles={{
|
||||
@@ -260,76 +271,36 @@ export default function UpdateDivisionCalender() {
|
||||
]}
|
||||
value={isDataCalender?.repeatEventTyper}
|
||||
defaultValue={isDataCalender?.repeatEventTyper}
|
||||
onChange={
|
||||
(val: any) => {
|
||||
setDataCalender({
|
||||
...isDataCalender,
|
||||
repeatEventTyper: val
|
||||
})
|
||||
setTouched({ ...touched, repeatEventTyper: false })
|
||||
}
|
||||
}
|
||||
onBlur={() => setTouched({ ...touched, repeatEventTyper: true })}
|
||||
onChange={(val: any) => { onValidation('repeatEventTyper', val) }}
|
||||
error={
|
||||
touched.repeatEventTyper && (
|
||||
isDataCalender?.repeatEventTyper == "" ? "Ulangi Acara Tidak Boleh Kosong" : null
|
||||
isDataCalender?.repeatEventTyper == "" || String(isDataCalender?.repeatEventTyper) == "null" ? "Ulangi Acara Tidak Boleh Kosong" : null
|
||||
)
|
||||
}
|
||||
required
|
||||
/>
|
||||
{isDataCalender?.repeatEventTyper == "once" ?
|
||||
<TextInput styles={{
|
||||
input: {
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
},
|
||||
}}
|
||||
type='number'
|
||||
required
|
||||
label="Jumlah pengulangan"
|
||||
size="md"
|
||||
disabled
|
||||
placeholder='Jumlah pengulangan'
|
||||
defaultValue={"1"}
|
||||
onChange={(event) => {
|
||||
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
|
||||
setTouched({ ...touched, repeatValue: false })
|
||||
}}
|
||||
onBlur={() => setTouched({ ...touched, repeatValue: true })}
|
||||
error={
|
||||
touched.repeatValue && (
|
||||
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" : null
|
||||
// || Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh dibawah 1" : null
|
||||
)
|
||||
}
|
||||
/>
|
||||
:
|
||||
<TextInput styles={{
|
||||
input: {
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
},
|
||||
}}
|
||||
type='number'
|
||||
required
|
||||
label="Jumlah pengulangan"
|
||||
size="md"
|
||||
min={1}
|
||||
placeholder='Jumlah pengulangan'
|
||||
defaultValue={isDataCalender?.repeatValue}
|
||||
onChange={(event) => {
|
||||
setDataCalender({ ...isDataCalender, repeatValue: String(event.currentTarget.value) })
|
||||
setTouched({ ...touched, repeatValue: false })
|
||||
}}
|
||||
onBlur={() => setTouched({ ...touched, repeatValue: true })}
|
||||
error={
|
||||
touched.repeatValue && (
|
||||
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
|
||||
Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
|
||||
)
|
||||
}
|
||||
/>
|
||||
}
|
||||
<TextInput styles={{
|
||||
input: {
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
borderRadius: 10,
|
||||
},
|
||||
}}
|
||||
type='number'
|
||||
required
|
||||
label="Jumlah pengulangan"
|
||||
size="md"
|
||||
min={1}
|
||||
disabled={(isDataCalender?.repeatEventTyper == "once") ? true : false}
|
||||
placeholder='Jumlah pengulangan'
|
||||
defaultValue={isDataCalender?.repeatValue}
|
||||
onChange={(event) => { onValidation('repeatValue', event.currentTarget.value) }}
|
||||
error={
|
||||
touched.repeatValue && (
|
||||
isDataCalender?.repeatValue == "" ? "Jumlah pengulangan tidak boleh kosong" :
|
||||
Number(isDataCalender?.repeatValue) <= 0 ? "Jumlah pengulangan tidak boleh di bawah 1" : ""
|
||||
)
|
||||
}
|
||||
/>
|
||||
<Textarea styles={{
|
||||
input: {
|
||||
border: `1px solid ${"#D6D8F6"}`,
|
||||
@@ -365,15 +336,21 @@ export default function UpdateDivisionCalender() {
|
||||
size="lg"
|
||||
radius={30}
|
||||
fullWidth
|
||||
onClick={() => setModal(true)}
|
||||
onClick={() => onCheck()}
|
||||
>
|
||||
Simpan
|
||||
</Button>
|
||||
}
|
||||
</Box>
|
||||
<LayoutModal opened={isModal} onClose={() => setModal(false)}
|
||||
<LayoutModal loading={loadingModal} opened={isModal} onClose={() => setModal(false)}
|
||||
description="Apakah Anda yakin ingin mengubah data acara ini? Data ini akan mempengaruhi semua data yang terkait"
|
||||
onYes={(val) => { onSubmit(val) }} />
|
||||
onYes={(val) => {
|
||||
if (val) {
|
||||
onSubmit()
|
||||
} else {
|
||||
setModal(false)
|
||||
}
|
||||
}} />
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user