2025-06-03 01:48:46 +03:00
|
|
|
`components/useTableFilters.tsx`
|
2025-06-02 16:43:01 +03:00
|
|
|
```ts
|
2025-06-03 01:48:46 +03:00
|
|
|
// добавьте новую функцию для экспорта CSV
|
|
|
|
|
export function useTableFilters(schema: FieldInfo[]| null, initialData: unknown[] | null) {
|
|
|
|
|
const [filters, setFilters] = useState<FiltersState>({})
|
|
|
|
|
const [visibleColumns, setVisibleColumns] = useState<VisibilityState>({})
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
// Инициализация видимости колонок
|
|
|
|
|
useMemo(() => {
|
|
|
|
|
if (!schema){
|
|
|
|
|
return;
|
|
|
|
|
}
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
const initialVisibility: VisibilityState = {}
|
|
|
|
|
schema.forEach(field => {
|
|
|
|
|
initialVisibility[field.name] = true
|
|
|
|
|
})
|
|
|
|
|
setVisibleColumns(initialVisibility)
|
|
|
|
|
}, [schema])
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
// Обновление фильтров
|
|
|
|
|
const handleFilterChange = useCallback((name: string, filterPart: unknown) => {
|
|
|
|
|
setFilters(prev => ({
|
|
|
|
|
...prev,
|
|
|
|
|
[name]: {
|
|
|
|
|
...prev[name],
|
|
|
|
|
...filterPart
|
|
|
|
|
}
|
|
|
|
|
}))
|
|
|
|
|
}, [])
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
// Переключатель видимости колонки
|
|
|
|
|
const handleColumnToggle = useCallback((name: string) => {
|
|
|
|
|
setVisibleColumns(prev => ({
|
|
|
|
|
...prev,
|
|
|
|
|
[name]: !prev[name]
|
|
|
|
|
}))
|
|
|
|
|
}, [])
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
// Функция экспорта данных в CSV
|
|
|
|
|
const handleExportCSV = useCallback(() => {
|
|
|
|
|
if (!initialData || !schema || initialData.length === 0) {
|
|
|
|
|
alert('Нет данных для экспорта')
|
|
|
|
|
return
|
|
|
|
|
}
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
const visibleFields = schema.filter(field => visibleColumns[field.name])
|
|
|
|
|
const header = visibleFields.map(field => `"${field.title.replace(/"/g, '""')}"`).join(';')
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
const rows = initialData
|
|
|
|
|
.filter(item => schema.every(field => {
|
|
|
|
|
const value = item[field.name]
|
|
|
|
|
const filter = filters[field.name]
|
|
|
|
|
if (!filter) return true
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
if (field.type === 'string') {
|
|
|
|
|
if (filter.searchText) {
|
|
|
|
|
if (typeof value !== 'string') return false
|
|
|
|
|
if (!value.toLowerCase().includes(filter.searchText.toLowerCase())) return false
|
|
|
|
|
}
|
|
|
|
|
if (filter.exactMatch && filter.searchText) {
|
|
|
|
|
return value.toLowerCase() === filter.searchText.toLowerCase()
|
|
|
|
|
}
|
|
|
|
|
if (filter.empty !== undefined) {
|
|
|
|
|
const isEmpty = value === '' || value === null || value === undefined
|
|
|
|
|
if (filter.empty && !isEmpty) return false
|
|
|
|
|
if (filter.notEmpty && isEmpty) return false
|
|
|
|
|
}
|
|
|
|
|
} else if (field.format === 'date') {
|
|
|
|
|
const dateValue = new Date(value as string).getTime()
|
|
|
|
|
if (filter.fromDate) {
|
|
|
|
|
const fromTime = new Date(filter.fromDate).getTime()
|
|
|
|
|
if (dateValue < fromTime) return false
|
|
|
|
|
}
|
|
|
|
|
if (filter.toDate) {
|
|
|
|
|
const toTime = new Date(filter.toDate).getTime()
|
|
|
|
|
if (dateValue > toTime) return false
|
|
|
|
|
}
|
|
|
|
|
} else if (field.type === 'number') {
|
|
|
|
|
const numValue = Number(value)
|
|
|
|
|
if (filter.gte !== undefined && numValue < filter.gte) return false
|
|
|
|
|
if (filter.lte !== undefined && numValue > filter.lte) return false
|
2025-06-02 16:43:01 +03:00
|
|
|
}
|
2025-06-03 01:48:46 +03:00
|
|
|
return true
|
|
|
|
|
}))
|
|
|
|
|
.map(item => {
|
|
|
|
|
const row = visibleFields.map(field => {
|
|
|
|
|
const val = item[field.name]
|
|
|
|
|
// Обработка null/undefined
|
|
|
|
|
const strVal = val !== undefined && val !== null ? String(val) : ''
|
|
|
|
|
// Экранирование кавычек
|
|
|
|
|
return `"${strVal.replace(/"/g, '""')}"`
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
})
|
|
|
|
|
return row.join(';')
|
|
|
|
|
})
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
const csvContent = [header, ...rows].join('\n')
|
|
|
|
|
// Создаем ссылку для скачивания
|
|
|
|
|
const blob = new Blob([csvContent], { type: 'text/csv' })
|
|
|
|
|
const url = URL.createObjectURL(blob)
|
|
|
|
|
const link = document.createElement('a')
|
|
|
|
|
link.href = url
|
|
|
|
|
link.download = 'export.csv'
|
|
|
|
|
document.body.appendChild(link)
|
|
|
|
|
link.click()
|
|
|
|
|
document.body.removeChild(link)
|
|
|
|
|
URL.revokeObjectURL(url)
|
|
|
|
|
}, [initialData, schema, filters, visibleColumns])
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
filters,
|
|
|
|
|
setFilters,
|
|
|
|
|
visibleColumns,
|
|
|
|
|
setVisibleColumns,
|
|
|
|
|
handleFilterChange,
|
|
|
|
|
handleColumnToggle,
|
|
|
|
|
filteredData,
|
|
|
|
|
handleExportCSV // добавьте сюда
|
|
|
|
|
}
|
2025-06-02 16:43:01 +03:00
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
`Ваш файл, где вызывается handleExport` (примеры использования)
|
2025-06-02 16:43:01 +03:00
|
|
|
```ts
|
2025-06-03 01:48:46 +03:00
|
|
|
const {
|
|
|
|
|
filters,
|
|
|
|
|
handleFilterChange,
|
|
|
|
|
visibleColumns,
|
|
|
|
|
handleColumnToggle,
|
|
|
|
|
filteredData,
|
|
|
|
|
handleExportCSV // новая функция
|
|
|
|
|
} = useTableFilters(schema, dataPage.items)
|
2025-06-02 16:43:01 +03:00
|
|
|
|
2025-06-03 01:48:46 +03:00
|
|
|
const handleExport = async () => {
|
|
|
|
|
handleExportCSV()
|
|
|
|
|
}
|
|
|
|
|
```
|