add thumbnail prop for /sight route

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

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: 'Действия',

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>
   )

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 && (

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: 'Действия',