attendance table
This commit is contained in:
Primakov Alexandr Alexandrovich
@@ -1,20 +1,20 @@
|
||||
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,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
ButtonGroup,
|
||||
Stack,
|
||||
StackDivider,
|
||||
Button,
|
||||
Card,
|
||||
Heading,
|
||||
Tooltip,
|
||||
Spinner,
|
||||
Box,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
ButtonGroup,
|
||||
Stack,
|
||||
StackDivider,
|
||||
Button,
|
||||
Card,
|
||||
Heading,
|
||||
Tooltip,
|
||||
Spinner,
|
||||
} from '@chakra-ui/react'
|
||||
|
||||
import { api } from '../../__data__/api/api'
|
||||
@@ -22,72 +22,94 @@ import { ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
|
||||
import { Course } from '../../__data__/model'
|
||||
import { CourseDetails } from './course-details'
|
||||
|
||||
export const CourseCard = ({
|
||||
course,
|
||||
}: {
|
||||
course: Course
|
||||
}) => {
|
||||
const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery()
|
||||
const [isOpened, setIsOpened] = useState(false)
|
||||
useEffect(() => {
|
||||
if (isOpened) {
|
||||
getLessonList(course.id, true)
|
||||
}
|
||||
}, [isOpened])
|
||||
export const CourseCard = ({ course }: { course: Course }) => {
|
||||
const [getLessonList, populatedCourse] = api.useLazyGetCourseByIdQuery()
|
||||
const [isOpened, setIsOpened] = useState(false)
|
||||
useEffect(() => {
|
||||
if (isOpened) {
|
||||
getLessonList(course.id, true)
|
||||
}
|
||||
}, [isOpened])
|
||||
|
||||
const handleToggleOpene = useCallback(() => {
|
||||
setIsOpened(opened => !opened)
|
||||
}, [setIsOpened])
|
||||
const handleToggleOpene = useCallback(() => {
|
||||
setIsOpened((opened) => !opened)
|
||||
}, [setIsOpened])
|
||||
|
||||
return (
|
||||
<Card key={course._id} align="left">
|
||||
<CardHeader>
|
||||
<Heading as="h2" mt="0">
|
||||
{course.name}
|
||||
</Heading>
|
||||
</CardHeader>
|
||||
{isOpened && (
|
||||
<CardBody mt="16px">
|
||||
<Stack divider={<StackDivider />} spacing="8px">
|
||||
<Box as="span" textAlign="left">
|
||||
{`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`}
|
||||
</Box>
|
||||
<Box as="span" textAlign="left">
|
||||
Количество занятий - {course.lessons.length}
|
||||
</Box>
|
||||
return (
|
||||
<Card key={course._id} align="left">
|
||||
<CardHeader>
|
||||
<Heading as="h2" mt="0">
|
||||
{course.name}
|
||||
</Heading>
|
||||
</CardHeader>
|
||||
{isOpened && (
|
||||
<CardBody mt="16px">
|
||||
<Stack divider={<StackDivider />} spacing="8px">
|
||||
<Box as="span" textAlign="left">
|
||||
{`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`}
|
||||
</Box>
|
||||
<Box as="span" textAlign="left">
|
||||
Количество занятий - {course.lessons.length}
|
||||
</Box>
|
||||
|
||||
{populatedCourse.isFetching && <Spinner />}
|
||||
{!populatedCourse.isFetching && populatedCourse.isSuccess && <CourseDetails populatedCourse={populatedCourse.data} />}
|
||||
</Stack>
|
||||
</CardBody>
|
||||
{populatedCourse.isFetching && <Spinner />}
|
||||
{!populatedCourse.isFetching && populatedCourse.isSuccess && (
|
||||
<CourseDetails populatedCourse={populatedCourse.data} />
|
||||
)}
|
||||
<CardFooter>
|
||||
<ButtonGroup spacing={[0, 4]} mt="16px" flexDirection={['column', 'row']}>
|
||||
<Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
|
||||
<Button
|
||||
leftIcon={<LinkIcon />}
|
||||
as={ConnectedLink}
|
||||
colorScheme="blue"
|
||||
to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
|
||||
>
|
||||
Открыть
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip label="Детали" fontSize="12px" top="16px">
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
mt={["16px", 0]}
|
||||
variant="outline"
|
||||
leftIcon={<ArrowUpIcon transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'} />}
|
||||
loadingText="Загрузка"
|
||||
isLoading={populatedCourse.isFetching}
|
||||
onClick={handleToggleOpene}
|
||||
>
|
||||
{isOpened ? 'Закрыть' : 'Просмотреть детали'}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</ButtonGroup>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
|
||||
<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']}
|
||||
>
|
||||
<Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
|
||||
<Button
|
||||
leftIcon={<LinkIcon />}
|
||||
as={ConnectedLink}
|
||||
colorScheme="blue"
|
||||
to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
|
||||
>
|
||||
Открыть
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip label="Детали" fontSize="12px" top="16px">
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
mt={['16px', 0]}
|
||||
variant="outline"
|
||||
leftIcon={
|
||||
<ArrowUpIcon
|
||||
transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'}
|
||||
/>
|
||||
}
|
||||
loadingText="Загрузка"
|
||||
isLoading={populatedCourse.isFetching}
|
||||
onClick={handleToggleOpene}
|
||||
>
|
||||
{isOpened ? 'Закрыть' : 'Просмотреть детали'}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</ButtonGroup>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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,82 +11,98 @@ import { api } from '../../__data__/api/api'
|
||||
import { LinkIcon } from '@chakra-ui/icons'
|
||||
|
||||
type CourseDetailsProps = {
|
||||
populatedCourse: PopulatedCourse;
|
||||
populatedCourse: PopulatedCourse
|
||||
}
|
||||
|
||||
const history = getHistory()
|
||||
|
||||
export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
|
||||
const user = useAppSelector((s) => s.user)
|
||||
const exam = populatedCourse.examWithJury
|
||||
const [toggleExamWithJury, examWithJuryRequest] = api.useToggleExamWithJuryMutation()
|
||||
const user = useAppSelector((s) => s.user)
|
||||
const exam = populatedCourse.examWithJury
|
||||
const [toggleExamWithJury, examWithJuryRequest] =
|
||||
api.useToggleExamWithJuryMutation()
|
||||
|
||||
return (
|
||||
return (
|
||||
<>
|
||||
{isTeacher(user) && (
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Экзамен: {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),
|
||||
)
|
||||
}}
|
||||
>
|
||||
Открыть
|
||||
</Button>
|
||||
</Tooltip>
|
||||
)}
|
||||
</Heading>
|
||||
)}
|
||||
{!Boolean(exam) && (
|
||||
<>
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Экзамен: {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))
|
||||
}}
|
||||
>
|
||||
Открыть
|
||||
</Button>
|
||||
</Tooltip>}
|
||||
</Heading>
|
||||
{!Boolean(exam) && (
|
||||
<>
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Не задан
|
||||
</Heading>
|
||||
<Box mt={10}>
|
||||
<Tooltip label="Создать экзамен с жюри" fontSize="12px" top="16px">
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
mt={["16px", 0]}
|
||||
variant="outline"
|
||||
isLoading={examWithJuryRequest.isLoading}
|
||||
onClick={() => toggleExamWithJury(populatedCourse.id)}
|
||||
>
|
||||
Создать
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</>
|
||||
)}
|
||||
{Boolean(exam) && (
|
||||
<>
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Количество членов жюри:
|
||||
</Heading>
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
{populatedCourse.examWithJury.jury.length}
|
||||
</Heading></>
|
||||
|
||||
)}
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Список занятий:
|
||||
</Heading>
|
||||
<Stack>
|
||||
{populatedCourse?.lessons?.map((lesson) => (
|
||||
<Link
|
||||
as={ConnectedLink}
|
||||
key={lesson.id}
|
||||
to={
|
||||
isTeacher(user)
|
||||
? `${getNavigationsValue('journal.main')}/lesson/${populatedCourse.id}/${lesson.id}`
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{lesson.name}
|
||||
</Link>
|
||||
))}
|
||||
</Stack>
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Не задан
|
||||
</Heading>
|
||||
<Box mt={10}>
|
||||
<Tooltip label="Создать экзамен с жюри" fontSize="12px" top="16px">
|
||||
<Button
|
||||
colorScheme="blue"
|
||||
mt={['16px', 0]}
|
||||
variant="outline"
|
||||
isLoading={examWithJuryRequest.isLoading}
|
||||
onClick={() => toggleExamWithJury(populatedCourse.id)}
|
||||
>
|
||||
Создать
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</Box>
|
||||
</>
|
||||
)
|
||||
}
|
||||
)}
|
||||
{Boolean(exam) && (
|
||||
<>
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Количество членов жюри:
|
||||
</Heading>
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
{populatedCourse.examWithJury.jury.length}
|
||||
</Heading>
|
||||
</>
|
||||
)}
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Список занятий:
|
||||
</Heading>
|
||||
<Stack>
|
||||
{populatedCourse?.lessons?.map((lesson) => (
|
||||
<Link
|
||||
as={ConnectedLink}
|
||||
key={lesson.id}
|
||||
to={
|
||||
isTeacher(user)
|
||||
? `${getNavigationsValue('journal.main')}/lesson/${populatedCourse.id}/${lesson.id}`
|
||||
: ''
|
||||
}
|
||||
>
|
||||
{lesson.name}
|
||||
</Link>
|
||||
))}
|
||||
</Stack>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user