add arms for /city route

This commit is contained in:
maxim 2025-03-19 21:11:19 +03:00
parent b1f4c4649f
commit 230e7a9ada
3 changed files with 82 additions and 6 deletions

View File

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

View File

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

View File

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