inline edit mode

src/pages/lesson-list/components/item.tsx

@@ -0,0 +1,144 @@
+import React, { useEffect, useRef, useState } from 'react'
+import dayjs from 'dayjs'
+import { Link } from 'react-router-dom'
+import { getNavigationsValue, getFeatures } from '@brojs/cli'
+import {
+  Button,
+  Tr,
+  Td,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList,
+  useToast,
+} from '@chakra-ui/react'
+import { EditIcon } from '@chakra-ui/icons'
+
+import { qrCode } from '../../../assets'
+
+import { LessonForm } from './lessons-form'
+import { api } from '../../../__data__/api/api'
+
+const features = getFeatures('journal')
+const groupByDate = features?.['group.by.date']
+
+type ItemProps = {
+  id: string
+  date: string
+  name: string
+  isTeacher: boolean
+  courseId: string
+  setlessonToDelete(): void
+  students: unknown[]
+}
+
+export const Item: React.FC<ItemProps> = ({
+  id,
+  date,
+  name,
+  isTeacher,
+  courseId,
+  setlessonToDelete,
+  students,
+}) => {
+  const [edit, setEdit] = useState(false)
+  const toastRef = useRef(null)
+  const toast = useToast()
+  const [updateLesson, updateLessonRqst] = api.useUpdateLessonMutation()
+  const createdLessonRef = useRef(null)
+
+  const onSubmit = (lessonData) => {
+    toastRef.current = toast({
+      title: 'Отправляем',
+      status: 'loading',
+      duration: 9000,
+    })
+    createdLessonRef.current = lessonData
+    if (navigator.onLine) {
+      updateLesson(lessonData)
+    } else {
+      toast.update(toastRef.current, {
+        title: 'Отсутствует интернет',
+        status: 'error',
+        duration: 3000
+      })
+    }
+  }
+
+  useEffect(() => {
+    if (updateLessonRqst.isSuccess) {
+      const toastProps = {
+        title: 'Лекция Обновлена',
+        description: `Лекция ${createdLessonRef.current?.name} успешно обновлена`,
+        status: 'success' as const,
+        duration: 9000,
+        isClosable: true,
+      }
+      if (toastRef.current) toast.update(toastRef.current, toastProps)
+      else toast(toastProps)
+      setEdit(false)
+    }
+  }, [updateLessonRqst.isSuccess])
+
+  if (edit && isTeacher) {
+    return (
+      <Tr>
+        <Td colSpan={5}>
+          <LessonForm
+            isLoading={updateLessonRqst.isLoading}
+            error={(updateLessonRqst.error as any)?.error}
+            onSubmit={onSubmit}
+            onCancel={() => {
+              setEdit(false)
+            }}
+            lesson={{ id, name, date }}
+            title={'Редактирование лекции'}
+            nameButton={'Сохранить'}
+          />
+        </Td>
+      </Tr>
+    )
+  }
+
+  return (
+    <Tr>
+      {isTeacher && (
+        <Td>
+          <Link
+            to={`${getNavigationsValue('journal.main')}/lesson/${courseId}/${id}`}
+            style={{ display: 'flex' }}
+          >
+            <img width={24} src={qrCode} style={{ margin: '0 auto' }} />
+          </Link>
+        </Td>
+      )}
+      <Td textAlign="center">
+        {dayjs(date).format(groupByDate ? 'HH:mm' : 'HH:mm DD.MM.YY')}
+      </Td>
+      <Td>{name}</Td>
+      {isTeacher && (
+        <Td>
+          {!edit && (
+            <Menu>
+              <MenuButton as={Button}>
+                <EditIcon />
+              </MenuButton>
+              <MenuList>
+                <MenuItem
+                  onClick={() => {
+                    setEdit(true)
+                  }}
+                >
+                  Edit
+                </MenuItem>
+                <MenuItem onClick={setlessonToDelete}>Delete</MenuItem>
+              </MenuList>
+            </Menu>
+          )}
+          {edit && <Button onClick={setlessonToDelete}>Сохранить</Button>}
+        </Td>
+      )}
+      <Td isNumeric>{students.length}</Td>
+    </Tr>
+  )
+}

