diff --git a/locales/en.json b/locales/en.json
index b5cb81d..349ec5f 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -73,6 +73,8 @@
"journal.pl.lesson.link": "Link",
"journal.pl.lesson.time": "Time",
"journal.pl.lesson.action": "Actions",
+ "journal.pl.lesson.expand": "Expand lesson list",
+ "journal.pl.lesson.collapse": "Collapse lesson list",
"journal.pl.exam.title": "Exam",
"journal.pl.exam.startExam": "Start exam",
diff --git a/locales/ru.json b/locales/ru.json
index 70548c8..21a246b 100644
--- a/locales/ru.json
+++ b/locales/ru.json
@@ -69,6 +69,8 @@
"journal.pl.lesson.link": "Ссылка",
"journal.pl.lesson.time": "Время",
"journal.pl.lesson.action": "Действия",
+ "journal.pl.lesson.expand": "Развернуть список занятий",
+ "journal.pl.lesson.collapse": "Свернуть список занятий",
"journal.pl.exam.title": "Экзамен",
"journal.pl.exam.startExam": "Начать экзамен",
@@ -90,6 +92,7 @@
"journal.pl.attendance.emojis.good": "Хорошая посещаемость",
"journal.pl.attendance.emojis.average": "Средняя посещаемость",
"journal.pl.attendance.emojis.poor": "Низкая посещаемость",
+ "journal.pl.attendance.emojis.critical": "Критическая посещаемость",
"journal.pl.attendance.emojis.none": "Нет посещений",
"journal.pl.attendance.table.copy": "Копировать таблицу",
diff --git a/src/pages/course-list/components/CreateCourseForm.tsx b/src/pages/course-list/components/CreateCourseForm.tsx
new file mode 100644
index 0000000..5170878
--- /dev/null
+++ b/src/pages/course-list/components/CreateCourseForm.tsx
@@ -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 (
+
+
+
+ {t('journal.pl.course.createTitle')}
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/course-list/components/YearGroup.tsx b/src/pages/course-list/components/YearGroup.tsx
new file mode 100644
index 0000000..fb19875
--- /dev/null
+++ b/src/pages/course-list/components/YearGroup.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import { Box, Flex, Heading, Divider, VStack } from '@chakra-ui/react'
+import { Course } from '../../../__data__/model'
+import { CourseCard } from '../course-card'
+
+interface YearGroupProps {
+ year: string
+ courses: Course[]
+ colorMode: string
+}
+
+/**
+ * Компонент для отображения курсов одного года
+ */
+export const YearGroup = ({ year, courses, colorMode }: YearGroupProps) => {
+ return (
+
+
+
+ {year}
+
+
+
+
+ {courses.map((course) => (
+
+ ))}
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/pages/course-list/components/index.ts b/src/pages/course-list/components/index.ts
new file mode 100644
index 0000000..7461583
--- /dev/null
+++ b/src/pages/course-list/components/index.ts
@@ -0,0 +1,2 @@
+export * from './YearGroup'
+export * from './CreateCourseForm'
\ No newline at end of file
diff --git a/src/pages/course-list/course-list.tsx b/src/pages/course-list/course-list.tsx
index 0adfc44..0db44fc 100644
--- a/src/pages/course-list/course-list.tsx
+++ b/src/pages/course-list/course-list.tsx
@@ -1,232 +1,50 @@
-import React, { useEffect, useRef, useState, useMemo } from 'react'
-import dayjs from 'dayjs'
+import React, { useState } from 'react'
import {
Box,
- CardHeader,
- CardBody,
Button,
- Card,
- Heading,
Container,
- VStack,
- Input,
- CloseButton,
- FormControl,
- FormLabel,
- FormHelperText,
- FormErrorMessage,
- useToast,
+ Text,
useColorMode,
- useBreakpointValue,
- Flex,
- Stack,
- Divider,
- Text
+ useBreakpointValue
} from '@chakra-ui/react'
-import { useForm, Controller } from 'react-hook-form'
import { AddIcon } from '@chakra-ui/icons'
import { useTranslation } from 'react-i18next'
-import { ErrorSpan } from '../style'
import { useAppSelector } from '../../__data__/store'
import { api } from '../../__data__/api/api'
import { isTeacher } from '../../utils/user'
import { PageLoader } from '../../components/page-loader/page-loader'
-import { CourseCard } from './course-card'
-
-interface NewCourseForm {
- startDt: string
- name: string
-}
+import { useGroupedCourses } from './hooks'
+import { CreateCourseForm, YearGroup } from './components'
+/**
+ * Основной компонент списка курсов
+ */
export const CoursesList = () => {
- const toast = useToast()
const user = useAppSelector((s) => s.user)
const { data, isLoading } = api.useCoursesListQuery()
- const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
const [showForm, setShowForm] = useState(false)
- const toastRef = useRef(null)
const { t } = useTranslation()
-
- const { colorMode } = useColorMode();
+ const { colorMode } = useColorMode()
- // Определяем размеры для адаптивного дизайна
const buttonSize = useBreakpointValue({ base: 'md', md: 'lg' })
- const headingSize = useBreakpointValue({ base: 'md', md: 'lg' })
- const formSpacing = useBreakpointValue({ base: 5, md: 10 })
const containerPadding = useBreakpointValue({ base: '2', md: '4' })
- const {
- control,
- handleSubmit,
- reset,
- formState: { errors },
- getValues,
- } = useForm({
- defaultValues: {
- startDt: dayjs().format('YYYY-MM-DD'),
- name: t('journal.pl.course.defaultName'),
- },
- })
-
- const onSubmit = ({ startDt, name }) => {
- toastRef.current = toast({
- title: t('journal.pl.course.sending'),
- status: 'loading',
- duration: 9000,
- })
- createUpdateCourse({ name, startDt })
- }
-
- useEffect(() => {
- if (crucQuery.isSuccess) {
- const values = getValues()
- if (toastRef.current) {
- toast.update(toastRef.current, {
- title: t('journal.pl.course.created'),
- description: t('journal.pl.course.successMessage', { name: values.name }),
- status: 'success',
- duration: 9000,
- isClosable: true,
- })
- }
- reset()
- setShowForm(false) // Закрываем форму после успешного создания
- }
- }, [crucQuery.isSuccess, t])
-
- // Группировка курсов по годам
- const groupedCourses = useMemo(() => {
- if (!data?.body?.length) return {}
-
- const grouped: Record = {}
-
- // Сортируем курсы по дате начала (от новых к старым)
- const sortedCourses = [...data.body].sort((a, b) =>
- dayjs(b.startDt).valueOf() - dayjs(a.startDt).valueOf()
- )
-
- // Группируем по годам
- sortedCourses.forEach(course => {
- const year = dayjs(course.startDt).format('YYYY')
- if (!grouped[year]) {
- grouped[year] = []
- }
- grouped[year].push(course)
- })
-
- return grouped
- }, [data?.body])
+ // Используем хук для группировки курсов по годам
+ const groupedCourses = useGroupedCourses(data?.body)
if (isLoading) {
- return (
-
- )
+ return
}
+ const handleCloseForm = () => setShowForm(false)
+
return (
{isTeacher(user) && (
{showForm ? (
-
-
-
- {t('journal.pl.course.createTitle')}
-
- setShowForm(false)} />
-
-
-
-
-
+
) : (