Обновлены компоненты для учета только прошедших лекций в статистике посещаемости. Добавлено мобильное отображение в компонентах LessonItems и Item, улучшена логика фильтрации лекций. Реализовано отображение QR-кода с учетом темы оформления.

2025-03-23 17:14:53 +03:00
parent d13bff5331
commit 1b337278fe
5 changed files with 223 additions and 60 deletions
@@ -3,6 +3,10 @@ import dayjs from 'dayjs'
 import {
  Tr,
  Td,
+  Box,
+  Flex,
+  Text,
+  useBreakpointValue,
 } from '@chakra-ui/react'

 import { Lesson } from '../../../__data__/model'
@@ -25,24 +29,70 @@ export const LessonItems: React.FC<LessonItemProps> = ({
  courseId,
  setlessonToDelete,
  setEditLesson,
-}) => (
-  <>
-    {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)}
-        setEditLesson={setEditLesson ? () => setEditLesson(lesson) : undefined}
-        courseId={courseId}
-        isTeacher={isTeacher}
-      />
-    ))}
-  </>
-)
+}) => {
+  // Использование useBreakpointValue для определения мобильного отображения
+  const isMobile = useBreakpointValue({ base: true, md: false })
+
+  // Мобильное отображение
+  if (isMobile) {
+    return (
+      <>
+        {date && (
+          <Box 
+            p={3} 
+            mb={2} 
+            bg="gray.100" 
+            borderRadius="md"
+            _dark={{ bg: "gray.700" }}
+          >
+            <Text fontWeight="bold">{dayjs(date).format('DD MMMM YYYY')}</Text>
+          </Box>
+        )}
+        {lessons.map((lesson) => (
+          <Box 
+            key={lesson.id} 
+            p={3} 
+            mb={2} 
+            borderRadius="md" 
+            boxShadow="sm"
+            borderLeft="4px solid"
+            borderLeftColor="cyan.500"
+          >
+            <Item
+              {...lesson}
+              setlessonToDelete={() => setlessonToDelete(lesson)}
+              setEditLesson={setEditLesson ? () => setEditLesson(lesson) : undefined}
+              courseId={courseId}
+              isTeacher={isTeacher}
+              isMobile={true}
+            />
+          </Box>
+        ))}
+      </>
+    )
+  }
+
+  // Стандартное отображение для планшетов и больших экранов
+  return (
+    <>
+      {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)}
+          setEditLesson={setEditLesson ? () => setEditLesson(lesson) : undefined}
+          courseId={courseId}
+          isTeacher={isTeacher}
+          isMobile={false}
+        />
+      ))}
+    </>
+  )
+}