Добавил спиннер И форма создания курса + перевод вёрстки на chakra-ui (#1)(#5) #6

Merged
primakov merged 2 commits from lection-create-form into master 2024-03-28 22:00:23 +03:00
9 changed files with 476 additions and 217 deletions

29
package-lock.json generated
View File

@ -9,6 +9,7 @@
"version": "1.2.0",
"license": "MIT",
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
@ -24,6 +25,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.51.2",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.1",
"redux": "^5.0.1",
@ -2213,6 +2215,18 @@
"react": ">=18"
}
},
"node_modules/@chakra-ui/icons": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/@chakra-ui/icons/-/icons-2.1.1.tgz",
"integrity": "sha512-3p30hdo4LlRZTT5CwoAJq3G9fHI0wDc0pBaMHj4SUn0yomO+RcDRlzhdXqdr5cVnzax44sqXJVnf3oQG0eI+4g==",
"dependencies": {
"@chakra-ui/icon": "3.2.0"
},
"peerDependencies": {
"@chakra-ui/system": ">=2.0.0",
"react": ">=18"
}
},
"node_modules/@chakra-ui/image": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",
@ -8546,6 +8560,21 @@
"react": ">=16.3.0"
}
},
"node_modules/react-hook-form": {
"version": "7.51.2",
"resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.51.2.tgz",
"integrity": "sha512-y++lwaWjtzDt/XNnyGDQy6goHskFualmDlf+jzEZvjvz6KWDf7EboL7pUvRCzPTJd0EOPpdekYaQLEvvG6m6HA==",
"engines": {
"node": ">=12.22.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/react-hook-form"
},
"peerDependencies": {
"react": "^16.8.0 || ^17 || ^18"
}
},
"node_modules/react-i18next": {
"version": "11.8.5",
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.5.tgz",

View File

@ -20,6 +20,7 @@
"@ijl/cli": "^5.0.3"
},
"dependencies": {
"@chakra-ui/icons": "^2.1.1",
"@chakra-ui/react": "^2.8.2",
"@emotion/react": "^11.11.4",
"@emotion/styled": "^11.11.0",
@ -35,6 +36,7 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-helmet": "^6.1.0",
"react-hook-form": "^7.51.2",
"react-redux": "^9.1.0",
"react-router-dom": "^6.22.1",
"redux": "^5.0.1",

View File

@ -4,6 +4,7 @@ import { Global, css } from '@emotion/react'
import { BrowserRouter } from 'react-router-dom';
import ruLocale from 'dayjs/locale/ru';
import dayjs from 'dayjs';
import { ChakraProvider } from '@chakra-ui/react'
import { Dashboard } from './dashboard';
@ -11,72 +12,74 @@ dayjs.locale('ru', ruLocale);
const App = ({ store }) => {
return(
<BrowserRouter>
<Helmet>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Журнал</title>
</Helmet>
<Global
styles={css`
* { box-sizing: border-box; }
html {
height: 100%;
max-width: 100%;
overflow: hidden;
}
body {
color: #000;
/* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
background: radial-gradient(
farthest-side at bottom left,
rgba(35, 235, 4, 0.709),
rgba(255, 255, 255, 0) 65%
),
radial-gradient(
farthest-corner at bottom center,
rgba(244, 244, 8, 0.6),
rgba(255, 255, 255, 0) 40%
),
radial-gradient(
farthest-side at bottom right,
rgba(0, 195, 255, 0.648),
rgba(255, 255, 255, 0) 65%
);
height: 100%;
font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
font-weight: 600;
}
#app {
height: 100%;
overflow-y: auto;
}
<ChakraProvider>
<BrowserRouter>
<Helmet>
<meta name="viewport" content="width=device-width, user-scalable=no" />
<title>Журнал</title>
</Helmet>
<Global
styles={css`
html {
height: 100%;
max-width: 100%;
overflow: hidden;
}
body {
color: #000;
/* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
background: radial-gradient(
farthest-side at bottom left,
rgba(35, 235, 4, 0.709),
rgba(255, 255, 255, 0) 65%
),
radial-gradient(
farthest-corner at bottom center,
rgba(244, 244, 8, 0.6),
rgba(255, 255, 255, 0) 40%
),
radial-gradient(
farthest-side at bottom right,
rgba(0, 195, 255, 0.648),
rgb(239 244 246) 65%
/* rgba(255, 255, 255, 0) 65% */
);
height: 100%;
font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
font-weight: 600;
}
#app {
height: 100%;
overflow-y: auto;
}
@font-face {
font-family: 'KiyosunaSans';
src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'KiyosunaSans';
src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: 'RFKrabuler';
src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
src:
url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
font-weight: normal;
font-style: normal;
}
`}
/>
<Dashboard store={store} />
</BrowserRouter>
@font-face {
font-family: 'KiyosunaSans';
src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'KiyosunaSans';
src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
font-weight: lighter;
font-style: normal;
}
@font-face {
font-family: 'RFKrabuler';
src: url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.eot'}');
src:
url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff2'}') format('woff2'),
url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/WEB/RFKrabuler-Regular.woff'}') format('woff'),
url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
font-weight: normal;
font-style: normal;
}
`}
/>
<Dashboard store={store} />
</BrowserRouter>
</ChakraProvider>
)
}

