Удален переключатель темы из компонента Attendance. Добавлена кнопка для копирования данных таблицы в компонент AttendanceTable с уведомлениями о результате операции.
This commit is contained in:
parent
5e32e55ac2
commit
f274a62be9
@ -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} />
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user