Загрузка данных
import { Button, Drawer } from '@/shared/components';
import { DrawerActions } from '@/shared/components/Drawer/Drawer';
import { DrawerTypes } from '@/shared/model/drawer/drawer.types';
import { FormProvider } from 'react-hook-form';
import { ConfirmIpChangeModal } from './ConfirmIpChangeModal';
import { PadletUpdateForm } from './PadletUpdateForm';
import { usePadletUpdateState } from './hooks/usePadletUpdateState';
export const PadletUpdateDrawer = () => {
const {
updateDrawerLabel,
updateLabel,
methods,
onDrawerClose,
submitHandler,
model,
setModel,
handleClearModel,
isSaveButtonDisabled,
isConfirmIpChangeModalOpen,
oldIp,
newIp,
handleConfirmIpChange,
handleCancelIpChange,
} = usePadletUpdateState();
const actions: DrawerActions = {
actionPrimary: (
<Button
onClick={methods.handleSubmit(submitHandler)}
disabled={isSaveButtonDisabled}
>
{updateLabel}
</Button>
),
};
return (
<>
<FormProvider {...methods}>
<Drawer
type={DrawerTypes.padletUpdate}
actions={actions}
title={updateDrawerLabel}
onClose={onDrawerClose}
>
<PadletUpdateForm
initialModel={model}
setModel={setModel}
handleClearModel={handleClearModel}
/>
</Drawer>
</FormProvider>
<ConfirmIpChangeModal
open={isConfirmIpChangeModalOpen}
oldIp={oldIp}
newIp={newIp}
onConfirm={handleConfirmIpChange}
onClose={handleCancelIpChange}
/>
</>
);
};
import { normalizeSipUriForPayload } from '@/domains/equipment/repositories/helpers/normalizeSipUriForPayload';
import { usePreservedSipUri } from '@/domains/equipment/repositories/helpers/usePreservedSipUri';
import { useGetEquipmentWindowQuery } from '@/shared/api/auth/equipment/client';
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';
const FIVE_SECONDS = 5000;
type PadletUpdateState = {
updateLabel: string;
updateDrawerLabel: string;
methods: UseFormReturn<PadletUpdateFormData, unknown, undefined>;
onDrawerClose: () => void;
submitHandler: SubmitHandler<PadletUpdateFormData>;
model: PadletModelItem | undefined | null;
isSaveButtonDisabled: boolean;
handleClearModel: () => void;
setModel: (value: PadletModelItem | null) => void;
isConfirmIpChangeModalOpen: boolean;
oldIp: string;
newIp: string;
handleConfirmIpChange: () => Promise<void>;
handleCancelIpChange: () => 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);
const [pendingValues, setPendingValues] =
useState<PadletCreateFormData | null>(null);
const { updatePadlet, updatePadletQueryStatus } = usePadletRepository();
const padlet = useGetPadletById();
const id = padlet?.id;
const locationId = useSelectControllerLocationId();
const currentIp = padlet?.interface?.ip?.trim() ?? '';
const { data: equipmentWindowData } = useGetEquipmentWindowQuery(
{ ip: currentIp },
{
skip: !currentIp,
pollingInterval: FIVE_SECONDS,
},
);
const hasActiveWindows =
!!equipmentWindowData?.status && equipmentWindowData.status !== 'absent';
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<PadletUpdateFormData, unknown, undefined>({
mode: 'onBlur',
reValidateMode: 'onChange',
resolver: yupResolver(padletUpdateSchema),
defaultValues,
});
const { preserveSipUri, getPreservedSipUri, resetPreservedSipUri } =
usePreservedSipUri();
const onDrawerClose = (): void => {
methods.reset(defaultValues);
setModel(null);
setPendingValues(null);
resetPreservedSipUri();
};
useEffect(() => {
if (padlet?.model) {
setModel(padlet.model);
}
}, [padlet]);
useEffect(() => {
preserveSipUri(padlet?.sipUri ?? '');
}, [padlet?.id, padlet?.sipUri, preserveSipUri]);
const handleClearModel = () => {
if (methods.getValues('hasSipUri')) {
preserveSipUri(methods.getValues('sipUri'));
}
methods.setValue('modelId', '');
methods.setValue('manufacturerName', '');
methods.setValue('typeName', '');
methods.setValue('hasSipUri', null);
};
useEffect(() => {
const currentHasSipUri = methods.getValues('hasSipUri');
if (currentHasSipUri) {
preserveSipUri(methods.getValues('sipUri'));
}
if (model) {
const modelHasSipUri = model.type?.hasSipUri ?? false;
methods.setValue('manufacturerName', model?.manufacturer?.name);
methods.setValue('typeName', model?.type?.name);
methods.setValue('hasSipUri', modelHasSipUri);
if (modelHasSipUri) {
methods.setValue('sipUri', getPreservedSipUri());
}
}
}, [model]);
useEffect(() => {
methods.reset(defaultValues);
}, [padlet]);
const updateNetworkDevice = async (values: PadletCreateFormData) => {
if (!id) {
return;
}
await updatePadlet(
normalizeSipUriForPayload(values) as PadletCreateFormData,
id,
);
};
const submitHandler: SubmitHandler<PadletUpdateFormData> = async (values) => {
const oldIp = padlet?.interface?.ip?.trim() ?? '';
const newIp = values.ip?.trim() ?? '';
if (oldIp !== newIp && hasActiveWindows) {
setPendingValues(values as PadletCreateFormData);
return;
}
await updateNetworkDevice(values as PadletCreateFormData);
};
const handleConfirmIpChange = async () => {
if (!pendingValues) {
return;
}
const values = pendingValues;
setPendingValues(null);
await updateNetworkDevice(values);
};
const handleCancelIpChange = () => {
setPendingValues(null);
};
useEffect(() => {
if (updatePadletQueryStatus === QueryStatus.fulfilled) {
closeDrawer(DrawerTypes.padletUpdate);
methods.reset(defaultValues);
setPendingValues(null);
resetPreservedSipUri();
}
}, [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,
isConfirmIpChangeModalOpen: !!pendingValues,
oldIp: padlet?.interface?.ip ?? '',
newIp: pendingValues?.ip ?? '',
handleConfirmIpChange,
handleCancelIpChange,
};
};