109 lines
3.5 KiB
TypeScript
109 lines
3.5 KiB
TypeScript
import React from 'react'
|
||
import dayjs from 'dayjs'
|
||
import { Link as ConnectedLink } from 'react-router-dom'
|
||
import { getNavigationValue, getHistory } from '@brojs/cli'
|
||
import { Stack, Heading, Link, Button, Tooltip, Box } from '@chakra-ui/react'
|
||
|
||
import { useAppSelector } from '../../__data__/store'
|
||
import { isTeacher } from '../../utils/user'
|
||
import { PopulatedCourse } from '../../__data__/model'
|
||
import { api } from '../../__data__/api/api'
|
||
import { LinkIcon } from '@chakra-ui/icons'
|
||
|
||
type CourseDetailsProps = {
|
||
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()
|
||
|
||
return (
|
||
<>
|
||
{isTeacher(user) && (
|
||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||
Экзамен: {exam?.name}{' '}
|
||
{exam && getNavigationValue('exam.main') && getNavigationValue('link.exam.details') && (
|
||
<Tooltip label="Начать экзамен" fontSize="12px" top="16px">
|
||
<Button
|
||
leftIcon={<LinkIcon />}
|
||
as={'a'}
|
||
colorScheme="blue"
|
||
href={
|
||
getNavigationValue('exam.main') +
|
||
getNavigationValue('link.exam.details')
|
||
.replace(':courseId', populatedCourse.id)
|
||
.replace(':examId', exam.id)
|
||
}
|
||
onClick={(event) => {
|
||
event.preventDefault()
|
||
history.push(
|
||
getNavigationValue('exam.main') +
|
||
getNavigationValue('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)
|
||
? `${getNavigationValue('journal.main')}/lesson/${populatedCourse.id}/${lesson.id}`
|
||
: ''
|
||
}
|
||
>
|
||
{lesson.name}
|
||
</Link>
|
||
))}
|
||
</Stack>
|
||
</>
|
||
)
|
||
}
|