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,16 +109,19 @@ 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">
<VStack align="left">
<Heading as="h3" mt="4" mb="3">
Тема занятия: Тема занятия:
</Heading> </Heading>
<Box as="span">{accessCode?.body?.lesson?.name}</Box>
<Box as="span"> <Box as="span">
{accessCode?.body?.lesson?.name}
</Box>
<Box as='span'>
{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}`
: ''}{' '}
человек человек
</Box> </Box>
</VStack> </VStack>
@ -143,6 +147,7 @@ const LessonDetail = () => {
</UnorderList> </UnorderList>
</HStack> </HStack>
</Container> </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,8 +148,62 @@ const LessonList = () => {
} }
}, [crLQuery.isSuccess]) }, [crLQuery.isSuccess])
if (isLoading) {
return ( return (
<Container maxW="container.xl"> <Container maxW="container.xl">
<Center h="300px">
<Spinner
thickness="4px"
speed="0.65s"
emptyColor="gray.200"
color="blue.500"
size="xl"
/>
</Center>
</Container>
)
}
return (
<>
<AlertDialog
isOpen={Boolean(lessonToDelete)}
leastDestructiveRef={cancelRef}
onClose={() => setlessonToDelete(null)}
>
<AlertDialogOverlay>
<AlertDialogContent>
<AlertDialogHeader fontSize="lg" fontWeight="bold">
Удалить занятие от{' '}
{dayjs(lessonToDelete?.date).format('DD.MM.YY')}?
</AlertDialogHeader>
<AlertDialogBody>
Все данные о посещении данного занятия будут удалены
</AlertDialogBody>
<AlertDialogFooter>
<Button
isDisabled={deletingRqst.isLoading}
ref={cancelRef}
onClick={() => setlessonToDelete(null)}
>
Cancel
</Button>
<Button
colorScheme="red"
loadingText=""
isLoading={deletingRqst.isLoading}
onClick={() => deleteLesson(lessonToDelete._id)}
ml={3}
>
Delete
</Button>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialogOverlay>
</AlertDialog>
<BreadcrumbsWrapper>
<Breadcrumb> <Breadcrumb>
<BreadcrumbItem> <BreadcrumbItem>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}> <BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@ -106,7 +215,8 @@ const LessonList = () => {
<BreadcrumbLink href="#">Курс</BreadcrumbLink> <BreadcrumbLink href="#">Курс</BreadcrumbLink>
</BreadcrumbItem> </BreadcrumbItem>
</Breadcrumb> </Breadcrumb>
</BreadcrumbsWrapper>
<Container maxW="container.xl">
{isTeacher(user) && ( {isTeacher(user) && (
<Box mt="15" mb="15"> <Box mt="15" mb="15">
{showForm ? ( {showForm ? (
@ -202,27 +312,65 @@ const LessonList = () => {
)} )}
</Box> </Box>
)} )}
<ul style={{ paddingLeft: 0 }}> <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) => ( {data?.body?.map((lesson) => (
<LessonItem key={lesson._id}> <Tr key={lesson._id}>
{isTeacher(user) && (
<Td>
<Link <Link
to={ to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`}
isTeacher(user)
? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
: ''
}
style={{ display: 'flex' }} style={{ display: 'flex' }}
> >
<Lessonname>{lesson.name}</Lessonname> <img
<span>{dayjs(lesson.date).format('DD MMMM YYYYг.')}</span> width={24}
<span style={{ marginLeft: 'auto' }}> src={qrCode}
Участников - {lesson.students.length} style={{ margin: '0 auto' }}
</span> />
</Link> </Link>
</LessonItem> </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>
))} ))}
</ul> </Tbody>
</Table>
</TableContainer>
</Container> </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;