src/pages/lesson-list/components/lesson-items.tsx

@@ -0,0 +1,45 @@
+import React from 'react'
+import dayjs from 'dayjs'
+import {
+  Tr,
+  Td,
+} from '@chakra-ui/react'
+
+import { Lesson } from '../../../__data__/model'
+
+import { Item } from './item'
+
+type LessonItemProps = {
+  date: string
+  lessons: Lesson[]
+  isTeacher: boolean
+  courseId: string
+  setlessonToDelete(lesson: Lesson): void
+}
+
+export const LessonItems: React.FC<LessonItemProps> = ({
+  date,
+  lessons,
+  isTeacher,
+  courseId,
+  setlessonToDelete,
+}) => (
+  <>
+    {date && (
+      <Tr>
+        <Td colSpan={isTeacher ? 5 : 3}>
+          {dayjs(date).format('DD MMMM YYYY')}
+        </Td>
+      </Tr>
+    )}
+    {lessons.map((lesson) => (
+      <Item
+        key={lesson.id}
+        {...lesson}
+        setlessonToDelete={() => setlessonToDelete(lesson)}
+        courseId={courseId}
+        isTeacher={isTeacher}
+      />
+    ))}
+  </>
+)

src/pages/lesson-list/components/lessons-form.tsx

@@ -1,19 +1,19 @@
 import React from 'react'
 import { useForm, Controller } from 'react-hook-form'
 import {
-    Box,
-    Card,
-    CardBody,
-    CardHeader,
-    Heading,
-    Button,
-    CloseButton,
-    VStack,
-    FormControl,
-    FormLabel,
-    FormHelperText,
-    FormErrorMessage,
-    Input,
+  Box,
+  Card,
+  CardBody,
+  CardHeader,
+  Heading,
+  Button,
+  CloseButton,
+  VStack,
+  FormControl,
+  FormLabel,
+  FormHelperText,
+  FormErrorMessage,
+  Input,
 } from '@chakra-ui/react'
 import { AddIcon } from '@chakra-ui/icons'
 
