CRUD лекции #17

Merged
primakov merged 2 commits from feature/edit-delete-lesson into master 2024-04-01 23:25:14 +03:00
7 changed files with 406 additions and 207 deletions

2
.gitignore vendored
View File

@ -9,6 +9,8 @@ pids
*.pid *.pid
*.seed *.seed
*prom.json
# Directory for instrumented libs generated by jscoverage/JSCover # Directory for instrumented libs generated by jscoverage/JSCover
lib-cov lib-cov

1
Jenkinsfile vendored
View File

@ -8,7 +8,6 @@ pipeline {
stages { stages {
stage('install') { stage('install') {
steps { steps {
sh 'ls -a'
sh 'node -v' sh 'node -v'
sh 'npm -v' sh 'npm -v'
sh 'npm ci' sh 'npm ci'

View File

@ -1,80 +1,112 @@
import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"; import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import { getConfigValue } from "@ijl/cli"; import { getConfigValue } from '@ijl/cli'
import { keycloak } from "../kc"; import { keycloak } from '../kc'
import { AccessCode, BaseResponse, Course, Lesson, User, UserData } from "../model"; import {
AccessCode,
BaseResponse,
Course,
Lesson,
User,
UserData,
} from '../model'
export const api = createApi({ export const api = createApi({
reducerPath: "auth", reducerPath: 'auth',
baseQuery: fetchBaseQuery({ baseQuery: fetchBaseQuery({
baseUrl: getConfigValue("journal.back.url"), baseUrl: getConfigValue('journal.back.url'),
fetchFn: async (input: RequestInfo | URL, init?: RequestInit | undefined) => { fetchFn: async (
const response = await fetch(input, init); input: RequestInfo | URL,
init?: RequestInit | undefined,
) => {
const response = await fetch(input, init)
if (response.status === 403) keycloak.login() if (response.status === 403) keycloak.login()
return response; return response
}, },
headers: { headers: {
"Content-Type": "application/json;charset=utf-8", 'Content-Type': 'application/json;charset=utf-8',
}, },
prepareHeaders: (headers) => { prepareHeaders: (headers) => {
headers.set('Authorization', `Bearer ${keycloak.token}`) headers.set('Authorization', `Bearer ${keycloak.token}`)
} },
}), }),
tagTypes: ['LessonList', 'CourseList'], tagTypes: ['LessonList', 'CourseList'],
endpoints: (builder) => ({ endpoints: (builder) => ({
coursesList: builder.query<BaseResponse<Course[]>, void>({ coursesList: builder.query<BaseResponse<Course[]>, void>({
query: () => '/course/list', query: () => '/course/list',
providesTags: ['CourseList'] providesTags: ['CourseList'],
}), }),
createUpdateCourse: builder.mutation<BaseResponse<Course>, Partial<Course> & Pick<Course, 'name'>>({ createUpdateCourse: builder.mutation<
BaseResponse<Course>,
Partial<Course> & Pick<Course, 'name'>
>({
query: (course) => ({ query: (course) => ({
url: '/course', url: '/course',
method: 'POST', method: 'POST',
body: course, body: course,
}), }),
invalidatesTags: ['CourseList'] invalidatesTags: ['CourseList'],
}), }),
courseAllStudents: builder.query<BaseResponse<User[]>, string>({ courseAllStudents: builder.query<BaseResponse<User[]>, string>({
query: (courseId) => `/course/students/${courseId}` query: (courseId) => `/course/students/${courseId}`,
}), }),
manualAddStudent: builder.mutation<BaseResponse<void>, { lessonId: string, user: User }>({ manualAddStudent: builder.mutation<
query: ({lessonId, user}) => ({ BaseResponse<void>,
{ lessonId: string; user: User }
>({
query: ({ lessonId, user }) => ({
url: `/lesson/add-student/${lessonId}`, url: `/lesson/add-student/${lessonId}`,
method: 'POST', method: 'POST',
body: user body: user,
}) }),
}), }),
lessonList: builder.query<BaseResponse<Lesson[]>, string>({ lessonList: builder.query<BaseResponse<Lesson[]>, string>({
query: (courseId) => `/lesson/list/${courseId}`, query: (courseId) => `/lesson/list/${courseId}`,
providesTags: ['LessonList'] providesTags: ['LessonList'],
}), }),
createLesson: builder.mutation<BaseResponse<Lesson>, Pick<Lesson, 'name' | 'date'> & { courseId: string }>({ createLesson: builder.mutation<
query: ({ name, courseId, date }) => ({ BaseResponse<Lesson>,
Partial<Lesson> & Pick<Lesson, 'name' | 'date'> & { courseId: string }
>({
query: (data) => ({
url: '/lesson', url: '/lesson',
method: 'POST', method: 'POST',
body: { name, courseId, date }, body: data,
}), }),
invalidatesTags: ['LessonList'] invalidatesTags: ['LessonList'],
}),
deleteLesson: builder.mutation<null, string>({
query: (lessonId) => ({
url: `/lesson/${lessonId}`,
method: 'DELETE',
}),
invalidatesTags: ['LessonList'],
}), }),
lessonById: builder.query<BaseResponse<Lesson>, string>({ lessonById: builder.query<BaseResponse<Lesson>, string>({
query: (lessonId: string) => `/lesson/${lessonId}` query: (lessonId: string) => `/lesson/${lessonId}`,
}), }),
createAccessCode: builder.query<BaseResponse<AccessCode>, { lessonId: string }>({ createAccessCode: builder.query<
BaseResponse<AccessCode>,
{ lessonId: string }
>({
query: ({ lessonId }) => ({ query: ({ lessonId }) => ({
url: '/lesson/access-code', url: '/lesson/access-code',
method: 'POST', method: 'POST',
body: { lessonId }, body: { lessonId },
}) }),
}), }),
getAccess: builder.query<BaseResponse<{ user: UserData, accessCode: AccessCode }>, { accessCode: string }>({ getAccess: builder.query<
BaseResponse<{ user: UserData; accessCode: AccessCode }>,
{ accessCode: string }
>({
query: ({ accessCode }) => ({ query: ({ accessCode }) => ({
url: `/lesson/access-code/${accessCode}`, url: `/lesson/access-code/${accessCode}`,
method: 'GET', method: 'GET',
}) }),
}) }),
}), }),
}); })

View File

@ -35,6 +35,7 @@ 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' import { AddIcon, ArrowDownIcon, ArrowUpIcon, LinkIcon } from '@chakra-ui/icons'
import { Course } from '../__data__/model'
interface NewCourseForm { interface NewCourseForm {
startDt: string startDt: string
@ -226,7 +227,15 @@ const CoursesList = () => {
) )
} }
const CourseCard = ({ course, isOpened, openDetails }) => { const CourseCard = ({
course,
isOpened,
openDetails,
}: {
course: Course
isOpened: boolean
openDetails: () => void
}) => {
const [getLessonList, lessonList] = api.useLazyLessonListQuery() const [getLessonList, lessonList] = api.useLazyLessonListQuery()
useEffect(() => { useEffect(() => {
if (isOpened) { if (isOpened) {
@ -262,6 +271,7 @@ const CourseCard = ({ course, isOpened, openDetails }) => {
{lessonList.data?.body?.map((lesson) => ( {lessonList.data?.body?.map((lesson) => (
<Link <Link
as={ConnectedLink} as={ConnectedLink}
key={lesson._id}
to={ to={
isTeacher(user) isTeacher(user)
? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}` ? `${getNavigationsValue('journal.main')}/lesson/${course._id}/${lesson._id}`

View File

@ -20,6 +20,7 @@ import {
Lessonname, Lessonname,
AddMissedButton, AddMissedButton,
UnorderList, UnorderList,
BreadcrumbsWrapper,
} from './style' } from './style'
import { api } from '../__data__/api/api' import { api } from '../__data__/api/api'
import { User } from '../__data__/model' import { User } from '../__data__/model'
@ -86,8 +87,8 @@ const LessonDetail = () => {
}, [accessCode?.body, AllStudents.data]) }, [accessCode?.body, AllStudents.data])
return ( return (
<Container maxW="container.xl" centerContent px="200"> <>
<VStack align="left"> <BreadcrumbsWrapper>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}> <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@ -108,41 +109,45 @@ const LessonDetail = () => {
<BreadcrumbLink href="#">Лекция</BreadcrumbLink> <BreadcrumbLink href="#">Лекция</BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
<Heading as='h3' mt='4' mb='3'> </BreadcrumbsWrapper>
Тема занятия: <Container maxW="container.xl" centerContent px="200">
</Heading> <VStack align="left">
<Box as="span"> <Heading as="h3" mt="4" mb="3">
{accessCode?.body?.lesson?.name} Тема занятия:
</Box> </Heading>
<Box as='span'> <Box as="span">{accessCode?.body?.lesson?.name}</Box>
{dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '} <Box as="span">
Отмечено - {accessCode?.body?.lesson?.students?.length}{' '} {dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
{AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '} Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
человек {AllStudents.isSuccess
</Box> ? `/ ${AllStudents?.data?.body?.length}`
</VStack> : ''}{' '}
<HStack spacing="8"> человек
<a href={userUrl}> </Box>
<QRCanvas ref={canvRef} /> </VStack>
</a> <HStack spacing="8">
<UnorderList> <a href={userUrl}>
{studentsArr.map((student) => ( <QRCanvas ref={canvRef} />
<LessonItem key={student.sub} warn={!student.present}> </a>
<Lessonname> <UnorderList>
{student.name || student.preferred_username}{' '} {studentsArr.map((student) => (
{!student.present && ( <LessonItem key={student.sub} warn={!student.present}>
<AddMissedButton <Lessonname>
onClick={() => manualAdd({ lessonId, user: student })} {student.name || student.preferred_username}{' '}
> {!student.present && (
add <AddMissedButton
</AddMissedButton> onClick={() => manualAdd({ lessonId, user: student })}
)} >
</Lessonname> add
</LessonItem> </AddMissedButton>
))} )}
</UnorderList> </Lessonname>
</HStack> </LessonItem>
</Container> ))}
</UnorderList>
</HStack>
</Container>
</>
) )
} }

View File

@ -14,26 +14,45 @@ import {
CardHeader, CardHeader,
Heading, Heading,
Button, Button,
ButtonGroup,
CloseButton, CloseButton,
useToast, useToast,
Stack,
VStack, VStack,
FormControl, FormControl,
FormLabel, FormLabel,
Toast,
FormHelperText, FormHelperText,
FormErrorMessage, FormErrorMessage,
Input, Input,
TableContainer,
Table,
Thead,
Tr,
Th,
Tbody,
Td,
Menu,
MenuButton,
MenuItem,
Text,
MenuList,
Center,
Spinner,
AlertDialog,
AlertDialogBody,
AlertDialogContent,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogOverlay,
} from '@chakra-ui/react' } from '@chakra-ui/react'
import { AddIcon, EditIcon } from '@chakra-ui/icons'
import { AddIcon } from '@chakra-ui/icons' import { ErrorSpan, BreadcrumbsWrapper } from './style'
import { LessonItem, Lessonname, ErrorSpan } from './style'
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 { qrCode } from '../assets'
import { Lesson } from '../__data__/model'
interface NewLessonForm { interface NewLessonForm {
name: string name: string
@ -45,8 +64,10 @@ const LessonList = () => {
const user = useAppSelector((s) => s.user) const user = useAppSelector((s) => s.user)
const { data, isLoading, error } = api.useLessonListQuery(courseId) const { data, isLoading, error } = api.useLessonListQuery(courseId)
const [createLesson, crLQuery] = api.useCreateLessonMutation() const [createLesson, crLQuery] = api.useCreateLessonMutation()
const [value, setValue] = useState('') const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation()
const [showForm, setShowForm] = useState(false) const [showForm, setShowForm] = useState(false)
const [lessonToDelete, setlessonToDelete] = useState<Lesson>(null)
const cancelRef = React.useRef()
const { const {
control, control,
handleSubmit, handleSubmit,
@ -62,12 +83,6 @@ const LessonList = () => {
const toast = useToast() const toast = useToast()
const toastRef = useRef(null) const toastRef = useRef(null)
const handleChange = useCallback(
(event) => {
setValue(event.target.value.toUpperCase())
},
[setValue],
)
const onSubmit = ({ name, date }) => { const onSubmit = ({ name, date }) => {
toastRef.current = toast({ toastRef.current = toast({
title: 'Отправляем', title: 'Отправляем',
@ -77,6 +92,46 @@ const LessonList = () => {
createLesson({ name, courseId, date }) createLesson({ name, courseId, date })
} }
useEffect(() => {
if (deletingRqst.isError) {
toast({
title: (deletingRqst.error as any)?.error,
status: 'error',
duration: 3000,
})
}
if (deletingRqst.isSuccess) {
const lesson = { ...lessonToDelete }
toast({
status: 'warning',
duration: 9000,
render(props) {
return (
<Toast
{...props}
title={
<>
<Box pb={3}>
<Text fontSize="xl">{`Удалена лекция ${lesson.name}`}</Text>
</Box>
<Button
onClick={() =>
createLesson({ courseId, ...lesson })
}
>
Восстановить
</Button>
</>
}
/>
)
},
})
setlessonToDelete(null)
}
}, [deletingRqst.isLoading, deletingRqst.isSuccess, deletingRqst.isError])
useEffect(() => { useEffect(() => {
if (crLQuery.isSuccess) { if (crLQuery.isSuccess) {
const values = getValues() const values = getValues()
@ -93,136 +148,229 @@ const LessonList = () => {
} }
}, [crLQuery.isSuccess]) }, [crLQuery.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"> <>
<Breadcrumb> <AlertDialog
<BreadcrumbItem> isOpen={Boolean(lessonToDelete)}
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}> leastDestructiveRef={cancelRef}
Журнал onClose={() => setlessonToDelete(null)}
</BreadcrumbLink> >
</BreadcrumbItem> <AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
Удалить занятие от{' '}
{dayjs(lessonToDelete?.date).format('DD.MM.YY')}?
</AlertDialogHeader>
<BreadcrumbItem isCurrentPage> <AlertDialogBody>
<BreadcrumbLink href="#">Курс</BreadcrumbLink> Все данные о посещении данного занятия будут удалены
</BreadcrumbItem> </AlertDialogBody>
</Breadcrumb>
{isTeacher(user) && ( <AlertDialogFooter>
<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="date"
rules={{ required: 'Обязательное поле' }}
render={({ field }) => (
<FormControl>
<FormLabel>Дата</FormLabel>
<Input
{...field}
required={false}
placeholder="Укажите дату лекции"
size="md"
type="datetime-local"
/>
{errors.date ? (
<FormErrorMessage>
{errors.date?.message}
</FormErrorMessage>
) : (
<FormHelperText>
Укажите дату и время лекции
</FormHelperText>
)}
</FormControl>
)}
/>
<Controller
control={control}
name="name"
rules={{ required: 'Обязательное поле' }}
render={({ field }) => (
<FormControl
isRequired
isInvalid={Boolean(errors.name)}
>
<FormLabel>Название новой лекции:</FormLabel>
<Input
{...field}
required={false}
placeholder="Название лекции"
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>
{crLQuery.error && (
<ErrorSpan>{(crLQuery.error as any).error}</ErrorSpan>
)}
</form>
</CardBody>
</Card>
) : (
<Box p="2" m="2">
<Button <Button
leftIcon={<AddIcon />} isDisabled={deletingRqst.isLoading}
colorScheme="green" ref={cancelRef}
onClick={() => setShowForm(true)} onClick={() => setlessonToDelete(null)}
> >
Добавить Cancel
</Button> </Button>
</Box> <Button
)} colorScheme="red"
</Box> loadingText=""
)} isLoading={deletingRqst.isLoading}
<ul style={{ paddingLeft: 0 }}> onClick={() => deleteLesson(lessonToDelete._id)}
{data?.body?.map((lesson) => ( ml={3}
<LessonItem key={lesson._id}> >
<Link Delete
to={ </Button>
isTeacher(user) </AlertDialogFooter>
? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}` </AlertDialogContent>
: '' </AlertDialogOverlay>
} </AlertDialog>
style={{ display: 'flex' }} <BreadcrumbsWrapper>
> <Breadcrumb>
<Lessonname>{lesson.name}</Lessonname> <BreadcrumbItem>
<span>{dayjs(lesson.date).format('DD MMMM YYYYг.')}</span> <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
<span style={{ marginLeft: 'auto' }}> Журнал
Участников - {lesson.students.length} </BreadcrumbLink>
</span> </BreadcrumbItem>
</Link>
</LessonItem> <BreadcrumbItem isCurrentPage>
))} <BreadcrumbLink href="#">Курс</BreadcrumbLink>
</ul> </BreadcrumbItem>
</Container> </Breadcrumb>
</BreadcrumbsWrapper>
<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="date"
rules={{ required: 'Обязательное поле' }}
render={({ field }) => (
<FormControl>
<FormLabel>Дата</FormLabel>
<Input
{...field}
required={false}
placeholder="Укажите дату лекции"
size="md"
type="datetime-local"
/>
{errors.date ? (
<FormErrorMessage>
{errors.date?.message}
</FormErrorMessage>
) : (
<FormHelperText>
Укажите дату и время лекции
</FormHelperText>
)}
</FormControl>
)}
/>
<Controller
control={control}
name="name"
rules={{ required: 'Обязательное поле' }}
render={({ field }) => (
<FormControl
isRequired
isInvalid={Boolean(errors.name)}
>
<FormLabel>Название новой лекции:</FormLabel>
<Input
{...field}
required={false}
placeholder="Название лекции"
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>
{crLQuery.error && (
<ErrorSpan>{(crLQuery.error as any).error}</ErrorSpan>
)}
</form>
</CardBody>
</Card>
) : (
<Box p="2" m="2">
<Button
leftIcon={<AddIcon />}
colorScheme="green"
onClick={() => setShowForm(true)}
>
Добавить
</Button>
</Box>
)}
</Box>
)}
<TableContainer whiteSpace="wrap">
<Table variant="striped" colorScheme="cyan">
<Thead>
<Tr>
{isTeacher(user) && (
<Th align="center" width={1}>
ссылка
</Th>
)}
<Th textAlign="center" width={1}>
Дата
</Th>
<Th>Название</Th>
<Th>action</Th>
<Th isNumeric>Отмечено</Th>
</Tr>
</Thead>
<Tbody>
{data?.body?.map((lesson) => (
<Tr key={lesson._id}>
{isTeacher(user) && (
<Td>
<Link
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('H:mm DD.MM.YY')}
</Td>
<Td>{lesson.name}</Td>
<Td>
<Menu>
<MenuButton as={Button}>
<EditIcon />
</MenuButton>
<MenuList>
<MenuItem isDisabled>Edit</MenuItem>
<MenuItem onClick={() => setlessonToDelete(lesson)}>
Delete
</MenuItem>
</MenuList>
</Menu>
</Td>
<Td isNumeric>{lesson.students.length}</Td>
</Tr>
))}
</Tbody>
</Table>
</TableContainer>
</Container>
</>
) )
} }

View File

@ -4,6 +4,9 @@ import {
Card Card
} from '@chakra-ui/react' } from '@chakra-ui/react'
export const BreadcrumbsWrapper = styled.div`
padding: 12px;
`;
export const MainWrapper = styled.main` export const MainWrapper = styled.main`
display: flex; display: flex;