bfg-common 1.6.19 → 1.6.21

package/components/common/wizards/network/add/Add.vue

@@ -1,883 +1,883 @@
-<template>
-  <div>
-    <component
-      :is="currentComponent"
-      v-model:connection-type="connectionTypeLocal"
-      :show="props.show"
-      :wizard="wizard"
-      :selected-scheme="selectedScheme"
-      :wizard-title="title"
-      :host-name="hostNameLocal"
-      :project="props.project"
-      :target-device="targetDevice"
-      :standard-switches-initial="props.standardSwitchesInitial"
-      :alert-messages="alertMessages"
-      :selected-standard-switch-id="props.selectedStandardSwitchId"
-      :selected-switch-id="props.selectedSwitchId"
-      :free-adapters="props.freeAdapters"
-      :added-adapters="addedAdapters"
-      :core-adapters="coreAdapters"
-      :adapter-status="adapterStatus"
-      :adapters="props.adapters"
-      :is-show-no-connected-active-adapters-modal="
-        isShowNoConnectedActiveAdaptersModal
-      "
-      :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
-      :is-dark-mode="props.isDarkMode"
-      :port-properties="portProperties"
-      :mtu-from-switch="mtuFromSwitch"
-      :tcp-stacks="props.tcpStacks"
-      :ip-four-settings="ipFourSettings"
-      :gateway-flag="gatewayFlag"
-      :connection-settings="connectionSettings"
-      :ready-complete-fields="readyCompleteFields"
-      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
-      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
-      @change-connection-settings="onChangeConnectionSettings"
-      @change-gateway-flag="onChangeGatewayFlag"
-      @change-ip-four-settings="onChangeIpFourSettings"
-      @change-port-properties="onChangePortProperties"
-      @get-free-adapters="onGetFreeAdapters"
-      @change-added-adapters="onChangeAddedAdapters"
-      @change-adapter-status="onChangeAdapterStatus"
-      @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
-      @hide-no-connected-active-adapters-modal="
-        onHideNoConnectedActiveAdaptersModal
-      "
-      @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
-      @hide-alert="onHideAlert"
-      @change-target-device="onChangeTargetDevice"
-      @change-steps="onChangeSteps"
-      @hide="onHideAddNetworkingModal"
-      @submit="onSubmit"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ValidationReturn,
-  UI_I_WizardStep,
-  UI_I_WizardStepNavigation,
-} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
-import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
-import type {
-  UI_I_ArbitraryObject,
-  UI_I_Localization,
-  UI_I_ItemsWithTotalCounts,
-} from '~/lib/models/interfaces'
-import type { UI_T_Project } from '~/lib/models/types'
-import type {
-  UI_I_PortProperties,
-  UI_I_IpFourSettings,
-  UI_I_ConnectionSettings,
-  UI_I_TargetDevice,
-  UI_I_Switch,
-  UI_I_ReadyCompleteFields,
-  UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
-  UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
-  UI_I_AddNetworkingFourthOrFifthSchemeDataSend,
-  // UI_I_AddNetworkingEmits,
-  UI_I_TCPStack,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type {
-  UI_I_Adapter,
-  UI_I_AdapterStatus,
-  UI_I_SwitchAdapterItem,
-  UI_I_DiagramData,
-  API_UI_I_SwitchItem,
-  UI_I_AvailableAdapters,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-import { getAvailableAdapters } from '~/components/common/diagramMain/lib/utils/utils'
-import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/lib/models/enums'
-import { getVlanId } from '~/components/common/wizards/network/add/lib/utils/utils'
-import {
-  createZeroSchemeReadyCompleteFunc,
-  createFirstSchemeReadyCompleteFunc,
-  createSecondSchemeReadyCompleteFunc,
-  createThirdSchemeReadyCompleteFunc,
-  createFourthSchemeReadyCompleteFunc,
-  createFifthSchemeReadyCompleteFunc,
-  stepsSchemeInitial,
-  stepsFunc,
-  connectionSettingsInitial,
-  portPropertiesInitial,
-  ipFourSettingsInitial,
-  targetDeviceInitialFunc,
-  addNetworkingZeroOrFirstSchemeDataFunc,
-  addNetworkingSecondOrThirdSchemeDataFunc,
-  addNetworkingFourthOrFifthSchemeDataFunc,
-} from '~/components/common/wizards/network/add/lib/config/config'
-import {
-  checkTargetDeviceSync,
-  checkAdaptersSync,
-  checkPortPropertiesSync,
-  checkIpFourSettingsSync,
-  checkConnectionSettingsSync,
-  checkNetworkAsync,
-} from '~/components/common/wizards/network/add/validations/validations'
-
-const props = withDefaults(
-  defineProps<{
-    show: boolean
-    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-    standardSwitchesInitial?: UI_I_Switch[]
-    freeAdapters?: UI_I_Adapter[]
-    project?: UI_T_Project
-    isDarkMode?: boolean
-    selectedStandardSwitchId?: string
-    selectedSwitchId?: string
-    tcpStacks?: UI_I_TCPStack[]
-    diagramsData?: UI_I_DiagramData[]
-    isNetworkingLoading?: boolean
-    isGetExistingSwitchesLoading?: boolean
-    isGetTcpStackLoading?: boolean
-    hostName?: string
-  }>(),
-  {
-    standardSwitchesInitial: () => [],
-    freeAdapters: () => [],
-    project: 'procurator',
-    isDarkMode: false,
-    selectedStandardSwitchId: '',
-    selectedSwitchId: '',
-    tcpStacks: () => [],
-    diagramsData: [],
-    isNetworkingLoading: false,
-    isGetExistingSwitchesLoading: false,
-    isGetTcpStackLoading: false,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (
-    event: 'add-networking-data-validate',
-    data:
-      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
-      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
-      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
-      | API_UI_I_SwitchItem,
-    type: string,
-    setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
-  ): void
-  (
-    event: 'send-add-networking-data',
-    data:
-      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
-      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
-      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
-      | API_UI_I_SwitchItem,
-    type: string,
-    hideModal: () => void
-  ): void
-  (event: 'get-existing-standard-switches'): void
-  (event: 'get-free-adapters', cb: () => void): void
-  (
-    event: 'check-network-label',
-    label: string,
-    sendMessage: (message: string) => void
-  ): void
-  (event: 'get-tcp-stacks'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const currentComponent = computed(() =>
-  isNewView.value
-    ? defineAsyncComponent(() => import('./AddNew.vue'))
-    : defineAsyncComponent(() => import('./AddOld.vue'))
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const localHostName = ref<string>('')
-const hostNameLocal = computed<string>(
-  () => props.hostName || localHostName.value
-)
-
-const title = computed<string>(
-  () => `${hostNameLocal.value} - ${localization.value.common.addNetworking}`
-)
-
-const wizard: Wizard = new Wizard(
-  stepsFunc(localization.value),
-  stepsSchemeInitial
-)
-
-const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
-const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
-
-const readyCompleteFields = ref<UI_I_ReadyCompleteFields[]>([])
-
-const globalPermissions = computed<any>(
-  () => $store.getters['globalPermissions/getPermissions']
-)
-
-// Step's content data (connectionType)
-const connectionType = ref<string>(
-  globalPermissions.value === undefined
-    ? '0'
-    : !globalPermissions.value?.['Networks.CreateSysx'] &&
-      !globalPermissions.value?.['Networks.CreatePortGroup']
-    ? '2'
-    : !globalPermissions.value?.['Networks.CreateSysx']
-    ? '1'
-    : '0'
-)
-
-const connectionTypeLocal = computed<string>({
-  get() {
-    return connectionType.value
-  },
-  set(newValue: string) {
-    wizard.resetAfterSelected()
-    connectionType.value = newValue
-    targetDevice.value.standardSwitch = props.selectedStandardSwitchId
-    targetDevice.value.switch = props.selectedSwitchId
-  },
-})
-
-// Step's content data (createStandardSwitch)
-const addedAdapters = ref<string[]>([])
-const coreAdapters = ref<string[]>([])
-
-const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
-  addedAdapters.value = addedAdaptersNew
-}
-
-const adapterStatus = ref<UI_I_AdapterStatus>({
-  active: [],
-  standby: [],
-  unused: [],
-})
-const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
-  adapterStatus.value = adapterStatusNew
-}
-
-// Step's content data and changers (targetDevice)
-const targetDevice = ref<UI_I_TargetDevice>(
-  useDeepCopy(
-    targetDeviceInitialFunc(globalPermissions.value?.['Networks.UpdateSwitch'])
-  )
-)
-const mtuFromSwitch = ref<number>(1500)
-
-const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
-  const oldTargetDeviceSelected = useDeepCopy(targetDevice.value).selected
-  const newTargetDeviceSelected = newTargetDevice.selected
-
-  if (oldTargetDeviceSelected !== newTargetDeviceSelected) {
-    wizard.resetAfterSelected()
-  }
-
-  const selectedSwitch = props.standardSwitchesInitial.find(
-    (currentSwitch: UI_I_Switch) =>
-      newTargetDevice.standardSwitch === currentSwitch.name
-  )
-
-  if (newTargetDeviceSelected === '1' && selectedSwitch) {
-    mtuFromSwitch.value = selectedSwitch?.mtu || 1500
-  }
-  if (newTargetDeviceSelected === '3') {
-    mtuFromSwitch.value = newTargetDevice.mtu || 1500
-  }
-
-  targetDevice.value = useDeepCopy(newTargetDevice)
-}
-
-// Step's content data and changers (portProperties)
-const portProperties = ref<UI_I_PortProperties>(
-  useDeepCopy(portPropertiesInitial(localization.value))
-)
-const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
-  if (portProperties.value.tcp !== newFields.tcp) {
-    ipFourSettings.value.static.defaultGateway.value =
-      props.tcpStacks?.find((tcp: UI_I_TCPStack) => tcp.id === newFields.tcp)
-        .gateway || ''
-  }
-  portProperties.value = newFields
-}
-
-// Step's content data and changers (ipFourSettings)
-const ipFourSettings = ref<UI_I_IpFourSettings>(ipFourSettingsInitial)
-const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
-  ipFourSettings.value = newFields
-}
-
-const gatewayFlag = ref<boolean>(false)
-const onChangeGatewayFlag = (newValue: boolean) => {
-  gatewayFlag.value = newValue
-}
-
-// Step's content data and changers (connectionSettings)
-const connectionSettings = ref<UI_I_ConnectionSettings>(
-  connectionSettingsInitial(localization.value)
-)
-const onChangeConnectionSettings = (
-  newFields: UI_I_ConnectionSettings
-): void => {
-  connectionSettings.value = newFields
-}
-
-const onHideAlert = (stepId: number, field?: string): void => {
-  wizard.hideAlertMessagesByStepId(stepId, field)
-}
-
-let flagSwitch = ''
-
-// Choosing Scheme
-watch(
-  [connectionTypeLocal, targetDevice],
-  (
-    newValues: [string, UI_I_TargetDevice],
-    oldValues: [string, UI_I_TargetDevice]
-  ) => {
-    const newCT = newValues[0] // -> newConnectionType
-    const oldCT = oldValues[0] // -> oldConnectionType
-    const newTD = newValues[1] // -> newTargetDevice
-    const oldTD = oldValues[1] // -> oldTargetDevice
-
-    if (!oldTD || oldTD.selected !== newTD.selected) {
-      flagSwitch = ''
-      addedAdapters.value = []
-      adapterStatus.value = {
-        active: [],
-        standby: [],
-        unused: [],
-      }
-    }
-    if (newCT !== oldCT) {
-      newCT === '0' && props.selectedStandardSwitchId
-        ? (targetDevice.value.selected = '1')
-        : (targetDevice.value.selected = '0')
-      newCT === '1' && (targetDevice.value.selected = '1')
-      newCT === '2' &&
-        (globalPermissions.value === undefined ||
-        globalPermissions.value?.['Networks.UpdateSwitch']
-          ? (targetDevice.value.selected = '2')
-          : (targetDevice.value.selected = '3'))
-    }
-    if (newCT === '0') {
-      ;(newTD.selected === '0' || newTD.selected === '1') &&
-        wizard.changeScheme(0)
-      newTD.selected === '3' && wizard.changeScheme(1)
-    }
-    if (newCT === '1') {
-      newTD.selected === '1' && wizard.changeScheme(2)
-      newTD.selected === '3' && wizard.changeScheme(3)
-    }
-    if (newCT === '2') {
-      newTD.selected === '2' && wizard.changeScheme(4)
-      newTD.selected === '3' && wizard.changeScheme(5)
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-const onGetExistingStandardSwitches = (): void => {
-  emits('get-existing-standard-switches')
-}
-
-const onGetTcpStacks = (): void => {
-  emits('get-tcp-stacks')
-}
-
-watch(
-  () => wizard.selectedStepId,
-  (newSelectedStep: number) => {
-    if (newSelectedStep === 1) {
-      onGetExistingStandardSwitches()
-    }
-    if (newSelectedStep === 3) {
-      onGetTcpStacks()
-    }
-    if (newSelectedStep === 6 && flagSwitch !== targetDevice.value.switch) {
-      const nics: UI_I_AdapterStatus = props.standardSwitchesInitial.find(
-        (currentSwitch: UI_I_Switch) =>
-          currentSwitch.id === targetDevice.value.switch
-      ).nics
-
-      const availableAdapters: UI_I_AvailableAdapters = getAvailableAdapters(
-        props.adapters,
-        nics
-      )
-
-      adapterStatus.value = {
-        active: availableAdapters.activeAdapters || [],
-        standby: availableAdapters.standbyAdapters || [],
-        unused: availableAdapters.unusedAdapters || [],
-      }
-      coreAdapters.value = [
-        ...adapterStatus.value.active,
-        ...adapterStatus.value.standby,
-        ...adapterStatus.value.unused,
-      ]
-      flagSwitch = targetDevice.value.switch
-    }
-
-    if (newSelectedStep !== 7) return // If last step
-    if (wizard.isSelectedScheme(0)) {
-      readyCompleteFields.value = createZeroSchemeReadyCompleteFunc(
-        isNewView.value,
-        targetDevice.value,
-        portProperties.value,
-        ipFourSettings.value,
-        localization.value
-      )
-      return
-    }
-
-    if (wizard.isSelectedScheme(1)) {
-      readyCompleteFields.value = createFirstSchemeReadyCompleteFunc(
-        isNewView.value,
-        targetDevice.value,
-        portProperties.value,
-        ipFourSettings.value,
-        addedAdapters.value,
-        localization.value
-      )
-      return
-    }
-    if (wizard.isSelectedScheme(2)) {
-      readyCompleteFields.value = createSecondSchemeReadyCompleteFunc(
-        isNewView.value,
-        connectionSettings.value,
-        targetDevice.value,
-        localization.value
-      )
-      return
-    }
-    if (wizard.isSelectedScheme(3)) {
-      readyCompleteFields.value = createThirdSchemeReadyCompleteFunc(
-        isNewView.value,
-        connectionSettings.value,
-        targetDevice.value,
-        addedAdapters.value,
-        localization.value
-      )
-      return
-    }
-    if (wizard.isSelectedScheme(4)) {
-      readyCompleteFields.value = createFourthSchemeReadyCompleteFunc(
-        isNewView.value,
-        targetDevice.value.switch,
-        props.diagramsData,
-        adapterStatus.value,
-        localization.value
-      )
-      return
-    }
-    if (wizard.isSelectedScheme(5)) {
-      readyCompleteFields.value = createFifthSchemeReadyCompleteFunc(
-        isNewView.value,
-        targetDevice.value,
-        adapterStatus.value,
-        localization.value
-      )
-    }
-  }
-)
-
-// Reset data
-const reset = (): void => {
-  wizard.reset()
-  connectionTypeLocal.value = '0'
-  targetDevice.value = useDeepCopy(
-    targetDeviceInitialFunc(globalPermissions.value?.['Networks.UpdateSwitch'])
-  )
-  connectionSettings.value = useDeepCopy(
-    connectionSettingsInitial(localization.value)
-  )
-  portProperties.value = useDeepCopy(portPropertiesInitial(localization.value))
-  ipFourSettings.value = useDeepCopy(ipFourSettingsInitial)
-  coreAdapters.value = []
-  addedAdapters.value = []
-  adapterStatus.value = {
-    active: [],
-    standby: [],
-    unused: [],
-  }
-}
-
-const isShowNoConnectedActiveAdaptersModal = ref(false)
-const isShowNoActiveAdaptersModal = ref(false)
-
-const showNoConnectedActiveAdaptersModal = (): void => {
-  isShowNoConnectedActiveAdaptersModal.value = true
-}
-const onHideNoConnectedActiveAdaptersModal = (): void => {
-  isShowNoConnectedActiveAdaptersModal.value = false
-}
-const showNoActiveAdaptersModal = (): void => {
-  isShowNoActiveAdaptersModal.value = true
-}
-const onHideNoActiveAdaptersModal = (): void => {
-  isShowNoActiveAdaptersModal.value = false
-}
-
-const onConfirmNoActiveAdaptersModal = (): void => {
-  onHideNoConnectedActiveAdaptersModal()
-  onHideNoActiveAdaptersModal()
-  if (wizard.waitingStepId === 7) {
-    wizard.changeSteps(
-      wizard.selectedStepData(
-        wizard.stepsInSelectedSchemeWithStatus.value.find(
-          (step: UI_I_WizardStepNavigation) => step.id === 7
-        )
-      ),
-      validationFunc,
-      props.project === 'sphere' ? null : finalValidationFunc,
-      true
-    )
-    wizard.waitingStepId = -1
-    return
-  }
-  wizard.selectStepHard(wizard.waitingStepId)
-}
-
-const onGetFreeAdapters = (showModal: () => void): void => {
-  emits('get-free-adapters', showModal)
-}
-
-const checkFinal = async (): Promise<UI_I_ArbitraryObject<string>> => {
-  let data:
-    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
-    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
-    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
-    | API_UI_I_SwitchItem
-    | null = null
-
-  let type: 'network' | 'vmkernel' | 'adapter' | 'new-switch'
-
-  if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
-    const vlan = getVlanId(portProperties.value.vlanId, localization.value)
-
-    data = addNetworkingZeroOrFirstSchemeDataFunc(
-      targetDevice.value,
-      Number(vlan),
-      portProperties.value,
-      ipFourSettings.value,
-      wizard.isSelectedScheme(1),
-      adapterStatus.value
-    )
-
-    type = 'vmkernel'
-  }
-
-  if (wizard.isSelectedScheme(2) || wizard.isSelectedScheme(3)) {
-    const vlan = getVlanId(connectionSettings.value.vlanId, localization.value)
-
-    data = addNetworkingSecondOrThirdSchemeDataFunc(
-      connectionSettings.value,
-      targetDevice.value,
-      Number(vlan),
-      wizard.isSelectedScheme(2),
-      adapterStatus.value
-    )
-
-    type = 'network'
-  }
-
-  if (wizard.isSelectedScheme(4) || wizard.isSelectedScheme(5)) {
-    data = addNetworkingFourthOrFifthSchemeDataFunc(
-      targetDevice.value.switch,
-      wizard.isSelectedScheme(4),
-      adapterStatus.value,
-      props.diagramsData,
-      targetDevice.value.mtu
-    )
-
-    type = wizard.isSelectedScheme(4) ? 'adapter' : 'new-switch'
-  }
-
-  return new Promise((resolve, _reject) =>
-    emits(
-      'add-networking-data-validate',
-      data,
-      type,
-      (err_arg: UI_I_ArbitraryObject<string>): void => {
-        resolve(err_arg)
-      }
-    )
-  )
-}
-
-const finalValidationFunc = async (
-  value: UI_I_WizardStep[]
-): Promise<UI_I_ValidationReturn> => {
-  let stepHasError = false
-
-  const validationFields: {
-    [key: string]: string
-  } = await checkFinal()
-
-  for (const fieldName in validationFields) {
-    const stepId = wizard.getStepIdByFieldName(fieldName)
-
-    if (stepId !== -1) {
-      let message = ''
-
-      if (validationFields[fieldName]) {
-        message = `${validationFields[
-          fieldName
-        ][0].toUpperCase()}${validationFields[fieldName].substring(1)}`
-
-        message =
-          message.charAt(message.length - 1) !== '.' ? message + '.' : message
-      }
-
-      stepHasError = wizard.setValidation(stepId, fieldName, {
-        fieldMessage: message,
-        alertMessage: message,
-      })
-    }
-  }
-
-  return {
-    stepHasError,
-    newValue: value,
-  }
-}
-
-const validationFunc = async (
-  value: UI_I_WizardStep[],
-  currentStep: UI_I_WizardStep,
-  nextStep: UI_I_WizardStep
-): Promise<UI_I_ValidationReturn> => {
-  let stepHasError = false
-  let stepShouldStop = {
-    ifOnCurrentStep: false,
-    ifFromAnyStep: false,
-    stoppageStepId: -1,
-  }
-
-  if (wizard.isValidateForStep(1, currentStep.id, nextStep.id)) {
-    const targetDeviceValidation = checkTargetDeviceSync(
-      localization.value,
-      targetDevice.value,
-      wizard,
-      value,
-      isNewView.value
-    )
-
-    value = targetDeviceValidation.newValue
-
-    stepHasError = stepHasError || targetDeviceValidation.stepHasError
-  }
-
-  if (wizard.isValidateForStep(2, currentStep.id, nextStep.id)) {
-    wizard.waitingStepId = nextStep.id
-
-    const adapterValidation = checkAdaptersSync(
-      localization.value,
-      adapterStatus.value,
-      value,
-      currentStep.id,
-      nextStep.id,
-      props.freeAdapters,
-      showNoActiveAdaptersModal,
-      showNoConnectedActiveAdaptersModal,
-      2
-    )
-
-    value = adapterValidation.newValue
-
-    stepShouldStop = adapterValidation.stepShouldStop || stepShouldStop
-
-    stepHasError = stepHasError || adapterValidation.stepHasError
-  }
-
-  if (wizard.isValidateForStep(3, currentStep.id, nextStep.id)) {
-    const labelValidation = await checkNetworkAsync(
-      value,
-      portProperties.value.networkLabel,
-      3,
-      UI_E_ValidationFields.PORT_PROPERTIES_NETWORK,
-      emits,
-      localization.value,
-      wizard
-    )
-
-    value = labelValidation.newValue
-
-    const portPropertiesValidation = checkPortPropertiesSync(
-      localization.value,
-      portProperties.value,
-      wizard,
-      value
-    )
-
-    value = portPropertiesValidation.newValue
-
-    stepHasError =
-      stepHasError ||
-      labelValidation.stepHasError ||
-      portPropertiesValidation.stepHasError
-  }
-
-  if (wizard.isValidateForStep(4, currentStep.id, nextStep.id)) {
-    const ipValidation = checkIpFourSettingsSync(
-      localization.value,
-      ipFourSettings.value,
-      wizard,
-      value
-    )
-
-    value = ipValidation.newValue
-
-    stepHasError = stepHasError || ipValidation.stepHasError
-  }
-
-  if (wizard.isValidateForStep(5, currentStep.id, nextStep.id)) {
-    const labelValidation = await checkNetworkAsync(
-      value,
-      connectionSettings.value.networkLabel,
-      5,
-      UI_E_ValidationFields.CONNECTION_SETTINGS_NETWORK,
-      emits,
-      localization.value,
-      wizard
-    )
-
-    value = labelValidation.newValue
-
-    const connectionSettingsValidation = checkConnectionSettingsSync(
-      localization.value,
-      connectionSettings.value,
-      wizard,
-      value
-    )
-
-    value = connectionSettingsValidation.newValue
-
-    stepHasError =
-      stepHasError ||
-      labelValidation.stepHasError ||
-      connectionSettingsValidation.stepHasError
-  }
-
-  if (wizard.isValidateForStep(6, currentStep.id, nextStep.id)) {
-    wizard.waitingStepId = nextStep.id
-
-    const adapterValidation = checkAdaptersSync(
-      localization.value,
-      adapterStatus.value,
-      value,
-      currentStep.id,
-      nextStep.id,
-      props.adapters.items,
-      showNoActiveAdaptersModal,
-      showNoConnectedActiveAdaptersModal,
-      6
-    )
-
-    value = adapterValidation.newValue
-
-    stepShouldStop = adapterValidation.stepShouldStop || stepShouldStop
-
-    stepHasError = stepHasError || adapterValidation.stepHasError
-  }
-
-  return {
-    newValue: value,
-    stepHasError,
-    stepShouldStop,
-  }
-}
-
-const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
-  wizard.changeSteps(value, validationFunc, finalValidationFunc)
-
-const onHideAddNetworkingModal = (): void => {
-  emits('hide')
-  reset()
-}
-
-const onSubmit = async (): Promise<void> => {
-  let data:
-    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
-    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
-    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
-    | API_UI_I_SwitchItem
-    | null = null
-
-  let type: 'network' | 'vmkernel' | 'adapter' | 'new-switch' = 'network'
-
-  if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
-    const vlan = getVlanId(portProperties.value.vlanId, localization.value)
-    type = 'vmkernel'
-    data = addNetworkingZeroOrFirstSchemeDataFunc(
-      targetDevice.value,
-      Number(vlan),
-      portProperties.value,
-      ipFourSettings.value,
-      wizard.isSelectedScheme(1),
-      adapterStatus.value
-    )
-  }
-
-  if (wizard.isSelectedScheme(2) || wizard.isSelectedScheme(3)) {
-    const vlan = getVlanId(connectionSettings.value.vlanId, localization.value)
-    type = 'network'
-    data = addNetworkingSecondOrThirdSchemeDataFunc(
-      connectionSettings.value,
-      targetDevice.value,
-      Number(vlan),
-      wizard.isSelectedScheme(2),
-      adapterStatus.value
-    )
-  }
-
-  if (wizard.isSelectedScheme(4) || wizard.isSelectedScheme(5)) {
-    type = wizard.isSelectedScheme(4) ? 'adapter' : 'new-switch'
-    data = addNetworkingFourthOrFifthSchemeDataFunc(
-      targetDevice.value.switch,
-      wizard.isSelectedScheme(4),
-      adapterStatus.value,
-      props.diagramsData,
-      targetDevice.value.mtu
-    )
-  }
-
-  data &&
-    emits('send-add-networking-data', data, type, onHideAddNetworkingModal)
-}
-
-onMounted(() => {
-  localHostName.value = location.hostname
-})
-
-watch(
-  [
-    () => props.isNetworkingLoading,
-    () => props.isGetExistingSwitchesLoading,
-    () => props.isGetTcpStackLoading,
-  ],
-  (newValue: [boolean, boolean, boolean]) => {
-    const wizardLoading = isNewView.value
-      ? newValue[0]
-      : newValue.some((loading: boolean) => loading)
-
-    wizard.setLoader(wizardLoading)
-  },
-  {
-    immediate: true,
-    deep: true,
-  }
-)
-
-watch(
-  props.tcpStacks,
-  (newValue: UI_I_TCPStack[]) => {
-    portProperties.value.tcp = newValue?.[0]?.id || ''
-    ipFourSettings.value.static.defaultGateway.value =
-      newValue?.[0]?.gateway || ''
-  },
-  { deep: true }
-)
-</script>
-
-<style scoped lang="scss"></style>
+<template>
+  <div>
+    <component
+      :is="currentComponent"
+      v-model:connection-type="connectionTypeLocal"
+      :show="props.show"
+      :wizard="wizard"
+      :selected-scheme="selectedScheme"
+      :wizard-title="title"
+      :host-name="hostNameLocal"
+      :project="props.project"
+      :target-device="targetDevice"
+      :standard-switches-initial="props.standardSwitchesInitial"
+      :alert-messages="alertMessages"
+      :selected-standard-switch-id="props.selectedStandardSwitchId"
+      :selected-switch-id="props.selectedSwitchId"
+      :free-adapters="props.freeAdapters"
+      :added-adapters="addedAdapters"
+      :core-adapters="coreAdapters"
+      :adapter-status="adapterStatus"
+      :adapters="props.adapters"
+      :is-show-no-connected-active-adapters-modal="
+        isShowNoConnectedActiveAdaptersModal
+      "
+      :is-show-no-active-adapters-modal="isShowNoActiveAdaptersModal"
+      :is-dark-mode="props.isDarkMode"
+      :port-properties="portProperties"
+      :mtu-from-switch="mtuFromSwitch"
+      :tcp-stacks="props.tcpStacks"
+      :ip-four-settings="ipFourSettings"
+      :gateway-flag="gatewayFlag"
+      :connection-settings="connectionSettings"
+      :ready-complete-fields="readyCompleteFields"
+      :is-get-existing-switches-loading="props.isGetExistingSwitchesLoading"
+      :is-get-tcp-stack-loading="props.isGetTcpStackLoading"
+      @change-connection-settings="onChangeConnectionSettings"
+      @change-gateway-flag="onChangeGatewayFlag"
+      @change-ip-four-settings="onChangeIpFourSettings"
+      @change-port-properties="onChangePortProperties"
+      @get-free-adapters="onGetFreeAdapters"
+      @change-added-adapters="onChangeAddedAdapters"
+      @change-adapter-status="onChangeAdapterStatus"
+      @confirm-no-active-adapters-modal="onConfirmNoActiveAdaptersModal"
+      @hide-no-connected-active-adapters-modal="
+        onHideNoConnectedActiveAdaptersModal
+      "
+      @hide-no-active-adapters-modal="onHideNoActiveAdaptersModal"
+      @hide-alert="onHideAlert"
+      @change-target-device="onChangeTargetDevice"
+      @change-steps="onChangeSteps"
+      @hide="onHideAddNetworkingModal"
+      @submit="onSubmit"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+  UI_I_WizardStepNavigation,
+} from '~/node_modules/bfg-uikit/components/ui/wizard/lib/models/interfaces'
+import Wizard from '~/node_modules/bfg-uikit/components/ui/wizard/lib/utils/utils'
+import type {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+  UI_I_ItemsWithTotalCounts,
+} from '~/lib/models/interfaces'
+import type { UI_T_Project } from '~/lib/models/types'
+import type {
+  UI_I_PortProperties,
+  UI_I_IpFourSettings,
+  UI_I_ConnectionSettings,
+  UI_I_TargetDevice,
+  UI_I_Switch,
+  UI_I_ReadyCompleteFields,
+  UI_I_AddNetworkingSecondOrThirdSchemeDataSend,
+  UI_I_AddNetworkingZeroOrFirstSchemeDataSend,
+  UI_I_AddNetworkingFourthOrFifthSchemeDataSend,
+  // UI_I_AddNetworkingEmits,
+  UI_I_TCPStack,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type {
+  UI_I_Adapter,
+  UI_I_AdapterStatus,
+  UI_I_SwitchAdapterItem,
+  UI_I_DiagramData,
+  API_UI_I_SwitchItem,
+  UI_I_AvailableAdapters,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+import { getAvailableAdapters } from '~/components/common/diagramMain/lib/utils/utils'
+import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/lib/models/enums'
+import { getVlanId } from '~/components/common/wizards/network/add/lib/utils/utils'
+import {
+  createZeroSchemeReadyCompleteFunc,
+  createFirstSchemeReadyCompleteFunc,
+  createSecondSchemeReadyCompleteFunc,
+  createThirdSchemeReadyCompleteFunc,
+  createFourthSchemeReadyCompleteFunc,
+  createFifthSchemeReadyCompleteFunc,
+  stepsSchemeInitial,
+  stepsFunc,
+  connectionSettingsInitial,
+  portPropertiesInitial,
+  ipFourSettingsInitial,
+  targetDeviceInitialFunc,
+  addNetworkingZeroOrFirstSchemeDataFunc,
+  addNetworkingSecondOrThirdSchemeDataFunc,
+  addNetworkingFourthOrFifthSchemeDataFunc,
+} from '~/components/common/wizards/network/add/lib/config/config'
+import {
+  checkTargetDeviceSync,
+  checkAdaptersSync,
+  checkPortPropertiesSync,
+  checkIpFourSettingsSync,
+  checkConnectionSettingsSync,
+  checkNetworkAsync,
+} from '~/components/common/wizards/network/add/validations/validations'
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    standardSwitchesInitial?: UI_I_Switch[]
+    freeAdapters?: UI_I_Adapter[]
+    project?: UI_T_Project
+    isDarkMode?: boolean
+    selectedStandardSwitchId?: string
+    selectedSwitchId?: string
+    tcpStacks?: UI_I_TCPStack[]
+    diagramsData?: UI_I_DiagramData[]
+    isNetworkingLoading?: boolean
+    isGetExistingSwitchesLoading?: boolean
+    isGetTcpStackLoading?: boolean
+    hostName?: string
+  }>(),
+  {
+    standardSwitchesInitial: () => [],
+    freeAdapters: () => [],
+    project: 'procurator',
+    isDarkMode: false,
+    selectedStandardSwitchId: '',
+    selectedSwitchId: '',
+    tcpStacks: () => [],
+    diagramsData: [],
+    isNetworkingLoading: false,
+    isGetExistingSwitchesLoading: false,
+    isGetTcpStackLoading: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (
+    event: 'add-networking-data-validate',
+    data:
+      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+      | API_UI_I_SwitchItem,
+    type: string,
+    setValidation: (err_arg: UI_I_ArbitraryObject<string>) => void
+  ): void
+  (
+    event: 'send-add-networking-data',
+    data:
+      | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+      | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+      | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+      | API_UI_I_SwitchItem,
+    type: string,
+    hideModal: () => void
+  ): void
+  (event: 'get-existing-standard-switches'): void
+  (event: 'get-free-adapters', cb: () => void): void
+  (
+    event: 'check-network-label',
+    label: string,
+    sendMessage: (message: string) => void
+  ): void
+  (event: 'get-tcp-stacks'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./AddNew.vue'))
+    : defineAsyncComponent(() => import('./AddOld.vue'))
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const localHostName = ref<string>('')
+const hostNameLocal = computed<string>(
+  () => props.hostName || localHostName.value
+)
+
+const title = computed<string>(
+  () => `${hostNameLocal.value} - ${localization.value.common.addNetworking}`
+)
+
+const wizard: Wizard = new Wizard(
+  stepsFunc(localization.value),
+  stepsSchemeInitial
+)
+
+const selectedScheme = computed<number[]>(() => wizard.selectedScheme.value)
+const alertMessages = computed<string[][]>(() => wizard.alertMessages.value)
+
+const readyCompleteFields = ref<UI_I_ReadyCompleteFields[]>([])
+
+const globalPermissions = computed<any>(
+  () => $store.getters['globalPermissions/getPermissions']
+)
+
+// Step's content data (connectionType)
+const connectionType = ref<string>(
+  globalPermissions.value === undefined
+    ? '0'
+    : !globalPermissions.value?.['Networks.CreateSysx'] &&
+      !globalPermissions.value?.['Networks.CreatePortGroup']
+    ? '2'
+    : !globalPermissions.value?.['Networks.CreateSysx']
+    ? '1'
+    : '0'
+)
+
+const connectionTypeLocal = computed<string>({
+  get() {
+    return connectionType.value
+  },
+  set(newValue: string) {
+    wizard.resetAfterSelected()
+    connectionType.value = newValue
+    targetDevice.value.standardSwitch = props.selectedStandardSwitchId
+    targetDevice.value.switch = props.selectedSwitchId
+  },
+})
+
+// Step's content data (createStandardSwitch)
+const addedAdapters = ref<string[]>([])
+const coreAdapters = ref<string[]>([])
+
+const onChangeAddedAdapters = (addedAdaptersNew: string[]): void => {
+  addedAdapters.value = addedAdaptersNew
+}
+
+const adapterStatus = ref<UI_I_AdapterStatus>({
+  active: [],
+  standby: [],
+  unused: [],
+})
+const onChangeAdapterStatus = (adapterStatusNew: UI_I_AdapterStatus): void => {
+  adapterStatus.value = adapterStatusNew
+}
+
+// Step's content data and changers (targetDevice)
+const targetDevice = ref<UI_I_TargetDevice>(
+  useDeepCopy(
+    targetDeviceInitialFunc(globalPermissions.value?.['Networks.UpdateSwitch'])
+  )
+)
+const mtuFromSwitch = ref<number>(1500)
+
+const onChangeTargetDevice = (newTargetDevice: UI_I_TargetDevice): void => {
+  const oldTargetDeviceSelected = useDeepCopy(targetDevice.value).selected
+  const newTargetDeviceSelected = newTargetDevice.selected
+
+  if (oldTargetDeviceSelected !== newTargetDeviceSelected) {
+    wizard.resetAfterSelected()
+  }
+
+  const selectedSwitch = props.standardSwitchesInitial.find(
+    (currentSwitch: UI_I_Switch) =>
+      newTargetDevice.standardSwitch === currentSwitch.name
+  )
+
+  if (newTargetDeviceSelected === '1' && selectedSwitch) {
+    mtuFromSwitch.value = selectedSwitch?.mtu || 1500
+  }
+  if (newTargetDeviceSelected === '3') {
+    mtuFromSwitch.value = newTargetDevice.mtu || 1500
+  }
+
+  targetDevice.value = useDeepCopy(newTargetDevice)
+}
+
+// Step's content data and changers (portProperties)
+const portProperties = ref<UI_I_PortProperties>(
+  useDeepCopy(portPropertiesInitial(localization.value))
+)
+const onChangePortProperties = (newFields: UI_I_PortProperties): void => {
+  if (portProperties.value.tcp !== newFields.tcp) {
+    ipFourSettings.value.static.defaultGateway.value =
+      props.tcpStacks?.find((tcp: UI_I_TCPStack) => tcp.id === newFields.tcp)
+        .gateway || ''
+  }
+  portProperties.value = newFields
+}
+
+// Step's content data and changers (ipFourSettings)
+const ipFourSettings = ref<UI_I_IpFourSettings>(ipFourSettingsInitial)
+const onChangeIpFourSettings = (newFields: UI_I_IpFourSettings): void => {
+  ipFourSettings.value = newFields
+}
+
+const gatewayFlag = ref<boolean>(false)
+const onChangeGatewayFlag = (newValue: boolean) => {
+  gatewayFlag.value = newValue
+}
+
+// Step's content data and changers (connectionSettings)
+const connectionSettings = ref<UI_I_ConnectionSettings>(
+  connectionSettingsInitial(localization.value)
+)
+const onChangeConnectionSettings = (
+  newFields: UI_I_ConnectionSettings
+): void => {
+  connectionSettings.value = newFields
+}
+
+const onHideAlert = (stepId: number, field?: string): void => {
+  wizard.hideAlertMessagesByStepId(stepId, field)
+}
+
+let flagSwitch = ''
+
+// Choosing Scheme
+watch(
+  [connectionTypeLocal, targetDevice],
+  (
+    newValues: [string, UI_I_TargetDevice],
+    oldValues: [string, UI_I_TargetDevice]
+  ) => {
+    const newCT = newValues[0] // -> newConnectionType
+    const oldCT = oldValues[0] // -> oldConnectionType
+    const newTD = newValues[1] // -> newTargetDevice
+    const oldTD = oldValues[1] // -> oldTargetDevice
+
+    if (!oldTD || oldTD.selected !== newTD.selected) {
+      flagSwitch = ''
+      addedAdapters.value = []
+      adapterStatus.value = {
+        active: [],
+        standby: [],
+        unused: [],
+      }
+    }
+    if (newCT !== oldCT) {
+      newCT === '0' && props.selectedStandardSwitchId
+        ? (targetDevice.value.selected = '1')
+        : (targetDevice.value.selected = '0')
+      newCT === '1' && (targetDevice.value.selected = '1')
+      newCT === '2' &&
+        (globalPermissions.value === undefined ||
+        globalPermissions.value?.['Networks.UpdateSwitch']
+          ? (targetDevice.value.selected = '2')
+          : (targetDevice.value.selected = '3'))
+    }
+    if (newCT === '0') {
+      ;(newTD.selected === '0' || newTD.selected === '1') &&
+        wizard.changeScheme(0)
+      newTD.selected === '3' && wizard.changeScheme(1)
+    }
+    if (newCT === '1') {
+      newTD.selected === '1' && wizard.changeScheme(2)
+      newTD.selected === '3' && wizard.changeScheme(3)
+    }
+    if (newCT === '2') {
+      newTD.selected === '2' && wizard.changeScheme(4)
+      newTD.selected === '3' && wizard.changeScheme(5)
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const onGetExistingStandardSwitches = (): void => {
+  emits('get-existing-standard-switches')
+}
+
+const onGetTcpStacks = (): void => {
+  emits('get-tcp-stacks')
+}
+
+watch(
+  () => wizard.selectedStepId,
+  (newSelectedStep: number) => {
+    if (newSelectedStep === 1) {
+      onGetExistingStandardSwitches()
+    }
+    if (newSelectedStep === 3) {
+      onGetTcpStacks()
+    }
+    if (newSelectedStep === 6 && flagSwitch !== targetDevice.value.switch) {
+      const nics: UI_I_AdapterStatus = props.standardSwitchesInitial.find(
+        (currentSwitch: UI_I_Switch) =>
+          currentSwitch.id === targetDevice.value.switch
+      ).nics
+
+      const availableAdapters: UI_I_AvailableAdapters = getAvailableAdapters(
+        props.adapters,
+        nics
+      )
+
+      adapterStatus.value = {
+        active: availableAdapters.activeAdapters || [],
+        standby: availableAdapters.standbyAdapters || [],
+        unused: availableAdapters.unusedAdapters || [],
+      }
+      coreAdapters.value = [
+        ...adapterStatus.value.active,
+        ...adapterStatus.value.standby,
+        ...adapterStatus.value.unused,
+      ]
+      flagSwitch = targetDevice.value.switch
+    }
+
+    if (newSelectedStep !== 7) return // If last step
+    if (wizard.isSelectedScheme(0)) {
+      readyCompleteFields.value = createZeroSchemeReadyCompleteFunc(
+        isNewView.value,
+        targetDevice.value,
+        portProperties.value,
+        ipFourSettings.value,
+        localization.value
+      )
+      return
+    }
+
+    if (wizard.isSelectedScheme(1)) {
+      readyCompleteFields.value = createFirstSchemeReadyCompleteFunc(
+        isNewView.value,
+        targetDevice.value,
+        portProperties.value,
+        ipFourSettings.value,
+        addedAdapters.value,
+        localization.value
+      )
+      return
+    }
+    if (wizard.isSelectedScheme(2)) {
+      readyCompleteFields.value = createSecondSchemeReadyCompleteFunc(
+        isNewView.value,
+        connectionSettings.value,
+        targetDevice.value,
+        localization.value
+      )
+      return
+    }
+    if (wizard.isSelectedScheme(3)) {
+      readyCompleteFields.value = createThirdSchemeReadyCompleteFunc(
+        isNewView.value,
+        connectionSettings.value,
+        targetDevice.value,
+        addedAdapters.value,
+        localization.value
+      )
+      return
+    }
+    if (wizard.isSelectedScheme(4)) {
+      readyCompleteFields.value = createFourthSchemeReadyCompleteFunc(
+        isNewView.value,
+        targetDevice.value.switch,
+        props.diagramsData,
+        adapterStatus.value,
+        localization.value
+      )
+      return
+    }
+    if (wizard.isSelectedScheme(5)) {
+      readyCompleteFields.value = createFifthSchemeReadyCompleteFunc(
+        isNewView.value,
+        targetDevice.value,
+        adapterStatus.value,
+        localization.value
+      )
+    }
+  }
+)
+
+// Reset data
+const reset = (): void => {
+  wizard.reset()
+  connectionTypeLocal.value = '0'
+  targetDevice.value = useDeepCopy(
+    targetDeviceInitialFunc(globalPermissions.value?.['Networks.UpdateSwitch'])
+  )
+  connectionSettings.value = useDeepCopy(
+    connectionSettingsInitial(localization.value)
+  )
+  portProperties.value = useDeepCopy(portPropertiesInitial(localization.value))
+  ipFourSettings.value = useDeepCopy(ipFourSettingsInitial)
+  coreAdapters.value = []
+  addedAdapters.value = []
+  adapterStatus.value = {
+    active: [],
+    standby: [],
+    unused: [],
+  }
+}
+
+const isShowNoConnectedActiveAdaptersModal = ref(false)
+const isShowNoActiveAdaptersModal = ref(false)
+
+const showNoConnectedActiveAdaptersModal = (): void => {
+  isShowNoConnectedActiveAdaptersModal.value = true
+}
+const onHideNoConnectedActiveAdaptersModal = (): void => {
+  isShowNoConnectedActiveAdaptersModal.value = false
+}
+const showNoActiveAdaptersModal = (): void => {
+  isShowNoActiveAdaptersModal.value = true
+}
+const onHideNoActiveAdaptersModal = (): void => {
+  isShowNoActiveAdaptersModal.value = false
+}
+
+const onConfirmNoActiveAdaptersModal = (): void => {
+  onHideNoConnectedActiveAdaptersModal()
+  onHideNoActiveAdaptersModal()
+  if (wizard.waitingStepId === 7) {
+    wizard.changeSteps(
+      wizard.selectedStepData(
+        wizard.stepsInSelectedSchemeWithStatus.value.find(
+          (step: UI_I_WizardStepNavigation) => step.id === 7
+        )
+      ),
+      validationFunc,
+      props.project === 'sphere' ? null : finalValidationFunc,
+      true
+    )
+    wizard.waitingStepId = -1
+    return
+  }
+  wizard.selectStepHard(wizard.waitingStepId)
+}
+
+const onGetFreeAdapters = (showModal: () => void): void => {
+  emits('get-free-adapters', showModal)
+}
+
+const checkFinal = async (): Promise<UI_I_ArbitraryObject<string>> => {
+  let data:
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+    | API_UI_I_SwitchItem
+    | null = null
+
+  let type: 'network' | 'vmkernel' | 'adapter' | 'new-switch'
+
+  if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
+    const vlan = getVlanId(portProperties.value.vlanId, localization.value)
+
+    data = addNetworkingZeroOrFirstSchemeDataFunc(
+      targetDevice.value,
+      Number(vlan),
+      portProperties.value,
+      ipFourSettings.value,
+      wizard.isSelectedScheme(1),
+      adapterStatus.value
+    )
+
+    type = 'vmkernel'
+  }
+
+  if (wizard.isSelectedScheme(2) || wizard.isSelectedScheme(3)) {
+    const vlan = getVlanId(connectionSettings.value.vlanId, localization.value)
+
+    data = addNetworkingSecondOrThirdSchemeDataFunc(
+      connectionSettings.value,
+      targetDevice.value,
+      Number(vlan),
+      wizard.isSelectedScheme(2),
+      adapterStatus.value
+    )
+
+    type = 'network'
+  }
+
+  if (wizard.isSelectedScheme(4) || wizard.isSelectedScheme(5)) {
+    data = addNetworkingFourthOrFifthSchemeDataFunc(
+      targetDevice.value.switch,
+      wizard.isSelectedScheme(4),
+      adapterStatus.value,
+      props.diagramsData,
+      targetDevice.value.mtu
+    )
+
+    type = wizard.isSelectedScheme(4) ? 'adapter' : 'new-switch'
+  }
+
+  return new Promise((resolve, _reject) =>
+    emits(
+      'add-networking-data-validate',
+      data,
+      type,
+      (err_arg: UI_I_ArbitraryObject<string>): void => {
+        resolve(err_arg)
+      }
+    )
+  )
+}
+
+const finalValidationFunc = async (
+  value: UI_I_WizardStep[]
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+
+  const validationFields: {
+    [key: string]: string
+  } = await checkFinal()
+
+  for (const fieldName in validationFields) {
+    const stepId = wizard.getStepIdByFieldName(fieldName)
+
+    if (stepId !== -1) {
+      let message = ''
+
+      if (validationFields[fieldName]) {
+        message = `${validationFields[
+          fieldName
+        ][0].toUpperCase()}${validationFields[fieldName].substring(1)}`
+
+        message =
+          message.charAt(message.length - 1) !== '.' ? message + '.' : message
+      }
+
+      stepHasError = wizard.setValidation(stepId, fieldName, {
+        fieldMessage: message,
+        alertMessage: message,
+      })
+    }
+  }
+
+  return {
+    stepHasError,
+    newValue: value,
+  }
+}
+
+const validationFunc = async (
+  value: UI_I_WizardStep[],
+  currentStep: UI_I_WizardStep,
+  nextStep: UI_I_WizardStep
+): Promise<UI_I_ValidationReturn> => {
+  let stepHasError = false
+  let stepShouldStop = {
+    ifOnCurrentStep: false,
+    ifFromAnyStep: false,
+    stoppageStepId: -1,
+  }
+
+  if (wizard.isValidateForStep(1, currentStep.id, nextStep.id)) {
+    const targetDeviceValidation = checkTargetDeviceSync(
+      localization.value,
+      targetDevice.value,
+      wizard,
+      value,
+      isNewView.value
+    )
+
+    value = targetDeviceValidation.newValue
+
+    stepHasError = stepHasError || targetDeviceValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(2, currentStep.id, nextStep.id)) {
+    wizard.waitingStepId = nextStep.id
+
+    const adapterValidation = checkAdaptersSync(
+      localization.value,
+      adapterStatus.value,
+      value,
+      currentStep.id,
+      nextStep.id,
+      props.freeAdapters,
+      showNoActiveAdaptersModal,
+      showNoConnectedActiveAdaptersModal,
+      2
+    )
+
+    value = adapterValidation.newValue
+
+    stepShouldStop = adapterValidation.stepShouldStop || stepShouldStop
+
+    stepHasError = stepHasError || adapterValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(3, currentStep.id, nextStep.id)) {
+    const labelValidation = await checkNetworkAsync(
+      value,
+      portProperties.value.networkLabel,
+      3,
+      UI_E_ValidationFields.PORT_PROPERTIES_NETWORK,
+      emits,
+      localization.value,
+      wizard
+    )
+
+    value = labelValidation.newValue
+
+    const portPropertiesValidation = checkPortPropertiesSync(
+      localization.value,
+      portProperties.value,
+      wizard,
+      value
+    )
+
+    value = portPropertiesValidation.newValue
+
+    stepHasError =
+      stepHasError ||
+      labelValidation.stepHasError ||
+      portPropertiesValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(4, currentStep.id, nextStep.id)) {
+    const ipValidation = checkIpFourSettingsSync(
+      localization.value,
+      ipFourSettings.value,
+      wizard,
+      value
+    )
+
+    value = ipValidation.newValue
+
+    stepHasError = stepHasError || ipValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(5, currentStep.id, nextStep.id)) {
+    const labelValidation = await checkNetworkAsync(
+      value,
+      connectionSettings.value.networkLabel,
+      5,
+      UI_E_ValidationFields.CONNECTION_SETTINGS_NETWORK,
+      emits,
+      localization.value,
+      wizard
+    )
+
+    value = labelValidation.newValue
+
+    const connectionSettingsValidation = checkConnectionSettingsSync(
+      localization.value,
+      connectionSettings.value,
+      wizard,
+      value
+    )
+
+    value = connectionSettingsValidation.newValue
+
+    stepHasError =
+      stepHasError ||
+      labelValidation.stepHasError ||
+      connectionSettingsValidation.stepHasError
+  }
+
+  if (wizard.isValidateForStep(6, currentStep.id, nextStep.id)) {
+    wizard.waitingStepId = nextStep.id
+
+    const adapterValidation = checkAdaptersSync(
+      localization.value,
+      adapterStatus.value,
+      value,
+      currentStep.id,
+      nextStep.id,
+      props.adapters.items,
+      showNoActiveAdaptersModal,
+      showNoConnectedActiveAdaptersModal,
+      6
+    )
+
+    value = adapterValidation.newValue
+
+    stepShouldStop = adapterValidation.stepShouldStop || stepShouldStop
+
+    stepHasError = stepHasError || adapterValidation.stepHasError
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+    stepShouldStop,
+  }
+}
+
+const onChangeSteps = async (value: UI_I_WizardStep[]): Promise<void> =>
+  wizard.changeSteps(value, validationFunc, finalValidationFunc)
+
+const onHideAddNetworkingModal = (): void => {
+  emits('hide')
+  reset()
+}
+
+const onSubmit = async (): Promise<void> => {
+  let data:
+    | UI_I_AddNetworkingSecondOrThirdSchemeDataSend
+    | UI_I_AddNetworkingZeroOrFirstSchemeDataSend
+    | UI_I_AddNetworkingFourthOrFifthSchemeDataSend
+    | API_UI_I_SwitchItem
+    | null = null
+
+  let type: 'network' | 'vmkernel' | 'adapter' | 'new-switch' = 'network'
+
+  if (wizard.isSelectedScheme(0) || wizard.isSelectedScheme(1)) {
+    const vlan = getVlanId(portProperties.value.vlanId, localization.value)
+    type = 'vmkernel'
+    data = addNetworkingZeroOrFirstSchemeDataFunc(
+      targetDevice.value,
+      Number(vlan),
+      portProperties.value,
+      ipFourSettings.value,
+      wizard.isSelectedScheme(1),
+      adapterStatus.value
+    )
+  }
+
+  if (wizard.isSelectedScheme(2) || wizard.isSelectedScheme(3)) {
+    const vlan = getVlanId(connectionSettings.value.vlanId, localization.value)
+    type = 'network'
+    data = addNetworkingSecondOrThirdSchemeDataFunc(
+      connectionSettings.value,
+      targetDevice.value,
+      Number(vlan),
+      wizard.isSelectedScheme(2),
+      adapterStatus.value
+    )
+  }
+
+  if (wizard.isSelectedScheme(4) || wizard.isSelectedScheme(5)) {
+    type = wizard.isSelectedScheme(4) ? 'adapter' : 'new-switch'
+    data = addNetworkingFourthOrFifthSchemeDataFunc(
+      targetDevice.value.switch,
+      wizard.isSelectedScheme(4),
+      adapterStatus.value,
+      props.diagramsData,
+      targetDevice.value.mtu
+    )
+  }
+
+  data &&
+    emits('send-add-networking-data', data, type, onHideAddNetworkingModal)
+}
+
+onMounted(() => {
+  localHostName.value = location.hostname
+})
+
+watch(
+  [
+    () => props.isNetworkingLoading,
+    () => props.isGetExistingSwitchesLoading,
+    () => props.isGetTcpStackLoading,
+  ],
+  (newValue: [boolean, boolean, boolean]) => {
+    const wizardLoading = isNewView.value
+      ? newValue[0]
+      : newValue.some((loading: boolean) => loading)
+
+    wizard.setLoader(wizardLoading)
+  },
+  {
+    immediate: true,
+    deep: true,
+  }
+)
+
+watch(
+  props.tcpStacks,
+  (newValue: UI_I_TCPStack[]) => {
+    portProperties.value.tcp = newValue?.[0]?.id || ''
+    ipFourSettings.value.static.defaultGateway.value =
+      newValue?.[0]?.gateway || ''
+  },
+  { deep: true }
+)
+</script>
+
+<style scoped lang="scss"></style>