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 +142 -30
7 changed files with 142 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 97e940b873 - Show all commits

29
package-lock.json generated
View File

@ -9,6 +9,7 @@
"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",
@ -24,6 +25,7 @@
"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",
@ -2213,6 +2215,18 @@
"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",
@ -8546,6 +8560,21 @@
"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",

2
package.json
View File

@ -20,6 +20,7 @@
"@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",
@ -35,6 +36,7 @@
"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",

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

@ -25,6 +25,7 @@ import {
FormHelperText, FormHelperText,
Center, Center,
FormErrorMessage, FormErrorMessage,
useToast,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { useForm, Controller } from 'react-hook-form' import { useForm, Controller } from 'react-hook-form'
@ -41,25 +42,50 @@ interface NewCourseForm {
} }
const CoursesList = () => { const CoursesList = () => {
const toast = useToast()
const user = useAppSelector((s) => s.user) const user = useAppSelector((s) => s.user)
const { data, isLoading, error } = api.useCoursesListQuery() const { data, isLoading } = api.useCoursesListQuery()
const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation() const [createUpdateCourse, crucQuery] = api.useCreateUpdateCourseMutation()
const [value, setValue] = useState('')
const [showForm, setShowForm] = useState(false) const [showForm, setShowForm] = useState(false)
const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState< const [courseDetailsOpenedId, setCourseDetailsOpenedId] = useState<
string | null string | null
>(null) >(null)
const toastRef = useRef(null)
const { control, handleSubmit, reset } = useForm<NewCourseForm>({ const {
mode: 'all', control,
handleSubmit,
reset,
formState: { errors },
getValues,
} = useForm<NewCourseForm>({
defaultValues: {
startDt: '',
name: '',
},
}) })
const onSubmit = ({ startDt, name }) => { const onSubmit = ({ startDt, name }) => {
toastRef.current = toast({
title: 'Отправляем',
status: 'loading',
duration: 9000,
})
createUpdateCourse({ name, startDt }) createUpdateCourse({ name, startDt })
} }
useEffect(() => { useEffect(() => {
if (crucQuery.isSuccess) { if (crucQuery.isSuccess) {
const values = getValues()
if (toastRef.current) {
toast.update(toastRef.current, {
title: 'Курс создан.',
description: `Курс ${values.name} успешно создан`,
status: 'success',
duration: 9000,
isClosable: true,
})
}
reset() reset()
} }
}, [crucQuery.isSuccess]) }, [crucQuery.isSuccess])
@ -84,7 +110,7 @@ const CoursesList = () => {
<Container maxW="container.xl"> <Container maxW="container.xl">
{isTeacher(user) && ( {isTeacher(user) && (
<Box mt="15" mb="15"> <Box mt="15" mb="15">
{!showForm ? ( {showForm ? (
<Card align="left"> <Card align="left">
<CardHeader display="flex"> <CardHeader display="flex">
<Heading as="h2" mt="0"> <Heading as="h2" mt="0">
@ -99,18 +125,22 @@ const CoursesList = () => {
control={control} control={control}
name="startDt" name="startDt"
rules={{ required: 'Обязательное поле' }} rules={{ required: 'Обязательное поле' }}
render={({ field, fieldState }) => ( render={({ field }) => (
<FormControl isRequired> <FormControl
isRequired
isInvalid={Boolean(errors.startDt)}
>
<FormLabel>Дата начала</FormLabel> <FormLabel>Дата начала</FormLabel>
<Input <Input
{...field} {...field}
required={false}
placeholder="Select Date and Time" placeholder="Select Date and Time"
size="md" size="md"
type="datetime-local" type="datetime-local"
/> />
{fieldState.error ? ( {errors.startDt ? (
<FormErrorMessage> <FormErrorMessage>
{fieldState.error.message} {errors.startDt?.message}
</FormErrorMessage> </FormErrorMessage>
) : ( ) : (
<FormHelperText> <FormHelperText>
@ -120,20 +150,37 @@ const CoursesList = () => {
</FormControl> </FormControl>
)} )}
/> />
<FormControl isRequired> <Controller
<FormLabel>Название новой лекции:</FormLabel> control={control}
<Input name="name"
value={value} rules={{
onChange={handleChange} required: 'Обязательное поле',
placeholder="КФУ-24-2" }}
size="md" render={({ field }) => (
/> <FormControl
<FormHelperText></FormHelperText> isRequired
</FormControl> 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}> <Box mt={10}>
<Button <Button
size="lg" size="lg"
type="submit"
leftIcon={<AddIcon />} leftIcon={<AddIcon />}
colorScheme="blue" colorScheme="blue"
> >
@ -142,8 +189,8 @@ const CoursesList = () => {
</Box> </Box>
</VStack> </VStack>
{crcQuery?.error && ( {crucQuery?.error && (
<ErrorSpan>{(crcQuery?.error as any).error}</ErrorSpan> <ErrorSpan>{(crucQuery?.error as any).error}</ErrorSpan>
)} )}
</form> </form>
</CardBody> </CardBody>

16
src/pages/lesson-details.tsx
View File

@ -84,18 +84,18 @@ const LessonDetail = () => {
<StartWrapper> <StartWrapper>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>
<Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}> <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
Журнал Журнал
</Link> </BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbItem> <BreadcrumbItem>
<Link <BreadcrumbLink
as={BreadcrumbLink} as={Link}
to={`${getNavigationsValue('journal.main')}/lessons-list/${courseId}`} to={`${getNavigationsValue('journal.main')}/lessons-list/${courseId}`}
> >
Курс Курс
</Link> </BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
<BreadcrumbItem isCurrentPage> <BreadcrumbItem isCurrentPage>
@ -103,8 +103,10 @@ const LessonDetail = () => {
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<h1 style={{ width: '70%' }} >Тема занятия - {accessCode?.body?.lesson?.name}</h1> <h1 style={{ width: '70%' }}>
<span style={{ display: 'flex' }}> Тема занятия - {accessCode?.body?.lesson?.name}
</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}` : ''}{' '}

2
src/pages/lesson-list.tsx
View File

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

11
stubs/api/index.js
View File

@ -2,6 +2,13 @@ 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'))
}) })
@ -23,7 +30,9 @@ router.post('/lesson', (req, res) => {
}) })
router.post('/lesson/access-code', (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(require('../mocks/lessons/access-code/create/success.json'))
res.send(answer) res.send(answer)
}) })

23
stubs/mocks/courses/list/success.json
View File

@ -23,6 +23,29 @@
"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
} }
] ]
} }