From bf73138521751da039837278ee0e95259b4b9e1a Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Sun, 16 Mar 2025 17:32:02 +0300
Subject: [PATCH] hide `specific` data for `users` into `CustomDataGrid`

---
 src/components/CustomDataGrid.tsx | 76 ++++++++++++++++++++++++-------
 src/pages/media/list.tsx          |  6 +--
 src/pages/sight/list.tsx          |  6 +--
 src/pages/vehicle/list.tsx        |  7 +--
 4 files changed, 69 insertions(+), 26 deletions(-)

diff --git a/src/components/CustomDataGrid.tsx b/src/components/CustomDataGrid.tsx
index e4fa5ff..d2f2977 100644
--- a/src/components/CustomDataGrid.tsx
+++ b/src/components/CustomDataGrid.tsx
@@ -1,45 +1,87 @@
 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 {Stack, Button} from '@mui/material'
+import React, {useState, useEffect, useMemo} from 'react'
 import Cookies from 'js-cookie'
 
 interface CustomDataGridProps extends DataGridProps {
   hasCoordinates?: boolean
 }
 
+const DEV_FIELDS = ['id', 'city_id', 'carrier_id'] as const
+
 export const CustomDataGrid = ({hasCoordinates = false, columns = [], ...props}: CustomDataGridProps) => {
+  const isDev = import.meta.env.DEV
+
   const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
+  const initialShowDevData = Cookies.get('showDevData') === 'true'
+
   const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
-  const [columnVisibilityModel, setColumnVisibilityModel] = useState<GridColumnVisibilityModel>({
-    latitude: showCoordinates,
-    longitude: showCoordinates,
-  })
+  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(() => {
-    if (hasCoordinates) {
-      setColumnVisibilityModel({
-        latitude: showCoordinates,
-        longitude: showCoordinates,
+    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))
     }
-  }, [showCoordinates, hasCoordinates])
+    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} columnVisibilityModel={hasCoordinates ? columnVisibilityModel : undefined} onColumnVisibilityModelChange={hasCoordinates ? (model) => setColumnVisibilityModel(model) : undefined} />
-
-      {hasCoordinates && (
-        <Box sx={{mb: 2}}>
+      <DataGrid {...props} columns={columns} columnVisibilityModel={columnVisibilityModel} onColumnVisibilityModelChange={setColumnVisibilityModel} />
+      <Stack direction="row" spacing={2} sx={{mb: 2}}>
+        {hasCoordinates && (
           <Button variant="contained" onClick={toggleCoordinates}>
             {showCoordinates ? 'Скрыть координаты' : 'Показать координаты'}
           </Button>
-        </Box>
-      )}
+        )}
+        {isDev && availableDevFields.length > 0 && (
+          <Button variant="contained" onClick={toggleDevData}>
+            {showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
+          </Button>
+        )}
+      </Stack>
     </Stack>
   )
 }
diff --git a/src/pages/media/list.tsx b/src/pages/media/list.tsx
index c7d1dee..ad6d94e 100644
--- a/src/pages/media/list.tsx
+++ b/src/pages/media/list.tsx
@@ -41,10 +41,10 @@ export const MediaList = () => {
         field: 'actions',
         headerName: 'Действия',
         align: 'right',
-        headerAlign: 'center',
-        minWidth: 130,
-        sortable: false,
+        headerAlign: 'right',
         display: 'flex',
+        flex: 1,
+        sortable: false,
         renderCell: function render({row}) {
           return (
             <>
diff --git a/src/pages/sight/list.tsx b/src/pages/sight/list.tsx
index 6df9e38..6de2b11 100644
--- a/src/pages/sight/list.tsx
+++ b/src/pages/sight/list.tsx
@@ -60,10 +60,10 @@ export const SightList = () => {
         field: 'actions',
         headerName: 'Действия',
         align: 'right',
-        headerAlign: 'center',
-        minWidth: 120,
-        sortable: false,
+        headerAlign: 'right',
         display: 'flex',
+        flex: 1,
+        sortable: false,
         renderCell: function render({row}) {
           return (
             <>
diff --git a/src/pages/vehicle/list.tsx b/src/pages/vehicle/list.tsx
index 78e2043..dc50d6f 100644
--- a/src/pages/vehicle/list.tsx
+++ b/src/pages/vehicle/list.tsx
@@ -51,10 +51,11 @@ export const VehicleList = () => {
         field: 'actions',
         headerName: 'Действия',
         align: 'right',
-        headerAlign: 'center',
-        minWidth: 120,
-        sortable: false,
+        headerAlign: 'right',
         display: 'flex',
+        flex: 1,
+        sortable: false,
+
         renderCell: function render({row}) {
           return (
             <>