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,11 +9,14 @@ import {
   LessonDetailsPage,
   LessonListPage,
   UserPage,
+  AttendancePage,
 } from './pages'
+import { ErrorBoundary } from './components/error-boundary'
 
 const Wrapper = ({ children }: { children: React.ReactElement }) => (
   <Suspense
     fallback={
+      <ErrorBoundary>
         <Container>
           <VStack>
             <Box mt="150">
@@ -23,9 +26,11 @@ const Wrapper = ({ children }: { children: React.ReactElement }) => (
                 emptyColor="gray.200"
                 color="blue.500"
                 size="xl"
-          /></Box>
+              />
+            </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,6 +1,6 @@
 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,
@@ -22,11 +22,7 @@ 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,
-}: {
-    course: Course
-}) => {
   const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery()
   const [isOpened, setIsOpened] = useState(false)
   useEffect(() => {
@@ -36,7 +32,7 @@ export const CourseCard = ({
   }, [isOpened])
 
   const handleToggleOpene = useCallback(() => {
-        setIsOpened(opened => !opened)
+    setIsOpened((opened) => !opened)
   }, [setIsOpened])
 
   return (
@@ -57,12 +53,34 @@ export const CourseCard = ({
             </Box>
 
             {populatedCourse.isFetching && <Spinner />}
-                        {!populatedCourse.isFetching && populatedCourse.isSuccess && <CourseDetails populatedCourse={populatedCourse.data} />}
+            {!populatedCourse.isFetching && populatedCourse.isSuccess && (
+              <CourseDetails populatedCourse={populatedCourse.data} />
+            )}
+
+            <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+              <Button
+                leftIcon={<LinkIcon />}
+                as={ConnectedLink}
+                variant="outline"
+                colorScheme="blue"
+                to={generatePath(
+                  `${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`,
+                  { courseId: course.id },
+                )}
+              >
+                <Box mt={3}></Box>
+                Посещаемость
+              </Button>
+            </Tooltip>
           </Stack>
         </CardBody>
       )}
       <CardFooter>
-                <ButtonGroup spacing={[0, 4]} mt="16px" flexDirection={['column', 'row']}>
+        <ButtonGroup
+          spacing={[0, 4]}
+          mt="16px"
+          flexDirection={['column', 'row']}
+        >
           <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
             <Button
               leftIcon={<LinkIcon />}
@@ -76,9 +94,13 @@ export const CourseCard = ({
           <Tooltip label="Детали" fontSize="12px" top="16px">
             <Button
               colorScheme="blue"
-                            mt={["16px", 0]}
+              mt={['16px', 0]}
               variant="outline"
-                            leftIcon={<ArrowUpIcon transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'} />}
+              leftIcon={
+                <ArrowUpIcon
+                  transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'}
+                />
+              }
               loadingText="Загрузка"
               isLoading={populatedCourse.isFetching}
               onClick={handleToggleOpene}

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,7 +11,7 @@ import { api } from '../../__data__/api/api'
 import { LinkIcon } from '@chakra-ui/icons'
 
 type CourseDetailsProps = {
-    populatedCourse: PopulatedCourse;
+  populatedCourse: PopulatedCourse
 }
 
 const history = getHistory()
@@ -26,26 +19,42 @@ const history = getHistory()
 export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
   const user = useAppSelector((s) => s.user)
   const exam = populatedCourse.examWithJury
-    const [toggleExamWithJury, examWithJuryRequest] = api.useToggleExamWithJuryMutation()
+  const [toggleExamWithJury, examWithJuryRequest] =
+    api.useToggleExamWithJuryMutation()
 
   return (
     <>
+      {isTeacher(user) && (
         <Heading as="h3" mt={4} mb={3} size="lg">
-                Экзамен: {exam?.name} {exam && <Tooltip label="Начать экзамен" fontSize="12px" top="16px">
+          Экзамен: {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)}
+                href={
-                        onClick={event => {
+                  getNavigationsValue('exam.main') +
-                            event.preventDefault();
+                  getNavigationsValue('link.exam.details')
-                            history.push(getNavigationsValue('exam.main') + getNavigationsValue('link.exam.details').replace(':courseId', populatedCourse.id).replace(':examId', exam.id))
+                    .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>}
+            </Tooltip>
+          )}
         </Heading>
+      )}
       {!Boolean(exam) && (
         <>
           <Heading as="h3" mt={4} mb={3} size="lg">
@@ -55,7 +64,7 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
             <Tooltip label="Создать экзамен с жюри" fontSize="12px" top="16px">
               <Button
                 colorScheme="blue"
-                                mt={["16px", 0]}
+                mt={['16px', 0]}
                 variant="outline"
                 isLoading={examWithJuryRequest.isLoading}
                 onClick={() => toggleExamWithJury(populatedCourse.id)}
@@ -73,8 +82,8 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
           </Heading>
           <Heading as="h3" mt={4} mb={3} size="lg">
             {populatedCourse.examWithJury.jury.length}
-                    </Heading></>
+          </Heading>
-
+        </>
       )}
       <Heading as="h3" mt={4} mb={3} size="lg">
         Список занятий:

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,7 +246,6 @@ const LessonList = () => {
                 nameButton={editLesson ? 'Редактировать' : 'Создать'}
               />
             ) : (
-              <Box p="2" m="2">
               <Button
                 leftIcon={<AddIcon />}
                 colorScheme="green"
@@ -254,7 +253,6 @@ const LessonList = () => {
               >
                 Добавить
               </Button>
-              </Box>
             )}
           </Box>
         )}