125 lines
3.9 KiB
TypeScript
125 lines
3.9 KiB
TypeScript
import React, { useCallback, useEffect, useState } from 'react'
|
|
import dayjs from 'dayjs'
|
|
import { Link as ConnectedLink, generatePath } from 'react-router-dom'
|
|
import { getNavigationValue } from '@brojs/cli'
|
|
import {
|
|
Box,
|
|
CardHeader,
|
|
CardBody,
|
|
CardFooter,
|
|
ButtonGroup,
|
|
Stack,
|
|
StackDivider,
|
|
Button,
|
|
Card,
|
|
Heading,
|
|
Tooltip,
|
|
Spinner,
|
|
} from '@chakra-ui/react'
|
|
import { useTranslation } from 'react-i18next'
|
|
|
|
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)
|
|
const { t } = useTranslation()
|
|
|
|
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">
|
|
{`${t('journal.pl.course.startDate')} - ${dayjs(course.startDt).format(t('journal.pl.lesson.dateFormat'))}`}
|
|
</Box>
|
|
<Box as="span" textAlign="left">
|
|
{t('journal.pl.course.lessonCount')} - {course.lessons.length}
|
|
</Box>
|
|
|
|
{populatedCourse.isFetching && <Spinner />}
|
|
{!populatedCourse.isFetching && populatedCourse.isSuccess && (
|
|
<CourseDetails populatedCourse={populatedCourse.data} />
|
|
)}
|
|
|
|
{getNavigationValue('link.journal.attendance') && (
|
|
<Tooltip
|
|
label={t('journal.pl.course.attendancePage')}
|
|
fontSize="12px"
|
|
top="16px"
|
|
>
|
|
<Button
|
|
leftIcon={<LinkIcon />}
|
|
as={ConnectedLink}
|
|
variant="outline"
|
|
colorScheme="blue"
|
|
to={generatePath(
|
|
`${getNavigationValue('journal.main')}${getNavigationValue('link.journal.attendance')}`,
|
|
{ courseId: course.id },
|
|
)}
|
|
>
|
|
<Box mt={3}></Box>
|
|
{t('journal.pl.course.attendance')}
|
|
</Button>
|
|
</Tooltip>
|
|
)}
|
|
</Stack>
|
|
</CardBody>
|
|
)}
|
|
<CardFooter>
|
|
<ButtonGroup
|
|
spacing={[0, 4]}
|
|
mt="16px"
|
|
flexDirection={['column', 'row']}
|
|
>
|
|
<Tooltip label={t('journal.pl.course.attendancePage')} fontSize="12px" top="16px">
|
|
<Button
|
|
leftIcon={<LinkIcon />}
|
|
as={ConnectedLink}
|
|
colorScheme="blue"
|
|
to={`${getNavigationValue('journal.main')}/lessons-list/${course._id}`}
|
|
>
|
|
{t('journal.pl.common.open')}
|
|
</Button>
|
|
</Tooltip>
|
|
<Tooltip label={t('journal.pl.course.details')} fontSize="12px" top="16px">
|
|
<Button
|
|
colorScheme="blue"
|
|
mt={['16px', 0]}
|
|
variant="outline"
|
|
leftIcon={
|
|
<ArrowUpIcon
|
|
transform={isOpened ? 'rotate(0)' : 'rotate(180deg)'}
|
|
/>
|
|
}
|
|
loadingText={t('journal.pl.common.loading')}
|
|
isLoading={populatedCourse.isFetching}
|
|
onClick={handleToggleOpene}
|
|
>
|
|
{isOpened ? t('journal.pl.close') : t('journal.pl.course.viewDetails')}
|
|
</Button>
|
|
</Tooltip>
|
|
</ButtonGroup>
|
|
</CardFooter>
|
|
</Card>
|
|
)
|
|
}
|