145 lines
4.3 KiB
TypeScript
145 lines
4.3 KiB
TypeScript
import { Autocomplete, Box, TextField } from "@mui/material";
|
|
import { Edit, useAutocomplete } from "@refinedev/mui";
|
|
import { useForm } from "@refinedev/react-hook-form";
|
|
import { Controller } from "react-hook-form";
|
|
|
|
import { VEHICLE_TYPES } from "../../lib/constants";
|
|
import { observer } from "mobx-react-lite";
|
|
import { languageStore, META_LANGUAGE } from "@stores";
|
|
|
|
type VehicleFormValues = {
|
|
tail_number: number;
|
|
type: number;
|
|
city_id: number;
|
|
};
|
|
|
|
export const VehicleEdit = observer(() => {
|
|
const { language } = languageStore;
|
|
const {
|
|
saveButtonProps,
|
|
register,
|
|
control,
|
|
formState: { errors },
|
|
} = useForm<VehicleFormValues>({
|
|
refineCoreProps: META_LANGUAGE(language)
|
|
});
|
|
|
|
const { autocompleteProps: carrierAutocompleteProps } = useAutocomplete({
|
|
resource: "carrier",
|
|
onSearch: (value) => [
|
|
{
|
|
field: "short_name",
|
|
operator: "contains",
|
|
value,
|
|
},
|
|
],
|
|
});
|
|
|
|
return (
|
|
<Edit saveButtonProps={saveButtonProps}>
|
|
<Box
|
|
component="form"
|
|
sx={{ display: "flex", flexDirection: "column" }}
|
|
autoComplete="off"
|
|
>
|
|
<TextField
|
|
{...register("tail_number", {
|
|
required: "Это поле является обязательным",
|
|
valueAsNumber: true,
|
|
})}
|
|
error={!!(errors as any)?.tail_number}
|
|
helperText={(errors as any)?.tail_number?.message}
|
|
margin="normal"
|
|
fullWidth
|
|
InputLabelProps={{ shrink: true }}
|
|
type="number"
|
|
label="Бортовой номер *"
|
|
name="tail_number"
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name="type"
|
|
rules={{
|
|
required: "Это поле является обязательным",
|
|
}}
|
|
defaultValue={null}
|
|
render={({ field }) => (
|
|
<Autocomplete
|
|
options={VEHICLE_TYPES}
|
|
value={
|
|
VEHICLE_TYPES.find((option) => option.value === field.value) ||
|
|
null
|
|
}
|
|
onChange={(_, value) => {
|
|
field.onChange(value?.value || null);
|
|
}}
|
|
getOptionLabel={(item) => {
|
|
return item ? item.label : "";
|
|
}}
|
|
isOptionEqualToValue={(option, value) => {
|
|
return option.value === value?.value;
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Выберите тип"
|
|
margin="normal"
|
|
variant="outlined"
|
|
error={!!errors.type}
|
|
helperText={(errors as any)?.type?.message}
|
|
required
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
/>
|
|
|
|
<Controller
|
|
control={control}
|
|
name="carrier_id"
|
|
rules={{ required: "Это поле является обязательным" }}
|
|
defaultValue={null}
|
|
render={({ field }) => (
|
|
<Autocomplete
|
|
{...carrierAutocompleteProps}
|
|
value={
|
|
carrierAutocompleteProps.options.find(
|
|
(option) => option.id === field.value
|
|
) || null
|
|
}
|
|
onChange={(_, value) => {
|
|
field.onChange(value?.id || "");
|
|
}}
|
|
getOptionLabel={(item) => {
|
|
return item ? item.short_name : "";
|
|
}}
|
|
isOptionEqualToValue={(option, value) => {
|
|
return option.id === value?.id;
|
|
}}
|
|
filterOptions={(options, { inputValue }) => {
|
|
return options.filter((option) =>
|
|
option.short_name
|
|
.toLowerCase()
|
|
.includes(inputValue.toLowerCase())
|
|
);
|
|
}}
|
|
renderInput={(params) => (
|
|
<TextField
|
|
{...params}
|
|
label="Выберите перевозчика"
|
|
margin="normal"
|
|
variant="outlined"
|
|
error={!!errors.city_id}
|
|
helperText={(errors as any)?.city_id?.message}
|
|
required
|
|
/>
|
|
)}
|
|
/>
|
|
)}
|
|
/>
|
|
</Box>
|
|
</Edit>
|
|
);
|
|
});
|