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
*.seed
*prom.json
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

1
Jenkinsfile vendored
View File

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

View File

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

View File

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

View File

@ -20,6 +20,7 @@ import {
Lessonname,
AddMissedButton,
UnorderList,
BreadcrumbsWrapper,
} from './style'
import { api } from '../__data__/api/api'
import { User } from '../__data__/model'
@ -86,8 +87,8 @@ const LessonDetail = () => {
}, [accessCode?.body, AllStudents.data])
return (
<Container maxW="container.xl" centerContent px="200">
<VStack align="left">
<>
<BreadcrumbsWrapper>
<Breadcrumb>
<BreadcrumbItem>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@ -108,16 +109,19 @@ const LessonDetail = () => {
<BreadcrumbLink href="#">Лекция</BreadcrumbLink>
</BreadcrumbItem>
</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>
<Box as="span">{accessCode?.body?.lesson?.name}</Box>
<Box as="span">
{accessCode?.body?.lesson?.name}
</Box>
<Box as='span'>
{dayjs(accessCode?.body?.lesson?.date).format('DD MMMM YYYYг.')}{' '}
Отмечено - {accessCode?.body?.lesson?.students?.length}{' '}
{AllStudents.isSuccess ? `/ ${AllStudents?.data?.body?.length}` : ''}{' '}
{AllStudents.isSuccess
? `/ ${AllStudents?.data?.body?.length}`
: ''}{' '}
человек
</Box>
</VStack>
@ -143,6 +147,7 @@ const LessonDetail = () => {
</UnorderList>
</HStack>
</Container>
</>
)
}

View File

@ -14,26 +14,45 @@ import {
CardHeader,
Heading,
Button,
ButtonGroup,
CloseButton,
useToast,
Stack,
VStack,
FormControl,
FormLabel,
Toast,
FormHelperText,
FormErrorMessage,
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'
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 { api } from '../__data__/api/api'
import { isTeacher } from '../utils/user'
import { qrCode } from '../assets'
import { Lesson } from '../__data__/model'
interface NewLessonForm {
name: string
@ -45,8 +64,10 @@ const LessonList = () => {
const user = useAppSelector((s) => s.user)
const { data, isLoading, error } = api.useLessonListQuery(courseId)
const [createLesson, crLQuery] = api.useCreateLessonMutation()
const [value, setValue] = useState('')
const [deleteLesson, deletingRqst] = api.useDeleteLessonMutation()
const [showForm, setShowForm] = useState(false)
const [lessonToDelete, setlessonToDelete] = useState<Lesson>(null)
const cancelRef = React.useRef()
const {
control,
handleSubmit,
@ -62,12 +83,6 @@ const LessonList = () => {
const toast = useToast()
const toastRef = useRef(null)
const handleChange = useCallback(
(event) => {
setValue(event.target.value.toUpperCase())
},
[setValue],
)
const onSubmit = ({ name, date }) => {
toastRef.current = toast({
title: 'Отправляем',
@ -77,6 +92,46 @@ const LessonList = () => {
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(() => {
if (crLQuery.isSuccess) {
const values = getValues()
@ -93,8 +148,62 @@ const LessonList = () => {
}
}, [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 (
<>
<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>
<BreadcrumbItem>
<BreadcrumbLink as={Link} to={getNavigationsValue('journal.main')}>
@ -106,7 +215,8 @@ const LessonList = () => {
<BreadcrumbLink href="#">Курс</BreadcrumbLink>
</BreadcrumbItem>
</Breadcrumb>
</BreadcrumbsWrapper>
<Container maxW="container.xl">
{isTeacher(user) && (
<Box mt="15" mb="15">
{showForm ? (
@ -202,27 +312,65 @@ const LessonList = () => {
)}
</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) => (
<LessonItem key={lesson._id}>
<Tr key={lesson._id}>
{isTeacher(user) && (
<Td>
<Link
to={
isTeacher(user)
? `${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`
: ''
}
to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${lesson._id}`}
style={{ display: 'flex' }}
>
<Lessonname>{lesson.name}</Lessonname>
<span>{dayjs(lesson.date).format('DD MMMM YYYYг.')}</span>
<span style={{ marginLeft: 'auto' }}>
Участников - {lesson.students.length}
</span>
<img
width={24}
src={qrCode}
style={{ margin: '0 auto' }}
/>
</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>
</>
)
}

View File

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