From 6db769f5986c7a3f48cd3e8f5ca3aaf523b2a33b Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Wed, 19 Mar 2025 21:11:32 +0300
Subject: [PATCH] add new `props` for `/carrier` route

---
 src/components/CustomDataGrid.tsx |  11 ++-
 src/pages/carrier/create.tsx      | 116 ++++++++++++++++++++++++++++++
 src/pages/carrier/edit.tsx        | 116 ++++++++++++++++++++++++++++++
 src/pages/carrier/list.tsx        |  37 +++++++++-
 src/pages/carrier/show.tsx        |  34 +++++++--
 src/pages/route/show.tsx          |   5 ++
 6 files changed, 305 insertions(+), 14 deletions(-)

diff --git a/src/components/CustomDataGrid.tsx b/src/components/CustomDataGrid.tsx
index c981be1..f16fb76 100644
--- a/src/components/CustomDataGrid.tsx
+++ b/src/components/CustomDataGrid.tsx
@@ -12,10 +12,10 @@ interface CustomDataGridProps extends DataGridProps {
   resource?: string // Add this prop
 }
 
-const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id'] as const
+const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id', 'main_color', 'left_color', 'right_color', 'logo', 'slogan'] as const
 
 export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
-  const isDev = import.meta.env.DEV
+  // const isDev = import.meta.env.DEV
   const {triggerExport, isLoading: exportLoading} = useExport({
     resource: resource ?? '',
     // pageSize: 100, #*
@@ -23,10 +23,9 @@ export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource,
   })
 
   const initialShowCoordinates = Cookies.get('showCoordinates') === 'true'
-  const initialShowDevData = Cookies.get('showDevData') === 'true'
-
+  const initialShowDevData = false // Default to false in both prod and dev
   const [showCoordinates, setShowCoordinates] = useState(initialShowCoordinates)
-  const [showDevData, setShowDevData] = useState(initialShowDevData)
+  const [showDevData, setShowDevData] = useState(Cookies.get('showDevData') === 'true')
 
   const availableDevFields = useMemo(() => DEV_FIELDS.filter((field) => columns.some((column) => column.field === field)), [columns])
 
@@ -107,7 +106,7 @@ export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource,
             </Button>
           )}
 
