KRBL/WhiteNightsAdminPanel
10
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[2] update list for /sight & /station routes

Browse Source
This commit is contained in:
maxim 2025-03-16 16:52:31 +03:00
parent efd6035e31
commit 7fc6c9dc7c
3 changed files with 49 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/CustomDataGrid.tsx
View File

@ -1,14 +1,45 @@
import {DataGrid, type DataGridProps} from '@mui/x-data-grid'
import {Stack, Box} from '@mui/material'
import {DataGrid, type DataGridProps, type GridColumnVisibilityModel} from '@mui/x-data-grid'
import {Stack, Box, Button} from '@mui/material'
import React, {useState, useEffect} from 'react'
import Cookies from 'js-cookie'
interface CustomDataGridProps extends DataGridProps {
hasCoordinates?: boolean
}
export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}: CustomDataGridProps) => {
const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({
latitude: showCoordinates,
longitude: showCoordinates,
})
useEffect(() => {
if (hasCoordinates) {
setColumnVisibilityModel({
latitude: showCoordinates,
longitude: showCoordinates,
})
Cookies.set('showCoordinates', String(showCoordinates))
}
}, [showCoordinates, hasCoordinates])
const toggleCoordinates = () => {
setShowCoordinates((prev) => !prev)
}
export const CustomDataGrid = (props: DataGridProps) => {
return (
<Stack spacing={2}>
<DataGrid {...props} />
<Box>
{/* Ваши дополнительные элементы */}
Дополнительный контент
</Box>
<DataGrid {...props} columns={columns} columnVisibilityModel={hasCoordinates ? columnVisibilityModel : undefined} onColumnVisibilityModelChange={hasCoordinates ? (model) => setColumnVisibilityModel(model) : undefined} />
{hasCoordinates && (
<Box sx={{mb: 2}}>
<Button variant="contained" onClick={toggleCoordinates}>
{showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
</Button>
</Box>
)}
</Stack>
)
}

39
src/pages/sight/list.tsx
View File

@ -1,19 +1,13 @@
import React, {useState, useEffect} from 'react'
import {type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import React from 'react'
import {type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import {Box, Button, Stack} from '@mui/material'
import Cookies from 'js-cookie'
import {Stack} from '@mui/material'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import {localeText} from '../../locales/ru/localeText'
export const SightList = () => {
const {dataGridProps} = useDataGrid({resource: 'sight/'})
const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
const columns = React.useMemo<GridColDef[]>(
() => [
{
@ -84,33 +78,10 @@ export const SightList = () => {
[],
)
const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({
latitude: showCoordinates,
longitude: showCoordinates,
})
useEffect(() => {
setColumnVisibilityModel({
latitude: showCoordinates,
longitude: showCoordinates,
})
Cookies.set('showCoordinates', String(showCoordinates))
}, [showCoordinates])
const toggleCoordinates = () => {
setShowCoordinates((prev) => !prev)
}
return (
<List>
<Stack gap={2.5}>
<CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} />
<Box sx={{mb: 2}}>
<Button variant="contained" onClick={toggleCoordinates}>
{showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
</Button>
</Box>
<CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
</Stack>
</List>
)

38
src/pages/station/list.tsx
View File

@ -1,19 +1,13 @@
import React, {useState, useEffect} from 'react'
import {type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import React from 'react'
import {type GridColDef} from '@mui/x-data-grid'
import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
import {Box, Button, Stack} from '@mui/material'
import Cookies from 'js-cookie'
import {Stack} from '@mui/material'
import {CustomDataGrid} from '../../components/CustomDataGrid'
import {localeText} from '../../locales/ru/localeText'
export const StationList = () => {
const {dataGridProps} = useDataGrid({resource: 'station/'})
const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
const columns = React.useMemo<GridColDef[]>(
() => [
{
@ -82,33 +76,11 @@ export const StationList = () => {
],
[],
)
const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({
latitude: showCoordinates,
longitude: showCoordinates,
})
useEffect(() => {
setColumnVisibilityModel({
latitude: showCoordinates,
longitude: showCoordinates,
})
Cookies.set('showCoordinates', String(showCoordinates))
}, [showCoordinates])
const toggleCoordinates = () => {
setShowCoordinates((prev) => !prev)
}
return (
<List>
<Stack gap={2.5}>
<CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} />
<Box sx={{mb: 2}}>
<Button variant="contained" onClick={toggleCoordinates}>
{showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
</Button>
</Box>
<CustomDataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} hasCoordinates />
</Stack>
</List>
)