3.6.7

@types/index.d.ts

@@ -0,0 +1,24 @@
+declare const IS_PROD: string
+declare const KC_URL: string
+declare const KC_REALM: string
+declare const KC_CLIENT_ID: string
+
+declare module '*.svg' {
+  const value: string
+
+  export default value
+}
+
+declare module '*.jpg' {
+  const value: string
+
+  export default value
+}
+
+declare module '*.png' {
+  const value: string
+
+  export default value
+}
+
+declare const __webpack_public_path__: string

bro.config.js

@@ -1,3 +1,5 @@
+const webpack = require('webpack');
+
 const pkg = require('./package')
 
 module.exports = {
@@ -6,6 +8,13 @@ module.exports = {
     output: {
       publicPath: `/static/${pkg.name}/${process.env.VERSION || pkg.version}/`,
     },
+    plugins: [
+      new webpack.DefinePlugin({
+        KC_URL: process.env.KC_URL || '"https://kc.bro-js.ru"',
+        KC_REALM: process.env.KC_REALM || '"bro-js"',
+        KC_CLIENT_ID: process.env.KC_CLIENT_ID || '"microfrontend-admin"',
+      }),
+    ],
   },
   navigations: {
     'journal.main': '/journal.pl',

index.d.ts

@@ -1,6 +0,0 @@
-declare module '*.svg' {
-    const src: string;
-    export default src;
-}
-
-declare const __webpack_public_path__: string;

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.json

@@ -1,6 +1,6 @@
 {
     "name": "journal.pl",
-    "version": "3.5.0",
+    "version": "3.6.7",
     "description": "bro-js platform journal ui repo",
     "main": "./src/index.tsx",
     "scripts": {
@@ -19,14 +19,13 @@
     "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",
         "eslint-plugin-react": "^7.34.1"
     },
     "dependencies": {
-        "@brojs/cli": "^0.0.4-beta.0",
+        "@brojs/cli": "^1.8.4",
         "@chakra-ui/icons": "^2.1.1",
         "@chakra-ui/react": "^2.8.2",
         "@emotion/react": "^11.11.4",
@@ -38,7 +37,7 @@
         "dayjs": "^1.11.10",
         "express": "^4.19.2",
         "js-sha256": "^0.11.0",
-        "keycloak-js": "^23.0.7",
+        "keycloak-js": "^26.0.7",
         "prettier": "^3.2.5",
         "qrcode": "^1.5.3",
         "react": "^18.3.1",

src/__data__/kc.ts

@@ -1,9 +1,9 @@
-import Keycloak from 'keycloak-js';
+import Keycloak from 'keycloak-js'
 
 export const keycloak = new Keycloak({
-  url: 'https://kc.bro-js.ru',
+  url: KC_URL,
-  realm: 'bro-js',
+  realm: KC_REALM,
-  clientId: 'journal'
+  clientId: KC_CLIENT_ID,
 });
 
-window.keycloak = keycloak;
+(window as any).kc = keycloak

src/__data__/model.ts

@@ -53,10 +53,17 @@ export interface Lesson {
   id: string;
   name: string;
   students: User[];
+  teachers: Teacher[];
   date: string;
   created: string;
 }
 
+interface Teacher {
+  sub: string;
+  email_verified: boolean;
+  preferred_username: string;
+}
+
 export interface AccessCode {
   expires: string;
   lesson: Lesson;

src/index.tsx

@@ -14,23 +14,30 @@ 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" });
+    await keycloak.init({ onLoad: 'login-required' })
-    user = { ...(await keycloak.loadUserInfo()), ...keycloak.tokenParsed };
+
+    const userInfo = await keycloak.loadUserInfo()
+
+    if (userInfo && keycloak.tokenParsed) {
+      user = { ...userInfo, ...keycloak.tokenParsed }
+    } else {
+      console.error('No userInfo or tokenParsed', userInfo, keycloak.tokenParsed)
+    }
   } catch (error) {
-    console.error("Failed to initialize adapter:", error);
+    console.error('Failed to initialize adapter:', error)
-    keycloak.login();
+    keycloak.login()
   }
   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

@@ -1,11 +1,10 @@
 import React, { useMemo } from 'react'
 import { useParams } from 'react-router-dom'
-import styled from '@emotion/styled'
+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'
-import { Box, Container, Heading } from '@chakra-ui/react'
-import dayjs from 'dayjs'
 
 export const Attendance = () => {
   const { courseId } = useParams()
@@ -22,26 +21,38 @@ export const Attendance = () => {
     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,
-          value:
+          id: student.sub,
-            student.family_name && student.given_name
+          value: current.value || (student.family_name && student.given_name
               ? `${student.family_name} ${student.given_name}`
-              : student.name || student.email,
+              : 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])
 
@@ -58,25 +69,52 @@ export const Attendance = () => {
         <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 key={student.sub}>{student.name}</th>
+                <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) => {
+
+                  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>{lesson.name}</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={{
+                  return (
-                    textAlign: 'center',
+                    <td
-                    backgroundColor: wasThere ? '#8ef78a' : '#e09797',
+                      style={{
-                  }} key={st.sub}>{wasThere ? '+' : '-'}</td>
+                        textAlign: 'center',
+                        backgroundColor: wasThere ? '#8ef78a' : '#e09797',
+                      }}
+                      key={st.sub}
+                    >
+                      {wasThere ? '+' : '-'}
+                    </td>
+                  )
                 })}
               </tr>
             ))}
@@ -86,3 +124,17 @@ export const Attendance = () => {
     </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/course-list/course-card.tsx

@@ -57,21 +57,27 @@ export const CourseCard = ({ course }: { course: Course }) => {
               <CourseDetails populatedCourse={populatedCourse.data} />
             )}
 
