From a989b806421829ad1c892e5365fb711475ae85d9 Mon Sep 17 00:00:00 2001 From: maxim Date: Fri, 21 Feb 2025 21:40:23 +0300 Subject: [PATCH] update `list` for `/sight` & `/station` routes --- package.json | 2 ++ pnpm-lock.yaml | 17 ++++++++++++++++ src/pages/sight/list.tsx | 40 ++++++++++++++++++++++++++++++++------ src/pages/station/list.tsx | 39 +++++++++++++++++++++++++++++++------ 4 files changed, 86 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 68cd839..f8891c2 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e830601..a0ed24f 100644 --- a/pnpm-lock.yaml +++ b/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: diff --git a/src/pages/sight/list.tsx b/src/pages/sight/list.tsx index e56c1d9..13aa7a6 100644 --- a/src/pages/sight/list.tsx +++ b/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( () => [ @@ -79,9 +82,34 @@ export const SightList = () => { [], ) + const [columnVisibilityModel, setColumnVisibilityModel] = useState({ + latitude: showCoordinates, + longitude: showCoordinates, + }) + + useEffect(() => { + setColumnVisibilityModel({ + latitude: showCoordinates, + longitude: showCoordinates, + }) + Cookies.set('showCoordinates', String(showCoordinates)) + }, [showCoordinates]) + + const toggleCoordinates = () => { + setShowCoordinates((prev) => !prev) + } + return ( - row.id} /> + + row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} /> + + + + + ) } diff --git a/src/pages/station/list.tsx b/src/pages/station/list.tsx index 508c8b0..543f6d2 100644 --- a/src/pages/station/list.tsx +++ b/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( () => [ @@ -77,10 +80,34 @@ export const StationList = () => { ], [], ) + const [columnVisibilityModel, setColumnVisibilityModel] = useState({ + latitude: showCoordinates, + longitude: showCoordinates, + }) + + useEffect(() => { + setColumnVisibilityModel({ + latitude: showCoordinates, + longitude: showCoordinates, + }) + Cookies.set('showCoordinates', String(showCoordinates)) + }, [showCoordinates]) + + const toggleCoordinates = () => { + setShowCoordinates((prev) => !prev) + } return ( - row.id} /> + + row.id} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={(model) => setColumnVisibilityModel(model)} /> + + + + + ) }