toggle exam
This commit is contained in:
Primakov Alexandr Alexandrovich
93
src/pages/course-list/course-card.tsx
Normal file
93
src/pages/course-list/course-card.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
import React, { useCallback, useEffect, useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import { Link as ConnectedLink } from 'react-router-dom'
|
||||
import { getNavigationsValue } from '@brojs/cli'
|
||||
import {
|
||||
Box,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
ButtonGroup,
|
||||
Stack,
|
||||
StackDivider,
|
||||
Button,
|
||||
Card,
|
||||
Heading,
|
||||
Tooltip,
|
||||
Spinner,
|
||||
} from '@chakra-ui/react'
|
||||
|
||||
import { api } from '../../__data__/api/api'
|
||||
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])
|
||||
|
||||
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>
|
||||
|
||||
{populatedCourse.isFetching && <Spinner />}
|
||||
{!populatedCourse.isFetching && populatedCourse.isSuccess && <CourseDetails populatedCourse={populatedCourse.data} />}
|
||||
</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>
|
||||
)
|
||||
}
|
||||
83
src/pages/course-list/course-details.tsx
Normal file
83
src/pages/course-list/course-details.tsx
Normal file
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
200
src/pages/course-list/course-list.tsx
Normal file
200
src/pages/course-list/course-list.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import {
|
||||
Box,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
Button,
|
||||
Card,
|
||||
Heading,
|
||||
Container,
|
||||
VStack,
|
||||
Input,
|
||||
CloseButton,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
FormHelperText,
|
||||
FormErrorMessage,
|
||||
useToast,
|
||||
} from '@chakra-ui/react'
|
||||
import { useForm, Controller } from 'react-hook-form'
|
||||
|
||||
import { ErrorSpan } from '../style'
|
||||
|
||||
import { useAppSelector } from '../../__data__/store'
|
||||
import { api } from '../../__data__/api/api'
|
||||
import { isTeacher } from '../../utils/user'
|
||||
import { AddIcon } from '@chakra-ui/icons'
|
||||
import { PageLoader } from '../../components/page-loader/page-loader'
|
||||
import { CourseCard } from './course-card'
|
||||
|
||||
interface NewCourseForm {
|
||||
startDt: string
|
||||
name: string
|
||||
}
|
||||
|
||||
export const CoursesList = () => {
|
||||
const toast = useToast()
|
||||
const user = useAppSelector((s) => s.user)
|
||||
const { data, isLoading } = api.useCoursesListQuery()
|
||||
const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const toastRef = useRef(null)
|
||||
|
||||
const {
|
||||
control,
|
||||
handleSubmit,
|
||||
reset,
|
||||
formState: { errors },
|
||||
getValues,
|
||||
} = useForm<NewCourseForm>({
|
||||
defaultValues: {
|
||||
startDt: dayjs().format('YYYY-MM-DD'),
|
||||
name: 'Название',
|
||||
},
|
||||
})
|
||||
|
||||
const onSubmit = ({ startDt, name }) => {
|
||||
toastRef.current = toast({
|
||||
title: 'Отправляем',
|
||||
status: 'loading',
|
||||
duration: 9000,
|
||||
})
|
||||
createUpdateCourse({ name, startDt })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (crucQuery.isSuccess) {
|
||||
const values = getValues()
|
||||
if (toastRef.current) {
|
||||
toast.update(toastRef.current, {
|
||||
title: 'Курс создан.',
|
||||
description: `Курс ${values.name} успешно создан`,
|
||||
status: 'success',
|
||||
duration: 9000,
|
||||
isClosable: true,
|
||||
})
|
||||
}
|
||||
reset()
|
||||
}
|
||||
}, [crucQuery.isSuccess])
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<PageLoader />
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Container maxW="container.xl">
|
||||
{isTeacher(user) && (
|
||||
<Box mt="15" mb="15">
|
||||
{showForm ? (
|
||||
<Card align="left">
|
||||
<CardHeader display="flex">
|
||||
<Heading as="h2" mt="0">
|
||||
Создание курса
|
||||
</Heading>
|
||||
<CloseButton ml="auto" onClick={() => setShowForm(false)} />
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<form onSubmit={handleSubmit(onSubmit)}>
|
||||
<VStack spacing={10} align="left">
|
||||
<Controller
|
||||
control={control}
|
||||
name="startDt"
|
||||
rules={{ required: 'Обязательное поле' }}
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={Boolean(errors.startDt)}
|
||||
>
|
||||
<FormLabel>Дата начала</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
required={false}
|
||||
placeholder="Select Date and Time"
|
||||
size="md"
|
||||
type="date"
|
||||
/>
|
||||
{errors.startDt ? (
|
||||
<FormErrorMessage>
|
||||
{errors.startDt?.message}
|
||||
</FormErrorMessage>
|
||||
) : (
|
||||
<FormHelperText>
|
||||
Укажите дату начала курса
|
||||
</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="name"
|
||||
rules={{
|
||||
required: 'Обязательное поле',
|
||||
}}
|
||||
render={({ field }) => (
|
||||
<FormControl
|
||||
isRequired
|
||||
isInvalid={Boolean(errors.name)}
|
||||
>
|
||||
<FormLabel>Название новой лекции:</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
required={false}
|
||||
placeholder="КФУ-24-2"
|
||||
size="md"
|
||||
/>
|
||||
{errors.name && (
|
||||
<FormErrorMessage>
|
||||
{errors.name.message}
|
||||
</FormErrorMessage>
|
||||
)}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Box mt={10}>
|
||||
<Button
|
||||
size="lg"
|
||||
type="submit"
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="blue"
|
||||
>
|
||||
Создать
|
||||
</Button>
|
||||
</Box>
|
||||
</VStack>
|
||||
|
||||
{crucQuery?.error && (
|
||||
<ErrorSpan>{(crucQuery?.error as any).error}</ErrorSpan>
|
||||
)}
|
||||
</form>
|
||||
</CardBody>
|
||||
</Card>
|
||||
) : (
|
||||
<Box p="2" m="2">
|
||||
<Button
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="green"
|
||||
onClick={() => setShowForm(true)}
|
||||
>
|
||||
Добавить
|
||||
</Button>
|
||||
</Box>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
<VStack as="ul" align="stretch">
|
||||
{data?.body?.map((c) => (
|
||||
<CourseCard
|
||||
key={c._id}
|
||||
course={c}
|
||||
/>
|
||||
))}
|
||||
</VStack>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
3
src/pages/course-list/index.ts
Normal file
3
src/pages/course-list/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
import { CoursesList } from './course-list'
|
||||
|
||||
export default CoursesList
|
||||
Reference in New Issue
Block a user