WhiteNightsAdminPanel/src/pages/carrier/edit.tsx

import { Autocomplete, Box, TextField } from "@mui/material";
import { Edit, useAutocomplete } from "@refinedev/mui";
import { useForm } from "@refinedev/react-hook-form";
import { languageStore, META_LANGUAGE } from "@stores";
import { LanguageSelector, MediaView } from "@ui";
import { observer } from "mobx-react-lite";
import { Controller } from "react-hook-form";

export const CarrierEdit = observer(() => {
  const { language } = languageStore;
  const {
    saveButtonProps,
    register,
    control,
    watch,
    formState: { errors },
  } = useForm({
    refineCoreProps: META_LANGUAGE(language)
  });

  const { autocompleteProps: cityAutocompleteProps } = useAutocomplete({
    resource: "city",
    onSearch: (value) => [
      {
        field: "name",
        operator: "contains",
        value,
      },
    ],
    ...META_LANGUAGE("ru")
  });

  const { autocompleteProps: mediaAutocompleteProps } = useAutocomplete({
    resource: "media",
    onSearch: (value) => [
      {
        field: "media_name",
        operator: "contains",
        value,
      },
    ],
    ...META_LANGUAGE("ru")
  });


  return (
    <Edit saveButtonProps={saveButtonProps}>
      <Box
        component="form"
        sx={{ display: "flex", flexDirection: "column" }}
        autoComplete="off"
      >
        <LanguageSelector />
        <Controller
          control={control}
          name="city_id"
          rules={{ required: "Это поле является обязательным" }}
          defaultValue={null}
          render={({ field }) => (
            <Autocomplete
              {...cityAutocompleteProps}
              value={
                cityAutocompleteProps.options.find(
                  (option) => option.id === field.value
                ) ?? null
              }
              onChange={(_, value) => {
                field.onChange(value?.id ?? "");
              }}
              getOptionLabel={(item) => {
                return item ? item.name : "";
              }}
              isOptionEqualToValue={(option, value) => {
                return option.id === value?.id;
              }}
              filterOptions={(options, { inputValue }) => {
                return options.filter((option) =>
                  option.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
                />
              )}
            />
          )}
        />

        <TextField
          {...register("full_name", {
            required: "Это поле является обязательным",
          })}
          error={!!(errors as any)?.full_name}
          helperText={(errors as any)?.full_name?.message}
          margin="normal"
          fullWidth
          slotProps={{inputLabel: {shrink: true}}}
          type="text"
          label={"Полное имя *"}
          name="full_name"
        />

        <TextField
          {...register("short_name", {
            //required: "Это поле является обязательным",
          })}
          error={!!(errors as any)?.short_name}
          helperText={(errors as any)?.short_name?.message}
          margin="normal"
          fullWidth
          slotProps={{inputLabel: {shrink: true}}}
          type="text"
          label={"Короткое имя"}
          name="short_name"
        />

        <Box component="form"
          sx={{ display: "flex" }}
          autoComplete="off"
        >
          <TextField
            {...register("main_color", {
              // required: 'Это поле является обязательным',
            })}
            error={!!(errors as any)?.main_color}
            helperText={(errors as any)?.main_color?.message}
            margin="normal"
            fullWidth
            slotProps={{inputLabel: {shrink: true}}}
            type="color"
            label={"Основной цвет"}
            name="main_color"
            sx={{
              "& input": {
                height: "50px",
                paddingBlock: "14px",
                paddingInline: "14px",
                cursor: "pointer",
              },
            }}
          />

          <TextField
            {...register("left_color", {
              // required: 'Это поле является обязательным',
            })}
            error={!!(errors as any)?.left_color}
            helperText={(errors as any)?.left_color?.message}
            margin="normal"
            fullWidth
            slotProps={{inputLabel: {shrink: true}}}
            type="color"
            label={"Цвет левого виджета"}
            name="left_color"
            sx={{
              marginLeft: "16px",
              marginRight: "16px",
              "& input": {
                height: "50px",
                paddingBlock: "14px",
                paddingInline: "14px",
                cursor: "pointer",
              },
            }}
          />
          <TextField
            {...register("right_color", {
              // required: 'Это поле является обязательным',
            })}
            error={!!(errors as any)?.right_color}
            helperText={(errors as any)?.right_color?.message}
            margin="normal"
            fullWidth
            slotProps={{inputLabel: {shrink: true}}}
            type="color"
            label={"Цвет правого виджета"}
            name="right_color"
            sx={{
              "& input": {
                height: "50px",
                paddingBlock: "14px",
                paddingInline: "14px",
                cursor: "pointer",
              },
            }}
          />
        </Box>

        <TextField
          {...register("slogan", {
            // required: 'Это поле является обязательным',
          })}
          error={!!(errors as any)?.slogan}
          helperText={(errors as any)?.slogan?.message}
          margin="normal"
          fullWidth
          slotProps={{inputLabel: {shrink: true}}}
          type="text"
          label={"Слоган"}
          name="slogan"
        />

        <Controller
          control={control}
          name="logo"
          // 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.media_name : "";
              }}
              isOptionEqualToValue={(option, value) => {
                return option.id === value?.id;
              }}
              filterOptions={(options, { inputValue }) => {
                return options.filter((option) =>
                  option.media_name
                    .toLowerCase()
                    .includes(inputValue.toLowerCase()) &&
                  option.media_type == 3
                );
              }}
              renderInput={(params) => (
                <TextField
                  {...params}
                  label="Выберите логотип"
                  margin="normal"
                  variant="outlined"
                  error={!!errors.logo}
                  helperText={(errors as any)?.logo?.message}
                />
              )}
            />
          )}
        />
        <Box height={150} sx={{display: "flex", justifyContent: "start"}}>
          <MediaView media={{id: watch("logo"), media_type: 1}} />
        </Box>
      </Box>
    </Edit>
  );
});