89 lines
2.5 KiB
TypeScript
89 lines
2.5 KiB
TypeScript
import React, { useMemo } from 'react'
|
||
import { useParams } from 'react-router-dom'
|
||
import styled from '@emotion/styled'
|
||
|
||
import { api } from '../../__data__/api/api'
|
||
import { PageLoader } from '../../components/page-loader/page-loader'
|
||
import { Box, Container, Heading } from '@chakra-ui/react'
|
||
import dayjs from 'dayjs'
|
||
|
||
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 data = useMemo(() => {
|
||
if (!attendance) return null
|
||
|
||
const studentsMap = new Map()
|
||
|
||
attendance.forEach((lesson) => {
|
||
lesson.students.forEach((student) => {
|
||
studentsMap.set(student.sub, {
|
||
...student,
|
||
value:
|
||
student.family_name && student.given_name
|
||
? `${student.family_name} ${student.given_name}`
|
||
: student.name || student.email,
|
||
})
|
||
})
|
||
})
|
||
const compare = Intl.Collator('ru').compare
|
||
|
||
const students = [...studentsMap.values()]
|
||
students.sort(({ family_name: name }, { family_name: nname }) =>
|
||
compare(name, nname),
|
||
)
|
||
return {
|
||
students,
|
||
}
|
||
}, [attendance])
|
||
|
||
if (!data || isLoading || courseInfoIssLoading) {
|
||
return <PageLoader />
|
||
}
|
||
|
||
return (
|
||
<Box>
|
||
<Box mt={12} mb={12}>
|
||
<Heading>{courseInfo.name}</Heading>
|
||
</Box>
|
||
<Box>
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Дата</th>
|
||
<th>Название занятия</th>
|
||
{data.students.map((student) => (
|
||
<th key={student.sub}>{student.name}</th>
|
||
))}
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{attendance.map((lesson, index) => (
|
||
<tr key={lesson.name}>
|
||
<td>{dayjs(lesson.date).format('DD.MM.YYYY')}</td>
|
||
<td>{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>
|
||
</Box>
|
||
</Box>
|
||
)
|
||
}
|