141 lines
4.4 KiB
TypeScript
141 lines
4.4 KiB
TypeScript
import React from 'react'
|
|
import {
|
|
Box,
|
|
CardHeader,
|
|
CardBody,
|
|
Button,
|
|
Card,
|
|
Heading,
|
|
Input,
|
|
CloseButton,
|
|
FormControl,
|
|
FormLabel,
|
|
FormHelperText,
|
|
FormErrorMessage,
|
|
useBreakpointValue,
|
|
Flex,
|
|
Stack
|
|
} from '@chakra-ui/react'
|
|
import { Controller } from 'react-hook-form'
|
|
import { AddIcon } from '@chakra-ui/icons'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
import { ErrorSpan } from '../../style'
|
|
import { useCreateCourse } from '../hooks'
|
|
|
|
interface CreateCourseFormProps {
|
|
onClose: () => void
|
|
}
|
|
|
|
/**
|
|
* Компонент формы создания нового курса
|
|
*/
|
|
export const CreateCourseForm = ({ onClose }: CreateCourseFormProps) => {
|
|
const { t } = useTranslation()
|
|
const { control, errors, handleSubmit, onSubmit, isLoading, error } = useCreateCourse(onClose)
|
|
|
|
const headingSize = useBreakpointValue({ base: 'md', md: 'lg' })
|
|
const formSpacing = useBreakpointValue({ base: 5, md: 10 })
|
|
const buttonSize = useBreakpointValue({ base: 'md', md: 'lg' })
|
|
|
|
return (
|
|
<Card align="left">
|
|
<CardHeader display="flex" flexWrap="wrap" alignItems="center">
|
|
<Heading as="h2" size={headingSize} mt="0" flex="1" mr={2} mb={{ base: 2, md: 0 }}>
|
|
{t('journal.pl.course.createTitle')}
|
|
</Heading>
|
|
<CloseButton ml={{ base: 'auto', md: 0 }} onClick={onClose} />
|
|
</CardHeader>
|
|
<CardBody>
|
|
<form onSubmit={handleSubmit(onSubmit)}>
|
|
<Stack spacing={formSpacing} align="left">
|
|
<Controller
|
|
control={control}
|
|
name="startDt"
|
|
rules={{ required: t('journal.pl.common.requiredField') }}
|
|
render={({ field }) => (
|
|
<FormControl
|
|
isRequired
|
|
isInvalid={Boolean(errors.startDt)}
|
|
>
|
|
<FormLabel>{t('journal.pl.common.startDate')}</FormLabel>
|
|
<Input
|
|
{...field}
|
|
required={false}
|
|
placeholder={t('journal.pl.common.selectDateTime')}
|
|
size="md"
|
|
type="date"
|
|
/>
|
|
{errors.startDt ? (
|
|
<FormErrorMessage>
|
|
{errors.startDt?.message}
|
|
</FormErrorMessage>
|
|
) : (
|
|
<FormHelperText>
|
|
{t('journal.pl.course.specifyStartDate')}
|
|
</FormHelperText>
|
|
)}
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
<Controller
|
|
control={control}
|
|
name="name"
|
|
rules={{
|
|
required: t('journal.pl.common.requiredField'),
|
|
}}
|
|
render={({ field }) => (
|
|
<FormControl
|
|
isRequired
|
|
isInvalid={Boolean(errors.name)}
|
|
>
|
|
<FormLabel>{t('journal.pl.course.newLectureName')}:</FormLabel>
|
|
<Input
|
|
{...field}
|
|
required={false}
|
|
placeholder={t('journal.pl.course.namePlaceholder')}
|
|
size="md"
|
|
/>
|
|
{errors.name && (
|
|
<FormErrorMessage>
|
|
{errors.name.message}
|
|
</FormErrorMessage>
|
|
)}
|
|
</FormControl>
|
|
)}
|
|
/>
|
|
|
|
<Flex mt={formSpacing} justifyContent={{ base: 'center', md: 'flex-start' }}>
|
|
<Stack direction={{ base: 'column', sm: 'row' }} spacing={2} width={{ base: '100%', sm: 'auto' }}>
|
|
<Button
|
|
size={buttonSize}
|
|
type="submit"
|
|
leftIcon={<AddIcon />}
|
|
colorScheme="blue"
|
|
width={{ base: '100%', sm: 'auto' }}
|
|
isLoading={isLoading}
|
|
>
|
|
{t('journal.pl.common.create')}
|
|
</Button>
|
|
<Button
|
|
size={buttonSize}
|
|
variant="outline"
|
|
width={{ base: '100%', sm: 'auto' }}
|
|
onClick={onClose}
|
|
>
|
|
{t('journal.pl.common.cancel')}
|
|
</Button>
|
|
</Stack>
|
|
</Flex>
|
|
</Stack>
|
|
|
|
{error && (
|
|
<Box mt={4}>
|
|
<ErrorSpan>{(error as any).error}</ErrorSpan>
|
|
</Box>
|
|
)}
|
|
</form>
|
|
</CardBody>
|
|
</Card>
|
|
)
|
|
}
|