toggle exam

src/pages/course-list/course-details.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import { Link as ConnectedLink } from 'react-router-dom'
+import { getNavigationsValue } 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'
+
+type CourseDetailsProps = {
+    populatedCourse: PopulatedCourse;
+}
+
+export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
+    const user = useAppSelector((s) => s.user)
+    const exam = populatedCourse.examWithJury
+    const [toggleExamWithJury, examWithJuryRequest] = api.useToggleExamWithJuryMutation()
+
+    return (
+        <>
+            <Heading as="h3" mt={4} mb={3} size="lg">
+                Экзамен:
+            </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>
+        </>
+    )
+}