@@ -22,116 +22,119 @@ import { Lesson } from '../../../__data__/model'
 import { ErrorSpan } from '../style'
 
 interface NewLessonForm {
-    name: string;
-    date: string;
+  name: string
+  date: string
 }
 
 interface LessonFormProps {
-    lesson?: Partial<Lesson>
-    isLoading: boolean
-    onCancel: () => void
-    onSubmit: (lesson: Lesson) => void
-    error?: string
-    title: string
-    nameButton: string
+  lesson?: Partial<Lesson>
+  isLoading: boolean
+  onCancel: () => void
+  onSubmit: (lesson: Lesson) => void
+  error?: string
+  title: string
+  nameButton: string
 }
 
 export const LessonForm = ({
-    lesson,
-    isLoading,
-    onCancel,
-    onSubmit,
-    error,
-    title,
-    nameButton,
+  lesson,
+  isLoading,
+  onCancel,
+  onSubmit,
+  error,
+  title,
+  nameButton,
 }: LessonFormProps) => {
-    const {
-        control,
-        handleSubmit,
-        reset,
-        formState: { errors },
-    } = useForm<NewLessonForm>({
-        defaultValues: (lesson && { ...lesson, date: dateToCalendarFormat(lesson.date) }) || {
-            name: '',
-            date: dateToCalendarFormat(),
-        },
-    })
-    
-    return (
-        <Card align="left">
-        <CardHeader display="flex">
+  const {
+    control,
+    handleSubmit,
+    reset,
+    formState: { errors },
+  } = useForm<NewLessonForm>({
+    defaultValues: (lesson && {
+      ...lesson,
+      date: dateToCalendarFormat(lesson.date),
+    }) || {
+      name: '',
+      date: dateToCalendarFormat(),
+    },
+  })
+
+  return (
+    <Card align="left">
+      <CardHeader display="flex">
         <Heading as="h2" mt="0">
-        {title}
+          {title}
         </Heading>
         <CloseButton
-        ml="auto"
-        onClick={() => {
+          ml="auto"
+          onClick={() => {
             reset()
             onCancel()
-        }}
+          }}
         />
-        </CardHeader>
-        <CardBody>
+      </CardHeader>
+      <CardBody>
         <form onSubmit={handleSubmit(onSubmit)}>
-        <VStack spacing="10" align="left">
-        <Controller
-        control={control}
-        name="date"
-        rules={{ required: 'Обязательное поле' }}
-        render={({ field }) => (
-            <FormControl>
-            <FormLabel>Дата</FormLabel>
-            <Input
-            {...field}
-            required={false}
-            placeholder="Укажите дату лекции"
-            size="md"
-            type="datetime-local"
+          <VStack spacing="10" align="left">
+            <Controller
+              control={control}
+              name="date"
+              rules={{ required: 'Обязательное поле' }}
+              render={({ field }) => (
+                <FormControl>
+                  <FormLabel>Дата</FormLabel>
+                  <Input
+                    {...field}
+                    required={false}
+                    placeholder="Укажите дату лекции"
+                    size="md"
+                    type="datetime-local"
+                  />
+                  {errors.date ? (
+                    <FormErrorMessage>{errors.date?.message}</FormErrorMessage>
+                  ) : (
+                    <FormHelperText>Укажите дату и время лекции</FormHelperText>
+                  )}
+                </FormControl>
+              )}
             />
-            {errors.date ? (
-                <FormErrorMessage>{errors.date?.message}</FormErrorMessage>
-            ) : (
-                <FormHelperText>Укажите дату и время лекции</FormHelperText>
-            )}
-            </FormControl>
-        )}
-        />
-        
-        <Controller
-        control={control}
-        name="name"
-        rules={{ required: 'Обязательное поле' }}
-        render={({ field }) => (
-            <FormControl isRequired isInvalid={Boolean(errors.name)}>
-            <FormLabel>Название новой лекции:</FormLabel>
-            <Input
-            {...field}
-            required={false}
-            placeholder="Название лекции"
-            size="md"
+
+            <Controller
+              control={control}
+              name="name"
+              rules={{ required: 'Обязательное поле' }}
+              render={({ field }) => (
+                <FormControl isRequired isInvalid={Boolean(errors.name)}>
+                  <FormLabel>Название новой лекции:</FormLabel>
+                  <Input
+                    {...field}
+                    required={false}
+                    placeholder="Название лекции"
+                    size="md"
+                  />
+                  {errors.name && (
+                    <FormErrorMessage>{errors.name.message}</FormErrorMessage>
+                  )}
+                </FormControl>
+              )}
             />
-            {errors.name && (
-                <FormErrorMessage>{errors.name.message}</FormErrorMessage>
-            )}
-            </FormControl>
-        )}
-        />
-        <Box mt="10">
-        <Button
-        size="lg"
-        type="submit"
-        leftIcon={<AddIcon />}
-        colorScheme="blue"
-        isLoading={isLoading}
-        >
-        {nameButton}
-        </Button>
-        </Box>
-        </VStack>
-        
-        {error && <ErrorSpan>{error}</ErrorSpan>}
+            <Box mt="10">
+              <Button
+                size="lg"
+                type="submit"
+                leftIcon={<AddIcon />}
+                colorScheme="blue"
+                isLoading={isLoading}
+              >
+                {nameButton}
+              </Button>
+            </Box>
+          </VStack>
+
+          {error && <ErrorSpan>{error}</ErrorSpan>}
         </form>
-        </CardBody>
-        </Card>
-    )
+      </CardBody>
+    </Card>
+  )
 }