2024-04-01 23:25:14 +03:00
7 changed files with 406 additions and 207 deletions
--- a/.gitignore
+++ b/.gitignore
@ -9,6 +9,8 @@ pids
 *.pid
 *.seed

+*prom.json
+
 # Directory for instrumented libs generated by jscoverage/JSCover
 lib-cov

--- a/1
+++ b/1
@ -8,7 +8,6 @@ pipeline {
  stages {
    stage('install') {
      steps {
-        sh 'ls -a'
        sh 'node -v'
        sh 'npm -v'
        sh 'npm ci'
--- 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<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',
-      })
-    })
      }),
-});
+    }),
+  }),
+})
--- a/src/pages/course-list.tsx
+++ b/src/pages/course-list.tsx
@ -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}`
--- a/src/pages/lesson-details.tsx
+++ b/src/pages/lesson-details.tsx
@ -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>
+    </>
  )
 }

--- a/src/pages/lesson-list.tsx
+++ b/src/pages/lesson-list.tsx
@ -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>
+    </>
  )
 }

--- a/src/pages/style.ts
+++ b/src/pages/style.ts
@ -4,6 +4,9 @@ import {
  Card
 } from '@chakra-ui/react'

+export const BreadcrumbsWrapper = styled.div`
+  padding: 12px;
+`;

 export const MainWrapper = styled.main`
  display: flex;