138 lines
3.3 KiB
TypeScript
138 lines
3.3 KiB
TypeScript
import React from 'react'
|
||
import { useForm, Controller } from 'react-hook-form'
|
||
import {
|
||
Box,
|
||
Card,
|
||
CardBody,
|
||
CardHeader,
|
||
Heading,
|
||
Button,
|
||
CloseButton,
|
||
VStack,
|
||
FormControl,
|
||
FormLabel,
|
||
FormHelperText,
|
||
FormErrorMessage,
|
||
Input,
|
||
} from '@chakra-ui/react'
|
||
import { AddIcon } from '@chakra-ui/icons'
|
||
|
||
import { dateToCalendarFormat } from '../../../utils/time'
|
||
import { Lesson } from '../../../__data__/model'
|
||
import { ErrorSpan } from '../style'
|
||
|
||
interface NewLessonForm {
|
||
name: string;
|
||
date: string;
|
||
}
|
||
|
||
interface LessonFormProps {
|
||
lesson?: Partial<Lesson>
|
||
isLoading: boolean
|
||
onCancel: () => void
|
||
onSubmit: (lesson: Lesson) => void
|
||
error?: string
|
||
title: string
|
||
nameButton: string
|
||
}
|
||
|
||
export const LessonForm = ({
|
||
lesson,
|
||
isLoading,
|
||
onCancel,
|
||
onSubmit,
|
||
error,
|
||
title,
|
||
nameButton,
|
||
}: LessonFormProps) => {
|
||
const {
|
||
control,
|
||
handleSubmit,
|
||
reset,
|
||
formState: { errors },
|
||
} = useForm<NewLessonForm>({
|
||
defaultValues: (lesson && { ...lesson, date: dateToCalendarFormat(lesson.date) }) || {
|
||
name: '',
|
||
date: dateToCalendarFormat(),
|
||
},
|
||
})
|
||
|
||
return (
|
||
<Card align="left">
|
||
<CardHeader display="flex">
|
||
<Heading as="h2" mt="0">
|
||
{title}
|
||
</Heading>
|
||
<CloseButton
|
||
ml="auto"
|
||
onClick={() => {
|
||
reset()
|
||
onCancel()
|
||
}}
|
||
/>
|
||
</CardHeader>
|
||
<CardBody>
|
||
<form onSubmit={handleSubmit(onSubmit)}>
|
||
<VStack spacing="10" align="left">
|
||
<Controller
|
||
control={control}
|
||
name="date"
|
||
rules={{ required: 'Обязательное поле' }}
|
||
render={({ field }) => (
|
||
<FormControl>
|
||
<FormLabel>Дата</FormLabel>
|
||
<Input
|
||
{...field}
|
||
required={false}
|
||
placeholder="Укажите дату лекции"
|
||
size="md"
|
||
type="datetime-local"
|
||
/>
|
||
{errors.date ? (
|
||
<FormErrorMessage>{errors.date?.message}</FormErrorMessage>
|
||
) : (
|
||
<FormHelperText>Укажите дату и время лекции</FormHelperText>
|
||
)}
|
||
</FormControl>
|
||
)}
|
||
/>
|
||
|
||
<Controller
|
||
control={control}
|
||
name="name"
|
||
rules={{ required: 'Обязательное поле' }}
|
||
render={({ field }) => (
|
||
<FormControl isRequired isInvalid={Boolean(errors.name)}>
|
||
<FormLabel>Название новой лекции:</FormLabel>
|
||
<Input
|
||
{...field}
|
||
required={false}
|
||
placeholder="Название лекции"
|
||
size="md"
|
||
/>
|
||
{errors.name && (
|
||
<FormErrorMessage>{errors.name.message}</FormErrorMessage>
|
||
)}
|
||
</FormControl>
|
||
)}
|
||
/>
|
||
<Box mt="10">
|
||
<Button
|
||
size="lg"
|
||
type="submit"
|
||
leftIcon={<AddIcon />}
|
||
colorScheme="blue"
|
||
isLoading={isLoading}
|
||
>
|
||
{nameButton}
|
||
</Button>
|
||
</Box>
|
||
</VStack>
|
||
|
||
{error && <ErrorSpan>{error}</ErrorSpan>}
|
||
</form>
|
||
</CardBody>
|
||
</Card>
|
||
)
|
||
}
|