Добавлены новые переводы для управления списком уроков в файлы локализации (en.json и ru.json). Обновлен компонент CoursesList: реализована форма создания нового курса с использованием нового хука useCreateCourse, а также добавлен компонент YearGroup для отображения курсов по годам.

2025-03-23 13:26:04 +03:00
parent 4416a53bc1
commit e277308ec2
9 changed files with 310 additions and 214 deletions
@@ -0,0 +1,141 @@
+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>
+  )
+}