Реализованы компоненты для отображения посещаемости: AttendanceTable, StatsCard и ShortText. Добавлены хуки useAttendanceData и useAttendanceStats для обработки данных. Обновлен компонент Attendance с использованием новых компонентов и хуков.
This commit is contained in:
parent
433e3b87bf
commit
5e32e55ac2
@ -1,140 +1,60 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import React from 'react'
|
||||
import { useParams } from 'react-router-dom'
|
||||
import { Box, Heading, Tooltip, Text } from '@chakra-ui/react'
|
||||
import dayjs from 'dayjs'
|
||||
import {
|
||||
Box,
|
||||
Heading,
|
||||
Container,
|
||||
useColorMode,
|
||||
IconButton,
|
||||
Flex,
|
||||
Spacer,
|
||||
Badge
|
||||
} from '@chakra-ui/react'
|
||||
import { MoonIcon, SunIcon } from '@chakra-ui/icons'
|
||||
|
||||
import { api } from '../../__data__/api/api'
|
||||
import { PageLoader } from '../../components/page-loader/page-loader'
|
||||
import { useAttendanceData, useAttendanceStats } from './hooks'
|
||||
import { AttendanceTable, StatsCard } from './components'
|
||||
|
||||
export const Attendance = () => {
|
||||
const { courseId } = useParams()
|
||||
const { data: attendance, isLoading } = api.useLessonListQuery(courseId, {
|
||||
selectFromResult: ({ data, isLoading }) => ({
|
||||
data: data?.body,
|
||||
isLoading,
|
||||
}),
|
||||
})
|
||||
const { data: courseInfo, isLoading: courseInfoIssLoading } =
|
||||
api.useGetCourseByIdQuery(courseId)
|
||||
const { colorMode, toggleColorMode } = useColorMode()
|
||||
const data = useAttendanceData(courseId)
|
||||
const stats = useAttendanceStats(data)
|
||||
|
||||
const data = useMemo(() => {
|
||||
if (!attendance) return null
|
||||
|
||||
const studentsMap = new Map()
|
||||
const teachersMap = new Map()
|
||||
|
||||
attendance.forEach((lesson) => {
|
||||
lesson.teachers?.map((teacher: any) => {
|
||||
teachersMap.set(teacher.sub, { id: teacher.sub, ...teacher, value: teacher.value || (teacher.family_name && teacher.given_name
|
||||
? `${teacher.family_name} ${teacher.given_name}`
|
||||
: teacher.name || teacher.email || teacher.preferred_username || teacher.family_name || teacher.given_name), })
|
||||
})
|
||||
|
||||
lesson.students.forEach((student) => {
|
||||
const current = studentsMap.get(student.sub) || {}
|
||||
|
||||
studentsMap.set(student.sub, {
|
||||
...student,
|
||||
id: student.sub,
|
||||
value: current.value || (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),
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const compare = Intl.Collator('ru').compare
|
||||
|
||||
const students = [...studentsMap.values()]
|
||||
const taechers = [...teachersMap.values()]
|
||||
students.sort(({ family_name: name }, { family_name: nname }) =>
|
||||
compare(name, nname),
|
||||
)
|
||||
return {
|
||||
students,
|
||||
taechers,
|
||||
}
|
||||
}, [attendance])
|
||||
|
||||
if (!data || isLoading || courseInfoIssLoading) {
|
||||
if (data.isLoading) {
|
||||
return <PageLoader />
|
||||
}
|
||||
|
||||
return (
|
||||
<Box>
|
||||
<Box mt={12} mb={12}>
|
||||
<Heading>{courseInfo.name}</Heading>
|
||||
</Box>
|
||||
<Box>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
{data.taechers.map(teacher => (
|
||||
<th id={teacher.id} key={teacher.id}>{teacher.value}</th>
|
||||
))}
|
||||
<th>Дата</th>
|
||||
<th>Название занятия</th>
|
||||
{data.students.map((student) => (
|
||||
<th id={student.id || student.sub} key={student.sub}>{student.name || student.value || 'Имя не определено'}</th>
|
||||
))}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{attendance.map((lesson, index) => (
|
||||
<tr key={lesson.name}>
|
||||
{data?.taechers?.map((teacher) => {
|
||||
<Container maxW="container.xl" p={1}>
|
||||
<Flex alignItems="center" mb={6}>
|
||||
<Box>
|
||||
<Heading size="lg" mb={2}>{data.courseInfo?.name}</Heading>
|
||||
<Badge colorScheme="blue">
|
||||
{data.students.length} студентов • {data.teachers.length} преподавателей
|
||||
</Badge>
|
||||
</Box>
|
||||
<Spacer />
|
||||
<IconButton
|
||||
aria-label="Переключить тему"
|
||||
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
|
||||
onClick={toggleColorMode}
|
||||
variant="ghost"
|
||||
size="lg"
|
||||
/>
|
||||
</Flex>
|
||||
|
||||
const wasThere = Boolean(lesson.teachers) &&
|
||||
lesson?.teachers?.findIndex((u) => u.sub === teacher.sub) !== -1
|
||||
return (
|
||||
<td
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
backgroundColor: wasThere ? '#8ef78a' : '#e09797',
|
||||
}}
|
||||
key={teacher.sub}
|
||||
>
|
||||
{wasThere ? '+' : '-'}
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
<td>{dayjs(lesson.date).format('DD.MM.YYYY')}</td>
|
||||
<td>{<ShortText text={lesson.name} />}</td>
|
||||
<StatsCard stats={stats} />
|
||||
|
||||
{data.students.map((st) => {
|
||||
const wasThere =
|
||||
lesson.students.findIndex((u) => u.sub === st.sub) !== -1
|
||||
return (
|
||||
<td
|
||||
style={{
|
||||
textAlign: 'center',
|
||||
backgroundColor: wasThere ? '#8ef78a' : '#e09797',
|
||||
}}
|
||||
key={st.sub}
|
||||
>
|
||||
{wasThere ? '+' : '-'}
|
||||
</td>
|
||||
)
|
||||
})}
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
<Box
|
||||
bg={colorMode === 'dark' ? 'gray.800' : 'gray.50'}
|
||||
p={4}
|
||||
borderRadius="lg"
|
||||
boxShadow="sm"
|
||||
>
|
||||
<AttendanceTable data={data} />
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const ShortText = ({ text }: { text: string }) => {
|
||||
const needShortText = text.length > 20
|
||||
|
||||
if (needShortText) {
|
||||
return (
|
||||
<Tooltip label={text} fontSize="12px" top="16px">
|
||||
<Text>{text.slice(0, 20)}...</Text>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
return text
|
||||
}
|
||||
|
||||
97
src/pages/attendance/components/AttendanceTable.tsx
Normal file
97
src/pages/attendance/components/AttendanceTable.tsx
Normal file
@ -0,0 +1,97 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Table,
|
||||
Thead,
|
||||
Tbody,
|
||||
Tr,
|
||||
Th,
|
||||
Td,
|
||||
Box,
|
||||
useColorMode,
|
||||
useTheme
|
||||
} from '@chakra-ui/react'
|
||||
import dayjs from 'dayjs'
|
||||
import { ShortText } from './ShortText'
|
||||
import { AttendanceData } from '../hooks'
|
||||
|
||||
interface AttendanceTableProps {
|
||||
data: AttendanceData
|
||||
}
|
||||
|
||||
export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
|
||||
const { colorMode } = useColorMode()
|
||||
const theme = useTheme()
|
||||
|
||||
const getPresentColor = () => {
|
||||
return colorMode === 'dark' ? 'green.600' : 'green.100'
|
||||
}
|
||||
|
||||
const getAbsentColor = () => {
|
||||
return colorMode === 'dark' ? 'red.800' : 'red.100'
|
||||
}
|
||||
|
||||
if (!data.attendance?.length || !data.students?.length) {
|
||||
return <Box>Нет данных для отображения</Box>
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
overflowX="auto"
|
||||
boxShadow="md"
|
||||
borderRadius="lg"
|
||||
bg={colorMode === 'dark' ? 'gray.700' : 'white'}
|
||||
>
|
||||
<Table variant="simple" size="sm">
|
||||
<Thead>
|
||||
<Tr>
|
||||
{data.teachers?.map(teacher => (
|
||||
<Th key={teacher.id}>{teacher.value}</Th>
|
||||
))}
|
||||
<Th>Дата</Th>
|
||||
<Th>Название занятия</Th>
|
||||
{data.students.map((student) => (
|
||||
<Th key={student.sub}>
|
||||
{student.name || student.value || 'Имя не определено'}
|
||||
</Th>
|
||||
))}
|
||||
</Tr>
|
||||
</Thead>
|
||||
<Tbody>
|
||||
{data.attendance.map((lesson) => (
|
||||
<Tr key={lesson.name}>
|
||||
{data.teachers?.map((teacher) => {
|
||||
const wasThere = Boolean(lesson.teachers) &&
|
||||
lesson.teachers.findIndex((u) => u.sub === teacher.sub) !== -1
|
||||
return (
|
||||
<Td
|
||||
key={teacher.sub}
|
||||
textAlign="center"
|
||||
bg={wasThere ? getPresentColor() : getAbsentColor()}
|
||||
>
|
||||
{wasThere ? '+' : '-'}
|
||||
</Td>
|
||||
)
|
||||
})}
|
||||
<Td>{dayjs(lesson.date).format('DD.MM.YYYY')}</Td>
|
||||
<Td><ShortText text={lesson.name} /></Td>
|
||||
|
||||
{data.students.map((st) => {
|
||||
const wasThere =
|
||||
lesson.students.findIndex((u) => u.sub === st.sub) !== -1
|
||||
return (
|
||||
<Td
|
||||
key={st.sub}
|
||||
textAlign="center"
|
||||
bg={wasThere ? getPresentColor() : getAbsentColor()}
|
||||
>
|
||||
{wasThere ? '+' : '-'}
|
||||
</Td>
|
||||
)
|
||||
})}
|
||||
</Tr>
|
||||
))}
|
||||
</Tbody>
|
||||
</Table>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
30
src/pages/attendance/components/ShortText.tsx
Normal file
30
src/pages/attendance/components/ShortText.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
import React from 'react'
|
||||
import { Tooltip, Text, useColorMode } from '@chakra-ui/react'
|
||||
|
||||
interface ShortTextProps {
|
||||
text: string
|
||||
maxLength?: number
|
||||
}
|
||||
|
||||
export const ShortText: React.FC<ShortTextProps> = ({ text, maxLength = 20 }) => {
|
||||
const needShortText = text.length > maxLength
|
||||
const { colorMode } = useColorMode()
|
||||
|
||||
if (needShortText) {
|
||||
return (
|
||||
<Tooltip
|
||||
label={text}
|
||||
fontSize="sm"
|
||||
bg={colorMode === 'dark' ? 'gray.700' : 'white'}
|
||||
color={colorMode === 'dark' ? 'white' : 'gray.800'}
|
||||
boxShadow="md"
|
||||
borderRadius="md"
|
||||
p={2}
|
||||
>
|
||||
<Text>{text.slice(0, maxLength)}...</Text>
|
||||
</Tooltip>
|
||||
)
|
||||
}
|
||||
|
||||
return <Text>{text}</Text>
|
||||
}
|
||||
101
src/pages/attendance/components/StatsCard.tsx
Normal file
101
src/pages/attendance/components/StatsCard.tsx
Normal file
@ -0,0 +1,101 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
Box,
|
||||
SimpleGrid,
|
||||
Stat,
|
||||
StatLabel,
|
||||
StatNumber,
|
||||
StatHelpText,
|
||||
useColorMode,
|
||||
Heading,
|
||||
Divider,
|
||||
Progress,
|
||||
VStack,
|
||||
HStack,
|
||||
Text,
|
||||
Badge
|
||||
} from '@chakra-ui/react'
|
||||
import { AttendanceStats } from '../hooks'
|
||||
|
||||
interface StatsCardProps {
|
||||
stats: AttendanceStats
|
||||
}
|
||||
|
||||
export const StatsCard: React.FC<StatsCardProps> = ({ stats }) => {
|
||||
const { colorMode } = useColorMode()
|
||||
|
||||
const getBgColor = () => {
|
||||
return colorMode === 'dark' ? 'gray.700' : 'white'
|
||||
}
|
||||
|
||||
const getProgressColor = (value: number) => {
|
||||
if (value > 80) return 'green'
|
||||
if (value > 50) return 'yellow'
|
||||
return 'red'
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
p={5}
|
||||
borderRadius="lg"
|
||||
boxShadow="md"
|
||||
bg={getBgColor()}
|
||||
mb={6}
|
||||
>
|
||||
<Heading size="md" mb={4}>Статистика посещаемости</Heading>
|
||||
<Divider mb={4} />
|
||||
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={5}>
|
||||
<Box>
|
||||
<SimpleGrid columns={{ base: 1, md: 2 }} spacing={5}>
|
||||
<Stat>
|
||||
<StatLabel>Всего занятий</StatLabel>
|
||||
<StatNumber>{stats.totalLessons}</StatNumber>
|
||||
</Stat>
|
||||
|
||||
<Stat>
|
||||
<StatLabel>Средняя посещаемость</StatLabel>
|
||||
<StatNumber>{stats.averageAttendance.toFixed(1)}%</StatNumber>
|
||||
<Progress
|
||||
value={stats.averageAttendance}
|
||||
colorScheme={getProgressColor(stats.averageAttendance)}
|
||||
size="sm"
|
||||
mt={2}
|
||||
/>
|
||||
</Stat>
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
|
||||
<Box>
|
||||
<Stat>
|
||||
<StatLabel mb={3}>Топ-3 студента по посещаемости</StatLabel>
|
||||
<VStack align="stretch" spacing={2}>
|
||||
{stats.topStudents.map((student, index) => (
|
||||
<HStack key={index} justify="space-between">
|
||||
<HStack>
|
||||
<Badge
|
||||
colorScheme={index === 0 ? 'green' : index === 1 ? 'blue' : 'yellow'}
|
||||
fontSize="sm"
|
||||
borderRadius="full"
|
||||
px={2}
|
||||
>
|
||||
{index + 1}
|
||||
</Badge>
|
||||
<Text fontWeight="medium">{student.name}</Text>
|
||||
</HStack>
|
||||
<Text>
|
||||
{student.attendance} из {stats.totalLessons} ({student.attendancePercent.toFixed(0)}%)
|
||||
</Text>
|
||||
</HStack>
|
||||
))}
|
||||
{stats.topStudents.length === 0 && (
|
||||
<Text color="gray.500">Нет данных</Text>
|
||||
)}
|
||||
</VStack>
|
||||
</Stat>
|
||||
</Box>
|
||||
|
||||
</SimpleGrid>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
3
src/pages/attendance/components/index.ts
Normal file
3
src/pages/attendance/components/index.ts
Normal file
@ -0,0 +1,3 @@
|
||||
export * from './AttendanceTable'
|
||||
export * from './ShortText'
|
||||
export * from './StatsCard'
|
||||
2
src/pages/attendance/hooks/index.ts
Normal file
2
src/pages/attendance/hooks/index.ts
Normal file
@ -0,0 +1,2 @@
|
||||
export * from './useAttendanceData'
|
||||
export * from './useAttendanceStats'
|
||||
72
src/pages/attendance/hooks/useAttendanceData.ts
Normal file
72
src/pages/attendance/hooks/useAttendanceData.ts
Normal file
@ -0,0 +1,72 @@
|
||||
import { useMemo } from 'react'
|
||||
import { api } from '../../../__data__/api/api'
|
||||
|
||||
export interface AttendanceData {
|
||||
students: any[]
|
||||
teachers: any[]
|
||||
attendance: any[]
|
||||
isLoading: boolean
|
||||
courseInfo: any
|
||||
}
|
||||
|
||||
export const useAttendanceData = (courseId: string | undefined): AttendanceData => {
|
||||
const { data: attendance, isLoading } = api.useLessonListQuery(courseId, {
|
||||
selectFromResult: ({ data, isLoading }) => ({
|
||||
data: data?.body,
|
||||
isLoading,
|
||||
}),
|
||||
})
|
||||
const { data: courseInfo, isLoading: courseInfoIsLoading } =
|
||||
api.useGetCourseByIdQuery(courseId)
|
||||
|
||||
const processedData = useMemo(() => {
|
||||
if (!attendance) return { students: [], teachers: [], attendance: [] }
|
||||
|
||||
const studentsMap = new Map()
|
||||
const teachersMap = new Map()
|
||||
|
||||
attendance.forEach((lesson) => {
|
||||
lesson.teachers?.forEach((teacher: any) => {
|
||||
teachersMap.set(teacher.sub, {
|
||||
id: teacher.sub,
|
||||
...teacher,
|
||||
value: teacher.value || (teacher.family_name && teacher.given_name
|
||||
? `${teacher.family_name} ${teacher.given_name}`
|
||||
: teacher.name || teacher.email || teacher.preferred_username || teacher.family_name || teacher.given_name),
|
||||
})
|
||||
})
|
||||
|
||||
lesson.students.forEach((student) => {
|
||||
const current = studentsMap.get(student.sub) || {}
|
||||
|
||||
studentsMap.set(student.sub, {
|
||||
...student,
|
||||
id: student.sub,
|
||||
value: current.value || (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),
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
const compare = Intl.Collator('ru').compare
|
||||
|
||||
const students = [...studentsMap.values()]
|
||||
const teachers = [...teachersMap.values()]
|
||||
students.sort(({ family_name: name }, { family_name: nname }) =>
|
||||
compare(name, nname),
|
||||
)
|
||||
|
||||
return {
|
||||
students,
|
||||
teachers,
|
||||
attendance,
|
||||
}
|
||||
}, [attendance])
|
||||
|
||||
return {
|
||||
...processedData,
|
||||
isLoading: isLoading || courseInfoIsLoading,
|
||||
courseInfo
|
||||
}
|
||||
}
|
||||
87
src/pages/attendance/hooks/useAttendanceStats.ts
Normal file
87
src/pages/attendance/hooks/useAttendanceStats.ts
Normal file
@ -0,0 +1,87 @@
|
||||
import { useMemo } from 'react'
|
||||
import { AttendanceData } from './useAttendanceData'
|
||||
|
||||
export interface AttendanceStats {
|
||||
totalLessons: number
|
||||
averageAttendance: number
|
||||
topStudents: Array<{
|
||||
name: string
|
||||
attendance: number
|
||||
attendancePercent: number
|
||||
}>
|
||||
lessonsAttendance: Array<{
|
||||
name: string
|
||||
date: string
|
||||
attendancePercent: number
|
||||
}>
|
||||
}
|
||||
|
||||
export const useAttendanceStats = (data: AttendanceData): AttendanceStats => {
|
||||
return useMemo(() => {
|
||||
if (!data.attendance || !data.students.length) {
|
||||
return {
|
||||
totalLessons: 0,
|
||||
averageAttendance: 0,
|
||||
topStudents: [],
|
||||
lessonsAttendance: []
|
||||
}
|
||||
}
|
||||
|
||||
const totalLessons = data.attendance.length
|
||||
|
||||
// Рассчитываем посещаемость для каждого студента
|
||||
const studentAttendance = data.students.map(student => {
|
||||
let attended = 0
|
||||
|
||||
data.attendance.forEach(lesson => {
|
||||
if (lesson.students.some(s => s.sub === student.sub)) {
|
||||
attended++
|
||||
}
|
||||
})
|
||||
|
||||
return {
|
||||
student,
|
||||
name: student.value,
|
||||
attendance: attended,
|
||||
attendancePercent: totalLessons > 0 ? (attended / totalLessons) * 100 : 0
|
||||
}
|
||||
})
|
||||
|
||||
// Рассчитываем статистику посещаемости для каждого урока
|
||||
const lessonsAttendance = data.attendance.map(lesson => {
|
||||
const attendedStudents = lesson.students.length
|
||||
const attendancePercent = data.students.length > 0
|
||||
? (attendedStudents / data.students.length) * 100
|
||||
: 0
|
||||
|
||||
return {
|
||||
name: lesson.name,
|
||||
date: lesson.date,
|
||||
attendancePercent
|
||||
}
|
||||
})
|
||||
|
||||
// Выбираем топ-3 студентов по посещаемости
|
||||
const topStudents = [...studentAttendance]
|
||||
.sort((a, b) => b.attendance - a.attendance)
|
||||
.slice(0, 3)
|
||||
.map(student => ({
|
||||
name: student.name,
|
||||
attendance: student.attendance,
|
||||
attendancePercent: student.attendancePercent
|
||||
}))
|
||||
|
||||
// Считаем среднюю посещаемость
|
||||
const totalAttendance = studentAttendance.reduce((sum, student) => sum + student.attendance, 0)
|
||||
const averageAttendance = data.students.length > 0 && totalLessons > 0
|
||||
? (totalAttendance / (data.students.length * totalLessons)) * 100
|
||||
: 0
|
||||
|
||||
return {
|
||||
totalLessons,
|
||||
averageAttendance,
|
||||
topStudents,
|
||||
lessonsAttendance
|
||||
}
|
||||
}, [data])
|
||||
}
|
||||
1
src/pages/attendance/index.tsx
Normal file
1
src/pages/attendance/index.tsx
Normal file
@ -0,0 +1 @@
|
||||
export { Attendance as AttendancePage } from './attendance'
|
||||
Loading…
x
Reference in New Issue
Block a user