View File

@ -1,34 +1,82 @@
import React, { useEffect, Suspense } from "react";
import { Routes, Route, useNavigate } from "react-router-dom";
import { Provider } from "react-redux";
import React, { useEffect, Suspense } from 'react'
import { Routes, Route, useNavigate } from 'react-router-dom'
import { Provider } from 'react-redux'
import {
CourseListPage,
LessonDetailsPage,
LessonListPage,
UserPage
UserPage,
} from './pages'
import { getNavigationsValue } from "@ijl/cli";
import { getNavigationsValue } from '@ijl/cli'
import { Box, Container, Spinner, VStack } from '@chakra-ui/react'
const Redirect = ({ path }) => {
const navigate = useNavigate();
const navigate = useNavigate()
useEffect(() => {
navigate(path);
}, []);
navigate(path)
}, [])
return null;
};
return null
}
const Wrapper = ({ children }) => <Suspense fallback="...">{children}</Suspense>
const Wrapper = ({ children }) => (
<Suspense
fallback={
<Container>
<VStack>
<Box mt="150">
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="blue.500"
size="xl"
/></Box>
</VStack>
</Container>
}
>
{children}
</Suspense>
)
export const Dashboard = ({ store }) => (
<Provider store={store}>
<Routes>
<Route path={getNavigationsValue('journal.main')} element={<Wrapper><CourseListPage /></Wrapper>} />
<Route path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`} element={<Wrapper><LessonListPage /></Wrapper>} />
<Route path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`} element={<Wrapper><UserPage /></Wrapper>} />
<Route path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`} element={<Wrapper><LessonDetailsPage /></Wrapper>} />
<Route
path={getNavigationsValue('journal.main')}
element={
<Wrapper>
<CourseListPage />
</Wrapper>
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`}
element={
<Wrapper>
<LessonListPage />
</Wrapper>
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`}
element={
<Wrapper>
<UserPage />
</Wrapper>
}
/>
<Route
path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`}
element={
<Wrapper>
<LessonDetailsPage />
</Wrapper>
}
/>
</Routes>
</Provider>
);
)

View File

