update list for /sight & /station routes

package.json

@@ -21,6 +21,7 @@
     "axios": "^1.7.9",
     "easymde": "^2.19.0",
     "i18next": "^24.2.2",
+    "js-cookie": "^3.0.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-hook-form": "^7.30.0",
@@ -29,6 +30,7 @@
     "react-simplemde-editor": "^5.2.0"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^18.16.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",

pnpm-lock.yaml

@@ -59,6 +59,9 @@ importers:
       i18next:
         specifier: ^24.2.2
         version: 24.2.2(typescript@5.7.3)
+      js-cookie:
+        specifier: ^3.0.5
+        version: 3.0.5
       react:
         specifier: ^18.0.0
         version: 18.3.1
@@ -78,6 +81,9 @@ importers:
         specifier: ^5.2.0
         version: 5.2.0(easymde@2.19.0)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
     devDependencies:
+      '@types/js-cookie':
+        specifier: ^3.0.6
+        version: 3.0.6
       '@types/node':
         specifier: ^18.16.2
         version: 18.19.71
@@ -957,6 +963,9 @@ packages:
   '@types/http-proxy@1.17.15':
     resolution: {integrity: sha512-25g5atgiVNTIv0LBDTg1H74Hvayx0ajtJPLLcYE3whFv75J0pWNtOBzaXJQgDTmrX1bx5U9YC2w/n65BN1HwRQ==}
 
+  '@types/js-cookie@3.0.6':
+    resolution: {integrity: sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1999,6 +2008,10 @@ packages:
   jackspeak@3.4.3:
     resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==}
 
+  js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==}
+    engines: {node: '>=14'}
+
   js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
 
@@ -4202,6 +4215,8 @@ snapshots:
     dependencies:
       '@types/node': 18.19.71
 
+  '@types/js-cookie@3.0.6': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/marked@4.3.2': {}
@@ -5331,6 +5346,8 @@ snapshots:
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
 
+  js-cookie@3.0.5: {}
+
   js-tokens@4.0.0: {}
 
   js-yaml@3.14.1:

src/pages/sight/list.tsx

@@ -1,13 +1,16 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+import React, {useState, useEffect} from 'react'
+import {DataGrid, type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
+import {Box, Button, Stack} from '@mui/material'
 
+import Cookies from 'js-cookie'
 import {localeText} from '../../locales/ru/localeText'
 
 export const SightList = () => {
-  const {dataGridProps} = useDataGrid({
-    resource: 'sight/',
-  })
+  const {dataGridProps} = useDataGrid({resource: 'sight/'})
+
+  const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
+  const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
 
   const columns = React.useMemo<GridColDef[]>(
     () => [
@@ -79,9 +82,34 @@ 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>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
+      <Stack gap={2.5}>
+        <DataGrid {...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>
+      </Stack>
     </List>
   )
 }

src/pages/station/list.tsx

@@ -1,13 +1,16 @@
-import {DataGrid, type GridColDef} from '@mui/x-data-grid'
+import React, {useState, useEffect} from 'react'
+import {DataGrid, type GridColDef, type GridColumnVisibilityModel} from '@mui/x-data-grid'
 import {DeleteButton, EditButton, List, ShowButton, useDataGrid} from '@refinedev/mui'
-import React from 'react'
+import {Box, Button, Stack} from '@mui/material'
 
+import Cookies from 'js-cookie'
 import {localeText} from '../../locales/ru/localeText'
 
 export const StationList = () => {
-  const {dataGridProps} = useDataGrid({
-    resource: 'station/',
-  })
+  const {dataGridProps} = useDataGrid({resource: 'station/'})
+
+  const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
+  const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
 
   const columns = React.useMemo<GridColDef[]>(
     () => [
@@ -77,10 +80,34 @@ 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>
-      <DataGrid {...dataGridProps} columns={columns} localeText={localeText} getRowId={(row: any) => row.id} />
+      <Stack gap={2.5}>
+        <DataGrid {...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>
+      </Stack>
     </List>
   )
 }