diff --git a/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx b/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx new file mode 100644 index 0000000..51a6579 --- /dev/null +++ b/src/components/AddEventToPublishedScheduleForm/AddEventToPublishedScheduleForm.jsx @@ -0,0 +1,133 @@ +/* eslint-disable react/jsx-props-no-spreading */ +import { + Box, + FormLabel, + Input, + FormControl, + FormErrorMessage, + Button, + Textarea, + Checkbox, + Editable, + EditablePreview, + } from '@chakra-ui/react'; + import { yupResolver } from '@hookform/resolvers/yup'; + import { useForm } from 'react-hook-form'; + import * as yup from 'yup'; + + const schema = yup.object({ + confirmed: yup.boolean().default(true).required("Confirmation required"), + startTime: yup.date().required('Start time required'), + endTime: yup.date().required('End time required').min(yup.ref('startTime'), 'End time must be after start time'), + cohort: yup.number().required('Cohort required').min(2000), + notes: yup.string().nullable() + }); + + + const AddEventToPublishedScheduleForm = () => { + const { + register, + handleSubmit, + setValue, + formState: { errors }, + } = useForm({ + resolver: yupResolver(schema), + }); + + + const handleConfirmedChange = (e) => { + setValue('confirmed', e.target.checked); + }; + + + return ( + +
console.log(data))}> + + + + {/* TITLE - non-editable */} + + + Title + + + + {errors.title && errors.title.message} + + + + {/* HOST - non-editable */} + + + Host + + + + {errors.host && errors.host.message} + + + + {/* CONFIRMED?*/} + + + Confirmed + Confirmed? + {errors.confirmed && errors.confirmed.message} + + + + {/* START TIME? */} + + + Start time + + {errors.startTime && errors.startTime.message} + + + + {/* END TIME? */} + + + End time + + {errors.endTime && errors.endTime.message} + + + + {/* COHORT? */} + + + Cohort + + {errors.cohort && errors.cohort.message} + + + + {/* NOTES? */} + + + Notes +