@ -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,299 @@ import {
Stack,
StackDivider,
Button,
UnorderedList,
Card,
Heading,
Tooltip,
Spinner,
Container,
VStack,
Link,
Input,
CloseButton,
FormControl,
FormLabel,
FormHelperText,
Center,
FormErrorMessage,
useToast,
} 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 toast = useToast()
const user = useAppSelector((s) => s.user)
const { data, isLoading, error } = api.useCoursesListQuery()
const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation()
const [value, setValue] = useState('')
const { data, isLoading } = api.useCoursesListQuery()
const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
const [showForm, setShowForm] = useState(false)
const [showDetails, setShowDetails] = useState(false)
const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
string | null
>(null)
const toastRef = useRef(null)
const handleChange = useCallback(
(event) => {
setValue(event.target.value.toUpperCase())
const {
control,
handleSubmit,
reset,
formState: { errors },
getValues,
} = useForm<NewCourseForm>({
defaultValues: {
startDt: '',
name: '',
},
[setValue],
)
const handleSubmit = useCallback(
(event) => {
event.preventDefault()
createCourse({ name: value })
},
[value],
)
})
const onSubmit = ({ startDt, name }) => {
toastRef.current = toast({
title: 'Отправляем',
status: 'loading',
duration: 9000,
})
createUpdateCourse({ name, startDt })
}
useEffect(() => {
if (crcQuery.isSuccess) {
setValue('')
if (crucQuery.isSuccess) {
const values = getValues()
if (toastRef.current) {
toast.update(toastRef.current, {
title: 'Курс создан.',
description: `Курс ${values.name} успешно создан`,
status: 'success',
duration: 9000,
isClosable: true,
})
}
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 }) => (
<FormControl
isRequired
isInvalid={Boolean(errors.startDt)}
>
<FormLabel>Дата начала</FormLabel>
<Input
{...field}
required={false}
placeholder="Select Date and Time"
size="md"
type="datetime-local"
/>
{errors.startDt ? (
<FormErrorMessage>
{errors.startDt?.message}
</FormErrorMessage>
) : (
<FormHelperText>
Укажите дату начала курса
</FormHelperText>
)}
</FormControl>
)}
/>
<IconButton type="submit">
<ArrowImg src={arrow} />
</IconButton>
</InputWrapper>
{crcQuery?.error && (
<ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan>
<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>
</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>
)
}

View File

@ -84,18 +84,18 @@ const LessonDetail = () => {
<StartWrapper>
<Breadcrumb>
<BreadcrumbItem>
<Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
Журнал
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem>
<Link
as={BreadcrumbLink}
<BreadcrumbLink
as={Link}
to={`${getNavigationsValue('journal.main')}/lessons-list/${courseId}`}
>
Курс
</Link>
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>
@ -103,8 +103,10 @@ const LessonDetail = () => {
</BreadcrumbItem>
</Breadcrumb>
<h1 style={{ width: '70%' }} >Тема занятия - {accessCode?.body?.lesson?.name}</h1>
<span style={{ display: 'flex' }}>
<h1 style={{ width: '70%' }}>
Тема занятия - {accessCode?.body?.lesson?.name}
</h1>
<span style={{ display: 'flex' }}>
{dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
{AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}

View File

@ -63,7 +63,7 @@ const LessonList = () => {
<StartWrapper>
<Breadcrumb>
<BreadcrumbItem>
<Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>Журнал</Link>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>Журнал</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbItem isCurrentPage>

View File

@ -2,6 +2,13 @@ const router = require('express').Router()
const fs = require('node:fs')
const path = require('node:path')
const timer =
(time = 1000) =>
(_req, _res, next) =>
setTimeout(next, time)
router.use(timer())
router.get('/course/list', (req, res) => {
res.send(require('../mocks/courses/list/success.json'))
})
@ -23,7 +30,9 @@ router.post('/lesson', (req, res) => {
})
router.post('/lesson/access-code', (req, res) => {
const answer = fs.readFileSync(path.resolve(__dirname, '../mocks/lessons/access-code/create/success.json'))
const answer = fs.readFileSync(
path.resolve(__dirname, '../mocks/lessons/access-code/create/success.json'),
)
// res.send(require('../mocks/lessons/access-code/create/success.json'))
res.send(answer)
})

View File

@ -23,6 +23,29 @@
"startDt": "2024-03-02T15:37:05.907Z",
"created": "2024-03-02T15:37:05.908Z",
"__v": 2
},
{
"_id": "65e73c21ced789d2f679128z",
"name": "KFU-24-2",
"teachers": [],
"lessons": [
"65e2e5fbec37fec650f28489",
"65e301c4ec37fec650f2aafe",
"65e78bebced789d2f6791315",
"65e78c0fced789d2f679131b"
],
"creator": {
"sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
"email_verified": true,
"name": "Александр Примаков",
"preferred_username": "primakov",
"given_name": "Александр",
"family_name": "Примаков",
"email": "primakovpro@gmail.com"
},
"startDt": "2024-03-02T15:37:05.907Z",
"created": "2024-03-02T15:37:05.908Z",
"__v": 2
}
]
}