attendance table

ijl.config.js

@@ -10,7 +10,8 @@ module.exports = {
   navigations: {
     'journal.main': '/journal.pl',
     'exam.main': '/exam',
-    'link.exam.details': '/details/:courseId/:examId'
+    'link.exam.details': '/details/:courseId/:examId',
+    'link.journal.attendance': '/attendance/:courseId',
   },
   features: {
     journal: {

src/components/error-boundary/index.tsx

@@ -0,0 +1,26 @@
+import { Alert } from '@chakra-ui/react'
+import React from 'react'
+
+export class ErrorBoundary extends React.Component<
+  React.PropsWithChildren,
+  { hasError: boolean, error?: string }
+> {
+  state = { hasError: false, error: null }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error: error.message }
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <Alert status="error" title="Ошибка">
+          Что-то пошло не так<br />
+          {this.state.error && <span>{this.state.error}</span>}
+        </Alert>
+      )
+    }
+
+    return this.props.children
+  }
+}

src/dashboard.tsx

@@ -9,23 +9,28 @@ import {
   LessonDetailsPage,
   LessonListPage,
   UserPage,
+  AttendancePage,
 } from './pages'
+import { ErrorBoundary } from './components/error-boundary'
 
 const Wrapper = ({ children }: { children: React.ReactElement }) => (
   <Suspense
     fallback={
-      <Container>
+      <ErrorBoundary>
-        <VStack>
+        <Container>
-          <Box mt="150">
+          <VStack>
-          <Spinner
+            <Box mt="150">
-            thickness="4px"
+              <Spinner
-            speed="0.65s"
+                thickness="4px"
-            emptyColor="gray.200"
+                speed="0.65s"
-            color="blue.500"
+                emptyColor="gray.200"
-            size="xl"
+                color="blue.500"
-          /></Box>
+                size="xl"
-        </VStack>
+              />
-      </Container>
+            </Box>
+          </VStack>
+        </Container>
+      </ErrorBoundary>
     }
   >
     {children}
@@ -67,6 +72,14 @@ export const Dashboard = ({ store }) => (
           </Wrapper>
         }
       />
+      <Route
+        path={`${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`}
+        element={
+          <Wrapper>
+            <AttendancePage />
+          </Wrapper>
+        }
+      />
     </Routes>
   </Provider>
 )

src/pages/attendance/attendance.tsx

@@ -0,0 +1,89 @@
+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 (
+    <Container maxW="container.xl">
+      <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>
+      {/* <pre>{JSON.stringify(attendance, null, 2)}</pre> */}
+    </Container>
+  )
+}

src/pages/attendance/index.ts

@@ -0,0 +1,3 @@
+import { Attendance } from './attendance'
+
+export default Attendance

src/pages/course-list/course-card.tsx

@@ -1,20 +1,20 @@
 import React, { useCallback, useEffect, useState } from 'react'
 import dayjs from 'dayjs'
-import { Link as ConnectedLink } from 'react-router-dom'
+import { Link as ConnectedLink, generatePath } from 'react-router-dom'
 import { getNavigationsValue } from '@brojs/cli'
 import {
-    Box,
+  Box,
-    CardHeader,
+  CardHeader,
-    CardBody,
+  CardBody,
-    CardFooter,
+  CardFooter,
-    ButtonGroup,
+  ButtonGroup,
-    Stack,
+  Stack,
-    StackDivider,
+  StackDivider,
-    Button,
+  Button,
-    Card,
+  Card,
-    Heading,
+  Heading,
-    Tooltip,
+  Tooltip,
-    Spinner,
+  Spinner,
 } from '@chakra-ui/react'
 
 import { api } from '../../__data__/api/api'
