Удален переключатель темы из компонента Attendance. Добавлена кнопка для копирования данных таблицы в компонент AttendanceTable с уведомлениями о результате операции.
This commit is contained in:
parent
5e32e55ac2
commit
f274a62be9
@ -36,13 +36,6 @@ export const Attendance = () => {
|
|||||||
</Badge>
|
</Badge>
|
||||||
</Box>
|
</Box>
|
||||||
<Spacer />
|
<Spacer />
|
||||||
<IconButton
|
|
||||||
aria-label="Переключить тему"
|
|
||||||
icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
|
|
||||||
onClick={toggleColorMode}
|
|
||||||
variant="ghost"
|
|
||||||
size="lg"
|
|
||||||
/>
|
|
||||||
</Flex>
|
</Flex>
|
||||||
|
|
||||||
<StatsCard stats={stats} />
|
<StatsCard stats={stats} />
|
||||||
|
@ -8,8 +8,12 @@ import {
|
|||||||
Td,
|
Td,
|
||||||
Box,
|
Box,
|
||||||
useColorMode,
|
useColorMode,
|
||||||
useTheme
|
useTheme,
|
||||||
|
Button,
|
||||||
|
useToast,
|
||||||
|
Flex
|
||||||
} from '@chakra-ui/react'
|
} from '@chakra-ui/react'
|
||||||
|
import { CopyIcon } from '@chakra-ui/icons'
|
||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import { ShortText } from './ShortText'
|
import { ShortText } from './ShortText'
|
||||||
import { AttendanceData } from '../hooks'
|
import { AttendanceData } from '../hooks'
|
||||||
@ -21,6 +25,7 @@ interface AttendanceTableProps {
|
|||||||
export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
|
export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
|
||||||
const { colorMode } = useColorMode()
|
const { colorMode } = useColorMode()
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
|
const toast = useToast()
|
||||||
|
|
||||||
const getPresentColor = () => {
|
const getPresentColor = () => {
|
||||||
return colorMode === 'dark' ? 'green.600' : 'green.100'
|
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'
|
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) {
|
if (!data.attendance?.length || !data.students?.length) {
|
||||||
return <Box>Нет данных для отображения</Box>
|
return <Box>Нет данных для отображения</Box>
|
||||||
}
|
}
|
||||||
@ -41,6 +121,17 @@ export const AttendanceTable: React.FC<AttendanceTableProps> = ({ data }) => {
|
|||||||
borderRadius="lg"
|
borderRadius="lg"
|
||||||
bg={colorMode === 'dark' ? 'gray.700' : 'white'}
|
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">
|
<Table variant="simple" size="sm">
|
||||||
<Thead>
|
<Thead>
|
||||||
<Tr>
|
<Tr>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user