-          {isDev && availableDevFields.length > 0 && (
+          {showDevData && availableDevFields.length > 0 && (
             <Button variant="contained" onClick={toggleDevData}>
               {showDevData ? 'Скрыть служебные данные' : 'Показать служебные данные'}
             </Button>
diff --git a/src/pages/carrier/create.tsx b/src/pages/carrier/create.tsx
index 20b3dd7..ad9c77b 100644
--- a/src/pages/carrier/create.tsx
+++ b/src/pages/carrier/create.tsx
@@ -23,6 +23,17 @@ export const CarrierCreate = () => {
     ],
   })
 
+  const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
+    resource: 'media',
+    onSearch: (value) => [
+      {
+        field: 'filename',
+        operator: 'contains',
+        value,
+      },
+    ],
+  })
+
   return (
     <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
@@ -79,6 +90,111 @@ export const CarrierCreate = () => {
           label={'Короткое имя'}
           name="short_name"
         />
+
+        <TextField
+          {...register('main_color', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.main_color}
+          helperText={(errors as any)?.main_color?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="color"
+          label={'Основной цвет'}
+          name="main_color"
+          sx={{
+            '& input': {
+              height: '50px',
+              paddingBlock: '14px',
+              paddingInline: '14px',
+              cursor: 'pointer',
+            },
+          }}
+        />
+
+        <TextField
+          {...register('left_color', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.left_color}
+          helperText={(errors as any)?.left_color?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="color"
+          label={'Цвет левого виджета'}
+          name="left_color"
+          sx={{
+            '& input': {
+              height: '50px',
+              paddingBlock: '14px',
+              paddingInline: '14px',
+              cursor: 'pointer',
+            },
+          }}
+        />
+        <TextField
+          {...register('right_color', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.right_color}
+          helperText={(errors as any)?.right_color?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="color"
+          label={'Цвет правого виджета'}
+          name="right_color"
+          sx={{
+            '& input': {
+              height: '50px',
+              paddingBlock: '14px',
+              paddingInline: '14px',
+              cursor: 'pointer',
+            },
+          }}
+        />
+
+        <TextField
+          {...register('slogan', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.slogan}
+          helperText={(errors as any)?.slogan?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="text"
+          label={'Слоган'}
+          name="slogan"
+        />
+
+        <Controller
+          control={control}
+          name="logo"
+          rules={{required: 'Это поле является обязательным'}}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...mediaAutocompleteProps}
+              value={mediaAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.filename : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.filename.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите логотип" margin="normal" variant="outlined" error={!!errors.logo} helperText={(errors as any)?.logo?.message} required />}
+            />
+          )}
+        />
       </Box>
     </Create>
   )
diff --git a/src/pages/carrier/edit.tsx b/src/pages/carrier/edit.tsx
index c572eb7..ef152f4 100644
--- a/src/pages/carrier/edit.tsx
+++ b/src/pages/carrier/edit.tsx
@@ -22,6 +22,17 @@ export const CarrierEdit = () => {
     ],
   })
 
+  const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
+    resource: 'media',
+    onSearch: (value) => [
+      {
+        field: 'filename',
+        operator: 'contains',
+        value,
+      },
+    ],
+  })
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
@@ -78,6 +89,111 @@ export const CarrierEdit = () => {
           label={'Короткое имя'}
           name="short_name"
         />
+
+        <TextField
+          {...register('main_color', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.main_color}
+          helperText={(errors as any)?.main_color?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="color"
+          label={'Основной цвет'}
+          name="main_color"
+          sx={{
+            '& input': {
+              height: '50px',
+              paddingBlock: '14px',
+              paddingInline: '14px',
+              cursor: 'pointer',
+            },
+          }}
+        />
+
+        <TextField
+          {...register('left_color', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.left_color}
+          helperText={(errors as any)?.left_color?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="color"
+          label={'Цвет левого виджета'}
+          name="left_color"
+          sx={{
+            '& input': {
+              height: '50px',
+              paddingBlock: '14px',
+              paddingInline: '14px',
+              cursor: 'pointer',
+            },
+          }}
+        />
+        <TextField
+          {...register('right_color', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.right_color}
+          helperText={(errors as any)?.right_color?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="color"
+          label={'Цвет правого виджета'}
+          name="right_color"
+          sx={{
+            '& input': {
+              height: '50px',
+              paddingBlock: '14px',
+              paddingInline: '14px',
+              cursor: 'pointer',
+            },
+          }}
+        />
+
+        <TextField
+          {...register('slogan', {
+            required: 'Это поле является обязательным',
+          })}
+          error={!!(errors as any)?.slogan}
+          helperText={(errors as any)?.slogan?.message}
+          margin="normal"
+          fullWidth
+          InputLabelProps={{shrink: true}}
+          type="text"
+          label={'Слоган'}
+          name="slogan"
+        />
+
+        <Controller
+          control={control}
+          name="logo"
+          rules={{required: 'Это поле является обязательным'}}
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...mediaAutocompleteProps}
+              value={mediaAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.filename : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.filename.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите логотип" margin="normal" variant="outlined" error={!!errors.logo} helperText={(errors as any)?.logo?.message} required />}
+            />
+          )}
+        />
       </Box>
     </Edit>
   )
diff --git a/src/pages/carrier/list.tsx b/src/pages/carrier/list.tsx
index e32718b..143a95e 100644
--- a/src/pages/carrier/list.tsx
+++ b/src/pages/carrier/list.tsx
@@ -34,17 +34,50 @@ export const CarrierList = () => {
         field: 'short_name',
         headerName: 'Короткое имя',
         type: 'string',
-        minWidth: 150,
+        minWidth: 125,
       },
       {
         field: 'city',
         headerName: 'Город',
         type: 'string',
-        minWidth: 150,
+        minWidth: 125,
         align: 'left',
         headerAlign: 'left',
         flex: 1,
       },
+      {
+        field: 'main_color',
+        headerName: 'Основной цвет',
+        type: 'string',
+        minWidth: 150,
+        renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
+      },
+      {
+        field: 'left_color',
+        headerName: 'Цвет левого виджета',
+        type: 'string',
+        minWidth: 150,
+        renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
+      },
+      {
+        field: 'right_color',
+        headerName: 'Цвет правого виджета',
+        type: 'string',
+        minWidth: 150,
+        renderCell: ({value}) => <div style={{display: 'grid', placeItems: 'center', width: '100%', height: '100%', backgroundColor: `${value}10`, borderRadius: 10}}>{value}</div>,
+      },
+      {
+        field: 'logo',
+        headerName: 'Лого',
+        type: 'string',
+        minWidth: 150,
+      },
+      {
+        field: 'slogan',
+        headerName: 'Слоган',
+        type: 'string',
+        minWidth: 150,
+      },
       {
         field: 'actions',
         headerName: 'Действия',
diff --git a/src/pages/carrier/show.tsx b/src/pages/carrier/show.tsx
index 24295aa..0dc5d12 100644
--- a/src/pages/carrier/show.tsx
+++ b/src/pages/carrier/show.tsx
@@ -1,30 +1,52 @@
-import {Stack, Typography} from '@mui/material'
+import {Box, Stack, Typography} from '@mui/material'
 import {useShow} from '@refinedev/core'
 import {Show, TextFieldComponent as TextField} from '@refinedev/mui'
 
+export type FieldType = {
+  label: string
+  data: any
+  render?: (value: any) => React.ReactNode
+}
+
 export const CarrierShow = () => {
   const {query} = useShow({})
   const {data, isLoading} = query
 
   const record = data?.data
 
-  const fields = [
-    // {label: 'ID', data: 'id'},
-    // {label: 'ID города', data: 'city_id'},
+  const fields: FieldType[] = [
     {label: 'Полное имя', data: 'full_name'},
     {label: 'Короткое имя', data: 'short_name'},
     {label: 'Город', data: 'city'},
+    {
+      label: 'Основной цвет',
+      data: 'main_color',
+      render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
+    },
+    {
+      label: 'Цвет левого виджета',
+      data: 'left_color',
+      render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
+    },
+    {
+      label: 'Цвет правого виджета',
+      data: 'right_color',
+      render: (value: string) => <Box sx={{display: 'grid', placeItems: 'center', width: 'fit-content', paddingInline: '6px', height: '100%', backgroundColor: `${value}20`, borderRadius: 1}}>{value}</Box>,
+    },
+    {label: 'Слоган', data: 'slogan'},
+    {label: 'Логотип', data: 'logo', render: (value: number) => <img src={`https://wn.krbl.ru/media/${value}/download`} alt={String(value)} style={{maxWidth: '10%', objectFit: 'contain', borderRadius: 8}} />},
   ]
 
   return (
     <Show isLoading={isLoading}>
       <Stack gap={4}>
-        {fields.map(({label, data}) => (
+        {fields.map(({label, data, render}) => (
           <Stack key={data} gap={1}>
             <Typography variant="body1" fontWeight="bold">
               {label}
             </Typography>
-            <TextField value={record?.[data]} />
+
+            {render ? render(record?.[data]) : <TextField value={record?.[data]} />}
           </Stack>
         ))}
       </Stack>
diff --git a/src/pages/route/show.tsx b/src/pages/route/show.tsx
index 7f63db2..4b2e6f7 100644
--- a/src/pages/route/show.tsx
+++ b/src/pages/route/show.tsx
@@ -12,6 +12,11 @@ export const RouteShow = () => {
   const fields = [
     {label: 'Перевозчик', data: 'carrier'},
     {label: 'Номер маршрута', data: 'route_number'},
+    {
+      label: 'Направление маршрута',
+      data: 'route_direction',
+      render: (value: number[][]) => <Typography style={{color: value ? '#48989f' : '#7f6b58'}}>{value ? 'прямое' : 'обратное'}</Typography>,
+    },
     {
       label: 'Координаты маршрута',
       data: 'path',