attendance table

This commit is contained in:
Primakov Alexandr Alexandrovich
2024-11-06 12:35:55 +03:00
parent 923f7034dd
commit 56e07bc2ef
9 changed files with 341 additions and 179 deletions

View File

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