Загрузка данных


import { OTHER_VALUES } from '@/domains/controller/components/CreateController/model/formNames';
import { toSecondaryInterfacePostDto } from '@/domains/equipment/repositories/helpers/toSecondaryInterfacePostDto';
import { toSecondaryInterfacePutDto } from '@/domains/equipment/repositories/helpers/toSecondaryInterfacePutDto';
import { useNetInterfaceRepository } from '@/domains/equipment/repositories/netInterface.repository';
import {
  DeviceModel,
  useGetApiV1SecondaryInterfaceValueOwnerByOwnerIdQuery,
  usePostApiV1SecondaryInterfaceValueMutation,
  usePutApiV1SecondaryInterfaceValueByIdMutation,
} from '@/shared/api/controller/client';
import { useCloseDrawer } from '@/shared/hooks/drawer/useCloseDrawer';
import { Helpers } from '@/shared/lib';
import { DrawerTypes } from '@/shared/model/drawer/drawer.types';
import {
  Ieee8021X,
  ProtocolIp,
  Segment,
} from '@/widgets/Monitoring/model/networkEquipment.model';
import { useEquipmentRepository } from '@/widgets/Monitoring/repositories/networkEquipment.repository';
import { yupResolver } from '@hookform/resolvers/yup';
import { QueryStatus } from '@reduxjs/toolkit/dist/query';
import { useSelectActiveNetworkEquipmentId } from '@shared/store/сontrollers/сontrollers.selectors';
import { enqueueSnackbar } from 'notistack';
import { useEffect, useState } from 'react';
import { SubmitHandler, UseFormReturn, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import {
  NETWORK_EQUIPMENT_CREATE_FORM_KEY,
  NetworkEquipmentCreateFormData,
} from '../../NetworkEquipmentCreateDrawer/model/networkEquipmentCreateForm.model';
import { useGetNetworkEquipmentById } from '../../NetworkEquipmentInfoDrawer/hooks/useGetNetworkEquipmentById';
import { NetworkEquipmentUpdateFormData } from '../model/networkEquipmentUpdateForm.model';
import { networkEquipmentUpdateSchema } from '../validation/networkEquipmentUpdate.schema';

type NetworkEquipmentUpdateState = {
  networkEquipmentUpdateLabel: string;
  networkEquipmentUpdateDrawerLabel: string;
  methods: UseFormReturn<NetworkEquipmentUpdateFormData, any, undefined>;
  onDrawerClose: () => void;
  submitHandler: SubmitHandler<NetworkEquipmentUpdateFormData>;
  model: DeviceModel | undefined | null;
  isSaveButtonDisabled: boolean;
  handleClearModel: () => void;
  setModel: (value: DeviceModel | null) => void;
};

export const useNetworkEquipmentUpdateState =
  (): NetworkEquipmentUpdateState => {
    const { t } = useTranslation();

    const networkEquipmentId = useSelectActiveNetworkEquipmentId();

    const networkEquipmentUpdateLabel = t('common:buttons.save');
    const networkEquipmentUpdateDrawerLabel = t(
      'common:drawerTitle.NetworkEquipmentUpdate',
    );

    const closeDrawer = useCloseDrawer();
    const [model, setModel] = useState<DeviceModel | null>(null);

    const { updateNetworkEquipment, updateNetworkEquipmentQueryStatus } =
      useEquipmentRepository();

    const [updateSecondaryInterface] =
      usePutApiV1SecondaryInterfaceValueByIdMutation();

    const [saveSecondaryInterface] =
      usePostApiV1SecondaryInterfaceValueMutation();

    const networkEquipment = useGetNetworkEquipmentById();

    const id = networkEquipment?.id;

    const {
      data: secondaryInterfaceData,
      isSuccess: isSecondaryInterfaceSuccess,
    } = useGetApiV1SecondaryInterfaceValueOwnerByOwnerIdQuery(
      { ownerId: id! },
      { skip: !id },
    );

    const defaultValues: NetworkEquipmentUpdateFormData = {
      locationId: networkEquipment?.locationId ?? '',
      name: networkEquipment?.name ?? '',
      ip: networkEquipment?.interface?.ip ?? '',
      mac: networkEquipment?.interface?.mac ?? '',
      subnetMask: networkEquipment?.interface?.subnetMask ?? '',
      gateway: networkEquipment?.interface?.gateway ?? '',
      port: networkEquipment?.interface?.port ?? 8080,
      timeZone: networkEquipment?.timeZone ?? '',
      modelId: networkEquipment?.model?.id ?? '',
      typeName: networkEquipment?.model?.type?.name ?? '',
      sipUri: networkEquipment?.sipUri,
      hasSipUri: networkEquipment?.model?.type?.hasSipUri ?? null,
      manufacturerName: networkEquipment?.model?.manufacturer?.name ?? '',
      //@ts-ignore
      segment: networkEquipment?.segment ?? Segment.SIGMA,
      //@ts-ignore
      protocolIp: networkEquipment?.interface?.protocolIp ?? ProtocolIp.DHCP,
      ieee8021x: networkEquipment?.interface?.ieee8021x ?? Ieee8021X.MAB,
      description: networkEquipment?.description,
      telnetPort: networkEquipment?.telnetPort,
      firmware: networkEquipment?.firmware,
      serialNumber: networkEquipment?.serialNumber,
      inventoryNumber: networkEquipment?.inventoryNumber,
      sendNotifications: networkEquipment?.sendNotifications,
      controlPage: networkEquipment?.controlPage ?? '',
      netInterface: !!secondaryInterfaceData?.length,
      netInterfaceInfo:
        secondaryInterfaceData?.map((secondaryInterface) => {
          return {
            gateway: secondaryInterface.gateway,
            mac: secondaryInterface.mac,
            ip: secondaryInterface.ip,
            subnetMask: secondaryInterface.subnetMask,
            nameId: secondaryInterface.name?.id,
            id: secondaryInterface.id,
          };
        }) ?? [],
      disableMonitoring: networkEquipment?.disableMonitoring ?? false,
    };

    const methods = useForm({
      mode: 'onBlur',
      reValidateMode: 'onChange',
      resolver: yupResolver(networkEquipmentUpdateSchema),
      defaultValues,
    });

    const onDrawerClose = (): void => {
      methods.reset(defaultValues);
      setModel?.(null);
    };

    useEffect(() => {
      if (networkEquipment?.model) {
        setModel(networkEquipment.model);
      }
    }, [networkEquipment]);

    const handleClearModel = () => {
      methods.setValue('modelId', '');
      methods.setValue('manufacturerName', '');
      methods.setValue('typeName', '');
      methods.setValue('sipUri', '');
      methods.setValue('hasSipUri', null);
    };

    useEffect(() => {
      if (model) {
        methods.setValue('manufacturerName', model?.manufacturer?.name);
        methods.setValue('typeName', model?.type?.name);
        methods.setValue('hasSipUri', model.type?.hasSipUri);
      }
    }, [model]);

    useEffect(() => {
      methods.reset(defaultValues);
    }, [networkEquipment]);

    const submitHandler: SubmitHandler<NetworkEquipmentUpdateFormData> = (
      values,
    ) => {
      updateNetworkDevice(values as NetworkEquipmentCreateFormData);
    };

    const updateNetworkDevice = async (
      values: NetworkEquipmentCreateFormData,
    ) => {
      if (!id) {
        return;
      }
      updateNetworkEquipment(values as NetworkEquipmentCreateFormData, id);

      try {
        const secondaryInterfacePutDto = toSecondaryInterfacePutDto(
          values,
          networkEquipmentId || '',
          'network-device',
        );

        const newInterfaceList = values.netInterfaceInfo
          ?.filter((interfaceInfo) => !interfaceInfo.id)
          .map((newInterfaceInfo) => ({
            nameId: newInterfaceInfo.nameId as string,
            ip: newInterfaceInfo.ip,
            subnetMask: newInterfaceInfo.subnetMask,
            gateway: newInterfaceInfo.gateway,
            mac: newInterfaceInfo.mac,
          }));

        const secondaryInterfacePostDto = toSecondaryInterfacePostDto(
          newInterfaceList,
          id,
          'network-device',
        );

        if (secondaryInterfacePutDto?.length) {
          await Promise.all(
            secondaryInterfacePutDto
              .filter((dto) => dto.id)
              .map(async (dto) => {
                return await updateSecondaryInterface(dto) // тут не update, а create
                  .unwrap()
                  .catch((e) => {
                    enqueueSnackbar(e ?? '', { variant: 'error' });
                  });
              }),
          );
        }

        if (secondaryInterfacePostDto?.length) {
          await Promise.all(
            secondaryInterfacePostDto.map(async (dto) => {
              return await saveSecondaryInterface(dto)
                .unwrap()
                .catch((e) => {
                  enqueueSnackbar(e ?? '', { variant: 'error' });
                });
            }),
          );
        }
      } catch (e) {
        console.error(e);
      }
    };

    useEffect(() => {
      if (updateNetworkEquipmentQueryStatus === QueryStatus.fulfilled) {
        closeDrawer(DrawerTypes.networkEquipmentUpdate);
        methods.reset(defaultValues);
      }
    }, [updateNetworkEquipmentQueryStatus]);

    useEffect(() => {
      if (isSecondaryInterfaceSuccess && secondaryInterfaceData) {
        methods.setValue(
          OTHER_VALUES.netInterface,
          !!secondaryInterfaceData?.length,
        );
        methods.setValue(
          OTHER_VALUES.netInterfaceInfo,
          secondaryInterfaceData?.map((secondaryInterface) => {
            return {
              gateway: secondaryInterface.gateway,
              mac: secondaryInterface.mac,
              ip: secondaryInterface.ip,
              subnetMask: secondaryInterface.subnetMask,
              nameId: secondaryInterface.name?.id,
              id: secondaryInterface.id,
            };
          }),
        );
      }
    }, [isSecondaryInterfaceSuccess, secondaryInterfaceData]);

    const netInterfaceInfo = methods.watch(
      NETWORK_EQUIPMENT_CREATE_FORM_KEY.netInterfaceInfo,
    );
    const netInterface = methods.watch(
      NETWORK_EQUIPMENT_CREATE_FORM_KEY.netInterface,
    );

    const { deleteNetInterfaces } = useNetInterfaceRepository();

    useEffect(() => {
      (async () => {
        if (
          !netInterface &&
          isSecondaryInterfaceSuccess &&
          netInterfaceInfo &&
          !!netInterfaceInfo.length
        ) {
          await deleteNetInterfaces(
            netInterfaceInfo?.map((netInterface) => netInterface.id),
          );

          methods.setValue(
            NETWORK_EQUIPMENT_CREATE_FORM_KEY.netInterfaceInfo,
            [],
          );
        }
      })();
    }, [netInterface, netInterfaceInfo, isSecondaryInterfaceSuccess]);

    const { isValid, dirtyFields } = methods.formState;
    const isDirtyLocationId =
      methods.getValues().locationId !== defaultValues.locationId;
    const isDirtyFields = !Helpers.isEmpty(dirtyFields) || isDirtyLocationId;
    const isSaveButtonDisabled = !isDirtyFields || !isValid;

    return {
      networkEquipmentUpdateDrawerLabel,
      networkEquipmentUpdateLabel,
      methods,
      onDrawerClose,
      submitHandler,
      model,
      isSaveButtonDisabled,

      setModel,
      handleClearModel,
    };
  };
import { PadletModelItem } from '@/shared/api/controller/client';
import { useCloseDrawer } from '@/shared/hooks/drawer/useCloseDrawer';
import { useSelectDrawerType } from '@/shared/hooks/drawer/useSelectDrawerType';
import { Helpers } from '@/shared/lib';
import { DrawerTypes } from '@/shared/model/drawer/drawer.types';
import { useSelectControllerLocationId } from '@/shared/store/сontrollers/сontrollers.selectors';
import { useSyncControlPage } from '@/widgets/Monitoring/hooks';
import {
  Ieee8021X,
  ProtocolIp,
  Segment,
} from '@/widgets/Monitoring/model/padlet.model';
import { usePadletRepository } from '@/widgets/Monitoring/repositories/padlet.repository';
import { yupResolver } from '@hookform/resolvers/yup';
import { QueryStatus } from '@reduxjs/toolkit/dist/query';
import { useControllerActions } from '@shared/store/сontrollers/controllers.actions';
import { useEffect, useState } from 'react';
import { SubmitHandler, UseFormReturn, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import {
  PADLET_CREATE_FORM_KEY,
  PadletCreateFormData,
} from '../model/padletCreateCreateForm.model';
import { padletCreateSchema } from '../validation/padletCreate.schema';

type PadletCreate = {
  saveLabel: string;
  createLabel: string;
  methods: UseFormReturn<PadletCreateFormData, any, undefined>;
  onDrawerClose: () => void;
  submitHandler: SubmitHandler<PadletCreateFormData>;
  isSaveButtonDisabled: boolean;
  setModel: (model: PadletModelItem | null) => void;
};

export const usePadletCreateState = (): PadletCreate => {
  const { t } = useTranslation();

  const drawerType = useSelectDrawerType();
  const isVisible = drawerType[DrawerTypes.padletCreate];
  const closeDrawer = useCloseDrawer();
  const [model, setModel] = useState<PadletModelItem | null>(null);

  const { cleanControllerLocationId } = useControllerActions();

  const saveLabel = t('common:buttons.save');
  const createLabel = t('common:drawerTitle.PadletCreate');
  const locationId = useSelectControllerLocationId();

  const defaultValues: PadletCreateFormData = {
    locationId: '',
    name: '',
    ip: '',
    mac: '',
    subnetMask: '',
    gateway: '',
    port: 8080,
    timeZone: '+03:00',
    modelId: '',
    typeName: '',
    sipUri: '',
    hasSipUri: null,
    manufacturerName: '',
    segment: Segment.SIGMA,
    protocolIp: ProtocolIp.DHCP,
    ieee8021x: Ieee8021X.MAB,
    description: '',
    controlPage: '',
    telnetPort: '',
    firmware: '',
    serialNumber: '',
    inventoryNumber: '',
    sendNotifications: false,
    disableMonitoring: false,
  };

  const methods = useForm({
    mode: 'onBlur',
    reValidateMode: 'onChange',
    resolver: yupResolver(padletCreateSchema),
    defaultValues,
  });

  useEffect(() => {
    if (model) {
      methods.setValue('manufacturerName', model.manufacturer?.name || '');
      methods.setValue('typeName', model.type?.name || '');
      methods.setValue('hasSipUri', model.type?.hasSipUri);

      return;
    }

    methods.setValue('modelId', '');
    methods.resetField('manufacturerName');
    methods.resetField('typeName');
    methods.resetField('sipUri');
    methods.resetField('hasSipUri');
  }, [model]);

  useEffect(() => {
    if (isVisible) {
      cleanControllerLocationId();
      methods.reset(defaultValues);
    }
  }, [isVisible]);

  useSyncControlPage(defaultValues.ip, methods);

  const { createPadlet, createPadletQueryStatus } = usePadletRepository();

  const onDrawerClose = (): void => {
    methods.reset(defaultValues);
  };

  const submitHandler: SubmitHandler<PadletCreateFormData> = (values) => {
    createPadlet(values);
  };

  useEffect(() => {
    if (createPadletQueryStatus === QueryStatus.fulfilled) {
      closeDrawer(DrawerTypes.padletCreate);
      methods.reset(defaultValues);
    }
  }, [createPadletQueryStatus]);

  const { isValid, dirtyFields } = methods.formState;
  const isDirtyLocationId =
    locationId && locationId !== defaultValues.locationId;

  useEffect(() => {
    if (locationId) {
      methods.setValue(PADLET_CREATE_FORM_KEY.locationId, locationId);
      methods.reset(methods.getValues());
    }
  }, [locationId]);

  const isDirtyFields = !Helpers.isEmpty(dirtyFields) || isDirtyLocationId;
  const isSaveButtonDisabled = !isDirtyFields || !isValid;

  return {
    createLabel,
    saveLabel,
    methods,
    onDrawerClose,
    submitHandler,
    isSaveButtonDisabled,

    setModel,
  };
};


import { PadletModelItem } from '@/shared/api/controller/client';
import { useCloseDrawer } from '@/shared/hooks/drawer/useCloseDrawer';
import { Helpers } from '@/shared/lib';
import { DrawerTypes } from '@/shared/model/drawer/drawer.types';
import { useSelectControllerLocationId } from '@/shared/store/сontrollers/сontrollers.selectors';
import {
  Ieee8021X,
  ProtocolIp,
  Segment,
} from '@/widgets/Monitoring/model/padlet.model';
import { usePadletRepository } from '@/widgets/Monitoring/repositories/padlet.repository';
import { yupResolver } from '@hookform/resolvers/yup';
import { QueryStatus } from '@reduxjs/toolkit/dist/query';
import { useEffect, useState } from 'react';
import { SubmitHandler, UseFormReturn, useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { PadletCreateFormData } from '../../PadletCreateDrawer/model/padletCreateCreateForm.model';
import { useGetPadletById } from '../../PadletInfoDrawer/hooks/useGetPadletById';
import {
  PADLET_UPDATE_FORM_KEY,
  PadletUpdateFormData,
} from '../model/padletUpdateForm.model';
import { padletUpdateSchema } from '../validation/padletUpdate.schema';

type PadletUpdateState = {
  updateLabel: string;
  updateDrawerLabel: string;
  methods: UseFormReturn<PadletUpdateFormData, any, undefined>;
  onDrawerClose: () => void;
  submitHandler: SubmitHandler<PadletUpdateFormData>;
  model: PadletModelItem | undefined | null;
  isSaveButtonDisabled: boolean;
  handleClearModel: () => void;
  setModel: (value: PadletModelItem | null) => void;
};

export const usePadletUpdateState = (): PadletUpdateState => {
  const { t } = useTranslation();

  const updateLabel = t('common:buttons.save');
  const updateDrawerLabel = t('common:drawerTitle.PadletUpdate');

  const closeDrawer = useCloseDrawer();
  const [model, setModel] = useState<PadletModelItem | null>(null); // TODO: padletModel

  const { updatePadlet, updatePadletQueryStatus } = usePadletRepository();

  const padlet = useGetPadletById();

  const id = padlet?.id;
  const locationId = useSelectControllerLocationId();

  const defaultValues: PadletUpdateFormData = {
    locationId: padlet?.locationId ?? '',
    name: padlet?.name ?? '',
    ip: padlet?.interface?.ip ?? '',
    mac: padlet?.interface?.mac ?? '',
    subnetMask: padlet?.interface?.subnetMask ?? '',
    gateway: padlet?.interface?.gateway ?? '',
    port: padlet?.interface?.port ?? 8080,
    timeZone: padlet?.timeZone ?? '',
    modelId: padlet?.model?.id ?? '',
    typeName: padlet?.model?.type?.name ?? '',
    sipUri: padlet?.sipUri,
    hasSipUri: padlet?.model?.type?.hasSipUri ?? null,
    manufacturerName: padlet?.model?.manufacturer?.name ?? '',
    //@ts-ignore
    segment: padlet?.segment ?? Segment.SIGMA,
    //@ts-ignore
    protocolIp: padlet?.interface?.protocolIp ?? ProtocolIp.DHCP,
    ieee8021x: padlet?.interface?.ieee8021x ?? Ieee8021X.MAB,
    description: padlet?.description ?? '',
    telnetPort: padlet?.telnetPort ?? '',
    firmware: padlet?.firmware ?? '',
    serialNumber: padlet?.serialNumber ?? '',
    inventoryNumber: padlet?.inventoryNumber ?? '',
    sendNotifications: padlet?.sendNotifications ?? undefined,
    controlPage: padlet?.controlPage ?? '',
    disableMonitoring: padlet?.disableMonitoring ?? false,
  };

  const methods = useForm({
    mode: 'onBlur',
    reValidateMode: 'onChange',
    resolver: yupResolver(padletUpdateSchema),
    defaultValues,
  });

  const onDrawerClose = (): void => {
    methods.reset(defaultValues);
    setModel?.(null);
  };

  useEffect(() => {
    if (padlet?.model) {
      setModel(padlet.model);
    }
  }, [padlet]);

  const handleClearModel = () => {
    methods.setValue('modelId', '');
    methods.setValue('manufacturerName', '');
    methods.setValue('typeName', '');
    methods.setValue('sipUri', '');
    methods.setValue('hasSipUri', null);
  };

  useEffect(() => {
    if (model) {
      methods.setValue('manufacturerName', model?.manufacturer?.name);
      methods.setValue('typeName', model?.type?.name);
      methods.setValue('hasSipUri', model.type?.hasSipUri);
    }
  }, [model]);

  useEffect(() => {
    methods.reset(defaultValues);
  }, [padlet]);

  const submitHandler: SubmitHandler<PadletUpdateFormData> = (values) => {
    updateNetworkDevice(values as PadletCreateFormData);
  };

  const updateNetworkDevice = async (values: PadletCreateFormData) => {
    if (!id) {
      return;
    }
    updatePadlet(values as PadletCreateFormData, id);
  };

  useEffect(() => {
    if (updatePadletQueryStatus === QueryStatus.fulfilled) {
      closeDrawer(DrawerTypes.padletUpdate);
      methods.reset(defaultValues);
    }
  }, [updatePadletQueryStatus]);

  const { isValid, dirtyFields } = methods.formState;
  const isDirtyLocationId =
    locationId && locationId !== defaultValues.locationId;

  useEffect(() => {
    if (locationId) {
      methods.setValue(PADLET_UPDATE_FORM_KEY.locationId, locationId);
      methods.reset(methods.getValues());
    }
  }, [locationId]);

  const isDirtyFields = !Helpers.isEmpty(dirtyFields) || isDirtyLocationId;
  const isSaveButtonDisabled = !isDirtyFields || !isValid;

  return {
    updateDrawerLabel,
    updateLabel,
    methods,
    onDrawerClose,
    submitHandler,
    model,
    isSaveButtonDisabled,

    setModel,
    handleClearModel,
  };
};