(#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
*.seed
*prom.json
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

View File

@ -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}`

View File

@ -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>
</>
)
}

View File

@ -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>
</>
)
}

View File

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