(#16) Layout списка лекций как таблица

.gitignore

@@ -9,6 +9,8 @@ pids
 *.pid
 *.seed
 
+*prom.json
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov
 

src/pages/course-list.tsx

@@ -35,6 +35,7 @@ import { useAppSelector } from '../__data__/store'
 import { api } from '../__data__/api/api'
 import { isTeacher } from '../utils/user'
 import { AddIcon, ArrowDownIcon, ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
+import { Course } from '../__data__/model'
 
 interface NewCourseForm {
   startDt: string
@@ -226,7 +227,15 @@ const CoursesList = () => {
   )
 }
 
-const CourseCard = ({ course, isOpened, openDetails }) => {
+const CourseCard = ({
+  course,
+  isOpened,
+  openDetails,
+}: {
+  course: Course
+  isOpened: boolean
+  openDetails: () => void
+}) => {
   const [getLessonList, lessonList] = api.useLazyLessonListQuery()
   useEffect(() => {
     if (isOpened) {
@@ -262,6 +271,7 @@ const CourseCard = ({ course, isOpened, openDetails }) => {
                   {lessonList.data?.body?.map((lesson) => (
                     <Link
                       as={ConnectedLink}
+                      key={lesson._id}
                       to={
                         isTeacher(user)
                           ? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`

src/pages/lesson-details.tsx

@@ -20,6 +20,7 @@ import {
   Lessonname,
   AddMissedButton,
   UnorderList,
+  BreadcrumbsWrapper,
 } from './style'
 import { api } from '../__data__/api/api'
 import { User } from '../__data__/model'
@@ -86,8 +87,8 @@ const LessonDetail = () => {
   }, [accessCode?.body, AllStudents.data])
 
   return (
-    <Container maxW="container.xl" centerContent px="200">
-      <VStack align="left">
+    <>
+      <BreadcrumbsWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
             <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@@ -108,16 +109,19 @@ const LessonDetail = () => {
             <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
           </BreadcrumbItem>
         </Breadcrumb>
-        <Heading as='h3' mt='4' mb='3'>
+      </BreadcrumbsWrapper>
+      <Container maxW="container.xl" centerContent px="200">
+        <VStack align="left">
+          <Heading as="h3" mt="4" mb="3">
             Тема занятия:
           </Heading>
+          <Box as="span">{accessCode?.body?.lesson?.name}</Box>
           <Box as="span">
-          {accessCode?.body?.lesson?.name}
-        </Box>
-        <Box as='span'>
             {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
             Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
-          {AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
+            {AllStudents.isSuccess
+              ? `/ ${AllStudents?.data?.body?.length}`
+              : ''}{' '}
             человек
           </Box>
         </VStack>
@@ -143,6 +147,7 @@ const LessonDetail = () => {
           </UnorderList>
         </HStack>
       </Container>
+    </>
   )
 }
 

src/pages/lesson-list.tsx

@@ -24,16 +24,24 @@ import {
   FormHelperText,
   FormErrorMessage,
   Input,
+  TableContainer,
+  Table,
+  Thead,
+  Tr,
+  Th,
+  Tbody,
+  Td,
 } from '@chakra-ui/react'
 
 import { AddIcon } from '@chakra-ui/icons'
 
-import { LessonItem, Lessonname, ErrorSpan } from './style'
+import { LessonItem, Lessonname, ErrorSpan, BreadcrumbsWrapper } from './style'
 
 import { keycloak } from '../__data__/kc'
 import { useAppSelector } from '../__data__/store'
 import { api } from '../__data__/api/api'
 import { isTeacher } from '../utils/user'
+import { qrCode } from '../assets'
 
 interface NewLessonForm {
   name: string
@@ -94,7 +102,8 @@ const LessonList = () => {
   }, [crLQuery.isSuccess])
 
   return (
-    <Container maxW="container.xl">
+    <>
+      <BreadcrumbsWrapper>
         <Breadcrumb>
           <BreadcrumbItem>
             <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@@ -106,7 +115,8 @@ const LessonList = () => {
             <BreadcrumbLink href="#">Курс</BreadcrumbLink>
           </BreadcrumbItem>
         </Breadcrumb>
-
+      </BreadcrumbsWrapper>
+      <Container maxW="container.xl">
         {isTeacher(user) && (
           <Box mt="15" mb="15">
             {showForm ? (
@@ -202,7 +212,40 @@ const LessonList = () => {
             )}
           </Box>
         )}
-      <ul style={{ paddingLeft: 0 }}>
+        <TableContainer whiteSpace="wrap">
+          <Table variant="striped" colorScheme="cyan">
+            <Thead>
+              <Tr>
+                <Th align="center">ссылка</Th>
+                <Th>Дата</Th>
+                <Th>into</Th>
+                <Th isNumeric>Участников</Th>
+              </Tr>
+            </Thead>
+            <Tbody>
+              {data?.body?.map((lesson) => (
+                <Tr key={lesson._id}>
+                  <Td>
+                    <Link
+                      to={
+                        isTeacher(user)
+                          ? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
+                          : ''
+                      }
+                      style={{ display: 'flex' }}
+                    >
+                      <img width={24} src={qrCode} />
+                    </Link>
+                  </Td>
+                  <Td>{dayjs(lesson.date).format('H:mm DD.MM.YY')}</Td>
+                  <Td>{lesson.name}</Td>
+                  <Td isNumeric>{lesson.students.length}</Td>
+                </Tr>
+              ))}
+            </Tbody>
+          </Table>
+        </TableContainer>
+        {/* <ul style={{ paddingLeft: 0 }}>
           {data?.body?.map((lesson) => (
             <LessonItem key={lesson._id}>
               <Link
@@ -221,8 +264,9 @@ const LessonList = () => {
               </Link>
             </LessonItem>
           ))}
-      </ul>
+        </ul> */}
       </Container>
+    </>
   )
 }
 

src/pages/style.ts

@@ -4,6 +4,9 @@ import {
   Card
 } from '@chakra-ui/react'
 
+export const BreadcrumbsWrapper = styled.div`
+  padding: 12px;
+`;
 
 export const MainWrapper = styled.main`
   display: flex;