diff --git a/src/__data__/api/api.ts b/src/__data__/api/api.ts index 49ee857..acf4884 100644 --- a/src/__data__/api/api.ts +++ b/src/__data__/api/api.ts @@ -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, void>({ query: () => '/course/list', - providesTags: ['CourseList'] + providesTags: ['CourseList'], }), - createUpdateCourse: builder.mutation, Partial & Pick>({ + createUpdateCourse: builder.mutation< + BaseResponse, + Partial & Pick + >({ query: (course) => ({ url: '/course', method: 'POST', body: course, }), - invalidatesTags: ['CourseList'] + invalidatesTags: ['CourseList'], }), courseAllStudents: builder.query, string>({ - query: (courseId) => `/course/students/${courseId}` + query: (courseId) => `/course/students/${courseId}`, }), - manualAddStudent: builder.mutation, { lessonId: string, user: User }>({ - query: ({lessonId, user}) => ({ + manualAddStudent: builder.mutation< + BaseResponse, + { lessonId: string; user: User } + >({ + query: ({ lessonId, user }) => ({ url: `/lesson/add-student/${lessonId}`, method: 'POST', - body: user - }) + body: user, + }), }), lessonList: builder.query, string>({ query: (courseId) => `/lesson/list/${courseId}`, - providesTags: ['LessonList'] + providesTags: ['LessonList'], }), - createLesson: builder.mutation, Pick & { courseId: string }>({ - query: ({ name, courseId, date }) => ({ + createLesson: builder.mutation< + BaseResponse, + Partial & Pick & { courseId: string } + >({ + query: (data) => ({ url: '/lesson', method: 'POST', - body: { name, courseId, date }, + body: data, }), - invalidatesTags: ['LessonList'] + invalidatesTags: ['LessonList'], + }), + deleteLesson: builder.mutation({ + query: (lessonId) => ({ + url: `/lesson/${lessonId}`, + method: 'DELETE', + }), + invalidatesTags: ['LessonList'], }), lessonById: builder.query, string>({ - query: (lessonId: string) => `/lesson/${lessonId}` + query: (lessonId: string) => `/lesson/${lessonId}`, }), - createAccessCode: builder.query, { lessonId: string }>({ + createAccessCode: builder.query< + BaseResponse, + { lessonId: string } + >({ query: ({ lessonId }) => ({ url: '/lesson/access-code', method: 'POST', body: { lessonId }, - }) + }), }), - getAccess: builder.query, { accessCode: string }>({ + getAccess: builder.query< + BaseResponse<{ user: UserData; accessCode: AccessCode }>, + { accessCode: string } + >({ query: ({ accessCode }) => ({ url: `/lesson/access-code/${accessCode}`, method: 'GET', - }) - }) + }), + }), }), -}); +}) diff --git a/src/pages/lesson-list.tsx b/src/pages/lesson-list.tsx index d1b99b6..a17e9cd 100644 --- a/src/pages/lesson-list.tsx +++ b/src/pages/lesson-list.tsx @@ -14,13 +14,12 @@ import { CardHeader, Heading, Button, - ButtonGroup, CloseButton, useToast, - Stack, VStack, FormControl, FormLabel, + Toast, FormHelperText, FormErrorMessage, Input, @@ -31,17 +30,29 @@ import { 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, BreadcrumbsWrapper } 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 @@ -53,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(null) + const cancelRef = React.useRef() const { control, handleSubmit, @@ -70,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: 'Отправляем', @@ -85,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 ( + + + {`Удалена лекция ${lesson.name}`} + + + + } + /> + ) + }, + }) + setlessonToDelete(null) + } + }, [deletingRqst.isLoading, deletingRqst.isSuccess, deletingRqst.isError]) + useEffect(() => { if (crLQuery.isSuccess) { const values = getValues() @@ -101,8 +148,61 @@ const LessonList = () => { } }, [crLQuery.isSuccess]) + if (isLoading) { + return ( + +
+ +
+
+ ) + } + return ( <> + setlessonToDelete(null)} + > + + + + Удалить занятие от{' '} + {dayjs(lessonToDelete?.date).format('DD.MM.YY')}? + + + + Все данные о посещении данного занятия будут удалены + + + + + + + + + @@ -216,55 +316,59 @@ const LessonList = () => { - - - - + {isTeacher(user) && ( + + )} + + + + {data?.body?.map((lesson) => ( - + )} + - + ))}
ссылкаДатаintoУчастников + ссылка + + Дата + НазваниеactionОтмечено
- - - + {isTeacher(user) && ( + + + + + + {dayjs(lesson.date).format('H:mm DD.MM.YY')} {dayjs(lesson.date).format('H:mm DD.MM.YY')} {lesson.name} + + + + + + Edit + setlessonToDelete(lesson)}> + Delete + + + + {lesson.students.length}
- {/*
    - {data?.body?.map((lesson) => ( - - - {lesson.name} - {dayjs(lesson.date).format('DD MMMM YYYYг.')} - - Участников - {lesson.students.length} - - - - ))} -
*/} )