Реализованы компоненты для отображения посещаемости: AttendanceTable, StatsCard и ShortText. Добавлены хуки useAttendanceData и useAttendanceStats для обработки данных. Обновлен компонент Attendance с использованием новых компонентов и хуков.
This commit is contained in:
@@ -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>
|
||||
|
||||
{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>
|
||||
<StatsCard stats={stats} />
|
||||
|
||||
<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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user