Добавлены новые компоненты для отображения статистики курсов, включая статистику посещаемости, активности студентов и уроков. Обновлены локализации для поддержки новых данных и улучшено взаимодействие с API для получения информации о курсах и уроках.
This commit is contained in:
parent
b37c96f640
commit
5f952ece7a
@ -54,6 +54,7 @@
|
|||||||
"journal.pl.course.progress": "Course progress",
|
"journal.pl.course.progress": "Course progress",
|
||||||
"journal.pl.course.completedLessons": "Completed lessons",
|
"journal.pl.course.completedLessons": "Completed lessons",
|
||||||
"journal.pl.course.upcomingLessons": "Upcoming lessons",
|
"journal.pl.course.upcomingLessons": "Upcoming lessons",
|
||||||
|
"journal.pl.course.noCourses": "No courses available",
|
||||||
|
|
||||||
"journal.pl.lesson.created": "Lesson created",
|
"journal.pl.lesson.created": "Lesson created",
|
||||||
"journal.pl.lesson.successMessage": "Lesson {{name}} successfully created",
|
"journal.pl.lesson.successMessage": "Lesson {{name}} successfully created",
|
||||||
@ -155,5 +156,40 @@
|
|||||||
"journal.pl.statistics.noUpcoming": "Not scheduled",
|
"journal.pl.statistics.noUpcoming": "Not scheduled",
|
||||||
"journal.pl.statistics.in": "in",
|
"journal.pl.statistics.in": "in",
|
||||||
"journal.pl.statistics.days": "days",
|
"journal.pl.statistics.days": "days",
|
||||||
"journal.pl.statistics.courseProgress": "Course Progress"
|
"journal.pl.statistics.courseProgress": "Course Progress",
|
||||||
|
|
||||||
|
"journal.pl.days.sunday": "Sunday",
|
||||||
|
"journal.pl.days.monday": "Monday",
|
||||||
|
"journal.pl.days.tuesday": "Tuesday",
|
||||||
|
"journal.pl.days.wednesday": "Wednesday",
|
||||||
|
"journal.pl.days.thursday": "Thursday",
|
||||||
|
"journal.pl.days.friday": "Friday",
|
||||||
|
"journal.pl.days.saturday": "Saturday",
|
||||||
|
|
||||||
|
"journal.pl.overview.title": "Courses Overview",
|
||||||
|
"journal.pl.overview.totalCourses": "Total Courses",
|
||||||
|
"journal.pl.overview.active": "active",
|
||||||
|
"journal.pl.overview.completed": "completed",
|
||||||
|
"journal.pl.overview.totalLessons": "Total Lessons",
|
||||||
|
"journal.pl.overview.upcoming": "upcoming",
|
||||||
|
"journal.pl.overview.totalStudents": "Total Students",
|
||||||
|
"journal.pl.overview.totalTeachers": "Total Teachers",
|
||||||
|
"journal.pl.overview.perCourse": "per course",
|
||||||
|
"journal.pl.overview.attendance": "attendance",
|
||||||
|
"journal.pl.overview.noAttendanceData": "no attendance data",
|
||||||
|
"journal.pl.overview.noActiveData": "no active courses",
|
||||||
|
"journal.pl.overview.courseTrends": "Course Trends",
|
||||||
|
"journal.pl.overview.newCourses": "New Courses",
|
||||||
|
"journal.pl.overview.olderCourses": "Older Courses",
|
||||||
|
"journal.pl.overview.last3Months": "in last 3 months",
|
||||||
|
"journal.pl.overview.beyondLast3Months": "created earlier than 3 months",
|
||||||
|
"journal.pl.overview.mostActiveDay": "Most Active Day",
|
||||||
|
"journal.pl.overview.activityStats": "Activity Statistics",
|
||||||
|
"journal.pl.overview.courseCompletion": "Course Completion",
|
||||||
|
"journal.pl.overview.studentAttendance": "Student Attendance",
|
||||||
|
"journal.pl.overview.averageRate": "Average Rate",
|
||||||
|
"journal.pl.overview.lessons": "lessons",
|
||||||
|
"journal.pl.overview.topStudents": "Top Students by Attendance",
|
||||||
|
"journal.pl.overview.topAttendanceCourses": "Courses with Best Attendance",
|
||||||
|
"journal.pl.overview.new": "new"
|
||||||
}
|
}
|
||||||
@ -51,6 +51,7 @@
|
|||||||
"journal.pl.course.progress": "Прогресс курса",
|
"journal.pl.course.progress": "Прогресс курса",
|
||||||
"journal.pl.course.completedLessons": "Завершено занятий",
|
"journal.pl.course.completedLessons": "Завершено занятий",
|
||||||
"journal.pl.course.upcomingLessons": "Предстоящие занятия",
|
"journal.pl.course.upcomingLessons": "Предстоящие занятия",
|
||||||
|
"journal.pl.course.noCourses": "Нет доступных курсов",
|
||||||
|
|
||||||
"journal.pl.lesson.created": "Лекция создана",
|
"journal.pl.lesson.created": "Лекция создана",
|
||||||
"journal.pl.lesson.successMessage": "Лекция {{name}} успешно создана",
|
"journal.pl.lesson.successMessage": "Лекция {{name}} успешно создана",
|
||||||
@ -152,5 +153,40 @@
|
|||||||
"journal.pl.statistics.noUpcoming": "Не запланировано",
|
"journal.pl.statistics.noUpcoming": "Не запланировано",
|
||||||
"journal.pl.statistics.in": "через",
|
"journal.pl.statistics.in": "через",
|
||||||
"journal.pl.statistics.days": "дн.",
|
"journal.pl.statistics.days": "дн.",
|
||||||
"journal.pl.statistics.courseProgress": "Прогресс курса"
|
"journal.pl.statistics.courseProgress": "Прогресс курса",
|
||||||
|
|
||||||
|
"journal.pl.days.sunday": "Воскресенье",
|
||||||
|
"journal.pl.days.monday": "Понедельник",
|
||||||
|
"journal.pl.days.tuesday": "Вторник",
|
||||||
|
"journal.pl.days.wednesday": "Среда",
|
||||||
|
"journal.pl.days.thursday": "Четверг",
|
||||||
|
"journal.pl.days.friday": "Пятница",
|
||||||
|
"journal.pl.days.saturday": "Суббота",
|
||||||
|
|
||||||
|
"journal.pl.overview.title": "Обзор всех курсов",
|
||||||
|
"journal.pl.overview.totalCourses": "Всего курсов",
|
||||||
|
"journal.pl.overview.active": "активных",
|
||||||
|
"journal.pl.overview.completed": "завершенных",
|
||||||
|
"journal.pl.overview.totalLessons": "Всего занятий",
|
||||||
|
"journal.pl.overview.upcoming": "предстоящих",
|
||||||
|
"journal.pl.overview.totalStudents": "Всего студентов",
|
||||||
|
"journal.pl.overview.totalTeachers": "Всего преподавателей",
|
||||||
|
"journal.pl.overview.perCourse": "на курс",
|
||||||
|
"journal.pl.overview.attendance": "посещаемость",
|
||||||
|
"journal.pl.overview.noAttendanceData": "нет данных о посещаемости",
|
||||||
|
"journal.pl.overview.noActiveData": "нет активных курсов",
|
||||||
|
"journal.pl.overview.courseTrends": "Тренды курсов",
|
||||||
|
"journal.pl.overview.newCourses": "Новые курсы",
|
||||||
|
"journal.pl.overview.olderCourses": "Старые курсы",
|
||||||
|
"journal.pl.overview.last3Months": "за последние 3 месяца",
|
||||||
|
"journal.pl.overview.beyondLast3Months": "созданы ранее 3 месяцев",
|
||||||
|
"journal.pl.overview.mostActiveDay": "Самый активный день недели",
|
||||||
|
"journal.pl.overview.activityStats": "Статистика активности",
|
||||||
|
"journal.pl.overview.courseCompletion": "Завершенность курсов",
|
||||||
|
"journal.pl.overview.studentAttendance": "Посещаемость студентов",
|
||||||
|
"journal.pl.overview.averageRate": "Средний показатель",
|
||||||
|
"journal.pl.overview.lessons": "занятий",
|
||||||
|
"journal.pl.overview.topStudents": "Лучшие студенты по посещаемости",
|
||||||
|
"journal.pl.overview.topAttendanceCourses": "Курсы с лучшей посещаемостью",
|
||||||
|
"journal.pl.overview.new": "новых"
|
||||||
}
|
}
|
||||||
76
src/pages/course-list/components/CoursesOverview.tsx
Normal file
76
src/pages/course-list/components/CoursesOverview.tsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Heading,
|
||||||
|
SimpleGrid,
|
||||||
|
useColorModeValue,
|
||||||
|
Card
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
import { Course, Lesson } from '../../../__data__/model'
|
||||||
|
import {
|
||||||
|
useStats,
|
||||||
|
StatCards,
|
||||||
|
StudentAttendanceList,
|
||||||
|
CourseAttendanceList,
|
||||||
|
ActivityStats
|
||||||
|
} from './statistics'
|
||||||
|
|
||||||
|
interface CoursesOverviewProps {
|
||||||
|
courses: Course[]
|
||||||
|
isLoading: boolean
|
||||||
|
// Детализированные данные с уроками (если есть)
|
||||||
|
lessonsByCourse?: Record<string, Lesson[]>
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CoursesOverview: React.FC<CoursesOverviewProps> = ({
|
||||||
|
courses = [],
|
||||||
|
isLoading = false,
|
||||||
|
lessonsByCourse = {}
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
const bgColor = useColorModeValue('white', 'gray.700')
|
||||||
|
|
||||||
|
// Используем хук для расчета статистики
|
||||||
|
const stats = useStats(courses, lessonsByCourse)
|
||||||
|
|
||||||
|
// Если загрузка или нет данных, возвращаем null
|
||||||
|
if (isLoading || !courses.length) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box mb={6} py={3}>
|
||||||
|
<Heading size="md" mb={4}>
|
||||||
|
{t('journal.pl.overview.title')}
|
||||||
|
</Heading>
|
||||||
|
|
||||||
|
{/* Основные показатели */}
|
||||||
|
<StatCards stats={stats} bgColor={bgColor} />
|
||||||
|
|
||||||
|
{/* Дополнительная статистика */}
|
||||||
|
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={5} mb={5}>
|
||||||
|
{/* Статистика посещаемости и топ-студенты */}
|
||||||
|
<Card bg={bgColor} p={4} borderRadius="lg" boxShadow="sm">
|
||||||
|
<StudentAttendanceList
|
||||||
|
students={stats.topStudents}
|
||||||
|
title={t('journal.pl.overview.topStudents')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{stats.topCoursesByAttendance.length > 0 && (
|
||||||
|
<>
|
||||||
|
<Box h={3} />
|
||||||
|
<CourseAttendanceList courses={stats.topCoursesByAttendance} />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{/* Статистика деятельности и активности */}
|
||||||
|
<Card bg={bgColor} p={4} borderRadius="lg" boxShadow="sm">
|
||||||
|
<ActivityStats stats={stats} />
|
||||||
|
</Card>
|
||||||
|
</SimpleGrid>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,2 +1,3 @@
|
|||||||
|
export * from './CreateCourseForm'
|
||||||
export * from './YearGroup'
|
export * from './YearGroup'
|
||||||
export * from './CreateCourseForm'
|
export * from './CoursesOverview'
|
||||||
@ -0,0 +1,93 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
Progress,
|
||||||
|
Flex,
|
||||||
|
Divider
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
import { CourseStats } from './useStats'
|
||||||
|
import { WeekdayActivityChart } from './WeekdayActivityChart'
|
||||||
|
|
||||||
|
interface ActivityStatsProps {
|
||||||
|
stats: CourseStats
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ActivityStats: React.FC<ActivityStatsProps> = ({ stats }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
// Определяем цвет для прогресса в зависимости от значения
|
||||||
|
const getProgressColor = (value: number) => {
|
||||||
|
if (value > 80) return 'green'
|
||||||
|
if (value > 50) return 'blue'
|
||||||
|
if (value > 30) return 'yellow'
|
||||||
|
return 'red'
|
||||||
|
}
|
||||||
|
|
||||||
|
// Вычисляем процент завершенности курсов
|
||||||
|
const completionPercentage =
|
||||||
|
stats.totalLessons > 0
|
||||||
|
? (stats.completedLessons / stats.totalLessons) * 100
|
||||||
|
: 0
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<Text fontWeight="medium" fontSize="md" mb={3}>
|
||||||
|
{t('journal.pl.overview.activityStats')}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<Box mb={3}>
|
||||||
|
<Text fontSize="sm" fontWeight="medium" mb={1}>
|
||||||
|
{t('journal.pl.overview.courseCompletion')}:
|
||||||
|
</Text>
|
||||||
|
<Progress
|
||||||
|
value={completionPercentage}
|
||||||
|
size="md"
|
||||||
|
borderRadius="md"
|
||||||
|
colorScheme={getProgressColor(completionPercentage)}
|
||||||
|
mb={1}
|
||||||
|
hasStripe
|
||||||
|
/>
|
||||||
|
<Flex justify="space-between" fontSize="sm">
|
||||||
|
<Text>
|
||||||
|
{stats.completedLessons} / {stats.totalLessons} {t('journal.pl.overview.lessons')}
|
||||||
|
</Text>
|
||||||
|
<Text fontWeight="medium">
|
||||||
|
{Math.round(completionPercentage)}%
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Box mb={3}>
|
||||||
|
<Text fontSize="sm" fontWeight="medium" mb={1}>
|
||||||
|
{t('journal.pl.overview.studentAttendance')}:
|
||||||
|
</Text>
|
||||||
|
<Progress
|
||||||
|
value={stats.averageAttendance}
|
||||||
|
size="md"
|
||||||
|
borderRadius="md"
|
||||||
|
colorScheme={getProgressColor(stats.averageAttendance)}
|
||||||
|
mb={1}
|
||||||
|
hasStripe
|
||||||
|
/>
|
||||||
|
<Flex justify="space-between" fontSize="sm">
|
||||||
|
<Text>
|
||||||
|
{t('journal.pl.overview.averageRate')}
|
||||||
|
</Text>
|
||||||
|
<Text fontWeight="medium">
|
||||||
|
{Math.round(stats.averageAttendance)}%
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</Box>
|
||||||
|
|
||||||
|
<Divider my={3} />
|
||||||
|
|
||||||
|
<WeekdayActivityChart
|
||||||
|
weekdayActivity={stats.weekdayActivity}
|
||||||
|
mostActiveDayIndex={stats.mostActiveDayIndex}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,57 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import {
|
||||||
|
VStack,
|
||||||
|
HStack,
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
Badge
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
interface CourseAttendanceProps {
|
||||||
|
courses: Array<{id: string, name: string, attendanceRate: number}>
|
||||||
|
}
|
||||||
|
|
||||||
|
export const CourseAttendanceList: React.FC<CourseAttendanceProps> = ({ courses }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
// Определяем цвет для прогресса в зависимости от значения
|
||||||
|
const getProgressColor = (value: number) => {
|
||||||
|
if (value > 80) return 'green'
|
||||||
|
if (value > 50) return 'blue'
|
||||||
|
if (value > 30) return 'yellow'
|
||||||
|
return 'red'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!courses?.length) {
|
||||||
|
return (
|
||||||
|
<Text color="gray.500" fontSize="sm" textAlign="center">
|
||||||
|
{t('journal.pl.overview.noAttendanceData')}
|
||||||
|
</Text>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<Text fontWeight="medium" fontSize="sm" mb={2}>
|
||||||
|
{t('journal.pl.overview.topAttendanceCourses')}:
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<VStack align="stretch" spacing={2}>
|
||||||
|
{courses.map((course, index) => (
|
||||||
|
<HStack key={course.id} spacing={2}>
|
||||||
|
<Badge colorScheme={['green', 'blue', 'yellow'][index]}>
|
||||||
|
#{index + 1}
|
||||||
|
</Badge>
|
||||||
|
<Text fontSize="sm" fontWeight="medium" isTruncated flex="1">
|
||||||
|
{course.name}
|
||||||
|
</Text>
|
||||||
|
<Badge colorScheme={getProgressColor(course.attendanceRate)}>
|
||||||
|
{Math.round(course.attendanceRate)}%
|
||||||
|
</Badge>
|
||||||
|
</HStack>
|
||||||
|
))}
|
||||||
|
</VStack>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
135
src/pages/course-list/components/statistics/StatCards.tsx
Normal file
135
src/pages/course-list/components/statistics/StatCards.tsx
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import {
|
||||||
|
SimpleGrid,
|
||||||
|
Stat,
|
||||||
|
StatLabel,
|
||||||
|
StatNumber,
|
||||||
|
StatHelpText,
|
||||||
|
Flex,
|
||||||
|
HStack,
|
||||||
|
Text,
|
||||||
|
Icon,
|
||||||
|
Badge
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import {
|
||||||
|
FaGraduationCap,
|
||||||
|
FaChalkboardTeacher,
|
||||||
|
FaCalendarAlt,
|
||||||
|
FaUsers
|
||||||
|
} from 'react-icons/fa'
|
||||||
|
|
||||||
|
import { CourseStats } from './useStats'
|
||||||
|
|
||||||
|
interface StatCardsProps {
|
||||||
|
stats: CourseStats
|
||||||
|
bgColor: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StatCards: React.FC<StatCardsProps> = ({ stats, bgColor }) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
return (
|
||||||
|
<SimpleGrid columns={{ base: 1, sm: 2, md: 4 }} spacing={5} mb={5}>
|
||||||
|
{/* Статистика по курсам */}
|
||||||
|
<Stat
|
||||||
|
bg={bgColor}
|
||||||
|
p={3}
|
||||||
|
borderRadius="lg"
|
||||||
|
boxShadow="sm"
|
||||||
|
borderLeft="4px solid"
|
||||||
|
borderLeftColor="blue.400"
|
||||||
|
>
|
||||||
|
<Flex align="center" mb={2}>
|
||||||
|
<Icon as={FaGraduationCap} color="blue.400" mr={2} />
|
||||||
|
<StatLabel>{t('journal.pl.overview.totalCourses')}</StatLabel>
|
||||||
|
</Flex>
|
||||||
|
<StatNumber fontSize="2xl">{stats.totalCourses}</StatNumber>
|
||||||
|
<StatHelpText mb={0}>
|
||||||
|
<HStack spacing={3} flexWrap="wrap">
|
||||||
|
<Badge colorScheme="green">
|
||||||
|
{stats.activeCourses} {t('journal.pl.overview.active')}
|
||||||
|
</Badge>
|
||||||
|
{stats.recentCoursesCount > 0 && (
|
||||||
|
<Badge colorScheme="purple">
|
||||||
|
+{stats.recentCoursesCount} {t('journal.pl.overview.new')}
|
||||||
|
</Badge>
|
||||||
|
)}
|
||||||
|
</HStack>
|
||||||
|
</StatHelpText>
|
||||||
|
</Stat>
|
||||||
|
|
||||||
|
{/* Статистика по урокам */}
|
||||||
|
<Stat
|
||||||
|
bg={bgColor}
|
||||||
|
p={3}
|
||||||
|
borderRadius="lg"
|
||||||
|
boxShadow="sm"
|
||||||
|
borderLeft="4px solid"
|
||||||
|
borderLeftColor="green.400"
|
||||||
|
>
|
||||||
|
<Flex align="center" mb={2}>
|
||||||
|
<Icon as={FaCalendarAlt} color="green.400" mr={2} />
|
||||||
|
<StatLabel>{t('journal.pl.overview.totalLessons')}</StatLabel>
|
||||||
|
</Flex>
|
||||||
|
<StatNumber fontSize="2xl">{stats.totalLessons}</StatNumber>
|
||||||
|
<StatHelpText mb={0}>
|
||||||
|
<HStack spacing={3} flexWrap="wrap">
|
||||||
|
<Badge colorScheme="blue">
|
||||||
|
{stats.completedLessons} {t('journal.pl.overview.completed')}
|
||||||
|
</Badge>
|
||||||
|
<Badge colorScheme="orange">
|
||||||
|
{stats.upcomingLessons} {t('journal.pl.overview.upcoming')}
|
||||||
|
</Badge>
|
||||||
|
</HStack>
|
||||||
|
</StatHelpText>
|
||||||
|
</Stat>
|
||||||
|
|
||||||
|
{/* Статистика по студентам */}
|
||||||
|
<Stat
|
||||||
|
bg={bgColor}
|
||||||
|
p={3}
|
||||||
|
borderRadius="lg"
|
||||||
|
boxShadow="sm"
|
||||||
|
borderLeft="4px solid"
|
||||||
|
borderLeftColor="purple.400"
|
||||||
|
>
|
||||||
|
<Flex align="center" mb={2}>
|
||||||
|
<Icon as={FaUsers} color="purple.400" mr={2} />
|
||||||
|
<StatLabel>{t('journal.pl.overview.totalStudents')}</StatLabel>
|
||||||
|
</Flex>
|
||||||
|
<StatNumber fontSize="2xl">{stats.totalStudents.size}</StatNumber>
|
||||||
|
<StatHelpText mb={0}>
|
||||||
|
<Text>
|
||||||
|
{stats.averageAttendance > 0 ?
|
||||||
|
`~${Math.round(stats.averageAttendance)}% ${t('journal.pl.overview.attendance')}` :
|
||||||
|
t('journal.pl.overview.noAttendanceData')}
|
||||||
|
</Text>
|
||||||
|
</StatHelpText>
|
||||||
|
</Stat>
|
||||||
|
|
||||||
|
{/* Статистика по преподавателям */}
|
||||||
|
<Stat
|
||||||
|
bg={bgColor}
|
||||||
|
p={3}
|
||||||
|
borderRadius="lg"
|
||||||
|
boxShadow="sm"
|
||||||
|
borderLeft="4px solid"
|
||||||
|
borderLeftColor="orange.400"
|
||||||
|
>
|
||||||
|
<Flex align="center" mb={2}>
|
||||||
|
<Icon as={FaChalkboardTeacher} color="orange.400" mr={2} />
|
||||||
|
<StatLabel>{t('journal.pl.overview.totalTeachers')}</StatLabel>
|
||||||
|
</Flex>
|
||||||
|
<StatNumber fontSize="2xl">{stats.totalTeachers.size}</StatNumber>
|
||||||
|
<StatHelpText mb={0}>
|
||||||
|
<Text>
|
||||||
|
{stats.activeCourses > 0 ?
|
||||||
|
`~${(stats.totalTeachers.size / Math.max(1, stats.activeCourses)).toFixed(1)} ${t('journal.pl.overview.perCourse')}` :
|
||||||
|
t('journal.pl.overview.noActiveData')}
|
||||||
|
</Text>
|
||||||
|
</StatHelpText>
|
||||||
|
</Stat>
|
||||||
|
</SimpleGrid>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,82 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import {
|
||||||
|
VStack,
|
||||||
|
HStack,
|
||||||
|
Box,
|
||||||
|
Text,
|
||||||
|
Progress,
|
||||||
|
Badge,
|
||||||
|
Avatar,
|
||||||
|
Tooltip
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
import { StarIcon } from '@chakra-ui/icons'
|
||||||
|
|
||||||
|
import { StudentAttendance } from './useStats'
|
||||||
|
|
||||||
|
interface StudentAttendanceListProps {
|
||||||
|
students: StudentAttendance[]
|
||||||
|
title: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const StudentAttendanceList: React.FC<StudentAttendanceListProps> = ({
|
||||||
|
students,
|
||||||
|
title
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
// Определяем цвет для прогресса в зависимости от значения
|
||||||
|
const getProgressColor = (value: number) => {
|
||||||
|
if (value > 80) return 'green'
|
||||||
|
if (value > 50) return 'blue'
|
||||||
|
if (value > 30) return 'yellow'
|
||||||
|
return 'red'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!students?.length) {
|
||||||
|
return (
|
||||||
|
<Text color="gray.500" fontSize="sm" textAlign="center">
|
||||||
|
{t('journal.pl.overview.noAttendanceData')}
|
||||||
|
</Text>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Box>
|
||||||
|
<Text fontWeight="medium" fontSize="sm" mb={2} display="flex" alignItems="center">
|
||||||
|
<StarIcon color="yellow.400" mr={2} />
|
||||||
|
{title}
|
||||||
|
</Text>
|
||||||
|
|
||||||
|
<VStack align="stretch" spacing={3}>
|
||||||
|
{students.map((student, index) => (
|
||||||
|
<HStack key={student.id} spacing={3}>
|
||||||
|
<Avatar
|
||||||
|
size="sm"
|
||||||
|
name={student.name}
|
||||||
|
src={student.avatarUrl}
|
||||||
|
bg={index < 3 ? ['yellow.400', 'gray.400', 'orange.300'][index] : 'blue.300'}
|
||||||
|
/>
|
||||||
|
<Box flex="1">
|
||||||
|
<Tooltip label={student.name}>
|
||||||
|
<Text fontSize="sm" fontWeight="medium" isTruncated maxW="150px">
|
||||||
|
{student.name}
|
||||||
|
</Text>
|
||||||
|
</Tooltip>
|
||||||
|
<Progress
|
||||||
|
value={student.percent}
|
||||||
|
size="xs"
|
||||||
|
colorScheme={getProgressColor(student.percent)}
|
||||||
|
borderRadius="full"
|
||||||
|
mt={1}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Badge colorScheme={getProgressColor(student.percent)}>
|
||||||
|
{Math.round(student.percent)}%
|
||||||
|
</Badge>
|
||||||
|
</HStack>
|
||||||
|
))}
|
||||||
|
</VStack>
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -0,0 +1,92 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import {
|
||||||
|
Box,
|
||||||
|
HStack,
|
||||||
|
Text,
|
||||||
|
Badge,
|
||||||
|
Tooltip,
|
||||||
|
VStack
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
import { useTranslation } from 'react-i18next'
|
||||||
|
|
||||||
|
interface WeekdayActivityChartProps {
|
||||||
|
weekdayActivity: number[]
|
||||||
|
mostActiveDayIndex: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export const WeekdayActivityChart: React.FC<WeekdayActivityChartProps> = ({
|
||||||
|
weekdayActivity,
|
||||||
|
mostActiveDayIndex
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation()
|
||||||
|
|
||||||
|
// Переводим день недели в читаемый формат
|
||||||
|
const getDayOfWeekName = (dayIndex: number) => {
|
||||||
|
const days = [
|
||||||
|
'journal.pl.days.sunday',
|
||||||
|
'journal.pl.days.monday',
|
||||||
|
'journal.pl.days.tuesday',
|
||||||
|
'journal.pl.days.wednesday',
|
||||||
|
'journal.pl.days.thursday',
|
||||||
|
'journal.pl.days.friday',
|
||||||
|
'journal.pl.days.saturday'
|
||||||
|
]
|
||||||
|
return t(days[dayIndex])
|
||||||
|
}
|
||||||
|
|
||||||
|
// Получаем короткое название дня недели (первая буква)
|
||||||
|
const getShortDayName = (dayIndex: number) => {
|
||||||
|
return t(`journal.pl.days.${['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'][dayIndex]}`).charAt(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Формируем подсказку для дня недели
|
||||||
|
const getDayTooltip = (dayIndex: number, count: number) => {
|
||||||
|
return `${t(`journal.pl.days.${['sunday', 'monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday'][dayIndex]}`)}:
|
||||||
|
${count} ${t('journal.pl.overview.lessons').toLowerCase()}`
|
||||||
|
}
|
||||||
|
|
||||||
|
// Если нет данных по активности, показываем сообщение
|
||||||
|
if (!weekdayActivity.some(count => count > 0)) {
|
||||||
|
return (
|
||||||
|
<Box textAlign="center" color="gray.500" fontSize="sm">
|
||||||
|
{t('journal.pl.overview.noAttendanceData')}
|
||||||
|
</Box>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<VStack align="start" width="100%">
|
||||||
|
<Text fontSize="sm" fontWeight="medium">
|
||||||
|
{t('journal.pl.overview.mostActiveDay')}:
|
||||||
|
</Text>
|
||||||
|
<Badge colorScheme="blue" fontSize="md" px={2} py={1}>
|
||||||
|
{getDayOfWeekName(mostActiveDayIndex)}
|
||||||
|
</Badge>
|
||||||
|
|
||||||
|
{/* Визуализация активности по дням недели */}
|
||||||
|
<Box w="100%" mt={2}>
|
||||||
|
<HStack spacing={1} w="100%" justify="space-between">
|
||||||
|
{weekdayActivity.map((count, index) => (
|
||||||
|
<Tooltip
|
||||||
|
key={index}
|
||||||
|
label={getDayTooltip(index, count)}
|
||||||
|
>
|
||||||
|
<Box>
|
||||||
|
<Box
|
||||||
|
h={`${Math.max((count / Math.max(...weekdayActivity, 1)) * 50, 3)}px`}
|
||||||
|
w="12px"
|
||||||
|
bg={index === mostActiveDayIndex ? 'blue.400' : 'gray.300'}
|
||||||
|
minH="3px"
|
||||||
|
borderRadius="sm"
|
||||||
|
/>
|
||||||
|
<Text fontSize="xs" textAlign="center" mt={1}>
|
||||||
|
{getShortDayName(index)}
|
||||||
|
</Text>
|
||||||
|
</Box>
|
||||||
|
</Tooltip>
|
||||||
|
))}
|
||||||
|
</HStack>
|
||||||
|
</Box>
|
||||||
|
</VStack>
|
||||||
|
)
|
||||||
|
}
|
||||||
6
src/pages/course-list/components/statistics/index.ts
Normal file
6
src/pages/course-list/components/statistics/index.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export * from './useStats'
|
||||||
|
export * from './StatCards'
|
||||||
|
export * from './StudentAttendanceList'
|
||||||
|
export * from './CourseAttendanceList'
|
||||||
|
export * from './ActivityStats'
|
||||||
|
export * from './WeekdayActivityChart'
|
||||||
235
src/pages/course-list/components/statistics/useStats.ts
Normal file
235
src/pages/course-list/components/statistics/useStats.ts
Normal file
@ -0,0 +1,235 @@
|
|||||||
|
import { useMemo } from 'react'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { Course, Lesson } from '../../../../__data__/model'
|
||||||
|
|
||||||
|
export interface StudentAttendance {
|
||||||
|
id: string
|
||||||
|
name: string
|
||||||
|
attended: number
|
||||||
|
total: number
|
||||||
|
percent: number
|
||||||
|
avatarUrl?: string
|
||||||
|
email?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface CourseStats {
|
||||||
|
totalCourses: number
|
||||||
|
activeCourses: number
|
||||||
|
totalLessons: number
|
||||||
|
completedLessons: number
|
||||||
|
upcomingLessons: number
|
||||||
|
averageAttendance: number
|
||||||
|
totalStudents: Set<string>
|
||||||
|
totalTeachers: Set<string>
|
||||||
|
recentCoursesCount: number
|
||||||
|
oldCoursesCount: number
|
||||||
|
weekdayActivity: number[]
|
||||||
|
mostActiveDayIndex: number
|
||||||
|
topStudents: StudentAttendance[]
|
||||||
|
topCoursesByAttendance: Array<{id: string, name: string, attendanceRate: number}>
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useStats = (
|
||||||
|
courses: Course[],
|
||||||
|
lessonsByCourse: Record<string, Lesson[]> = {}
|
||||||
|
): CourseStats => {
|
||||||
|
|
||||||
|
return useMemo(() => {
|
||||||
|
if (!courses?.length) {
|
||||||
|
return {
|
||||||
|
totalCourses: 0,
|
||||||
|
activeCourses: 0,
|
||||||
|
totalLessons: 0,
|
||||||
|
completedLessons: 0,
|
||||||
|
upcomingLessons: 0,
|
||||||
|
averageAttendance: 0,
|
||||||
|
totalStudents: new Set<string>(),
|
||||||
|
totalTeachers: new Set<string>(),
|
||||||
|
recentCoursesCount: 0,
|
||||||
|
oldCoursesCount: 0,
|
||||||
|
weekdayActivity: Array(7).fill(0),
|
||||||
|
mostActiveDayIndex: 0,
|
||||||
|
topStudents: [] as StudentAttendance[],
|
||||||
|
topCoursesByAttendance: [] as {id: string, name: string, attendanceRate: number}[]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const now = dayjs()
|
||||||
|
const threeMonthsAgo = now.subtract(3, 'month')
|
||||||
|
const weekdayActivity = Array(7).fill(0)
|
||||||
|
|
||||||
|
// Множества для уникальных студентов и учителей
|
||||||
|
const uniqueStudents = new Set<string>()
|
||||||
|
const uniqueTeachers = new Set<string>()
|
||||||
|
|
||||||
|
// Количество курсов, созданных за последние 3 месяца
|
||||||
|
const recentCourses = courses.filter(course =>
|
||||||
|
dayjs(course.created).isAfter(threeMonthsAgo)
|
||||||
|
)
|
||||||
|
|
||||||
|
// Количество активных курсов
|
||||||
|
const activeCourses = []
|
||||||
|
|
||||||
|
let totalLessonsCount = 0
|
||||||
|
let completedLessonsCount = 0
|
||||||
|
let upcomingLessonsCount = 0
|
||||||
|
let totalAttendances = 0
|
||||||
|
let totalPossibleAttendances = 0
|
||||||
|
|
||||||
|
// Для отслеживания посещаемости студентов по всем курсам
|
||||||
|
const globalStudentsMap = new Map<string, StudentAttendance>()
|
||||||
|
|
||||||
|
// Статистика посещаемости по курсам
|
||||||
|
const courseAttendanceStats: {id: string, name: string, attendanceRate: number}[] = []
|
||||||
|
|
||||||
|
// Для каждого курса считаем статистику на основе данных об уроках
|
||||||
|
courses.forEach(course => {
|
||||||
|
// Добавляем учителей в множество
|
||||||
|
course.teachers.forEach(teacher => {
|
||||||
|
uniqueTeachers.add(teacher.sub)
|
||||||
|
})
|
||||||
|
|
||||||
|
// Получаем детализированные данные об уроках курса (если доступны)
|
||||||
|
const courseLessons = lessonsByCourse[course._id] || []
|
||||||
|
|
||||||
|
// Если у нас есть детализированные данные по урокам
|
||||||
|
if (courseLessons.length > 0) {
|
||||||
|
// Добавляем количество уроков к общему счетчику
|
||||||
|
totalLessonsCount += courseLessons.length
|
||||||
|
|
||||||
|
// Считаем завершенные и предстоящие уроки
|
||||||
|
const completed = courseLessons.filter(lesson => dayjs(lesson.date).isBefore(now))
|
||||||
|
const upcoming = courseLessons.filter(lesson => dayjs(lesson.date).isAfter(now))
|
||||||
|
|
||||||
|
completedLessonsCount += completed.length
|
||||||
|
upcomingLessonsCount += upcoming.length
|
||||||
|
|
||||||
|
// Если у курса есть будущие занятия, считаем его активным
|
||||||
|
if (upcoming.length > 0) {
|
||||||
|
activeCourses.push(course)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Для статистики посещаемости по курсу
|
||||||
|
let courseAttendances = 0
|
||||||
|
let coursePossibleAttendances = 0
|
||||||
|
|
||||||
|
// Считаем посещаемость по прошедшим занятиям
|
||||||
|
completed.forEach(lesson => {
|
||||||
|
// Добавляем статистику по дням недели
|
||||||
|
// В dayjs 0 = воскресенье, 1 = понедельник, ... 6 = суббота
|
||||||
|
// Нужно проверить формат даты урока, что это валидная дата
|
||||||
|
if (lesson.date && dayjs(lesson.date).isValid()) {
|
||||||
|
const lessonDay = dayjs(lesson.date).day()
|
||||||
|
weekdayActivity[lessonDay]++
|
||||||
|
}
|
||||||
|
|
||||||
|
// Добавляем студентов в глобальное множество
|
||||||
|
const lessonStudentsCount = lesson.students?.length || 0
|
||||||
|
|
||||||
|
// Добавляем в статистику посещаемости
|
||||||
|
courseAttendances += lessonStudentsCount
|
||||||
|
|
||||||
|
// Обновляем счетчики общей посещаемости
|
||||||
|
totalAttendances += lessonStudentsCount
|
||||||
|
|
||||||
|
// Собираем статистику по каждому студенту
|
||||||
|
lesson.students?.forEach(student => {
|
||||||
|
uniqueStudents.add(student.sub)
|
||||||
|
|
||||||
|
// Добавляем или обновляем данные студента в глобальной карте
|
||||||
|
const studentId = student.sub
|
||||||
|
const currentGlobal = globalStudentsMap.get(studentId) || {
|
||||||
|
id: studentId,
|
||||||
|
name: (student.family_name && student.given_name
|
||||||
|
? `${student.family_name} ${student.given_name}`
|
||||||
|
: student.name || student.email || student.preferred_username || student.family_name || student.given_name),
|
||||||
|
attended: 0,
|
||||||
|
total: 0,
|
||||||
|
percent: 0,
|
||||||
|
avatarUrl: student.picture,
|
||||||
|
email: student.email
|
||||||
|
}
|
||||||
|
|
||||||
|
currentGlobal.attended += 1
|
||||||
|
globalStudentsMap.set(studentId, currentGlobal)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
// Потенциальные посещения для этого курса
|
||||||
|
// (кол-во прошедших занятий * кол-во уникальных студентов)
|
||||||
|
const courseUniqueStudents = new Set<string>()
|
||||||
|
courseLessons.forEach(lesson => {
|
||||||
|
lesson.students?.forEach(student => {
|
||||||
|
courseUniqueStudents.add(student.sub)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
coursePossibleAttendances = completed.length * (courseUniqueStudents.size || 1)
|
||||||
|
totalPossibleAttendances += coursePossibleAttendances
|
||||||
|
|
||||||
|
// Добавляем статистику курса, если есть прошедшие занятия
|
||||||
|
if (completed.length > 0 && coursePossibleAttendances > 0) {
|
||||||
|
courseAttendanceStats.push({
|
||||||
|
id: course._id,
|
||||||
|
name: course.name,
|
||||||
|
attendanceRate: (courseAttendances / coursePossibleAttendances) * 100
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// Если у нас нет детализированных данных, считаем на основе общих данных курса
|
||||||
|
totalLessonsCount += course.lessons.length
|
||||||
|
|
||||||
|
// Предполагаем, что курс активен
|
||||||
|
activeCourses.push(course)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// Отладочная информация по активности по дням недели
|
||||||
|
console.log('Weekday activity:', weekdayActivity)
|
||||||
|
|
||||||
|
// Обрабатываем глобальную статистику посещаемости студентов
|
||||||
|
// Устанавливаем общее число занятий для каждого студента
|
||||||
|
globalStudentsMap.forEach(student => {
|
||||||
|
// Можем установить только примерную метрику, т.к. студенты могут быть на разных курсах
|
||||||
|
student.total = completedLessonsCount
|
||||||
|
student.percent = student.attended / student.total * 100
|
||||||
|
})
|
||||||
|
|
||||||
|
// Находим самый активный день недели
|
||||||
|
const maxValue = Math.max(...weekdayActivity)
|
||||||
|
// Если максимальное значение = 0, то устанавливаем понедельник как самый активный день по умолчанию
|
||||||
|
const mostActiveDayIndex = maxValue > 0 ? weekdayActivity.indexOf(maxValue) : 1
|
||||||
|
|
||||||
|
// Вычисляем среднюю посещаемость
|
||||||
|
const averageAttendance = totalPossibleAttendances > 0
|
||||||
|
? (totalAttendances / totalPossibleAttendances) * 100
|
||||||
|
: 0
|
||||||
|
|
||||||
|
// Топ студенты по посещаемости (по всем курсам)
|
||||||
|
const topStudents = Array.from(globalStudentsMap.values())
|
||||||
|
.sort((a, b) => (b.percent - a.percent) || (b.attended - a.attended))
|
||||||
|
.slice(0, 5)
|
||||||
|
|
||||||
|
// Сортируем курсы по посещаемости
|
||||||
|
const topCoursesByAttendance = courseAttendanceStats
|
||||||
|
.sort((a, b) => b.attendanceRate - a.attendanceRate)
|
||||||
|
.slice(0, 3)
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalCourses: courses.length,
|
||||||
|
activeCourses: activeCourses.length,
|
||||||
|
totalLessons: totalLessonsCount,
|
||||||
|
completedLessons: completedLessonsCount,
|
||||||
|
upcomingLessons: upcomingLessonsCount,
|
||||||
|
averageAttendance,
|
||||||
|
totalStudents: uniqueStudents,
|
||||||
|
totalTeachers: uniqueTeachers,
|
||||||
|
recentCoursesCount: recentCourses.length,
|
||||||
|
oldCoursesCount: courses.length - recentCourses.length,
|
||||||
|
weekdayActivity,
|
||||||
|
mostActiveDayIndex,
|
||||||
|
topStudents,
|
||||||
|
topCoursesByAttendance
|
||||||
|
}
|
||||||
|
}, [courses, lessonsByCourse])
|
||||||
|
}
|
||||||
@ -1,4 +1,4 @@
|
|||||||
import React, { useState } from 'react'
|
import React, { useState, useMemo, useEffect } from 'react'
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Button,
|
Button,
|
||||||
@ -15,7 +15,8 @@ import { api } from '../../__data__/api/api'
|
|||||||
import { isTeacher } from '../../utils/user'
|
import { isTeacher } from '../../utils/user'
|
||||||
import { PageLoader } from '../../components/page-loader/page-loader'
|
import { PageLoader } from '../../components/page-loader/page-loader'
|
||||||
import { useGroupedCourses } from './hooks'
|
import { useGroupedCourses } from './hooks'
|
||||||
import { CreateCourseForm, YearGroup } from './components'
|
import { CreateCourseForm, YearGroup, CoursesOverview } from './components'
|
||||||
|
import { Lesson } from '../../__data__/model'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Основной компонент списка курсов
|
* Основной компонент списка курсов
|
||||||
@ -27,11 +28,48 @@ export const CoursesList = () => {
|
|||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
const { colorMode } = useColorMode()
|
const { colorMode } = useColorMode()
|
||||||
|
|
||||||
|
// Создаем API запросы для получения уроков
|
||||||
|
const [getLessons] = api.useLazyLessonListQuery()
|
||||||
|
|
||||||
const buttonSize = useBreakpointValue({ base: 'md', md: 'lg' })
|
const buttonSize = useBreakpointValue({ base: 'md', md: 'lg' })
|
||||||
const containerPadding = useBreakpointValue({ base: '2', md: '4' })
|
const containerPadding = useBreakpointValue({ base: '2', md: '4' })
|
||||||
|
|
||||||
// Используем хук для группировки курсов по годам
|
// Используем хук для группировки курсов по годам
|
||||||
const groupedCourses = useGroupedCourses(data?.body)
|
const groupedCourses = useGroupedCourses(data?.body)
|
||||||
|
|
||||||
|
// Создаем объект с детализированными данными для всех курсов
|
||||||
|
const [lessonsByCourse, setLessonsByCourse] = useState<Record<string, Lesson[]>>({})
|
||||||
|
|
||||||
|
// Используем useMemo для проверки наличия данных
|
||||||
|
const courses = useMemo(() => data?.body || [], [data])
|
||||||
|
|
||||||
|
// Загружаем данные для каждого курса параллельно
|
||||||
|
useEffect(() => {
|
||||||
|
if (courses.length > 0 && !showForm) {
|
||||||
|
// Создаем запросы для получения данных о занятиях каждого курса
|
||||||
|
const fetchLessonsForCourses = async () => {
|
||||||
|
const lessonsData: Record<string, Lesson[]> = {}
|
||||||
|
|
||||||
|
// Получаем данные курсов параллельно (по 3 курса за раз, чтобы не перегружать сервер)
|
||||||
|
for (let i = 0; i < courses.length; i += 3) {
|
||||||
|
const batch = courses.slice(i, i + 3)
|
||||||
|
const batchPromises = batch.map(async course => {
|
||||||
|
// Используем существующий API метод с Lazy Query
|
||||||
|
const response = await getLessons(course.id)
|
||||||
|
if (response.data?.body) {
|
||||||
|
lessonsData[course._id] = response.data.body
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
await Promise.all(batchPromises)
|
||||||
|
}
|
||||||
|
|
||||||
|
setLessonsByCourse(lessonsData)
|
||||||
|
}
|
||||||
|
|
||||||
|
fetchLessonsForCourses()
|
||||||
|
}
|
||||||
|
}, [courses, showForm, getLessons])
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return <PageLoader />
|
return <PageLoader />
|
||||||
@ -61,6 +99,14 @@ export const CoursesList = () => {
|
|||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{!showForm && (
|
||||||
|
<CoursesOverview
|
||||||
|
courses={courses}
|
||||||
|
isLoading={isLoading}
|
||||||
|
lessonsByCourse={lessonsByCourse}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
{Object.keys(groupedCourses).length > 0 ? (
|
{Object.keys(groupedCourses).length > 0 ? (
|
||||||
Object.entries(groupedCourses)
|
Object.entries(groupedCourses)
|
||||||
.sort(([yearA], [yearB]) => Number(yearB) - Number(yearA)) // Сортируем годы по убыванию
|
.sort(([yearA], [yearB]) => Number(yearB) - Number(yearA)) // Сортируем годы по убыванию
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user