add arms for /city route

src/pages/city/create.tsx

@@ -16,6 +16,17 @@ export const CityCreate = () => {
     resource: 'country',
   })
 
+  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">
@@ -32,12 +43,12 @@ export const CityCreate = () => {
                 field.onChange(value?.code || '')
               }}
               getOptionLabel={(item) => {
-                return item ? item.code : ''
+                return item ? item.name : ''
               }}
               isOptionEqualToValue={(option, value) => {
                 return option.id === value?.id
               }}
-              renderInput={(params) => <TextField {...params} label="Код страны" margin="normal" variant="outlined" error={!!errors.country_code} helperText={(errors as any)?.country_code?.message} required />}
+              renderInput={(params) => <TextField {...params} label="Выберите страну" margin="normal" variant="outlined" error={!!errors.country_code} helperText={(errors as any)?.country_code?.message} required />}
             />
           )}
         />
@@ -55,6 +66,32 @@ export const CityCreate = () => {
           label={'Название'}
           name="name"
         />
+
+        <Controller
+          control={control}
+          name="arms"
+          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.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
       </Box>
     </Create>
   )

src/pages/city/edit.tsx

@@ -15,6 +15,17 @@ export const CityEdit = () => {
     resource: 'country',
   })
 
+  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">
@@ -31,12 +42,12 @@ export const CityEdit = () => {
                 field.onChange(value?.code || '')
               }}
               getOptionLabel={(item) => {
-                return item ? item.code : ''
+                return item ? item.name : ''
               }}
               isOptionEqualToValue={(option, value) => {
                 return option.id === value?.id
               }}
-              renderInput={(params) => <TextField {...params} label="Код страны" margin="normal" variant="outlined" error={!!errors.country_code} helperText={(errors as any)?.country_code?.message} required />}
+              renderInput={(params) => <TextField {...params} label="Выберите страну" margin="normal" variant="outlined" error={!!errors.country_code} helperText={(errors as any)?.country_code?.message} required />}
             />
           )}
         />
@@ -54,6 +65,32 @@ export const CityEdit = () => {
           label={'Название'}
           name="name"
         />
+
+        <Controller
+          control={control}
+          name="arms"
+          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.arms} helperText={(errors as any)?.arms?.message} required />}
+            />
+          )}
+        />
       </Box>
     </Edit>
   )

src/pages/city/show.tsx

@@ -13,17 +13,19 @@ export const CityShow = () => {
     {label: 'Название', data: 'name'},
     // {label: 'Код страны', data: 'country_code'},
     {label: 'Страна', data: 'country'},
+    {label: 'Герб', data: 'arms', 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>