3.6.0

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: {

openapi-config.ts

@@ -1,12 +0,0 @@
-import type { ConfigFile } from '@rtk-query/codegen-openapi'
-
-const config: ConfigFile = {
-  schemaFile: 'https://platform.bro-js.ru/jrnl-bh/documentation/json',
-  apiFile: './src/__data__/api/api.ts',
-  apiImport: 'api',
-  outputFile: './src/__data__/api/jrnl.ts',
-  exportName: 'jrnlApi',
-  hooks: true,
-}
-
-export default config

package-lock.json

@@ -1,12 +1,12 @@
 {
     "name": "journal.pl",
-    "version": "3.4.1",
+    "version": "3.6.0",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "journal.pl",
-            "version": "3.4.1",
+            "version": "3.6.0",
             "license": "MIT",
             "dependencies": {
                 "@brojs/cli": "^0.0.4-beta.0",

package.json

@@ -1,6 +1,6 @@
 {
     "name": "journal.pl",
-    "version": "3.4.1",
+    "version": "3.6.0",
     "description": "bro-js platform journal ui repo",
     "main": "./src/index.tsx",
     "scripts": {
@@ -19,7 +19,6 @@
     "author": "",
     "license": "MIT",
     "devDependencies": {
-        "@rtk-query/codegen-openapi": "^1.2.0",
         "@typescript-eslint/eslint-plugin": "^7.4.0",
         "@typescript-eslint/parser": "^7.4.0",
         "eslint": "^8.57.0",

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/index.tsx

@@ -14,7 +14,7 @@ export default (props) => <App {...props} />;
   
 let rootElement: ReactDOM.Root
   
-export const mount = async (Сomponent, element = document.getElementById('app')) => {
+export const mount = async (Component, element = document.getElementById('app')) => {
   let user = null;
   try {
     await keycloak.init({ onLoad: "login-required" });
@@ -26,11 +26,11 @@ export const mount = async (Сomponent, element = document.getElementById('app')
   const store = createStore({ user });
 
   rootElement = ReactDOM.createRoot(element);
-  rootElement.render(<Сomponent store={store} />);
+  rootElement.render(<Component store={store} />);
 
   if(module.hot) {
       module.hot.accept('./app', ()=> {
-        rootElement.render(<Сomponent store={store} />);
+        rootElement.render(<Component store={store} />);
       })
   }
 };

src/pages/attendance/attendance.tsx

@@ -0,0 +1,112 @@
+import React, { useMemo } from 'react'
+import { useParams } from 'react-router-dom'
+import { Box, Heading, Tooltip, Text } from '@chakra-ui/react'
+import dayjs from 'dayjs'
+
+import { api } from '../../__data__/api/api'
+import { PageLoader } from '../../components/page-loader/page-loader'
+
+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) => {
+        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()]
+    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 id={student.id || student.sub} key={student.sub}>{student.name || student.value || 'Имя не определено'}</th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {attendance.map((lesson, index) => (
+              <tr key={lesson.name}>
+                <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>
+      </Box>
+    </Box>
+  )
+}
+
+const ShortText = ({ text }: { text: string }) => {
+  const needShortText = text.length > 20
+
+  if (needShortText) {
+    return (
+      <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+        <Text>{text.slice(0, 20)}...</Text>
+      </Tooltip>
+    )
+  }
+
+  return text
+}

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 = ({
-    course,
-}: {
-    course: Course
-}) => {
+export const CourseCard = ({ 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,40 @@ export const CourseCard = ({
             </Box>
 
             {populatedCourse.isFetching && <Spinner />}
-                        {!populatedCourse.isFetching && populatedCourse.isSuccess && <CourseDetails populatedCourse={populatedCourse.data} />}
+            {!populatedCourse.isFetching && populatedCourse.isSuccess && (
+              <CourseDetails populatedCourse={populatedCourse.data} />
+            )}
+
+            {getNavigationsValue('link.journal.attendance') && (
+              <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 +100,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 {
-    Stack,
-    Heading,
-    Link,
-    Button,
-    Tooltip,
-    Box,
-} from '@chakra-ui/react'
+import { 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)}
-                        onClick={event => {
-                            event.preventDefault();
-                            history.push(getNavigationsValue('exam.main') + getNavigationsValue('link.exam.details').replace(':courseId', populatedCourse.id).replace(':examId', exam.id))
+                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>}
+            </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>
         )}