(#16) Layout списка лекций как таблица
All checks were successful
platform/bro/pipeline/head This commit looks good
platform/bro/pipeline/pr-master This commit looks good

This commit is contained in:
Primakov Alexandr Alexandrovich 2024-04-01 17:42:30 +03:00
parent e30974acb7
commit c68cea7fa6
5 changed files with 227 additions and 163 deletions

2
.gitignore vendored
View File

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

View File

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

View File

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

View File

@ -24,16 +24,24 @@ import {
FormHelperText, FormHelperText,
FormErrorMessage, FormErrorMessage,
Input, Input,
TableContainer,
Table,
Thead,
Tr,
Th,
Tbody,
Td,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { AddIcon } from '@chakra-ui/icons' 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 { keycloak } from '../__data__/kc'
import { useAppSelector } from '../__data__/store' import { useAppSelector } from '../__data__/store'
import { api } from '../__data__/api/api' import { api } from '../__data__/api/api'
import { isTeacher } from '../utils/user' import { isTeacher } from '../utils/user'
import { qrCode } from '../assets'
interface NewLessonForm { interface NewLessonForm {
name: string name: string
@ -94,7 +102,8 @@ const LessonList = () => {
}, [crLQuery.isSuccess]) }, [crLQuery.isSuccess])
return ( return (
<Container maxW="container.xl"> <>
<BreadcrumbsWrapper>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}> <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@ -106,7 +115,8 @@ const LessonList = () => {
<BreadcrumbLink href="#">Курс</BreadcrumbLink> <BreadcrumbLink href="#">Курс</BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
</BreadcrumbsWrapper>
<Container maxW="container.xl">
{isTeacher(user) && ( {isTeacher(user) && (
<Box mt="15" mb="15"> <Box mt="15" mb="15">
{showForm ? ( {showForm ? (
@ -202,7 +212,40 @@ const LessonList = () => {
)} )}
</Box> </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) => ( {data?.body?.map((lesson) => (
<LessonItem key={lesson._id}> <LessonItem key={lesson._id}>
<Link <Link
@ -221,8 +264,9 @@ const LessonList = () => {
</Link> </Link>
</LessonItem> </LessonItem>
))} ))}
</ul> </ul> */}
</Container> </Container>
</>
) )
} }

View File

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