Compare commits
10 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
0034704af6 | ||
|
|
3dfd854a4c | ||
|
|
6b903b4d54 | ||
|
|
c3de9692d8 | ||
|
|
b2898ef4b3 | ||
|
|
26c8a477c3 | ||
|
|
c9a64ccbef | ||
|
|
250feff2f4 | ||
|
|
efc359ce7e | ||
|
|
5911cdf8a8 |
@@ -9,6 +9,8 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
navigations: {
|
navigations: {
|
||||||
'journal.main': '/journal.pl',
|
'journal.main': '/journal.pl',
|
||||||
|
'exam.main': '/exam',
|
||||||
|
'link.exam.details': '/details/:courseId/:examId'
|
||||||
},
|
},
|
||||||
features: {
|
features: {
|
||||||
journal: {
|
journal: {
|
||||||
|
|||||||
4
package-lock.json
generated
4
package-lock.json
generated
@@ -1,12 +1,12 @@
|
|||||||
{
|
{
|
||||||
"name": "journal.pl",
|
"name": "journal.pl",
|
||||||
"version": "3.2.0",
|
"version": "3.4.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "journal.pl",
|
"name": "journal.pl",
|
||||||
"version": "3.2.0",
|
"version": "3.4.0",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@brojs/cli": "^0.0.4-beta.0",
|
"@brojs/cli": "^0.0.4-beta.0",
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "journal.pl",
|
"name": "journal.pl",
|
||||||
"version": "3.2.0",
|
"version": "3.4.0",
|
||||||
"description": "bro-js platform journal ui repo",
|
"description": "bro-js platform journal ui repo",
|
||||||
"main": "./src/index.tsx",
|
"main": "./src/index.tsx",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@@ -40,8 +40,8 @@ export const api = createApi({
|
|||||||
providesTags: ['CourseList'],
|
providesTags: ['CourseList'],
|
||||||
}),
|
}),
|
||||||
createUpdateCourse: builder.mutation<
|
createUpdateCourse: builder.mutation<
|
||||||
BaseResponse<Course>,
|
BaseResponse<Course>,
|
||||||
Partial<Course> & Pick<Course, 'name'>
|
Partial<Course> & Pick<Course, 'name'>
|
||||||
>({
|
>({
|
||||||
query: (course) => ({
|
query: (course) => ({
|
||||||
url: '/course',
|
url: '/course',
|
||||||
@@ -54,8 +54,8 @@ export const api = createApi({
|
|||||||
query: (courseId) => `/course/students/${courseId}`,
|
query: (courseId) => `/course/students/${courseId}`,
|
||||||
}),
|
}),
|
||||||
manualAddStudent: builder.mutation<
|
manualAddStudent: builder.mutation<
|
||||||
BaseResponse<void>,
|
BaseResponse<void>,
|
||||||
{ lessonId: string; user: User }
|
{ lessonId: string; user: User }
|
||||||
>({
|
>({
|
||||||
query: ({ lessonId, user }) => ({
|
query: ({ lessonId, user }) => ({
|
||||||
url: `/lesson/add-student/${lessonId}`,
|
url: `/lesson/add-student/${lessonId}`,
|
||||||
@@ -69,8 +69,8 @@ export const api = createApi({
|
|||||||
providesTags: ['LessonList'],
|
providesTags: ['LessonList'],
|
||||||
}),
|
}),
|
||||||
createLesson: builder.mutation<
|
createLesson: builder.mutation<
|
||||||
BaseResponse<Lesson>,
|
BaseResponse<Lesson>,
|
||||||
Partial<Lesson> & Pick<Lesson, 'name' | 'date'> & { courseId: string }
|
Partial<Lesson> & Pick<Lesson, 'name' | 'date'> & { courseId: string }
|
||||||
>({
|
>({
|
||||||
query: (data) => ({
|
query: (data) => ({
|
||||||
url: '/lesson',
|
url: '/lesson',
|
||||||
@@ -99,8 +99,8 @@ export const api = createApi({
|
|||||||
}),
|
}),
|
||||||
|
|
||||||
createAccessCode: builder.query<
|
createAccessCode: builder.query<
|
||||||
BaseResponse<AccessCode>,
|
BaseResponse<AccessCode>,
|
||||||
{ lessonId: string }
|
{ lessonId: string }
|
||||||
>({
|
>({
|
||||||
query: ({ lessonId }) => ({
|
query: ({ lessonId }) => ({
|
||||||
url: '/lesson/access-code',
|
url: '/lesson/access-code',
|
||||||
@@ -109,8 +109,8 @@ export const api = createApi({
|
|||||||
}),
|
}),
|
||||||
}),
|
}),
|
||||||
getAccess: builder.query<
|
getAccess: builder.query<
|
||||||
BaseResponse<{ user: UserData; accessCode: AccessCode }>,
|
BaseResponse<{ user: UserData; accessCode: AccessCode }>,
|
||||||
{ accessCode: string }
|
{ accessCode: string }
|
||||||
>({
|
>({
|
||||||
query: ({ accessCode }) => ({
|
query: ({ accessCode }) => ({
|
||||||
url: `/lesson/access-code/${accessCode}`,
|
url: `/lesson/access-code/${accessCode}`,
|
||||||
@@ -126,6 +126,7 @@ export const api = createApi({
|
|||||||
query: (courseId) => ({
|
query: (courseId) => ({
|
||||||
url: `/course/toggle-exam-with-jury/${courseId}`,
|
url: `/course/toggle-exam-with-jury/${courseId}`,
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
|
body: {},
|
||||||
}),
|
}),
|
||||||
invalidatesTags: ['Course']
|
invalidatesTags: ['Course']
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
/* eslint-disable react/display-name */
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
|
|
||||||
@@ -24,7 +25,7 @@ export const mount = async (Сomponent, element = document.getElementById('app')
|
|||||||
}
|
}
|
||||||
const store = createStore({ user });
|
const store = createStore({ user });
|
||||||
|
|
||||||
const rootElement = ReactDOM.createRoot(element);
|
rootElement = ReactDOM.createRoot(element);
|
||||||
rootElement.render(<Сomponent store={store} />);
|
rootElement.render(<Сomponent store={store} />);
|
||||||
|
|
||||||
if(module.hot) {
|
if(module.hot) {
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { Link as ConnectedLink } from 'react-router-dom'
|
import { Link as ConnectedLink } from 'react-router-dom'
|
||||||
import { getNavigationsValue } from '@brojs/cli'
|
import { getNavigationsValue, getHistory } from '@brojs/cli'
|
||||||
import {
|
import {
|
||||||
Stack,
|
Stack,
|
||||||
Heading,
|
Heading,
|
||||||
@@ -15,11 +15,14 @@ import { useAppSelector } from '../../__data__/store'
|
|||||||
import { isTeacher } from '../../utils/user'
|
import { isTeacher } from '../../utils/user'
|
||||||
import { PopulatedCourse } from '../../__data__/model'
|
import { PopulatedCourse } from '../../__data__/model'
|
||||||
import { api } from '../../__data__/api/api'
|
import { api } from '../../__data__/api/api'
|
||||||
|
import { LinkIcon } from '@chakra-ui/icons'
|
||||||
|
|
||||||
type CourseDetailsProps = {
|
type CourseDetailsProps = {
|
||||||
populatedCourse: PopulatedCourse;
|
populatedCourse: PopulatedCourse;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const history = getHistory()
|
||||||
|
|
||||||
export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
|
export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
|
||||||
const user = useAppSelector((s) => s.user)
|
const user = useAppSelector((s) => s.user)
|
||||||
const exam = populatedCourse.examWithJury
|
const exam = populatedCourse.examWithJury
|
||||||
@@ -28,7 +31,20 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Heading as="h3" mt={4} mb={3} size="lg">
|
<Heading as="h3" mt={4} mb={3} size="lg">
|
||||||
Экзамен:
|
Экзамен: {exam?.name} {exam && <Tooltip label="Начать экзамен" fontSize="12px" top="16px">
|
||||||
|
<Button
|
||||||
|
leftIcon={<LinkIcon />}
|
||||||
|
as={'a'}
|
||||||
|
colorScheme="blue"
|
||||||
|
href={getNavigationsValue('exam.main') + getNavigationsValue('link.exam.details').replace(':courseId', populatedCourse.id).replace(':examId', exam.id)}
|
||||||
|
onClick={event => {
|
||||||
|
event.preventDefault();
|
||||||
|
history.push(getNavigationsValue('exam.main') + getNavigationsValue('link.exam.details').replace(':courseId', populatedCourse.id).replace(':examId', exam.id))
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Открыть
|
||||||
|
</Button>
|
||||||
|
</Tooltip>}
|
||||||
</Heading>
|
</Heading>
|
||||||
{!Boolean(exam) && (
|
{!Boolean(exam) && (
|
||||||
<>
|
<>
|
||||||
@@ -36,7 +52,7 @@ export const CourseDetails = ({ populatedCourse }: CourseDetailsProps) => {
|
|||||||
Не задан
|
Не задан
|
||||||
</Heading>
|
</Heading>
|
||||||
<Box mt={10}>
|
<Box mt={10}>
|
||||||
<Tooltip label="Детали" fontSize="12px" top="16px">
|
<Tooltip label="Создать экзамен с жюри" fontSize="12px" top="16px">
|
||||||
<Button
|
<Button
|
||||||
colorScheme="blue"
|
colorScheme="blue"
|
||||||
mt={["16px", 0]}
|
mt={["16px", 0]}
|
||||||
|
|||||||
@@ -190,7 +190,7 @@ export const CoursesList = () => {
|
|||||||
<VStack as="ul" align="stretch">
|
<VStack as="ul" align="stretch">
|
||||||
{data?.body?.map((c) => (
|
{data?.body?.map((c) => (
|
||||||
<CourseCard
|
<CourseCard
|
||||||
key={c._id}
|
key={c.id}
|
||||||
course={c}
|
course={c}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
|
|||||||
144
src/pages/lesson-list/components/item.tsx
Normal file
144
src/pages/lesson-list/components/item.tsx
Normal file
@@ -0,0 +1,144 @@
|
|||||||
|
import React, { useEffect, useRef, useState } from 'react'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import { Link } from 'react-router-dom'
|
||||||
|
import { getNavigationsValue, getFeatures } from '@brojs/cli'
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Tr,
|
||||||
|
Td,
|
||||||
|
Menu,
|
||||||
|
MenuButton,
|
||||||
|
MenuItem,
|
||||||
|
MenuList,
|
||||||
|
useToast,
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
import { EditIcon } from '@chakra-ui/icons'
|
||||||
|
|
||||||
|
import { qrCode } from '../../../assets'
|
||||||
|
|
||||||
|
import { LessonForm } from './lessons-form'
|
||||||
|
import { api } from '../../../__data__/api/api'
|
||||||
|
|
||||||
|
const features = getFeatures('journal')
|
||||||
|
const groupByDate = features?.['group.by.date']
|
||||||
|
|
||||||
|
type ItemProps = {
|
||||||
|
id: string
|
||||||
|
date: string
|
||||||
|
name: string
|
||||||
|
isTeacher: boolean
|
||||||
|
courseId: string
|
||||||
|
setlessonToDelete(): void
|
||||||
|
students: unknown[]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const Item: React.FC<ItemProps> = ({
|
||||||
|
id,
|
||||||
|
date,
|
||||||
|
name,
|
||||||
|
isTeacher,
|
||||||
|
courseId,
|
||||||
|
setlessonToDelete,
|
||||||
|
students,
|
||||||
|
}) => {
|
||||||
|
const [edit, setEdit] = useState(false)
|
||||||
|
const toastRef = useRef(null)
|
||||||
|
const toast = useToast()
|
||||||
|
const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation()
|
||||||
|
const createdLessonRef = useRef(null)
|
||||||
|
|
||||||
|
const onSubmit = (lessonData) => {
|
||||||
|
toastRef.current = toast({
|
||||||
|
title: 'Отправляем',
|
||||||
|
status: 'loading',
|
||||||
|
duration: 9000,
|
||||||
|
})
|
||||||
|
createdLessonRef.current = lessonData
|
||||||
|
if (navigator.onLine) {
|
||||||
|
updateLesson(lessonData)
|
||||||
|
} else {
|
||||||
|
toast.update(toastRef.current, {
|
||||||
|
title: 'Отсутствует интернет',
|
||||||
|
status: 'error',
|
||||||
|
duration: 3000
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (updateLessonRqst.isSuccess) {
|
||||||
|
const toastProps = {
|
||||||
|
title: 'Лекция Обновлена',
|
||||||
|
description: `Лекция ${createdLessonRef.current?.name} успешно обновлена`,
|
||||||
|
status: 'success' as const,
|
||||||
|
duration: 9000,
|
||||||
|
isClosable: true,
|
||||||
|
}
|
||||||
|
if (toastRef.current) toast.update(toastRef.current, toastProps)
|
||||||
|
else toast(toastProps)
|
||||||
|
setEdit(false)
|
||||||
|
}
|
||||||
|
}, [updateLessonRqst.isSuccess])
|
||||||
|
|
||||||
|
if (edit && isTeacher) {
|
||||||
|
return (
|
||||||
|
<Tr>
|
||||||
|
<Td colSpan={5}>
|
||||||
|
<LessonForm
|
||||||
|
isLoading={updateLessonRqst.isLoading}
|
||||||
|
error={(updateLessonRqst.error as any)?.error}
|
||||||
|
onSubmit={onSubmit}
|
||||||
|
onCancel={() => {
|
||||||
|
setEdit(false)
|
||||||
|
}}
|
||||||
|
lesson={{ id, name, date }}
|
||||||
|
title={'Редактирование лекции'}
|
||||||
|
nameButton={'Сохранить'}
|
||||||
|
/>
|
||||||
|
</Td>
|
||||||
|
</Tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Tr>
|
||||||
|
{isTeacher && (
|
||||||
|
<Td>
|
||||||
|
<Link
|
||||||
|
to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${id}`}
|
||||||
|
style={{ display: 'flex' }}
|
||||||
|
>
|
||||||
|
<img width={24} src={qrCode} style={{ margin: '0 auto' }} />
|
||||||
|
</Link>
|
||||||
|
</Td>
|
||||||
|
)}
|
||||||
|
<Td textAlign="center">
|
||||||
|
{dayjs(date).format(groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
|
||||||
|
</Td>
|
||||||
|
<Td>{name}</Td>
|
||||||
|
{isTeacher && (
|
||||||
|
<Td>
|
||||||
|
{!edit && (
|
||||||
|
<Menu>
|
||||||
|
<MenuButton as={Button}>
|
||||||
|
<EditIcon />
|
||||||
|
</MenuButton>
|
||||||
|
<MenuList>
|
||||||
|
<MenuItem
|
||||||
|
onClick={() => {
|
||||||
|
setEdit(true)
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Edit
|
||||||
|
</MenuItem>
|
||||||
|
<MenuItem onClick={setlessonToDelete}>Delete</MenuItem>
|
||||||
|
</MenuList>
|
||||||
|
</Menu>
|
||||||
|
)}
|
||||||
|
{edit && <Button onClick={setlessonToDelete}>Сохранить</Button>}
|
||||||
|
</Td>
|
||||||
|
)}
|
||||||
|
<Td isNumeric>{students.length}</Td>
|
||||||
|
</Tr>
|
||||||
|
)
|
||||||
|
}
|
||||||
45
src/pages/lesson-list/components/lesson-items.tsx
Normal file
45
src/pages/lesson-list/components/lesson-items.tsx
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
import {
|
||||||
|
Tr,
|
||||||
|
Td,
|
||||||
|
} from '@chakra-ui/react'
|
||||||
|
|
||||||
|
import { Lesson } from '../../../__data__/model'
|
||||||
|
|
||||||
|
import { Item } from './item'
|
||||||
|
|
||||||
|
type LessonItemProps = {
|
||||||
|
date: string
|
||||||
|
lessons: Lesson[]
|
||||||
|
isTeacher: boolean
|
||||||
|
courseId: string
|
||||||
|
setlessonToDelete(lesson: Lesson): void
|
||||||
|
}
|
||||||
|
|
||||||
|
export const LessonItems: React.FC<LessonItemProps> = ({
|
||||||
|
date,
|
||||||
|
lessons,
|
||||||
|
isTeacher,
|
||||||
|
courseId,
|
||||||
|
setlessonToDelete,
|
||||||
|
}) => (
|
||||||
|
<>
|
||||||
|
{date && (
|
||||||
|
<Tr>
|
||||||
|
<Td colSpan={isTeacher ? 5 : 3}>
|
||||||
|
{dayjs(date).format('DD MMMM YYYY')}
|
||||||
|
</Td>
|
||||||
|
</Tr>
|
||||||
|
)}
|
||||||
|
{lessons.map((lesson) => (
|
||||||
|
<Item
|
||||||
|
key={lesson.id}
|
||||||
|
{...lesson}
|
||||||
|
setlessonToDelete={() => setlessonToDelete(lesson)}
|
||||||
|
courseId={courseId}
|
||||||
|
isTeacher={isTeacher}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</>
|
||||||
|
)
|
||||||
@@ -1,19 +1,19 @@
|
|||||||
import React from 'react'
|
import React from 'react'
|
||||||
import { useForm, Controller } from 'react-hook-form'
|
import { useForm, Controller } from 'react-hook-form'
|
||||||
import {
|
import {
|
||||||
Box,
|
Box,
|
||||||
Card,
|
Card,
|
||||||
CardBody,
|
CardBody,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
Heading,
|
Heading,
|
||||||
Button,
|
Button,
|
||||||
CloseButton,
|
CloseButton,
|
||||||
VStack,
|
VStack,
|
||||||
FormControl,
|
FormControl,
|
||||||
FormLabel,
|
FormLabel,
|
||||||
FormHelperText,
|
FormHelperText,
|
||||||
FormErrorMessage,
|
FormErrorMessage,
|
||||||
Input,
|
Input,
|
||||||
} from '@chakra-ui/react'
|
} from '@chakra-ui/react'
|
||||||
import { AddIcon } from '@chakra-ui/icons'
|
import { AddIcon } from '@chakra-ui/icons'
|
||||||
|
|
||||||
@@ -22,116 +22,119 @@ import { Lesson } from '../../../__data__/model'
|
|||||||
import { ErrorSpan } from '../style'
|
import { ErrorSpan } from '../style'
|
||||||
|
|
||||||
interface NewLessonForm {
|
interface NewLessonForm {
|
||||||
name: string;
|
name: string
|
||||||
date: string;
|
date: string
|
||||||
}
|
}
|
||||||
|
|
||||||
interface LessonFormProps {
|
interface LessonFormProps {
|
||||||
lesson?: Partial<Lesson>
|
lesson?: Partial<Lesson>
|
||||||
isLoading: boolean
|
isLoading: boolean
|
||||||
onCancel: () => void
|
onCancel: () => void
|
||||||
onSubmit: (lesson: Lesson) => void
|
onSubmit: (lesson: Lesson) => void
|
||||||
error?: string
|
error?: string
|
||||||
title: string
|
title: string
|
||||||
nameButton: string
|
nameButton: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LessonForm = ({
|
export const LessonForm = ({
|
||||||
lesson,
|
lesson,
|
||||||
isLoading,
|
isLoading,
|
||||||
onCancel,
|
onCancel,
|
||||||
onSubmit,
|
onSubmit,
|
||||||
error,
|
error,
|
||||||
title,
|
title,
|
||||||
nameButton,
|
nameButton,
|
||||||
}: LessonFormProps) => {
|
}: LessonFormProps) => {
|
||||||
const {
|
const {
|
||||||
control,
|
control,
|
||||||
handleSubmit,
|
handleSubmit,
|
||||||
reset,
|
reset,
|
||||||
formState: { errors },
|
formState: { errors },
|
||||||
} = useForm<NewLessonForm>({
|
} = useForm<NewLessonForm>({
|
||||||
defaultValues: (lesson && { ...lesson, date: dateToCalendarFormat(lesson.date) }) || {
|
defaultValues: (lesson && {
|
||||||
name: '',
|
...lesson,
|
||||||
date: dateToCalendarFormat(),
|
date: dateToCalendarFormat(lesson.date),
|
||||||
},
|
}) || {
|
||||||
})
|
name: '',
|
||||||
|
date: dateToCalendarFormat(),
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Card align="left">
|
<Card align="left">
|
||||||
<CardHeader display="flex">
|
<CardHeader display="flex">
|
||||||
<Heading as="h2" mt="0">
|
<Heading as="h2" mt="0">
|
||||||
{title}
|
{title}
|
||||||
</Heading>
|
</Heading>
|
||||||
<CloseButton
|
<CloseButton
|
||||||
ml="auto"
|
ml="auto"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
reset()
|
reset()
|
||||||
onCancel()
|
onCancel()
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBody>
|
<CardBody>
|
||||||
<form onSubmit={handleSubmit(onSubmit)}>
|
<form onSubmit={handleSubmit(onSubmit)}>
|
||||||
<VStack spacing="10" align="left">
|
<VStack spacing="10" align="left">
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
name="date"
|
name="date"
|
||||||
rules={{ required: 'Обязательное поле' }}
|
rules={{ required: 'Обязательное поле' }}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormControl>
|
<FormControl>
|
||||||
<FormLabel>Дата</FormLabel>
|
<FormLabel>Дата</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
{...field}
|
{...field}
|
||||||
required={false}
|
required={false}
|
||||||
placeholder="Укажите дату лекции"
|
placeholder="Укажите дату лекции"
|
||||||
size="md"
|
size="md"
|
||||||
type="datetime-local"
|
type="datetime-local"
|
||||||
|
/>
|
||||||
|
{errors.date ? (
|
||||||
|
<FormErrorMessage>{errors.date?.message}</FormErrorMessage>
|
||||||
|
) : (
|
||||||
|
<FormHelperText>Укажите дату и время лекции</FormHelperText>
|
||||||
|
)}
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
{errors.date ? (
|
|
||||||
<FormErrorMessage>{errors.date?.message}</FormErrorMessage>
|
|
||||||
) : (
|
|
||||||
<FormHelperText>Укажите дату и время лекции</FormHelperText>
|
|
||||||
)}
|
|
||||||
</FormControl>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
name="name"
|
name="name"
|
||||||
rules={{ required: 'Обязательное поле' }}
|
rules={{ required: 'Обязательное поле' }}
|
||||||
render={({ field }) => (
|
render={({ field }) => (
|
||||||
<FormControl isRequired isInvalid={Boolean(errors.name)}>
|
<FormControl isRequired isInvalid={Boolean(errors.name)}>
|
||||||
<FormLabel>Название новой лекции:</FormLabel>
|
<FormLabel>Название новой лекции:</FormLabel>
|
||||||
<Input
|
<Input
|
||||||
{...field}
|
{...field}
|
||||||
required={false}
|
required={false}
|
||||||
placeholder="Название лекции"
|
placeholder="Название лекции"
|
||||||
size="md"
|
size="md"
|
||||||
|
/>
|
||||||
|
{errors.name && (
|
||||||
|
<FormErrorMessage>{errors.name.message}</FormErrorMessage>
|
||||||
|
)}
|
||||||
|
</FormControl>
|
||||||
|
)}
|
||||||
/>
|
/>
|
||||||
{errors.name && (
|
<Box mt="10">
|
||||||
<FormErrorMessage>{errors.name.message}</FormErrorMessage>
|
<Button
|
||||||
)}
|
size="lg"
|
||||||
</FormControl>
|
type="submit"
|
||||||
)}
|
leftIcon={<AddIcon />}
|
||||||
/>
|
colorScheme="blue"
|
||||||
<Box mt="10">
|
isLoading={isLoading}
|
||||||
<Button
|
>
|
||||||
size="lg"
|
{nameButton}
|
||||||
type="submit"
|
</Button>
|
||||||
leftIcon={<AddIcon />}
|
</Box>
|
||||||
colorScheme="blue"
|
</VStack>
|
||||||
isLoading={isLoading}
|
|
||||||
>
|
|
||||||
{nameButton}
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
</VStack>
|
|
||||||
|
|
||||||
{error && <ErrorSpan>{error}</ErrorSpan>}
|
{error && <ErrorSpan>{error}</ErrorSpan>}
|
||||||
</form>
|
</form>
|
||||||
</CardBody>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,9 +1,4 @@
|
|||||||
import React, {
|
import React, { useEffect, useMemo, useRef, useState } from 'react'
|
||||||
useEffect,
|
|
||||||
useMemo,
|
|
||||||
useRef,
|
|
||||||
useState,
|
|
||||||
} from 'react'
|
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { Link, useParams } from 'react-router-dom'
|
import { Link, useParams } from 'react-router-dom'
|
||||||
import { getNavigationsValue, getFeatures } from '@brojs/cli'
|
import { getNavigationsValue, getFeatures } from '@brojs/cli'
|
||||||
@@ -22,12 +17,7 @@ import {
|
|||||||
Tr,
|
Tr,
|
||||||
Th,
|
Th,
|
||||||
Tbody,
|
Tbody,
|
||||||
Td,
|
|
||||||
Menu,
|
|
||||||
MenuButton,
|
|
||||||
MenuItem,
|
|
||||||
Text,
|
Text,
|
||||||
MenuList,
|
|
||||||
AlertDialog,
|
AlertDialog,
|
||||||
AlertDialogBody,
|
AlertDialogBody,
|
||||||
AlertDialogContent,
|
AlertDialogContent,
|
||||||
@@ -35,18 +25,18 @@ import {
|
|||||||
AlertDialogHeader,
|
AlertDialogHeader,
|
||||||
AlertDialogOverlay,
|
AlertDialogOverlay,
|
||||||
} from '@chakra-ui/react'
|
} from '@chakra-ui/react'
|
||||||
import { AddIcon, EditIcon } from '@chakra-ui/icons'
|
import { AddIcon } from '@chakra-ui/icons'
|
||||||
|
|
||||||
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 { qrCode } from '../../assets'
|
|
||||||
import { Lesson } from '../../__data__/model'
|
import { Lesson } from '../../__data__/model'
|
||||||
import { XlSpinner } from '../../components/xl-spinner'
|
import { XlSpinner } from '../../components/xl-spinner'
|
||||||
|
|
||||||
import { LessonForm } from './components/lessons-form'
|
import { LessonForm } from './components/lessons-form'
|
||||||
import { BreadcrumbsWrapper } from './style'
|
|
||||||
import { Bar } from './components/bar'
|
import { Bar } from './components/bar'
|
||||||
|
import { LessonItems } from './components/lesson-items'
|
||||||
|
import { BreadcrumbsWrapper } from './style'
|
||||||
|
|
||||||
const features = getFeatures('journal')
|
const features = getFeatures('journal')
|
||||||
|
|
||||||
@@ -67,7 +57,10 @@ const LessonList = () => {
|
|||||||
const toastRef = useRef(null)
|
const toastRef = useRef(null)
|
||||||
const createdLessonRef = useRef(null)
|
const createdLessonRef = useRef(null)
|
||||||
const [editLesson, setEditLesson] = useState<Lesson>(null)
|
const [editLesson, setEditLesson] = useState<Lesson>(null)
|
||||||
const sorted = useMemo(() => [...(data?.body || [])]?.sort((a, b) => a.date > b.date ? 1 : -1), [data, data?.body])
|
const sorted = useMemo(
|
||||||
|
() => [...(data?.body || [])]?.sort((a, b) => (a.date > b.date ? 1 : -1)),
|
||||||
|
[data, data?.body],
|
||||||
|
)
|
||||||
|
|
||||||
const lessonCalc = useMemo(() => {
|
const lessonCalc = useMemo(() => {
|
||||||
if (!isSuccess) {
|
if (!isSuccess) {
|
||||||
@@ -95,7 +88,7 @@ const LessonList = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return lessonsData.sort((a, b) => a.date < b.date? 1 : -1)
|
return lessonsData.sort((a, b) => (a.date < b.date ? 1 : -1))
|
||||||
}, [groupByDate, isSuccess, sorted])
|
}, [groupByDate, isSuccess, sorted])
|
||||||
|
|
||||||
const onSubmit = (lessonData) => {
|
const onSubmit = (lessonData) => {
|
||||||
@@ -153,8 +146,8 @@ const LessonList = () => {
|
|||||||
if (crLQuery.isSuccess) {
|
if (crLQuery.isSuccess) {
|
||||||
const toastProps = {
|
const toastProps = {
|
||||||
title: 'Лекция создана',
|
title: 'Лекция создана',
|
||||||
description: `Лекция ${createdLessonRef.current.name} успешно создана`,
|
description: `Лекция ${createdLessonRef.current?.name} успешно создана`,
|
||||||
status: 'success' as 'success',
|
status: 'success' as const,
|
||||||
duration: 9000,
|
duration: 9000,
|
||||||
isClosable: true,
|
isClosable: true,
|
||||||
}
|
}
|
||||||
@@ -168,8 +161,8 @@ const LessonList = () => {
|
|||||||
if (updateLessonRqst.isSuccess) {
|
if (updateLessonRqst.isSuccess) {
|
||||||
const toastProps = {
|
const toastProps = {
|
||||||
title: 'Лекция Обновлена',
|
title: 'Лекция Обновлена',
|
||||||
description: `Лекция ${createdLessonRef.current.name} успешно обновлена`,
|
description: `Лекция ${createdLessonRef.current?.name} успешно обновлена`,
|
||||||
status: 'success' as 'success',
|
status: 'success' as const,
|
||||||
duration: 9000,
|
duration: 9000,
|
||||||
isClosable: true,
|
isClosable: true,
|
||||||
}
|
}
|
||||||
@@ -180,7 +173,7 @@ const LessonList = () => {
|
|||||||
}, [updateLessonRqst.isSuccess])
|
}, [updateLessonRqst.isSuccess])
|
||||||
|
|
||||||
if (isLoading) {
|
if (isLoading) {
|
||||||
return <XlSpinner />;
|
return <XlSpinner />
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -213,7 +206,7 @@ const LessonList = () => {
|
|||||||
colorScheme="red"
|
colorScheme="red"
|
||||||
loadingText=""
|
loadingText=""
|
||||||
isLoading={deletingRqst.isLoading}
|
isLoading={deletingRqst.isLoading}
|
||||||
onClick={() => deleteLesson(lessonToDelete._id)}
|
onClick={() => deleteLesson(lessonToDelete.id)}
|
||||||
ml={3}
|
ml={3}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
@@ -240,7 +233,7 @@ const LessonList = () => {
|
|||||||
<Box mt="15" mb="15">
|
<Box mt="15" mb="15">
|
||||||
{showForm ? (
|
{showForm ? (
|
||||||
<LessonForm
|
<LessonForm
|
||||||
key={editLesson?._id}
|
key={editLesson?.id}
|
||||||
isLoading={crLQuery.isLoading}
|
isLoading={crLQuery.isLoading}
|
||||||
onSubmit={onSubmit}
|
onSubmit={onSubmit}
|
||||||
onCancel={() => {
|
onCancel={() => {
|
||||||
@@ -265,7 +258,7 @@ const LessonList = () => {
|
|||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
{barFeature && sorted?.length && (
|
{barFeature && sorted?.length > 1 && (
|
||||||
<Box height="300">
|
<Box height="300">
|
||||||
<Bar
|
<Bar
|
||||||
data={sorted.map((lesson, index) => ({
|
data={sorted.map((lesson, index) => ({
|
||||||
@@ -285,65 +278,23 @@ const LessonList = () => {
|
|||||||
</Th>
|
</Th>
|
||||||
)}
|
)}
|
||||||
<Th textAlign="center" width={1}>
|
<Th textAlign="center" width={1}>
|
||||||
Дата
|
{groupByDate ? 'Время' : 'Дата'}
|
||||||
</Th>
|
</Th>
|
||||||
<Th>Название</Th>
|
<Th width="100%">Название</Th>
|
||||||
{isTeacher(user) && <Th>action</Th>}
|
{isTeacher(user) && <Th>action</Th>}
|
||||||
<Th isNumeric>Отмечено</Th>
|
<Th isNumeric>Отмечено</Th>
|
||||||
</Tr>
|
</Tr>
|
||||||
</Thead>
|
</Thead>
|
||||||
<Tbody>
|
<Tbody>
|
||||||
{lessonCalc?.map(({ data: lessons, date }) => (
|
{lessonCalc?.map(({ data: lessons, date }) => (
|
||||||
<React.Fragment key={date}>
|
<LessonItems
|
||||||
{date && <Tr><Td colSpan={isTeacher(user) ? 5 : 3}>{dayjs(date).format('DD MMMM YYYY')}</Td></Tr>}
|
courseId={courseId}
|
||||||
{lessons.map((lesson) => (
|
date={date}
|
||||||
<Tr key={lesson._id}>
|
isTeacher={isTeacher(user)}
|
||||||
{isTeacher(user) && (
|
lessons={lessons}
|
||||||
<Td>
|
setlessonToDelete={setlessonToDelete}
|
||||||
<Link
|
key={date}
|
||||||
to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`}
|
/>
|
||||||
style={{ display: 'flex' }}
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
width={24}
|
|
||||||
src={qrCode}
|
|
||||||
style={{ margin: '0 auto' }}
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</Td>
|
|
||||||
)}
|
|
||||||
<Td textAlign="center">
|
|
||||||
{dayjs(lesson.date).format(groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
|
|
||||||
</Td>
|
|
||||||
<Td>{lesson.name}</Td>
|
|
||||||
{isTeacher(user) && (
|
|
||||||
<Td>
|
|
||||||
<Menu>
|
|
||||||
<MenuButton as={Button}>
|
|
||||||
<EditIcon />
|
|
||||||
</MenuButton>
|
|
||||||
<MenuList>
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => {
|
|
||||||
setShowForm(true)
|
|
||||||
setEditLesson(lesson)
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Edit
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem
|
|
||||||
onClick={() => setlessonToDelete(lesson)}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</MenuItem>
|
|
||||||
</MenuList>
|
|
||||||
</Menu>
|
|
||||||
</Td>
|
|
||||||
)}
|
|
||||||
<Td isNumeric>{lesson.students.length}</Td>
|
|
||||||
</Tr>
|
|
||||||
))}
|
|
||||||
</React.Fragment>
|
|
||||||
))}
|
))}
|
||||||
</Tbody>
|
</Tbody>
|
||||||
</Table>
|
</Table>
|
||||||
|
|||||||
@@ -9,11 +9,22 @@ const timer =
|
|||||||
|
|
||||||
router.use(timer())
|
router.use(timer())
|
||||||
|
|
||||||
|
const config = {
|
||||||
|
examCreated: false
|
||||||
|
}
|
||||||
|
|
||||||
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'))
|
||||||
})
|
})
|
||||||
|
|
||||||
router.get('/course/:id', (_req, res) => {
|
router.get('/course/:id', (req, res) => {
|
||||||
|
if(req.params.id === 'undefined')
|
||||||
|
return res.status(400).send({ success: false, error: 'Invalid course id' })
|
||||||
|
|
||||||
|
if (config.examCreated) {
|
||||||
|
config.examCreated = false
|
||||||
|
return res.send(require('../mocks/courses/by-id/with-exam.json'))
|
||||||
|
}
|
||||||
res.send(require('../mocks/courses/by-id/success.json'))
|
res.send(require('../mocks/courses/by-id/success.json'))
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -26,6 +37,7 @@ router.post('/course', (req, res) => {
|
|||||||
})
|
})
|
||||||
|
|
||||||
router.post('/course/toggle-exam-with-jury/:id', (req, res) => {
|
router.post('/course/toggle-exam-with-jury/:id', (req, res) => {
|
||||||
|
config.examCreated = true;
|
||||||
res.send({ success: true })
|
res.send({ success: true })
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
94
stubs/mocks/courses/by-id/with-exam.json
Normal file
94
stubs/mocks/courses/by-id/with-exam.json
Normal file
@@ -0,0 +1,94 @@
|
|||||||
|
{
|
||||||
|
"success": true,
|
||||||
|
"body": {
|
||||||
|
"_id": "660b19fc865d7a5d914636c0",
|
||||||
|
"name": "Курс по JS",
|
||||||
|
"teachers": [],
|
||||||
|
"lessons": [
|
||||||
|
{
|
||||||
|
"_id": "661e7f4f69f40b0ebebcd5e4",
|
||||||
|
"name": "555",
|
||||||
|
"students": [
|
||||||
|
{
|
||||||
|
"sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
|
||||||
|
"email_verified": true,
|
||||||
|
"name": "Александр Примаков",
|
||||||
|
"preferred_username": "primakov",
|
||||||
|
"given_name": "Александр",
|
||||||
|
"family_name": "Примаков",
|
||||||
|
"email": "primakovpro@gmail.com"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"date": "2024-04-16T13:38:00.000Z",
|
||||||
|
"created": "2024-04-16T13:38:23.381Z",
|
||||||
|
"id": "661e7f4f69f40b0ebebcd5e4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"_id": "66af1e60a0eef5a89f99aa94",
|
||||||
|
"name": "111",
|
||||||
|
"students": [
|
||||||
|
{
|
||||||
|
"sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
|
||||||
|
"email_verified": true,
|
||||||
|
"name": "Александр Примаков",
|
||||||
|
"preferred_username": "primakov",
|
||||||
|
"given_name": "Александр",
|
||||||
|
"family_name": "Примаков",
|
||||||
|
"email": "primakovpro@gmail.com"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"date": "2024-08-04T07:00:00.000Z",
|
||||||
|
"created": "2024-08-04T06:23:28.491Z",
|
||||||
|
"id": "66af1e60a0eef5a89f99aa94"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"_id": "66ba1a01a0eef5a89f99ab27",
|
||||||
|
"name": "11111",
|
||||||
|
"students": [
|
||||||
|
{
|
||||||
|
"sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
|
||||||
|
"email_verified": true,
|
||||||
|
"name": "Александр Примаков",
|
||||||
|
"preferred_username": "primakov",
|
||||||
|
"given_name": "Александр",
|
||||||
|
"family_name": "Примаков",
|
||||||
|
"email": "primakovpro@gmail.com"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"date": "2024-08-18T10:00:00.000Z",
|
||||||
|
"created": "2024-08-12T14:19:46.004Z",
|
||||||
|
"id": "66ba1a01a0eef5a89f99ab27"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"_id": "66ba1a0da0eef5a89f99ab2d",
|
||||||
|
"name": "2222",
|
||||||
|
"students": [],
|
||||||
|
"date": "2024-08-18T14:19:00.000Z",
|
||||||
|
"created": "2024-08-12T14:19:57.798Z",
|
||||||
|
"id": "66ba1a0da0eef5a89f99ab2d"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"startDt": "2024-06-01T00:00:00.000Z",
|
||||||
|
"creator": {
|
||||||
|
"sub": "f62905b1-e223-40ca-910f-c8d84c6137c1",
|
||||||
|
"email_verified": true,
|
||||||
|
"name": "Александр Примаков",
|
||||||
|
"preferred_username": "primakov",
|
||||||
|
"given_name": "Александр",
|
||||||
|
"family_name": "Примаков",
|
||||||
|
"email": "primakovpro@gmail.com"
|
||||||
|
},
|
||||||
|
"created": "2024-04-01T20:33:00.912Z",
|
||||||
|
"examWithJury": {
|
||||||
|
"_id": "66d01766ce794e1fdb2bf097",
|
||||||
|
"name": "Хакатон",
|
||||||
|
"description": "Сегодня командам предстоит Защитить свои проекты а жюри оценить по критериям",
|
||||||
|
"jury": [],
|
||||||
|
"criterias": [],
|
||||||
|
"date": "2024-08-29T06:38:30.678Z",
|
||||||
|
"created": "2024-08-29T06:38:30.678Z",
|
||||||
|
"id": "66d01766ce794e1fdb2bf097"
|
||||||
|
},
|
||||||
|
"id": "660b19fc865d7a5d914636c0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -22,11 +22,10 @@
|
|||||||
},
|
},
|
||||||
"startDt": "2024-03-02T15:37:05.907Z",
|
"startDt": "2024-03-02T15:37:05.907Z",
|
||||||
"examWithJury": "66cf3d3f4637d420d6271451",
|
"examWithJury": "66cf3d3f4637d420d6271451",
|
||||||
"created": "2024-03-02T15:37:05.908Z",
|
"created": "2024-03-02T15:37:05.908Z"
|
||||||
"__v": 2
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"_id": "65e73c21ced789d2f679128z",
|
"id": "65e73c21ced789d2f679128z",
|
||||||
"name": "KFU-24-2",
|
"name": "KFU-24-2",
|
||||||
"teachers": [],
|
"teachers": [],
|
||||||
"lessons": [
|
"lessons": [
|
||||||
|
|||||||
Reference in New Issue
Block a user