-            <Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
+            {getNavigationsValue('link.journal.attendance') && (
-              <Button
+              <Tooltip
-                leftIcon={<LinkIcon />}
+                label="На страницу с лекциями"
-                as={ConnectedLink}
+                fontSize="12px"
-                variant="outline"
+                top="16px"
-                colorScheme="blue"
-                to={generatePath(
-                  `${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`,
-                  { courseId: course.id },
-                )}
               >
-                <Box mt={3}></Box>
+                <Button
-                Посещаемость
+                  leftIcon={<LinkIcon />}
-              </Button>
+                  as={ConnectedLink}
-            </Tooltip>
+                  variant="outline"
+                  colorScheme="blue"
+                  to={generatePath(
+                    `${getNavigationsValue('journal.main')}${getNavigationsValue('link.journal.attendance')}`,
+                    { courseId: course.id },
+                  )}
+                >
+                  <Box mt={3}></Box>
+                  Посещаемость
+                </Button>
+              </Tooltip>
+            )}
           </Stack>
         </CardBody>
       )}

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

@@ -1,7 +1,7 @@
 import React from 'react'
 import dayjs from 'dayjs'
 import { Link as ConnectedLink } from 'react-router-dom'
-import { getNavigationsValue, getHistory } from '@brojs/cli'
+import { getNavigationValue, getHistory } from '@brojs/cli'
 import { Stack, Heading, Link, Button, Tooltip, Box } from '@chakra-ui/react'
 
 import { useAppSelector } from '../../__data__/store'
@@ -27,23 +27,23 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
       {isTeacher(user) && (
         <Heading as="h3" mt={4} mb={3} size="lg">
           Экзамен: {exam?.name}{' '}
-          {exam && (
+          {exam && getNavigationValue('exam.main') && getNavigationValue('link.exam.details') && (
             <Tooltip label="Начать экзамен" fontSize="12px" top="16px">
               <Button
                 leftIcon={<LinkIcon />}
                 as={'a'}
                 colorScheme="blue"
                 href={
-                  getNavigationsValue('exam.main') +
+                  getNavigationValue('exam.main') +
-                  getNavigationsValue('link.exam.details')
+                  getNavigationValue('link.exam.details')
                     .replace(':courseId', populatedCourse.id)
                     .replace(':examId', exam.id)
                 }
                 onClick={(event) => {
                   event.preventDefault()
                   history.push(
-                    getNavigationsValue('exam.main') +
+                    getNavigationValue('exam.main') +
-                      getNavigationsValue('link.exam.details')
+                    getNavigationValue('link.exam.details')
                         .replace(':courseId', populatedCourse.id)
                         .replace(':examId', exam.id),
                   )

src/pages/lesson-details.tsx

@@ -24,6 +24,8 @@ import {
   StudentList,
   BreadcrumbsWrapper,
 } from './style'
+import { useAppSelector } from '../__data__/store'
+import { isTeacher } from '../utils/user'
 
 export function getGravatarURL(email, user) {
   if (!email) return void 0
@@ -37,6 +39,8 @@ export function getGravatarURL(email, user) {
 const LessonDetail = () => {
   const { lessonId, courseId } = useParams()
   const canvRef = useRef(null)
+  const user = useAppSelector((s) => s.user)
+  
   const {
     isFetching,
     data: accessCode,
@@ -45,6 +49,7 @@ const LessonDetail = () => {
   } = api.useCreateAccessCodeQuery(
     { lessonId },
     {
+      skip: !isTeacher(user),
       pollingInterval:
         Number(getConfigValue('journal.polling-interval')) || 3000,
       skipPollingIfUnfocused: true,
@@ -144,7 +149,7 @@ const LessonDetail = () => {
             <QRCanvas ref={canvRef} />
           </a>
           <StudentList>
-            {studentsArr.map((student) => (
+            {isTeacher(user) && studentsArr.map((student) => (
               <UserCard
                 wrapperAS="li"
                 key={student.sub}

stubs/mocks/lessons/list/success.json

@@ -4,6 +4,13 @@
     {
       "_id": "65e2e5fbec37fec650f28489",
       "name": "ВВЕДЕНИЕ В ВЕБ-РАЗРАБОТКУ. ИНСТРУМЕНТАРИЙ, ОБЗОР ВЕБ-ТЕХНОЛОГИЙ",
+      "teachers": [
+        {
+          "sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
+          "email_verified": true,
+          "preferred_username": "primakov"
+        }
+      ],
       "students": [
         {
           "sub": "fcde3f22-d9ba-412a-a572-c59e515a290f",

tsconfig.json

@@ -1,25 +1,26 @@
 {
     "compilerOptions": {
-        "lib": [
+        "lib": ["dom", "es2017"],
-            "dom",
-            "es2017"
-        ],
         "outDir": "./dist/",
         "sourceMap": true,
         "esModuleInterop": true,
         "noImplicitAny": false,
         "module": "esnext",
-        "moduleResolution": "node",
         "target": "es6",
         "jsx": "react",
-        "typeRoots": ["node_modules/@types", "src/typings"],
+        "typeRoots": ["node_modules/@types", "./@types"],
-        "types" : ["webpack-env", "node"],
+        "types": ["webpack-env", "node"],
-        "resolveJsonModule": true
+        "resolveJsonModule": true,
+        "moduleResolution": "Bundler",
+        "skipLibCheck": true,
     },
+    "types": [
+        "@types/*"
+    ],
     "exclude": [
         "node_modules",
         "**/*.test.ts",
         "**/*.test.tsx",
         "node_modules/@types/jest"
-    ]        
+    ]
-}
+}