fix typo

polling interval from config qrcode as link courses list page journal.pl as name fix package-lock lesson missed students merge students list reset version 1.0.0 styled page of visits rename students fake students, delete comments Обновил Readme Squashed commit of the following: commit ebc511e36b84c077f7bc029540ead1e3c58c49ab Author: Alexei <adu864222@gmail.com> Date: Tue Mar 19 00:23:30 2024 +1000 fake students, delete comments commit 018582d16c581663103e5fded99cc10fca400532 Author: Alexei <adu864222@gmail.com> Date: Mon Mar 18 23:13:01 2024 +1000 rename students commit e53922d7fd89cf371c90e167c6486b36b0789036 Author: Alexei <adu864222@gmail.com> Date: Sun Mar 17 00:45:11 2024 +1000 styled page of visits Обновил Readme Squashed commit of the following: commit ebc511e36b84c077f7bc029540ead1e3c58c49ab Author: Alexei <adu864222@gmail.com> Date: Tue Mar 19 00:23:30 2024 +1000 fake students, delete comments commit 018582d16c581663103e5fded99cc10fca400532 Author: Alexei <adu864222@gmail.com> Date: Mon Mar 18 23:13:01 2024 +1000 rename students commit e53922d7fd89cf371c90e167c6486b36b0789036 Author: Alexei <adu864222@gmail.com> Date: Sun Mar 17 00:45:11 2024 +1000 styled page of visits JRL-51 breadcrumbs + fonts 1.1.0 1.2.0 correct width h1 on page of visits students styled card of course
2024-03-01 12:49:55 +03:00
parent 0574d4e8d0
commit 25511f37d1
51 changed files with 3033 additions and 7778 deletions
@@ -0,0 +1,132 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import dayjs from 'dayjs'
+import { Link, useParams } from 'react-router-dom'
+import { getNavigationsValue } from '@ijl/cli'
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+} from '@chakra-ui/react'
+
+import {
+  ArrowImg,
+  IconButton,
+  InputElement,
+  InputLabel,
+  InputWrapper,
+  StartWrapper,
+  LessonItem,
+  Lessonname,
+  Papper,
+  ErrorSpan,
+  Cross,
+  AddButton,
+  MainWrapper,
+} from './style'
+
+import arrow from '../assets/36-arrow-right.svg'
+import { keycloak } from '../__data__/kc'
+import { useAppSelector } from '../__data__/store'
+import { api } from '../__data__/api/api'
+import { isTeacher } from '../utils/user'
+
+const LessonList = () => {
+  const { courseId } = useParams()
+  const user = useAppSelector((s) => s.user)
+  const { data, isLoading, error } = api.useLessonListQuery(courseId)
+  const [createLesson, crLQuery] = api.useCreateLessonMutation()
+  const [value, setValue] = useState('')
+  const [showForm, setShowForm] = useState(false)
+
+  const handleChange = useCallback(
+    (event) => {
+      setValue(event.target.value.toUpperCase())
+    },
+    [setValue],
+  )
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault()
+      createLesson({ name: value, courseId })
+    },
+    [value],
+  )
+
+  useEffect(() => {
+    if (crLQuery.isSuccess) {
+      setValue('')
+    }
+  }, [crLQuery.isSuccess])
+
+  return (
+    <MainWrapper>
+      <StartWrapper>
+        <Breadcrumb>
+          <BreadcrumbItem>
+            <Link as={BreadcrumbLink} to={getNavigationsValue('journal.main')}>Журнал</Link>
+          </BreadcrumbItem>
+
+          <BreadcrumbItem isCurrentPage>
+            <BreadcrumbLink href="#">Курс</BreadcrumbLink>
+          </BreadcrumbItem>
+        </Breadcrumb>
+
+        {isTeacher(user) && (
+          <>
+            {showForm ? (
+              <Papper>
+                <Cross role="button" onClick={() => setShowForm(false)}>
+                  X
+                </Cross>
+                <form onSubmit={handleSubmit}>
+                  <InputWrapper>
+                    <InputLabel htmlFor="input">
+                      Название новой лекции:
+                    </InputLabel>
+                    <InputElement
+                      value={value}
+                      onChange={handleChange}
+                      id="input"
+                      type="text"
+                      autoComplete="off"
+                    />
+                    <IconButton type="submit">
+                      <ArrowImg src={arrow} />
+                    </IconButton>
+                  </InputWrapper>
+                  {crLQuery.error && (
+                    <ErrorSpan>{(crLQuery.error as any).error}</ErrorSpan>
+                  )}
+                </form>
+              </Papper>
+            ) : (
+              <AddButton onClick={() => setShowForm(true)}>Добавить</AddButton>
+            )}
+          </>
+        )}
+        <ul style={{ paddingLeft: 0 }}>
+          {data?.body?.map((lesson) => (
+            <LessonItem key={lesson._id}>
+              <Link
+                to={
+                  isTeacher(user)
+                    ? `${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>
+              </Link>
+            </LessonItem>
+          ))}
+        </ul>
+      </StartWrapper>
+    </MainWrapper>
+  )
+}
+
+export default LessonList