Добавил спиннер (#5)
This commit is contained in:
@@ -1,8 +1,7 @@
|
||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||
import dayjs from 'dayjs'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { getConfigValue, getNavigationsValue } from '@ijl/cli'
|
||||
|
||||
import { Link as ConnectedLink } from 'react-router-dom'
|
||||
import { getNavigationsValue } from '@ijl/cli'
|
||||
import {
|
||||
Box,
|
||||
CardHeader,
|
||||
@@ -12,155 +11,252 @@ import {
|
||||
Stack,
|
||||
StackDivider,
|
||||
Button,
|
||||
UnorderedList,
|
||||
Card,
|
||||
Heading,
|
||||
Tooltip,
|
||||
Spinner,
|
||||
Container,
|
||||
VStack,
|
||||
Link,
|
||||
Input,
|
||||
CloseButton,
|
||||
FormControl,
|
||||
FormLabel,
|
||||
FormHelperText,
|
||||
Center,
|
||||
FormErrorMessage,
|
||||
} from '@chakra-ui/react'
|
||||
import { useForm, Controller } from 'react-hook-form'
|
||||
|
||||
import {
|
||||
ArrowImg,
|
||||
IconButton,
|
||||
InputElement,
|
||||
InputLabel,
|
||||
InputWrapper,
|
||||
StartWrapper,
|
||||
Papper,
|
||||
ErrorSpan,
|
||||
Cross,
|
||||
AddButton,
|
||||
MainWrapper,
|
||||
StyledCard,
|
||||
} from './style'
|
||||
import { ErrorSpan, MainWrapper } from './style'
|
||||
|
||||
import { linkOpen, moreDetails } from '../assets'
|
||||
|
||||
import arrow from '../assets/36-arrow-right.svg'
|
||||
import { keycloak } from '../__data__/kc'
|
||||
import { useAppSelector } from '../__data__/store'
|
||||
import { api } from '../__data__/api/api'
|
||||
import { isTeacher } from '../utils/user'
|
||||
import { AddIcon, ArrowDownIcon, ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
|
||||
|
||||
interface NewCourseForm {
|
||||
startDt: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const CoursesList = () => {
|
||||
const user = useAppSelector((s) => s.user)
|
||||
const { data, isLoading, error } = api.useCoursesListQuery()
|
||||
const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation()
|
||||
const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
|
||||
const [value, setValue] = useState('')
|
||||
const [showForm, setShowForm] = useState(false)
|
||||
const [showDetails, setShowDetails] = useState(false)
|
||||
const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
|
||||
string | null
|
||||
>(null)
|
||||
|
||||
const handleChange = useCallback(
|
||||
(event) => {
|
||||
setValue(event.target.value.toUpperCase())
|
||||
},
|
||||
[setValue],
|
||||
)
|
||||
const handleSubmit = useCallback(
|
||||
(event) => {
|
||||
event.preventDefault()
|
||||
createCourse({ name: value })
|
||||
},
|
||||
[value],
|
||||
)
|
||||
const { control, handleSubmit, reset } = useForm<NewCourseForm>({
|
||||
mode: 'all',
|
||||
})
|
||||
|
||||
const onSubmit = ({ startDt, name }) => {
|
||||
createUpdateCourse({ name, startDt })
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (crcQuery.isSuccess) {
|
||||
setValue('')
|
||||
if (crucQuery.isSuccess) {
|
||||
reset()
|
||||
}
|
||||
}, [crcQuery.isSuccess])
|
||||
}, [crucQuery.isSuccess])
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<Container maxW="container.xl">
|
||||
<Center h="300px">
|
||||
<Spinner
|
||||
thickness="4px"
|
||||
speed="0.65s"
|
||||
emptyColor="gray.200"
|
||||
color="blue.500"
|
||||
size="xl"
|
||||
/>
|
||||
</Center>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<MainWrapper>
|
||||
<StartWrapper>
|
||||
{isTeacher(user) && (
|
||||
<>
|
||||
{showForm ? (
|
||||
<Papper>
|
||||
<Cross role="button" onClick={() => setShowForm(false)}>
|
||||
X
|
||||
</Cross>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<InputWrapper>
|
||||
<InputLabel htmlFor="input">
|
||||
Название новой лекции:
|
||||
</InputLabel>
|
||||
<InputElement
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
id="input"
|
||||
type="text"
|
||||
autoComplete="off"
|
||||
<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, fieldState }) => (
|
||||
<FormControl isRequired>
|
||||
<FormLabel>Дата начала</FormLabel>
|
||||
<Input
|
||||
{...field}
|
||||
placeholder="Select Date and Time"
|
||||
size="md"
|
||||
type="datetime-local"
|
||||
/>
|
||||
{fieldState.error ? (
|
||||
<FormErrorMessage>
|
||||
{fieldState.error.message}
|
||||
</FormErrorMessage>
|
||||
) : (
|
||||
<FormHelperText>
|
||||
Укажите дату начала курса
|
||||
</FormHelperText>
|
||||
)}
|
||||
</FormControl>
|
||||
)}
|
||||
/>
|
||||
<IconButton type="submit">
|
||||
<ArrowImg src={arrow} />
|
||||
</IconButton>
|
||||
</InputWrapper>
|
||||
<FormControl isRequired>
|
||||
<FormLabel>Название новой лекции:</FormLabel>
|
||||
<Input
|
||||
value={value}
|
||||
onChange={handleChange}
|
||||
placeholder="КФУ-24-2"
|
||||
size="md"
|
||||
/>
|
||||
<FormHelperText></FormHelperText>
|
||||
</FormControl>
|
||||
|
||||
<Box mt={10}>
|
||||
<Button
|
||||
size="lg"
|
||||
leftIcon={<AddIcon />}
|
||||
colorScheme="blue"
|
||||
>
|
||||
Создать
|
||||
</Button>
|
||||
</Box>
|
||||
</VStack>
|
||||
|
||||
{crcQuery?.error && (
|
||||
<ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan>
|
||||
)}
|
||||
</form>
|
||||
</Papper>
|
||||
</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
|
||||
isOpened={courseDetailsOpenedId === c._id}
|
||||
key={c._id}
|
||||
course={c}
|
||||
openDetails={() =>
|
||||
courseDetailsOpenedId === c._id
|
||||
? setCourseDetailsOpenedId(null)
|
||||
: setCourseDetailsOpenedId(c._id)
|
||||
}
|
||||
/>
|
||||
))}
|
||||
</VStack>
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
|
||||
const CourseCard = ({ course, isOpened, openDetails }) => {
|
||||
const [getLessonList, lessonList] = api.useLazyLessonListQuery()
|
||||
useEffect(() => {
|
||||
if (isOpened) {
|
||||
getLessonList(course._id, true)
|
||||
}
|
||||
}, [isOpened])
|
||||
const user = useAppSelector((s) => s.user)
|
||||
|
||||
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>
|
||||
{lessonList.isFetching ? (
|
||||
<Spinner />
|
||||
) : (
|
||||
<AddButton onClick={() => setShowForm(true)}>Добавить</AddButton>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<UnorderedList spacing={3}>
|
||||
{data?.body?.map((course) => (
|
||||
<StyledCard key={course._id} align="left">
|
||||
<CardHeader>
|
||||
<Heading as="h2" mt="0">
|
||||
{course.name}
|
||||
<>
|
||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||
Список занятий:
|
||||
</Heading>
|
||||
</CardHeader>
|
||||
{showDetails && (
|
||||
<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>
|
||||
</Stack>
|
||||
</CardBody>
|
||||
)}
|
||||
<CardFooter>
|
||||
<ButtonGroup spacing="12" mt="16px">
|
||||
<Tooltip
|
||||
label="На страницу с лекциями"
|
||||
fontSize="12px"
|
||||
top="16px"
|
||||
>
|
||||
<Button variant="ghost" border="none" bg="#ffffff">
|
||||
<Link
|
||||
to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
|
||||
>
|
||||
<img src={linkOpen} alt="Перейти к лекциям" />
|
||||
</Link>
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip label="Детали" fontSize="12px" top="16px">
|
||||
<Button
|
||||
variant="ghost"
|
||||
border="none"
|
||||
bg="#ffffff"
|
||||
onClick={() => {
|
||||
showDetails
|
||||
? setShowDetails(null)
|
||||
: setShowDetails(true)
|
||||
}}
|
||||
cursor="pointer"
|
||||
<Stack>
|
||||
{lessonList.data?.body?.map((lesson) => (
|
||||
<Link
|
||||
as={ConnectedLink}
|
||||
to={
|
||||
isTeacher(user)
|
||||
? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`
|
||||
: ''
|
||||
}
|
||||
>
|
||||
<img src={moreDetails} alt="Просмотреть детали" />
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</ButtonGroup>
|
||||
</CardFooter>
|
||||
</StyledCard>
|
||||
))}
|
||||
</UnorderedList>
|
||||
</StartWrapper>
|
||||
</MainWrapper>
|
||||
{lesson.name}
|
||||
</Link>
|
||||
))}
|
||||
</Stack>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</CardBody>
|
||||
)}
|
||||
<CardFooter>
|
||||
<ButtonGroup spacing="4" mt="16px">
|
||||
<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"
|
||||
variant="outline"
|
||||
leftIcon={isOpened ? <ArrowUpIcon /> : <ArrowDownIcon />}
|
||||
loadingText="Загрузка"
|
||||
isLoading={lessonList.isFetching}
|
||||
onClick={openDetails}
|
||||
>
|
||||
Просмотреть детали
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</ButtonGroup>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user