bro-js/journal.pl
bro-js/journal.pl
7
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Merged
primakov merged 2 commits from lection-create-form into master 2024-03-28 22:00:23 +03:00
Conversation 0 Commits 2 Files Changed 9 +352 -205
3 changed files with 352 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit b858d70675 - Show all commits

133
src/app.tsx
View File

@ -4,6 +4,7 @@ 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';
@ -11,72 +12,74 @@ dayjs.locale('ru', ruLocale);
const App = ({ store }) => { const App = ({ store }) => {
return( return(
<BrowserRouter> <ChakraProvider>
<Helmet> <BrowserRouter>
<meta name="viewport" content="width=device-width, user-scalable=no" /> <Helmet>
<title>Журнал</title> <meta name="viewport" content="width=device-width, user-scalable=no" />
</Helmet> <title>Журнал</title>
<Global </Helmet>
styles={css` <Global
* { box-sizing: border-box; } styles={css`
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),
rgba(255, 255, 255, 0) 65% rgb(239 244 246) 65%
); /* rgba(255, 255, 255, 0) 65% */
height: 100%; );
font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif; height: 100%;
font-weight: 600; font-family: KiyosunaSans, Montserrat, RFKrabuler, sans-serif;
} font-weight: 600;
#app { }
height: 100%; #app {
overflow-y: auto; height: 100%;
} 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>
) )
} }

80
src/dashboard.tsx
View File

@ -1,34 +1,82 @@
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 }) => <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 }) => ( export const Dashboard = ({ store }) => (
<Provider store={store}> <Provider store={store}>
<Routes> <Routes>
<Route path={getNavigationsValue('journal.main')} element={<Wrapper><CourseListPage /></Wrapper>} /> <Route
<Route path={`${getNavigationsValue('journal.main')}/lessons-list/:courseId`} element={<Wrapper><LessonListPage /></Wrapper>} /> path={getNavigationsValue('journal.main')}
<Route path={`${getNavigationsValue('journal.main')}/u/:lessonId/:accessId`} element={<Wrapper><UserPage /></Wrapper>} /> element={
<Route path={`${getNavigationsValue('journal.main')}/lesson/:courseId/:lessonId`} element={<Wrapper><LessonDetailsPage /></Wrapper>} /> <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>
); )

344
src/pages/course-list.tsx
View File

@ -1,8 +1,7 @@
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 } from 'react-router-dom' import { Link as ConnectedLink } from 'react-router-dom'
import { getConfigValue, getNavigationsValue } from '@ijl/cli' import { getNavigationsValue } from '@ijl/cli'
import { import {
Box, Box,
CardHeader, CardHeader,
@ -12,155 +11,252 @@ import {
Stack, Stack,
StackDivider, StackDivider,
Button, Button,
UnorderedList, Card,
Heading, Heading,
Tooltip, Tooltip,
Spinner,
Container,
VStack,
Link,
Input,
CloseButton,
FormControl,
FormLabel,
FormHelperText,
Center,
FormErrorMessage,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { useForm, Controller } from 'react-hook-form'
import { import { ErrorSpan, MainWrapper } from './style'
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 user = useAppSelector((s) => s.user) const user = useAppSelector((s) => s.user)
const { data, isLoading, error } = api.useCoursesListQuery() const { data, isLoading, error } = api.useCoursesListQuery()
const [createCourse, crcQuery] = api.useCreateUpdateCourseMutation() const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
const [value, setValue] = useState('') const [value, setValue] = useState('')
const [showForm, setShowForm] = useState(false) const [showForm, setShowForm] = useState(false)
const [showDetails, setShowDetails] = useState(false) const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
string | null
>(null)
const handleChange = useCallback( const { control, handleSubmit, reset } = useForm<NewCourseForm>({
(event) => { mode: 'all',
setValue(event.target.value.toUpperCase()) })
},
[setValue], const onSubmit = ({ startDt, name }) => {
) createUpdateCourse({ name, startDt })
const handleSubmit = useCallback( }
(event) => {
event.preventDefault()
createCourse({ name: value })
},
[value],
)
useEffect(() => { useEffect(() => {
if (crcQuery.isSuccess) { if (crucQuery.isSuccess) {
setValue('') 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 ( return (
<MainWrapper> <Container maxW="container.xl">
<StartWrapper> {isTeacher(user) && (
{isTeacher(user) && ( <Box mt="15" mb="15">
<> {!showForm ? (
{showForm ? ( <Card align="left">
<Papper> <CardHeader display="flex">
<Cross role="button" onClick={() => setShowForm(false)}> <Heading as="h2" mt="0">
X Создание курса
</Cross> </Heading>
<form onSubmit={handleSubmit}> <CloseButton ml="auto" onClick={() => setShowForm(false)} />
<InputWrapper> </CardHeader>
<InputLabel htmlFor="input"> <CardBody>
Название новой лекции: <form onSubmit={handleSubmit(onSubmit)}>
</InputLabel> <VStack spacing={10} align="left">
<InputElement <Controller
value={value} control={control}
onChange={handleChange} name="startDt"
id="input" rules={{ required: 'Обязательное поле' }}
type="text" render={({ field, fieldState }) => (
autoComplete="off" <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"> <FormControl isRequired>
<ArrowImg src={arrow} /> <FormLabel>Название новой лекции:</FormLabel>
</IconButton> <Input
</InputWrapper> 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 && ( {crcQuery?.error && (
<ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan> <ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan>
)} )}
</form> </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> <>
)} <Heading as="h3" mt={4} mb={3} size="lg">
</> Список занятий:
)}
<UnorderedList spacing={3}>
{data?.body?.map((course) => (
<StyledCard key={course._id} align="left">
<CardHeader>
<Heading as="h2" mt="0">
{course.name}
</Heading> </Heading>
</CardHeader> <Stack>
{showDetails && ( {lessonList.data?.body?.map((lesson) => (
<CardBody mt="16px"> <Link
<Stack divider={<StackDivider />} spacing="8px"> as={ConnectedLink}
<Box as="span" textAlign="left"> to={
{`Дата начала курса - ${dayjs(course.startDt).format('DD MMMM YYYYг.')}`} isTeacher(user)
</Box> ? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`
<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"
> >
<img src={moreDetails} alt="Просмотреть детали" /> {lesson.name}
</Button> </Link>
</Tooltip> ))}
</ButtonGroup> </Stack>
</CardFooter> </>
</StyledCard> )}
))} </Stack>
</UnorderedList> </CardBody>
</StartWrapper> )}
</MainWrapper> <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>
) )
} }