Удален переключатель темы из компонента Attendance. Добавлена кнопка для копирования данных таблицы в компонент AttendanceTable с уведомлениями о результате операции.

This commit is contained in:
Primakov Alexandr Alexandrovich 2025-03-23 09:09:50 +03:00
parent 5e32e55ac2
commit f274a62be9
2 changed files with 92 additions and 8 deletions

View File

@ -36,13 +36,6 @@ export const Attendance = () => {
</Badge>
</Box>
<Spacer />
<IconButton
aria-label="Переключить тему"
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
onClick={toggleColorMode}
variant="ghost"
size="lg"
/>
</Flex>
<StatsCard stats={stats} />

View File

@ -8,8 +8,12 @@ import {
Td,
Box,
useColorMode,
useTheme
useTheme,
Button,
useToast,
Flex
} from '@chakra-ui/react'
import { CopyIcon } from '@chakra-ui/icons'
import dayjs from 'dayjs'
import { ShortText } from './ShortText'
import { AttendanceData } from '../hooks'
@ -21,6 +25,7 @@ interface AttendanceTableProps {
export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
const { colorMode } = useColorMode()
const theme = useTheme()
const toast = useToast()
const getPresentColor = () => {
return colorMode === 'dark' ? 'green.600' : 'green.100'
@ -30,6 +35,81 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
return colorMode === 'dark' ? 'red.800' : 'red.100'
}
// Функция для копирования данных таблицы без сокращений
const copyTableData = () => {
if (!data.attendance?.length) return
// Строим заголовок таблицы
let tableContent = []
// Добавляем заголовки с именами преподавателей
let headerRow = []
data.teachers?.forEach(teacher => {
headerRow.push(teacher.value)
})
// Добавляем столбцы даты и названия занятия
headerRow.push('Дата', 'Название занятия')
// Добавляем студентов
data.students.forEach(student => {
headerRow.push(student.name || student.value || 'Имя не определено')
})
// Добавляем заголовок в таблицу
tableContent.push(headerRow.join('\t'))
// Формируем данные для каждой строки
data.attendance.forEach(lesson => {
let row = []
// Добавляем данные о присутствии преподавателей
data.teachers?.forEach(teacher => {
const wasThere = Boolean(lesson.teachers) &&
lesson.teachers.findIndex(u => u.sub === teacher.sub) !== -1
row.push(wasThere ? '+' : '-')
})
// Добавляем дату
row.push(dayjs(lesson.date).format('DD.MM.YYYY'))
// Добавляем полное название занятия (без сокращений)
row.push(lesson.name)
// Добавляем данные о присутствии студентов
data.students.forEach(student => {
const wasThere = lesson.students.findIndex(u => u.sub === student.sub) !== -1
row.push(wasThere ? '+' : '-')
})
// Добавляем строку в таблицу
tableContent.push(row.join('\t'))
})
// Копируем в буфер обмена
const finalContent = tableContent.join('\n')
navigator.clipboard.writeText(finalContent)
.then(() => {
toast({
title: 'Скопировано в буфер обмена',
description: 'Таблица успешно скопирована без сокращений',
status: 'success',
duration: 3000,
isClosable: true,
})
})
.catch(err => {
toast({
title: 'Ошибка копирования',
description: 'Не удалось скопировать таблицу',
status: 'error',
duration: 3000,
isClosable: true,
})
console.error('Ошибка копирования', err)
})
}
if (!data.attendance?.length || !data.students?.length) {
return <Box>Нет данных для отображения</Box>
}
@ -41,6 +121,17 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
borderRadius="lg"
bg={colorMode === 'dark' ? 'gray.700' : 'white'}
>
<Flex justifyContent="flex-end" p={2}>
<Button
leftIcon={<CopyIcon />}
size="sm"
colorScheme="blue"
onClick={copyTableData}
mb={2}
>
Копировать таблицу
</Button>
</Flex>
<Table variant="simple" size="sm">
<Thead>
<Tr>