122 lines
4.0 KiB
TypeScript
122 lines
4.0 KiB
TypeScript
import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
|
|
import {Stack, Button} from '@mui/material'
|
|
import {ExportButton} from '@refinedev/mui'
|
|
import {useExport} from '@refinedev/core'
|
|
import React, {useState, useEffect, useMemo} from 'react'
|
|
import Cookies from 'js-cookie'
|
|
|
|
import {localeText} from '../locales/ru/localeText'
|
|
|
|
interface CustomDataGridProps extends DataGridProps {
|
|
hasCoordinates?: boolean
|
|
resource?: string // Add this prop
|
|
}
|
|
|
|
const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id'] as const
|
|
|
|
export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
|
|
const isDev = import.meta.env.DEV
|
|
const {triggerExport, isLoading: exportLoading} = useExport({
|
|
resource: resource ?? '',
|
|
// pageSize: 100, #*
|
|
// maxItemCount: 100, #*
|
|
})
|
|
|
|
const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
|
|
const initialShowDevData = Cookies.get('showDevData') === 'true'
|
|
|
|
const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
|
|
const [showDevData, setShowDevData] = useState(initialShowDevData)
|
|
|
|
const availableDevFields = useMemo(() => DEV_FIELDS.filter((field) => columns.some((column) => column.field === field)), [columns])
|
|
|
|
const initialVisibilityModel = useMemo(() => {
|
|
const model: GridColumnVisibilityModel = {}
|
|
|
|
availableDevFields.forEach((field) => {
|
|
model[field] = initialShowDevData
|
|
})
|
|
|
|
if (hasCoordinates) {
|
|
model.latitude = initialShowCoordinates
|
|
model.longitude = initialShowCoordinates
|
|
}
|
|
|
|
return model
|
|
}, [availableDevFields, hasCoordinates, initialShowCoordinates, initialShowDevData])
|
|
|
|
const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>(initialVisibilityModel)
|
|
|
|
useEffect(() => {
|
|
setColumnVisibilityModel((prevModel) => {
|
|
const newModel = {...prevModel}
|
|
|
|
availableDevFields.forEach((field) => {
|
|
newModel[field] = showDevData
|
|
})
|
|
|
|
if (hasCoordinates) {
|
|
newModel.latitude = showCoordinates
|
|
newModel.longitude = showCoordinates
|
|
}
|
|
|
|
return newModel
|
|
})
|
|
|
|
if (hasCoordinates) {
|
|
Cookies.set('showCoordinates', String(showCoordinates))
|
|
}
|
|
Cookies.set('showDevData', String(showDevData))
|
|
}, [showCoordinates, showDevData, hasCoordinates, availableDevFields])
|
|
|
|
const toggleCoordinates = () => {
|
|
setShowCoordinates((prev) => !prev)
|
|
}
|
|
|
|
const toggleDevData = () => {
|
|
setShowDevData((prev) => !prev)
|
|
}
|
|
|
|
return (
|
|
<Stack spacing={2}>
|
|
<DataGrid
|
|
{...props}
|
|
columns={columns}
|
|
localeText={localeText}
|
|
columnVisibilityModel={columnVisibilityModel}
|
|
onColumnVisibilityModelChange={setColumnVisibilityModel}
|
|
// Добавляем базовые функции сортировки и фильтрации
|
|
sortingMode="client"
|
|
filterMode="client"
|
|
initialState={{
|
|
// pagination: {
|
|
// paginationModel: {pageSize: 25, page: 0},
|
|
// },
|
|
sorting: {
|
|
sortModel: [{field: 'id', sort: 'asc'}],
|
|
},
|
|
}}
|
|
pageSizeOptions={[10, 25, 50, 100]}
|
|
/>
|
|
|
|
<Stack direction="row" spacing={2} justifyContent="space-between" mb={2}>
|
|
<Stack direction="row" spacing={2} sx={{mb: 2}}>
|
|
{hasCoordinates && (
|
|
<Button variant="contained" onClick={toggleCoordinates}>
|
|
{showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
|
|
</Button>
|
|
)}
|
|
|
|
{isDev && availableDevFields.length > 0 && (
|
|
<Button variant="contained" onClick={toggleDevData}>
|
|
{showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
|
|
</Button>
|
|
)}
|
|
</Stack>
|
|
|
|
<ExportButton onClick={triggerExport} loading={exportLoading} />
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
}
|