Compare commits
No commits in common. "97e940b87336fdb6222a222dcf52622cb3527818" and "f09536f4aa9b213e38716b17d2c6a25a47a7fd95" have entirely different histories.
97e940b873
...
f09536f4aa
29
package-lock.json
generated
29
package-lock.json
generated
@ -9,7 +9,6 @@
|
|||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@chakra-ui/icons": "^2.1.1",
|
|
||||||
"@chakra-ui/react": "^2.8.2",
|
"@chakra-ui/react": "^2.8.2",
|
||||||
"@emotion/react": "^11.11.4",
|
"@emotion/react": "^11.11.4",
|
||||||
"@emotion/styled": "^11.11.0",
|
"@emotion/styled": "^11.11.0",
|
||||||
@ -25,7 +24,6 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-helmet": "^6.1.0",
|
"react-helmet": "^6.1.0",
|
||||||
"react-hook-form": "^7.51.2",
|
|
||||||
"react-redux": "^9.1.0",
|
"react-redux": "^9.1.0",
|
||||||
"react-router-dom": "^6.22.1",
|
"react-router-dom": "^6.22.1",
|
||||||
"redux": "^5.0.1",
|
"redux": "^5.0.1",
|
||||||
@ -2215,18 +2213,6 @@
|
|||||||
"react": ">=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": {
|
"node_modules/@chakra-ui/image": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@chakra-ui/image/-/image-2.1.0.tgz",
|
||||||
@ -8560,21 +8546,6 @@
|
|||||||
"react": ">=16.3.0"
|
"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": {
|
"node_modules/react-i18next": {
|
||||||
"version": "11.8.5",
|
"version": "11.8.5",
|
||||||
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.5.tgz",
|
"resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-11.8.5.tgz",
|
||||||
|
|||||||
@ -20,7 +20,6 @@
|
|||||||
"@ijl/cli": "^5.0.3"
|
"@ijl/cli": "^5.0.3"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@chakra-ui/icons": "^2.1.1",
|
|
||||||
"@chakra-ui/react": "^2.8.2",
|
"@chakra-ui/react": "^2.8.2",
|
||||||
"@emotion/react": "^11.11.4",
|
"@emotion/react": "^11.11.4",
|
||||||
"@emotion/styled": "^11.11.0",
|
"@emotion/styled": "^11.11.0",
|
||||||
@ -36,7 +35,6 @@
|
|||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-helmet": "^6.1.0",
|
"react-helmet": "^6.1.0",
|
||||||
"react-hook-form": "^7.51.2",
|
|
||||||
"react-redux": "^9.1.0",
|
"react-redux": "^9.1.0",
|
||||||
"react-router-dom": "^6.22.1",
|
"react-router-dom": "^6.22.1",
|
||||||
"redux": "^5.0.1",
|
"redux": "^5.0.1",
|
||||||
|
|||||||
133
src/app.tsx
133
src/app.tsx
@ -4,7 +4,6 @@ import { Global, css } from '@emotion/react'
|
|||||||
import { BrowserRouter } from 'react-router-dom';
|
import { BrowserRouter } from 'react-router-dom';
|
||||||
import ruLocale from 'dayjs/locale/ru';
|
import ruLocale from 'dayjs/locale/ru';
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
import { ChakraProvider } from '@chakra-ui/react'
|
|
||||||
|
|
||||||
import { Dashboard } from './dashboard';
|
import { Dashboard } from './dashboard';
|
||||||
|
|
||||||
@ -12,74 +11,72 @@ dayjs.locale('ru', ruLocale);
|
|||||||
|
|
||||||
const App = ({ store }) => {
|
const App = ({ store }) => {
|
||||||
return(
|
return(
|
||||||
<ChakraProvider>
|
<BrowserRouter>
|
||||||
<BrowserRouter>
|
<Helmet>
|
||||||
<Helmet>
|
<meta name="viewport" content="width=device-width, user-scalable=no" />
|
||||||
<meta name="viewport" content="width=device-width, user-scalable=no" />
|
<title>Журнал</title>
|
||||||
<title>Журнал</title>
|
</Helmet>
|
||||||
</Helmet>
|
<Global
|
||||||
<Global
|
styles={css`
|
||||||
styles={css`
|
* { box-sizing: border-box; }
|
||||||
html {
|
html {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
body {
|
body {
|
||||||
color: #000;
|
color: #000;
|
||||||
/* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
|
/* background: radial-gradient(circle at top right, rgb(154 227 33), rgb(33 160 56)); */
|
||||||
background: radial-gradient(
|
background: radial-gradient(
|
||||||
farthest-side at bottom left,
|
farthest-side at bottom left,
|
||||||
rgba(35, 235, 4, 0.709),
|
rgba(35, 235, 4, 0.709),
|
||||||
rgba(255, 255, 255, 0) 65%
|
rgba(255, 255, 255, 0) 65%
|
||||||
),
|
),
|
||||||
radial-gradient(
|
radial-gradient(
|
||||||
farthest-corner at bottom center,
|
farthest-corner at bottom center,
|
||||||
rgba(244, 244, 8, 0.6),
|
rgba(244, 244, 8, 0.6),
|
||||||
rgba(255, 255, 255, 0) 40%
|
rgba(255, 255, 255, 0) 40%
|
||||||
),
|
),
|
||||||
radial-gradient(
|
radial-gradient(
|
||||||
farthest-side at bottom right,
|
farthest-side at bottom right,
|
||||||
rgba(0, 195, 255, 0.648),
|
rgba(0, 195, 255, 0.648),
|
||||||
rgb(239 244 246) 65%
|
rgba(255, 255, 255, 0) 65%
|
||||||
/* rgba(255, 255, 255, 0) 65% */
|
);
|
||||||
);
|
height: 100%;
|
||||||
height: 100%;
|
font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
|
||||||
font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
|
font-weight: 600;
|
||||||
font-weight: 600;
|
}
|
||||||
}
|
#app {
|
||||||
#app {
|
height: 100%;
|
||||||
height: 100%;
|
overflow-y: auto;
|
||||||
overflow-y: auto;
|
}
|
||||||
}
|
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'KiyosunaSans';
|
font-family: 'KiyosunaSans';
|
||||||
src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
|
src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-B.otf'}');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'KiyosunaSans';
|
font-family: 'KiyosunaSans';
|
||||||
src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
|
src: url('${__webpack_public_path__ + '/remote-assets/KiyosunaSans/KiyosunaSans-L.otf'}');
|
||||||
font-weight: lighter;
|
font-weight: lighter;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'RFKrabuler';
|
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.eot'}');
|
||||||
src:
|
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.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/WEB/RFKrabuler-Regular.woff'}') format('woff'),
|
||||||
url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
|
url('${__webpack_public_path__ + '/remote-assets/RF-Krabuler/TTF/RF-Krabuler-Regular.ttf'}') format('truetype');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
/>
|
/>
|
||||||
<Dashboard store={store} />
|
<Dashboard store={store} />
|
||||||
</BrowserRouter>
|
</BrowserRouter>
|
||||||
</ChakraProvider>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,82 +1,34 @@
|
|||||||
import React, { useEffect, Suspense } from 'react'
|
import React, { useEffect, Suspense } from "react";
|
||||||
import { Routes, Route, useNavigate } from 'react-router-dom'
|
import { Routes, Route, useNavigate } from "react-router-dom";
|
||||||
import { Provider } from 'react-redux'
|
import { Provider } from "react-redux";
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CourseListPage,
|
CourseListPage,
|
||||||
LessonDetailsPage,
|
LessonDetailsPage,
|
||||||
LessonListPage,
|
LessonListPage,
|
||||||
UserPage,
|
UserPage
|
||||||
} from './pages'
|
} 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 Redirect = ({ path }) => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate();
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
navigate(path)
|
navigate(path);
|
||||||
}, [])
|
}, []);
|
||||||
|
|
||||||
return null
|
return null;
|
||||||
}
|
};
|
||||||
|
|
||||||
const Wrapper = ({ children }) => (
|
const Wrapper = ({ children }) => <Suspense fallback="...">{children}</Suspense>
|
||||||
<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 }) => (
|
export const Dashboard = ({ store }) => (
|
||||||
<Provider store={store}>
|
<Provider store={store}>
|
||||||
<Routes>
|
<Routes>
|
||||||
<Route
|
<Route path={getNavigationsValue('journal.main')} element={<Wrapper><CourseListPage /></Wrapper>} />
|
||||||
path={getNavigationsValue('journal.main')}
|
<Route path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`} element={<Wrapper><LessonListPage /></Wrapper>} />
|
||||||
element={
|
<Route path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`} element={<Wrapper><UserPage /></Wrapper>} />
|
||||||
<Wrapper>
|
<Route path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`} element={<Wrapper><LessonDetailsPage /></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>
|
</Routes>
|
||||||
</Provider>
|
</Provider>
|
||||||
)
|
);
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
import React, { useCallback, useEffect, useRef, useState } from 'react'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { Link as ConnectedLink } from 'react-router-dom'
|
import { Link } from 'react-router-dom'
|
||||||
import { getNavigationsValue } from '@ijl/cli'
|
import { getConfigValue, getNavigationsValue } from '@ijl/cli'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
@ -11,299 +12,155 @@ import {
|
|||||||
Stack,
|
Stack,
|
||||||
StackDivider,
|
StackDivider,
|
||||||
Button,
|
Button,
|
||||||
Card,
|
UnorderedList,
|
||||||
Heading,
|
Heading,
|
||||||
Tooltip,
|
Tooltip,
|
||||||
Spinner,
|
|
||||||
Container,
|
|
||||||
VStack,
|
|
||||||
Link,
|
|
||||||
Input,
|
|
||||||
CloseButton,
|
|
||||||
FormControl,
|
|
||||||
FormLabel,
|
|
||||||
FormHelperText,
|
|
||||||
Center,
|
|
||||||
FormErrorMessage,
|
|
||||||
useToast,
|
|
||||||
} from '@chakra-ui/react'
|
} from '@chakra-ui/react'
|
||||||
import { useForm, Controller } from 'react-hook-form'
|
|
||||||
|
|
||||||
import { ErrorSpan, MainWrapper } from './style'
|
import {
|
||||||
|
ArrowImg,
|
||||||
|
IconButton,
|
||||||
|
InputElement,
|
||||||
|
InputLabel,
|
||||||
|
InputWrapper,
|
||||||
|
StartWrapper,
|
||||||
|
Papper,
|
||||||
|
ErrorSpan,
|
||||||
|
Cross,
|
||||||
|
AddButton,
|
||||||
|
MainWrapper,
|
||||||
|
StyledCard,
|
||||||
|
} 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 { useAppSelector } from '../__data__/store'
|
||||||
import { api } from '../__data__/api/api'
|
import { api } from '../__data__/api/api'
|
||||||
import { isTeacher } from '../utils/user'
|
import { isTeacher } from '../utils/user'
|
||||||
import { AddIcon, ArrowDownIcon, ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
|
|
||||||
|
|
||||||
interface NewCourseForm {
|
|
||||||
startDt: string
|
|
||||||
name: string
|
|
||||||
}
|
|
||||||
|
|
||||||
const CoursesList = () => {
|
const CoursesList = () => {
|
||||||
const toast = useToast()
|
|
||||||
const user = useAppSelector((s) => s.user)
|
const user = useAppSelector((s) => s.user)
|
||||||
const { data, isLoading } = api.useCoursesListQuery()
|
const { data, isLoading, error } = api.useCoursesListQuery()
|
||||||
const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
|
const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation()
|
||||||
|
const [value, setValue] = useState('')
|
||||||
const [showForm, setShowForm] = useState(false)
|
const [showForm, setShowForm] = useState(false)
|
||||||
const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
|
const [showDetails, setShowDetails] = useState(false)
|
||||||
string | null
|
|
||||||
>(null)
|
|
||||||
const toastRef = useRef(null)
|
|
||||||
|
|
||||||
const {
|
const handleChange = useCallback(
|
||||||
control,
|
(event) => {
|
||||||
handleSubmit,
|
setValue(event.target.value.toUpperCase())
|
||||||
reset,
|
|
||||||
formState: { errors },
|
|
||||||
getValues,
|
|
||||||
} = useForm<NewCourseForm>({
|
|
||||||
defaultValues: {
|
|
||||||
startDt: '',
|
|
||||||
name: '',
|
|
||||||
},
|
},
|
||||||
})
|
[setValue],
|
||||||
|
)
|
||||||
const onSubmit = ({ startDt, name }) => {
|
const handleSubmit = useCallback(
|
||||||
toastRef.current = toast({
|
(event) => {
|
||||||
title: 'Отправляем',
|
event.preventDefault()
|
||||||
status: 'loading',
|
createCourse({ name: value })
|
||||||
duration: 9000,
|
},
|
||||||
})
|
[value],
|
||||||
createUpdateCourse({ name, startDt })
|
)
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (crucQuery.isSuccess) {
|
if (crcQuery.isSuccess) {
|
||||||
const values = getValues()
|
setValue('')
|
||||||
if (toastRef.current) {
|
|
||||||
toast.update(toastRef.current, {
|
|
||||||
title: 'Курс создан.',
|
|
||||||
description: `Курс ${values.name} успешно создан`,
|
|
||||||
status: 'success',
|
|
||||||
duration: 9000,
|
|
||||||
isClosable: true,
|
|
||||||
})
|
|
||||||
}
|
|
||||||
reset()
|
|
||||||
}
|
}
|
||||||
}, [crucQuery.isSuccess])
|
}, [crcQuery.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 (
|
return (
|
||||||
<Container maxW="container.xl">
|
<MainWrapper>
|
||||||
{isTeacher(user) && (
|
<StartWrapper>
|
||||||
<Box mt="15" mb="15">
|
{isTeacher(user) && (
|
||||||
{showForm ? (
|
<>
|
||||||
<Card align="left">
|
{showForm ? (
|
||||||
<CardHeader display="flex">
|
<Papper>
|
||||||
<Heading as="h2" mt="0">
|
<Cross role="button" onClick={() => setShowForm(false)}>
|
||||||
Создание курса
|
X
|
||||||
</Heading>
|
</Cross>
|
||||||
<CloseButton ml="auto" onClick={() => setShowForm(false)} />
|
<form onSubmit={handleSubmit}>
|
||||||
</CardHeader>
|
<InputWrapper>
|
||||||
<CardBody>
|
<InputLabel htmlFor="input">
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
Название новой лекции:
|
||||||
<VStack spacing={10} align="left">
|
</InputLabel>
|
||||||
<Controller
|
<InputElement
|
||||||
control={control}
|
value={value}
|
||||||
name="startDt"
|
onChange={handleChange}
|
||||||
rules={{ required: 'Обязательное поле' }}
|
id="input"
|
||||||
render={({ field }) => (
|
type="text"
|
||||||
<FormControl
|
autoComplete="off"
|
||||||
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>
|
|
||||||
)}
|
|
||||||
/>
|
/>
|
||||||
<Controller
|
<IconButton type="submit">
|
||||||
control={control}
|
<ArrowImg src={arrow} />
|
||||||
name="name"
|
</IconButton>
|
||||||
rules={{
|
</InputWrapper>
|
||||||
required: 'Обязательное поле',
|
{crcQuery?.error && (
|
||||||
}}
|
<ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan>
|
||||||
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>
|
</form>
|
||||||
</CardBody>
|
</Papper>
|
||||||
</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>
|
||||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
|
||||||
Список занятий:
|
|
||||||
</Heading>
|
|
||||||
<Stack>
|
|
||||||
{lessonList.data?.body?.map((lesson) => (
|
|
||||||
<Link
|
|
||||||
as={ConnectedLink}
|
|
||||||
to={
|
|
||||||
isTeacher(user)
|
|
||||||
? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`
|
|
||||||
: ''
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{lesson.name}
|
|
||||||
</Link>
|
|
||||||
))}
|
|
||||||
</Stack>
|
|
||||||
</>
|
|
||||||
)}
|
)}
|
||||||
</Stack>
|
</>
|
||||||
</CardBody>
|
)}
|
||||||
)}
|
<UnorderedList spacing={3}>
|
||||||
<CardFooter>
|
{data?.body?.map((course) => (
|
||||||
<ButtonGroup spacing="4" mt="16px">
|
<StyledCard key={course._id} align="left">
|
||||||
<Tooltip label="На страницу с лекциями" fontSize="12px" top="16px">
|
<CardHeader>
|
||||||
<Button
|
<Heading as="h2" mt="0">
|
||||||
leftIcon={<LinkIcon />}
|
{course.name}
|
||||||
as={ConnectedLink}
|
</Heading>
|
||||||
colorScheme="blue"
|
</CardHeader>
|
||||||
to={`${getNavigationsValue('journal.main')}/lessons-list/${course._id}`}
|
{showDetails && (
|
||||||
>
|
<CardBody mt="16px">
|
||||||
Открыть
|
<Stack divider={<StackDivider />} spacing="8px">
|
||||||
</Button>
|
<Box as="span" textAlign="left">
|
||||||
</Tooltip>
|
{`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`}
|
||||||
<Tooltip label="Детали" fontSize="12px" top="16px">
|
</Box>
|
||||||
<Button
|
<Box as="span" textAlign="left">
|
||||||
colorScheme="blue"
|
Количество занятий - {course.lessons.length}
|
||||||
variant="outline"
|
</Box>
|
||||||
leftIcon={isOpened ? <ArrowUpIcon /> : <ArrowDownIcon />}
|
</Stack>
|
||||||
loadingText="Загрузка"
|
</CardBody>
|
||||||
isLoading={lessonList.isFetching}
|
)}
|
||||||
onClick={openDetails}
|
<CardFooter>
|
||||||
>
|
<ButtonGroup spacing="12" mt="16px">
|
||||||
Просмотреть детали
|
<Tooltip
|
||||||
</Button>
|
label="На страницу с лекциями"
|
||||||
</Tooltip>
|
fontSize="12px"
|
||||||
</ButtonGroup>
|
top="16px"
|
||||||
</CardFooter>
|
>
|
||||||
</Card>
|
<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"
|
||||||
|
>
|
||||||
|
<img src={moreDetails} alt="Просмотреть детали" />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
</ButtonGroup>
|
||||||
|
</CardFooter>
|
||||||
|
</StyledCard>
|
||||||
|
))}
|
||||||
|
</UnorderedList>
|
||||||
|
</StartWrapper>
|
||||||
|
</MainWrapper>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -84,18 +84,18 @@ const LessonDetail = () => {
|
|||||||
<StartWrapper>
|
<StartWrapper>
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<BreadcrumbItem>
|
<BreadcrumbItem>
|
||||||
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
|
<Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>
|
||||||
Журнал
|
Журнал
|
||||||
</BreadcrumbLink>
|
</Link>
|
||||||
</BreadcrumbItem>
|
</BreadcrumbItem>
|
||||||
|
|
||||||
<BreadcrumbItem>
|
<BreadcrumbItem>
|
||||||
<BreadcrumbLink
|
<Link
|
||||||
as={Link}
|
as={BreadcrumbLink}
|
||||||
to={`${getNavigationsValue('journal.main')}/lessons-list/${courseId}`}
|
to={`${getNavigationsValue('journal.main')}/lessons-list/${courseId}`}
|
||||||
>
|
>
|
||||||
Курс
|
Курс
|
||||||
</BreadcrumbLink>
|
</Link>
|
||||||
</BreadcrumbItem>
|
</BreadcrumbItem>
|
||||||
|
|
||||||
<BreadcrumbItem isCurrentPage>
|
<BreadcrumbItem isCurrentPage>
|
||||||
@ -103,10 +103,8 @@ const LessonDetail = () => {
|
|||||||
</BreadcrumbItem>
|
</BreadcrumbItem>
|
||||||
</Breadcrumb>
|
</Breadcrumb>
|
||||||
|
|
||||||
<h1 style={{ width: '70%' }}>
|
<h1 style={{ width: '70%' }} >Тема занятия - {accessCode?.body?.lesson?.name}</h1>
|
||||||
Тема занятия - {accessCode?.body?.lesson?.name}
|
<span style={{ display: 'flex' }}>
|
||||||
</h1>
|
|
||||||
<span style={{ display: 'flex' }}>
|
|
||||||
{dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
|
{dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
|
||||||
Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
|
Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
|
||||||
{AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
|
{AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
|
||||||
|
|||||||
@ -63,7 +63,7 @@ const LessonList = () => {
|
|||||||
<StartWrapper>
|
<StartWrapper>
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<BreadcrumbItem>
|
<BreadcrumbItem>
|
||||||
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>Журнал</BreadcrumbLink>
|
<Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>Журнал</Link>
|
||||||
</BreadcrumbItem>
|
</BreadcrumbItem>
|
||||||
|
|
||||||
<BreadcrumbItem isCurrentPage>
|
<BreadcrumbItem isCurrentPage>
|
||||||
|
|||||||
@ -2,13 +2,6 @@ const router = require('express').Router()
|
|||||||
const fs = require('node:fs')
|
const fs = require('node:fs')
|
||||||
const path = require('node:path')
|
const path = require('node:path')
|
||||||
|
|
||||||
const timer =
|
|
||||||
(time = 1000) =>
|
|
||||||
(_req, _res, next) =>
|
|
||||||
setTimeout(next, time)
|
|
||||||
|
|
||||||
router.use(timer())
|
|
||||||
|
|
||||||
router.get('/course/list', (req, res) => {
|
router.get('/course/list', (req, res) => {
|
||||||
res.send(require('../mocks/courses/list/success.json'))
|
res.send(require('../mocks/courses/list/success.json'))
|
||||||
})
|
})
|
||||||
@ -30,9 +23,7 @@ router.post('/lesson', (req, res) => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
router.post('/lesson/access-code', (req, res) => {
|
router.post('/lesson/access-code', (req, res) => {
|
||||||
const answer = fs.readFileSync(
|
const answer = fs.readFileSync(path.resolve(__dirname, '../mocks/lessons/access-code/create/success.json'))
|
||||||
path.resolve(__dirname, '../mocks/lessons/access-code/create/success.json'),
|
|
||||||
)
|
|
||||||
// res.send(require('../mocks/lessons/access-code/create/success.json'))
|
// res.send(require('../mocks/lessons/access-code/create/success.json'))
|
||||||
res.send(answer)
|
res.send(answer)
|
||||||
})
|
})
|
||||||
|
|||||||
@ -23,29 +23,6 @@
|
|||||||
"startDt": "2024-03-02T15:37:05.907Z",
|
"startDt": "2024-03-02T15:37:05.907Z",
|
||||||
"created": "2024-03-02T15:37:05.908Z",
|
"created": "2024-03-02T15:37:05.908Z",
|
||||||
"__v": 2
|
"__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
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user