From af5e8adc3cc0b7bded66a0486cb9245b60fb2690 Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Sun, 6 Apr 2025 23:16:21 +0300
Subject: [PATCH] add new props for `/sight` route

---
 src/components/CustomDataGrid.tsx |   2 +-
 src/pages/sight/create.tsx        | 113 +++++++++++++++++++++++++++++-
 src/pages/sight/edit.tsx          | 113 +++++++++++++++++++++++++++++-
 src/pages/sight/list.tsx          |  28 +++++++-
 4 files changed, 251 insertions(+), 5 deletions(-)

diff --git a/src/components/CustomDataGrid.tsx b/src/components/CustomDataGrid.tsx
index 17b9922..6940b59 100644
--- a/src/components/CustomDataGrid.tsx
+++ b/src/components/CustomDataGrid.tsx
@@ -12,7 +12,7 @@ interface CustomDataGridProps extends DataGridProps {
   resource?: string // Add this prop
 }
 
-const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id', 'main_color', 'left_color', 'right_color', 'logo', 'slogan', 'filename', 'arms', 'thumbnail', 'route_sys_number', 'governor_appeal', 'scale_min', 'scale_max', 'rotate', 'center_latitude', 'center_longitude'] as const
+const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id', 'main_color', 'left_color', 'right_color', 'logo', 'slogan', 'filename', 'arms', 'thumbnail', 'route_sys_number', 'governor_appeal', 'scale_min', 'scale_max', 'rotate', 'center_latitude', 'center_longitude', 'watermark_lu', 'watermark_rd', 'left_article', 'preview_article'] as const
 
 export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
   // const isDev = import.meta.env.DEV
diff --git a/src/pages/sight/create.tsx b/src/pages/sight/create.tsx
index adc79e9..f8ca641 100644
--- a/src/pages/sight/create.tsx
+++ b/src/pages/sight/create.tsx
@@ -38,6 +38,17 @@ export const SightCreate = () => {
     ],
   })
 
+  const {autocompleteProps: articleAutocompleteProps} = useAutocomplete({
+    resource: 'article',
+    onSearch: (value) => [
+      {
+        field: 'heading',
+        operator: 'contains',
+        value,
+      },
+    ],
+  })
+
   return (
     <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
@@ -129,7 +140,107 @@ export const SightCreate = () => {
               filterOptions={(options, {inputValue}) => {
                 return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
               }}
-              renderInput={(params) => <TextField {...params} label="Выберите карточку" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} />}
+              renderInput={(params) => <TextField {...params} label="Выберите обложку" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="watermark_lu"
+          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.media_name : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите водный знак (Левый верх)" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="watermark_rd"
+          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.media_name : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите водный знак (Правый низ)" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="left_article"
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...articleAutocompleteProps}
+              value={articleAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.heading : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.heading.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Левая статья" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="preview_article"
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...articleAutocompleteProps}
+              value={articleAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.heading : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.heading.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Cтатья-предпросмотр" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
             />
           )}
         />
diff --git a/src/pages/sight/edit.tsx b/src/pages/sight/edit.tsx
index efdd5d9..9e3ea09 100644
--- a/src/pages/sight/edit.tsx
+++ b/src/pages/sight/edit.tsx
@@ -39,6 +39,17 @@ export const SightEdit = () => {
     ],
   })
 
+  const {autocompleteProps: articleAutocompleteProps} = useAutocomplete({
+    resource: 'article',
+    onSearch: (value) => [
+      {
+        field: 'heading',
+        operator: 'contains',
+        value,
+      },
+    ],
+  })
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
@@ -130,7 +141,107 @@ export const SightEdit = () => {
               filterOptions={(options, {inputValue}) => {
                 return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
               }}
-              renderInput={(params) => <TextField {...params} label="Выберите карточку" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} />}
+              renderInput={(params) => <TextField {...params} label="Выберите обложку" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="watermark_lu"
+          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.media_name : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите водный знак (Левый верх)" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="watermark_rd"
+          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.media_name : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.media_name.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Выберите водный знак (Правый низ)" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="left_article"
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...articleAutocompleteProps}
+              value={articleAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.heading : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.heading.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Левая статья" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
+
+        <Controller
+          control={control}
+          name="preview_article"
+          defaultValue={null}
+          render={({field}) => (
+            <Autocomplete
+              {...articleAutocompleteProps}
+              value={articleAutocompleteProps.options.find((option) => option.id === field.value) || null}
+              onChange={(_, value) => {
+                field.onChange(value?.id || '')
+              }}
+              getOptionLabel={(item) => {
+                return item ? item.heading : ''
+              }}
+              isOptionEqualToValue={(option, value) => {
+                return option.id === value?.id
+              }}
+              filterOptions={(options, {inputValue}) => {
+                return options.filter((option) => option.heading.toLowerCase().includes(inputValue.toLowerCase()))
+              }}
+              renderInput={(params) => <TextField {...params} label="Cтатья-предпросмотр" margin="normal" variant="outlined" error={!!errors.arms} helperText={(errors as any)?.arms?.message} required />}
             />
           )}
         />
diff --git a/src/pages/sight/list.tsx b/src/pages/sight/list.tsx
index 6b13c78..42d3177 100644
--- a/src/pages/sight/list.tsx
+++ b/src/pages/sight/list.tsx
@@ -59,7 +59,7 @@ export const SightList = () => {
         field: 'city',
         headerName: 'Город',
         type: 'string',
-        minWidth: 150,
+        minWidth: 100,
         align: 'left',
         headerAlign: 'left',
         flex: 1,
@@ -68,7 +68,31 @@ export const SightList = () => {
         field: 'thumbnail',
         headerName: 'Карточка',
         type: 'string',
-        flex: 1,
+        minWidth: 150,
+      },
+      {
+        field: 'watermark_lu',
+        headerName: 'Вод. знак (lu)',
+        type: 'string',
+        minWidth: 150,
+      },
+      {
+        field: 'watermark_rd',
+        headerName: 'Вод. знак (rd)',
+        type: 'string',
+        minWidth: 150,
+      },
+      {
+        field: 'left_article',
+        headerName: 'Левая статья',
+        type: 'number',
+        minWidth: 150,
+      },
+      {
+        field: 'preview_article',
+        headerName: 'Пред. просмотр статьи',
+        type: 'number',
+        minWidth: 150,
       },
       {
         field: 'actions',