@@ -22,72 +22,94 @@ import { ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
 import { Course } from '../../__data__/model'
 import { CourseDetails } from './course-details'
 
-export const CourseCard = ({
+export const CourseCard = ({ course }: { course: Course }) => {
-    course,
+  const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery()
-}: {
+  const [isOpened, setIsOpened] = useState(false)
-    course: Course
+  useEffect(() => {
-}) => {
+    if (isOpened) {
-    const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery()
+      getLessonList(course.id, true)
-    const [isOpened, setIsOpened] = useState(false)
+    }
-    useEffect(() => {
+  }, [isOpened])
-        if (isOpened) {
-            getLessonList(course.id, true)
-        }
-    }, [isOpened])
 
-    const handleToggleOpene = useCallback(() => {
+  const handleToggleOpene = useCallback(() => {
-        setIsOpened(opened => !opened)
+    setIsOpened((opened) => !opened)
-    }, [setIsOpened])
+  }, [setIsOpened])
 
-    return (
+  return (
-        <Card key={course._id} align="left">
+    <Card key={course._id} align="left">
-            <CardHeader>
+      <CardHeader>
-                <Heading as="h2" mt="0">
+        <Heading as="h2" mt="0">
-                    {course.name}
+          {course.name}
-                </Heading>
+        </Heading>
-            </CardHeader>
+      </CardHeader>
-            {isOpened && (
+      {isOpened && (
-                <CardBody mt="16px">
+        <CardBody mt="16px">
-                    <Stack divider={<StackDivider />} spacing="8px">
+          <Stack divider={<StackDivider />} spacing="8px">
-                        <Box as="span" textAlign="left">
+            <Box as="span" textAlign="left">
-                            {`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`}
+              {`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`}
-                        </Box>
+            </Box>
-                        <Box as="span" textAlign="left">
+            <Box as="span" textAlign="left">
-                            Количество занятий - {course.lessons.length}
+              Количество занятий - {course.lessons.length}
-                        </Box>
+            </Box>
 
-                        {populatedCourse.isFetching && <Spinner />}
+            {populatedCourse.isFetching && <Spinner />}
-                        {!populatedCourse.isFetching && populatedCourse.isSuccess && <CourseDetails populatedCourse={populatedCourse.data} />}
+            {!populatedCourse.isFetching && populatedCourse.isSuccess && (
-                    </Stack>
+              <CourseDetails populatedCourse={populatedCourse.data} />
-                </CardBody>
             )}
-            <CardFooter>
+
-                <ButtonGroup spacing={[0, 4]} mt="16px" flexDirection={['column', 'row']}>
+            <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
-                    <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+              <Button
-                        <Button
+                leftIcon={<LinkIcon />}
-                            leftIcon={<LinkIcon />}
+                as={ConnectedLink}
-                            as={ConnectedLink}
+                variant="outline"
-                            colorScheme="blue"
+                colorScheme="blue"
-                            to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
+                to={generatePath(
-                        >
+                  `${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`,
-                            Открыть
+                  { courseId: course.id },
-                        </Button>
+                )}
-                    </Tooltip>
+              >
-                    <Tooltip label="Детали" fontSize="12px" top="16px">
+                <Box mt={3}></Box>
-                        <Button
+                Посещаемость
-                            colorScheme="blue"
+              </Button>
-                            mt={["16px", 0]}
+            </Tooltip>
-                            variant="outline"
+          </Stack>
-                            leftIcon={<ArrowUpIcon transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'} />}
+        </CardBody>
-                            loadingText="Загрузка"
+      )}
-                            isLoading={populatedCourse.isFetching}
+      <CardFooter>
-                            onClick={handleToggleOpene}
+        <ButtonGroup
-                        >
+          spacing={[0, 4]}
-                            {isOpened ? 'Закрыть' : 'Просмотреть детали'}
+          mt="16px"
-                        </Button>
+          flexDirection={['column', 'row']}
-                    </Tooltip>
+        >
-                </ButtonGroup>
+          <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
-            </CardFooter>
+            <Button
-        </Card>
+              leftIcon={<LinkIcon />}
-    )
+              as={ConnectedLink}
+              colorScheme="blue"
+              to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
+            >
+              Открыть
+            </Button>
+          </Tooltip>
+          <Tooltip label="Детали" fontSize="12px" top="16px">
+            <Button
+              colorScheme="blue"
+              mt={['16px', 0]}
+              variant="outline"
+              leftIcon={
+                <ArrowUpIcon
+                  transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'}
+                />
+              }
+              loadingText="Загрузка"
+              isLoading={populatedCourse.isFetching}
+              onClick={handleToggleOpene}
+            >
+              {isOpened ? 'Закрыть' : 'Просмотреть детали'}
+            </Button>
+          </Tooltip>
+        </ButtonGroup>
+      </CardFooter>
+    </Card>
+  )
 }

src/pages/course-list/course-details.tsx

@@ -2,14 +2,7 @@ import React from 'react'
 import dayjs from 'dayjs'
 import { Link as ConnectedLink } from 'react-router-dom'
 import { getNavigationsValue, getHistory } from '@brojs/cli'
-import {
+import { Stack, Heading, Link, Button, Tooltip, Box } from '@chakra-ui/react'
-    Stack,
-    Heading,
-    Link,
-    Button,
-    Tooltip,
-    Box,
-} from '@chakra-ui/react'
 
 import { useAppSelector } from '../../__data__/store'
 import { isTeacher } from '../../utils/user'
@@ -18,82 +11,98 @@ import { api } from '../../__data__/api/api'
 import { LinkIcon } from '@chakra-ui/icons'
 
 type CourseDetailsProps = {
-    populatedCourse: PopulatedCourse;
+  populatedCourse: PopulatedCourse
 }
 
 const history = getHistory()
 
 export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
-    const user = useAppSelector((s) => s.user)
+  const user = useAppSelector((s) => s.user)
-    const exam = populatedCourse.examWithJury
+  const exam = populatedCourse.examWithJury
-    const [toggleExamWithJury, examWithJuryRequest] = api.useToggleExamWithJuryMutation()
+  const [toggleExamWithJury, examWithJuryRequest] =
+    api.useToggleExamWithJuryMutation()
 
-    return (
+  return (
+    <>
+      {isTeacher(user) && (
+        <Heading as="h3" mt={4} mb={3} size="lg">
+          Экзамен: {exam?.name}{' '}
+          {exam && (
+            <Tooltip label="Начать экзамен" fontSize="12px" top="16px">
+              <Button
+                leftIcon={<LinkIcon />}
+                as={'a'}
+                colorScheme="blue"
+                href={
+                  getNavigationsValue('exam.main') +
+                  getNavigationsValue('link.exam.details')
+                    .replace(':courseId', populatedCourse.id)
+                    .replace(':examId', exam.id)
+                }
+                onClick={(event) => {
+                  event.preventDefault()
+                  history.push(
+                    getNavigationsValue('exam.main') +
+                      getNavigationsValue('link.exam.details')
+                        .replace(':courseId', populatedCourse.id)
+                        .replace(':examId', exam.id),
+                  )
+                }}
+              >
+                Открыть
+              </Button>
+            </Tooltip>
+          )}
+        </Heading>
+      )}
+      {!Boolean(exam) && (
         <>
-            <Heading as="h3" mt={4} mb={3} size="lg">
+          <Heading as="h3" mt={4} mb={3} size="lg">
-                Экзамен: {exam?.name} {exam && <Tooltip label="Начать экзамен" fontSize="12px" top="16px">
+            Не задан
-                    <Button
+          </Heading>
-                        leftIcon={<LinkIcon />}
+          <Box mt={10}>
-                        as={'a'}
+            <Tooltip label="Создать экзамен с жюри" fontSize="12px" top="16px">
-                        colorScheme="blue"
+              <Button
-                        href={getNavigationsValue('exam.main') + getNavigationsValue('link.exam.details').replace(':courseId', populatedCourse.id).replace(':examId', exam.id)}
+                colorScheme="blue"
-                        onClick={event => {
+                mt={['16px', 0]}
-                            event.preventDefault();
+                variant="outline"
-                            history.push(getNavigationsValue('exam.main') + getNavigationsValue('link.exam.details').replace(':courseId', populatedCourse.id).replace(':examId', exam.id))
+                isLoading={examWithJuryRequest.isLoading}
-                        }}
+                onClick={() => toggleExamWithJury(populatedCourse.id)}
-                    >
+              >
-                        Открыть
+                Создать
-                    </Button>
+              </Button>
-                </Tooltip>}
+            </Tooltip>
-            </Heading>
+          </Box>
-            {!Boolean(exam) && (
-                <>
-                    <Heading as="h3" mt={4} mb={3} size="lg">
-                        Не задан
-                    </Heading>
-                    <Box mt={10}>
-                        <Tooltip label="Создать экзамен с жюри" fontSize="12px" top="16px">
-                            <Button
-                                colorScheme="blue"
-                                mt={["16px", 0]}
-                                variant="outline"
-                                isLoading={examWithJuryRequest.isLoading}
-                                onClick={() => toggleExamWithJury(populatedCourse.id)}
-                            >
-                                Создать
-                            </Button>
-                        </Tooltip>
-                    </Box>
-                </>
-            )}
-            {Boolean(exam) && (
-                <>
-                    <Heading as="h3" mt={4} mb={3} size="lg">
-                        Количество членов жюри:
-                    </Heading>
-                    <Heading as="h3" mt={4} mb={3} size="lg">
-                        {populatedCourse.examWithJury.jury.length}
-                    </Heading></>
-
-            )}
-            <Heading as="h3" mt={4} mb={3} size="lg">
-                Список занятий:
-            </Heading>
-            <Stack>
-                {populatedCourse?.lessons?.map((lesson) => (
-                    <Link
-                        as={ConnectedLink}
-                        key={lesson.id}
-                        to={
-                            isTeacher(user)
-                                ? `${getNavigationsValue('journal.main')}/lesson/${populatedCourse.id}/${lesson.id}`
-                                : ''
-                        }
-                    >
-                        {lesson.name}
-                    </Link>
-                ))}
-            </Stack>
         </>
-    )
+      )}
+      {Boolean(exam) && (
+        <>
+          <Heading as="h3" mt={4} mb={3} size="lg">
+            Количество членов жюри:
+          </Heading>
+          <Heading as="h3" mt={4} mb={3} size="lg">
+            {populatedCourse.examWithJury.jury.length}
+          </Heading>
+        </>
+      )}
+      <Heading as="h3" mt={4} mb={3} size="lg">
+        Список занятий:
+      </Heading>
+      <Stack>
+        {populatedCourse?.lessons?.map((lesson) => (
+          <Link
+            as={ConnectedLink}
+            key={lesson.id}
+            to={
+              isTeacher(user)
+                ? `${getNavigationsValue('journal.main')}/lesson/${populatedCourse.id}/${lesson.id}`
+                : ''
+            }
+          >
+            {lesson.name}
+          </Link>
+        ))}
+      </Stack>
+    </>
+  )
 }

src/pages/index.ts

@@ -4,3 +4,4 @@ export const CourseListPage = lazy(() => import(/* webpackChunkName: "course-lis
 export const LessonDetailsPage = lazy(() => import(/* webpackChunkName: "lesson-details" */ './lesson-details'));
 export const LessonListPage = lazy(() => import(/* webpackChunkName: "lesson-list" */ './lesson-list'));
 export const UserPage = lazy(() => import(/* webpackChunkName: "user-page" */ './user-page'));
+export const AttendancePage = lazy(() => import(/* webpackChunkName: "attendance-page" */ './attendance'));

src/pages/lesson-list/lesson-list.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import dayjs from 'dayjs'
-import { Link, useParams } from 'react-router-dom'
+import { generatePath, Link, useParams } from 'react-router-dom'
 import { getNavigationsValue, getFeatures } from '@brojs/cli'
 import {
   Breadcrumb,
@@ -246,15 +246,13 @@ const LessonList = () => {
                 nameButton={editLesson ? 'Редактировать' : 'Создать'}
               />
             ) : (
-              <Box p="2" m="2">
+              <Button
-                <Button
+                leftIcon={<AddIcon />}
-                  leftIcon={<AddIcon />}
+                colorScheme="green"
-                  colorScheme="green"
+                onClick={() => setShowForm(true)}
-                  onClick={() => setShowForm(true)}
+              >
-                >
+                Добавить
-                  Добавить
+              </Button>
-                </Button>
-              </Box>
             )}
           </Box>
         )}