From f1743d547de24838a316c52c50fa1e806e8d2296 Mon Sep 17 00:00:00 2001
From: maxim <bozzhik@ya.ru>
Date: Thu, 3 Apr 2025 18:54:07 +0300
Subject: [PATCH] add `thumbnail` prop for `/sight` route

---
 src/components/CustomDataGrid.tsx |  2 +-
 src/pages/city/list.tsx           |  6 ++++++
 src/pages/sight/create.tsx        | 36 +++++++++++++++++++++++++++++++
 src/pages/sight/edit.tsx          | 36 +++++++++++++++++++++++++++++++
 src/pages/sight/list.tsx          |  6 ++++++
 5 files changed, 85 insertions(+), 1 deletion(-)

diff --git a/src/components/CustomDataGrid.tsx b/src/components/CustomDataGrid.tsx
index 8f5a8c7..897394a 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'] as const
+const DEV_FIELDS = ['id', 'code', 'country_code', 'city_id', 'carrier_id', 'main_color', 'left_color', 'right_color', 'logo', 'slogan', 'filename', 'arms', 'thumbnail'] as const
 
 export const CustomDataGrid = ({hasCoordinates = false, columns = [], resource, ...props}: CustomDataGridProps) => {
   // const isDev = import.meta.env.DEV
diff --git a/src/pages/city/list.tsx b/src/pages/city/list.tsx
index 95b7cf0..d477288 100644
--- a/src/pages/city/list.tsx
+++ b/src/pages/city/list.tsx
@@ -39,6 +39,12 @@ export const CityList = () => {
         minWidth: 150,
         flex: 1,
       },
+      {
+        field: 'arms',
+        headerName: 'Герб',
+        type: 'string',
+        flex: 1,
+      },
       {
         field: 'actions',
         headerName: 'Действия',
diff --git a/src/pages/sight/create.tsx b/src/pages/sight/create.tsx
index 72da1eb..adc79e9 100644
--- a/src/pages/sight/create.tsx
+++ b/src/pages/sight/create.tsx
@@ -27,6 +27,17 @@ export const SightCreate = () => {
     ],
   })
 
+  const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
+    resource: 'media',
+    onSearch: (value) => [
+      {
+        field: 'media_name',
+        operator: 'contains',
+        value,
+      },
+    ],
+  })
+
   return (
     <Create isLoading={formLoading} saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
@@ -97,6 +108,31 @@ export const SightCreate = () => {
             />
           )}
         />
+
+        <Controller
+          control={control}
+          name="thumbnail"
+          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} />}
+            />
+          )}
+        />
       </Box>
     </Create>
   )
diff --git a/src/pages/sight/edit.tsx b/src/pages/sight/edit.tsx
index f0366fe..efdd5d9 100644
--- a/src/pages/sight/edit.tsx
+++ b/src/pages/sight/edit.tsx
@@ -28,6 +28,17 @@ export const SightEdit = () => {
     ],
   })
 
+  const {autocompleteProps: mediaAutocompleteProps} = useAutocomplete({
+    resource: 'media',
+    onSearch: (value) => [
+      {
+        field: 'media_name',
+        operator: 'contains',
+        value,
+      },
+    ],
+  })
+
   return (
     <Edit saveButtonProps={saveButtonProps}>
       <Box component="form" sx={{display: 'flex', flexDirection: 'column'}} autoComplete="off">
@@ -98,6 +109,31 @@ export const SightEdit = () => {
             />
           )}
         />
+
+        <Controller
+          control={control}
+          name="thumbnail"
+          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} />}
+            />
+          )}
+        />
       </Box>
 
       {sightId && (
diff --git a/src/pages/sight/list.tsx b/src/pages/sight/list.tsx
index abbb69d..6b13c78 100644
--- a/src/pages/sight/list.tsx
+++ b/src/pages/sight/list.tsx
@@ -64,6 +64,12 @@ export const SightList = () => {
         headerAlign: 'left',
         flex: 1,
       },
+      {
+        field: 'thumbnail',
+        headerName: 'Карточка',
+        type: 'string',
+        flex: 1,
+      },
       {
         field: 'actions',
         headerName: 'Действия',