bfg-common 1.3.308 → 1.3.310

package/components/common/diagramMain/modals/editSettings/EditSettings.vue

@@ -1,493 +1,507 @@
-<template>
-  <div class="wizard-tab__container">
-    <div class="vertical-tabs__fixed-position">
-      <atoms-tabs-vertical-tabs
-        v-model="selectedTab"
-        :items="props.items"
-        :has-error-messages="hasErrorMessages"
-        @set-alert="onShowErrorMessageAlert"
-      />
-    </div>
-    <template v-if="isNetwork || isSwitch">
-      <common-diagram-main-modals-edit-settings-tabs-network-properties
-        v-if="isNetwork"
-        v-show="selectedTab === '1'"
-        :is-show-error-message-alert="isShowErrorMessageAlert"
-        :error-messages="errorMessages"
-        :initial-data="props.initialData"
-        :has-error-messages="hasErrorMessages"
-        :network-already-exists="networkAlreadyExists"
-        @change-edit-properties-data="onChangeNetworkEditPropertiesData"
-        @change-error-messages="onChangeErrorMessages"
-        @hide-error-message-alert="onHideErrorMessageAlert"
-      />
-      <common-diagram-main-modals-edit-settings-tabs-switch-properties
-        v-if="isSwitch"
-        v-show="selectedTab === '1'"
-        :is-show-error-message-alert="isShowErrorMessageAlert"
-        :error-messages="errorMessages"
-        :initial-data="props.initialData"
-        :has-error-messages="hasErrorMessages"
-        @change-edit-properties-data="onChangeSwitchEditPropertiesData"
-        @change-error-messages="onChangeErrorMessages"
-        @hide-error-message-alert="onHideErrorMessageAlert"
-      />
-      <common-diagram-main-modals-edit-settings-tabs-security
-        v-show="selectedTab === '2'"
-        :is-switch="isSwitch"
-        :initial-data="props.initialData"
-        @change-edit-security-data="onChangeEditSecurityData"
-      />
-      <common-diagram-main-modals-edit-settings-tabs-traffic-shaping
-        v-show="selectedTab === '3'"
-        :is-show-error-message-alert="isShowErrorMessageAlert"
-        :error-messages="errorMessages"
-        :initial-data="props.initialData"
-        :has-error-messages="hasErrorMessages"
-        :is-switch="isSwitch"
-        @change-edit-traffic-shaping-data="onChangeEditTrafficShapingData"
-        @change-error-messages="onChangeErrorMessages"
-        @hide-error-message-alert="onHideErrorMessageAlert"
-      />
-      <common-diagram-main-modals-edit-settings-tabs-teaming-failover
-        v-show="selectedTab === '4'"
-        :is-switch="isSwitch"
-        :adapters="props.adapters"
-        :initial-data="props.initialData"
-        :adapter-status="adapterStatus"
-        :is-dark-mode="props.isDarkMode"
-        @change-edit-teaming-failover-data="onChangeEditTeamingFailoverData"
-        @change-adapter-status="onChangeAdapterStatus"
-      />
-    </template>
-    <template v-if="isPort">
-      <common-diagram-main-modals-edit-settings-tabs-port-properties
-        v-show="selectedTab === '1'"
-        :is-show-error-message-alert="isShowErrorMessageAlert"
-        :error-messages="errorMessages"
-        :initial-data="props.initialData"
-        :has-error-messages="hasErrorMessages"
-        @change-error-messages="onChangeErrorMessages"
-        @change-port-edit-properties-data="onChangePortEditPropertiesData"
-        @hide-error-message-alert="onHideErrorMessageAlert"
-      />
-      <common-diagram-main-modals-edit-settings-tabs-port-ipv-four-settings
-        v-show="selectedTab === '2'"
-        :is-show-error-message-alert="isShowErrorMessageAlert"
-        :error-messages="errorMessages"
-        :initial-data="props.initialData"
-        :has-error-messages="hasErrorMessages"
-        @change-error-messages="onChangeErrorMessages"
-        @change-port-ipv-four-data="onChangePortEditIpvFourData"
-        @hide-error-message-alert="onHideErrorMessageAlert"
-      />
-    </template>
-    <common-diagram-main-modals-edit-settings-confirm-teaming-settings-modal
-      :is-show="isShowWithoutActiveAdapterModal"
-      @hide="onHideWithoutActiveAdapterModal"
-      @submit="onApproveWithoutActiveAdapterModal"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_ItemsWithTotalCounts } from '~/lib/models/interfaces'
-import {
-  UI_I_AdapterStatus,
-  UI_I_ModalsInitialData,
-  UI_I_SwitchAdapterItem,
-  UI_I_SecurityFields,
-  UI_I_TrafficShapingFields,
-  UI_I_TeamingFailoverFields,
-  UI_I_EditFieldsData,
-  UI_I_PropertiesFields,
-  UI_I_EditSettingsErrorMessage,
-  UI_I_SwitchPropertiesFields,
-  UI_I_PortPropertiesFields,
-  UI_I_IpvFourSettingsFields,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-// Props from up
-const props = withDefaults(
-  defineProps<{
-    viewName: string
-    items: {
-      value: string
-      text: string
-    }[]
-    initialData?: UI_I_ModalsInitialData
-    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
-    flagSendData: boolean
-    isDarkMode?: boolean
-  }>(),
-  {
-    initialData: () => ({}),
-    isDarkMode: false,
-  }
-)
-
-const emits = defineEmits<{
-  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
-  (
-    event: 'check-network-label',
-    label: string,
-    sendMessage: (message: string) => void
-  ): void
-  (event: 'send-edit-data', type: string): void
-}>()
-
-// View for the switch or the network
-const isSwitch = computed<boolean>(() => props.viewName === 'switch-edit')
-const isNetwork = computed<boolean>(() => props.viewName === 'network-edit')
-const isPort = computed<boolean>(() => props.viewName === 'port-edit')
-
-// Modal selected tab number
-const selectedTab = ref<string>('1')
-
-// Error notification from the nexted components validation
-const errorMessages = ref<UI_I_EditSettingsErrorMessage>({
-  networkLabel: '',
-  vlanId: '',
-  average: '',
-  peak: '',
-  burstSize: '',
-  mtu: '',
-  ipFourAddress: '',
-  subnetMask: '',
-  defaultGateway: '',
-})
-
-const onChangeErrorMessages = (
-  newErrorMessage: string,
-  fieldName: keyof UI_I_EditSettingsErrorMessage
-): void => {
-  errorMessages.value[fieldName] = newErrorMessage
-}
-
-const hasErrorMessages = computed(
-  () => !!Object.values(errorMessages.value).filter((err) => err !== '').length
-)
-
-// flag: to show error message
-const isShowErrorMessageAlert = ref<boolean>(false)
-
-const onShowErrorMessageAlert = (): void => {
-  isShowErrorMessageAlert.value = true
-}
-
-const onHideErrorMessageAlert = (): void => {
-  isShowErrorMessageAlert.value = false
-}
-
-const networkEditData = ref<UI_I_EditFieldsData>({})
-const initialNetworkLabel = ref<string>('-initial-networkLabel-123')
-
-const isFailoverOrderOverride = computed<string | number | boolean | undefined>(
-  () => networkEditData.value?.teamingFailover?.failoverOrder.checked
-)
-
-const adapterStatus = ref<UI_I_AdapterStatus>({
-  active: [],
-  standby: [],
-  unused: [],
-})
-const adapterStatusInitial = ref<UI_I_AdapterStatus>({
-  active: [],
-  standby: [],
-  unused: [],
-})
-
-const onChangeAdapterStatus = (newAdapterStatus: UI_I_AdapterStatus) => {
-  adapterStatus.value = newAdapterStatus
-}
-
-const onCheckNetworkLabel = (
-  label: string,
-  sendMessage: (message: string) => void
-) => {
-  emits('check-network-label', label, sendMessage)
-}
-
-const onChangeNetworkEditPropertiesData = (
-  newNetworkEditPropertiesData: UI_I_PropertiesFields
-) => {
-  networkEditData.value.properties = newNetworkEditPropertiesData
-  initialNetworkLabel.value === '-initial-networkLabel-123' &&
-    (initialNetworkLabel.value = newNetworkEditPropertiesData.networkLabel)
-}
-const onChangeSwitchEditPropertiesData = (
-  newSwitchEditPropertiesData: UI_I_SwitchPropertiesFields
-) => {
-  networkEditData.value.properties = newSwitchEditPropertiesData
-}
-const onChangePortEditPropertiesData = (
-  newPortEditPropertiesData: UI_I_PortPropertiesFields
-) => {
-  networkEditData.value.properties = newPortEditPropertiesData
-}
-const onChangePortEditIpvFourData = (
-  newPortEditIpvFourData: UI_I_IpvFourSettingsFields
-) => {
-  networkEditData.value.ipvFourSettings = newPortEditIpvFourData
-}
-
-const onChangeEditSecurityData = (newEditSecurityData: UI_I_SecurityFields) => {
-  networkEditData.value.security = newEditSecurityData
-}
-const onChangeEditTrafficShapingData = (
-  newEditTrafficShapingData: UI_I_TrafficShapingFields
-) => {
-  networkEditData.value.trafficShaping = newEditTrafficShapingData
-}
-const onChangeEditTeamingFailoverData = (
-  newEditTeamingFailoverData: UI_I_TeamingFailoverFields
-) => {
-  networkEditData.value.teamingFailover = {
-    ...newEditTeamingFailoverData,
-    adapters: adapterStatus.value,
-  }
-}
-
-const changeEditFieldsData = (newNetworkEditData: UI_I_EditFieldsData) =>
-  emits('change-edit-fields-data', newNetworkEditData)
-
-watch(
-  networkEditData,
-  (newNetworkEditData: UI_I_EditFieldsData) => {
-    changeEditFieldsData(newNetworkEditData)
-  },
-  { deep: true, immediate: true }
-)
-
-const isShowWithoutActiveAdapterModal = ref(false)
-const warningModalOpenedFromSending = ref(false)
-const isApprovedAdapterStatus = ref(true)
-
-const setApproveAdapterStatus = (value: boolean) =>
-  (isApprovedAdapterStatus.value = value)
-const onShowWithoutActiveAdapterModal = () => {
-  isShowWithoutActiveAdapterModal.value = true
-}
-const onHideWithoutActiveAdapterModal = () => {
-  isShowWithoutActiveAdapterModal.value = false
-  warningModalOpenedFromSending.value = false
-  setApproveAdapterStatus(false)
-}
-
-const onApproveWithoutActiveAdapterModal = () => {
-  setApproveAdapterStatus(true)
-  if (warningModalOpenedFromSending.value) {
-    onSendData()
-    warningModalOpenedFromSending.value = false
-    onHideWithoutActiveAdapterModal()
-    return
-  }
-
-  isShowWithoutActiveAdapterModal.value = false
-  selectedTab.value = selectedTabInAlertModal.value
-  lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
-}
-
-const isCheckedNetworkLabel = ref(false)
-const networkAlreadyExists = ref(false)
-
-const checkNetworkLabelCallback = (
-  type: 'tab' | 'send',
-  message: string,
-  newSelectedTab?: string
-) => {
-  if (!message) {
-    isCheckedNetworkLabel.value = true
-    networkAlreadyExists.value = false
-    type === 'tab' && (selectedTab.value = newSelectedTab || '4')
-    type === 'send' && emits('send-edit-data', props.viewName)
-    return
-  }
-
-  errorMessages.value.networkLabel = message
-  networkAlreadyExists.value = true
-  onShowErrorMessageAlert()
-}
-
-const networkLabel = computed<string>(
-  () =>
-    (networkEditData.value.properties as UI_I_PropertiesFields)?.networkLabel
-)
-const onSendData = () => {
-  if (isNetwork.value) {
-    if (!networkLabel.value) {
-      onShowErrorMessageAlert()
-      return
-    }
-    initialNetworkLabel.value !== networkLabel.value &&
-    selectedTab.value === '1'
-      ? onCheckNetworkLabel(networkLabel.value || '', (message) =>
-          checkNetworkLabelCallback('send', message)
-        )
-      : emits('send-edit-data', props.viewName)
-  }
-
-  ;(isSwitch.value || isPort.value) && emits('send-edit-data', props.viewName)
-}
-
-const isNotChangedAdapterStatusFunc = (): boolean => {
-  const adapterStatusString = JSON.stringify(adapterStatus.value)
-  const adapterStatusInitialString = JSON.stringify(adapterStatusInitial.value)
-  const adapterStatusLastSavedString = JSON.stringify(
-    lastSavedAdapterStatus.value
-  )
-
-  return (
-    adapterStatusString === adapterStatusInitialString ||
-    adapterStatusString === adapterStatusLastSavedString
-  )
-}
-
-watch(
-  () => props.flagSendData,
-  () => {
-    if (hasErrorMessages.value) {
-      onShowErrorMessageAlert()
-      return
-    }
-    const isNotChangedAdapterStatus = isNotChangedAdapterStatusFunc()
-    if (
-      !isFailoverOrderOverride.value ||
-      (isNotChangedAdapterStatus && isApprovedAdapterStatus.value)
-    ) {
-      onSendData()
-      return
-    }
-
-    warningModalOpenedFromSending.value = true
-    onShowWithoutActiveAdapterModal()
-  }
-)
-
-const selectedTabInAlertModal = ref<string>('')
-const lastSavedAdapterStatus = ref<UI_I_AdapterStatus>()
-
-const stopTabChanging = (newSelectedTab: string) => {
-  adapterStatus.value.active.length === 0 && (selectedTab.value = '4')
-  selectedTabInAlertModal.value = newSelectedTab
-  lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
-  onShowWithoutActiveAdapterModal()
-}
-
-watch(selectedTab, (newSelectedTab: string, oldSelectedTab: string) => {
-  if (oldSelectedTab === '4') {
-    if (!selectedTabInAlertModal.value && isFailoverOrderOverride.value) {
-      const isNotChangedAdapterStatus = isNotChangedAdapterStatusFunc()
-      if (isNotChangedAdapterStatus) {
-        lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
-        return
-      }
-
-      stopTabChanging(newSelectedTab)
-    } else if (
-      selectedTabInAlertModal.value &&
-      !isApprovedAdapterStatus.value &&
-      isFailoverOrderOverride.value
-    ) {
-      stopTabChanging(newSelectedTab)
-    } else if (selectedTabInAlertModal.value) {
-      selectedTabInAlertModal.value = ''
-    }
-  }
-
-  if (
-    isNetwork.value &&
-    newSelectedTab !== '1' &&
-    !isCheckedNetworkLabel.value
-  ) {
-    selectedTab.value = '1'
-    if (
-      networkLabel.value !== initialNetworkLabel.value &&
-      networkLabel.value !== ''
-    ) {
-      onCheckNetworkLabel(networkLabel.value || '', (message) =>
-        checkNetworkLabelCallback('tab', message, newSelectedTab)
-      )
-    } else if (networkLabel.value === '') {
-      onShowErrorMessageAlert()
-    } else {
-      isCheckedNetworkLabel.value = true
-      selectedTab.value = newSelectedTab
-    }
-  }
-})
-
-watch(
-  adapterStatus,
-  (newAdapterStatus: UI_I_AdapterStatus) => {
-    setApproveAdapterStatus(true)
-    if (networkEditData.value.teamingFailover) {
-      networkEditData.value.teamingFailover = {
-        ...networkEditData.value.teamingFailover,
-        adapters: newAdapterStatus,
-      }
-    }
-  },
-  { deep: true, immediate: true }
-)
-
-watch(
-  () => networkLabel.value,
-  (newNetworkEditData: string, oldNetworkEditData: string) => {
-    if (newNetworkEditData === oldNetworkEditData) return
-    isCheckedNetworkLabel.value = false
-    errorMessages.value = { ...errorMessages.value, networkLabel: '' }
-  },
-  { deep: true }
-)
-
-onMounted(() => {
-  const active = useDeepCopy(props.initialData.activeAdapters) || []
-  const standby = useDeepCopy(props.initialData.standbyAdapters) || []
-  const unused = useDeepCopy(props.initialData.unusedAdapters) || []
-  const adapterStatusInit = {
-    active,
-    standby,
-    unused,
-  }
-  adapterStatus.value = adapterStatusInit
-  adapterStatusInitial.value = adapterStatusInit
-})
-</script>
-
-<style scoped lang="scss">
-:deep(.alert-modal) {
-  .modal-dialog .modal-header {
-    padding-bottom: 24px;
-    border-bottom: none;
-  }
-  .warning-text {
-    color: #666666;
-    font-size: 14px;
-    margin-top: 24px;
-  }
-}
-:deep(.wizard-content__container) {
-  margin-left: 220px;
-}
-.vertical-tabs__fixed-position {
-  position: absolute;
-}
-
-.loader {
-  position: absolute;
-  z-index: 1000;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  top: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: rgba(0, 0, 0, 0.3);
-
-  .spinner {
-    left: unset;
-  }
-}
-</style>
+<template>
+  <div class="wizard-tab__container">
+    <div class="vertical-tabs__fixed-position">
+      <atoms-tabs-vertical-tabs
+        v-model="selectedTab"
+        :items="props.items"
+        :has-error-messages="hasErrorMessages"
+        @set-alert="onShowErrorMessageAlert"
+      />
+    </div>
+    <template v-if="isNetwork || isSwitch">
+      <common-diagram-main-modals-edit-settings-tabs-network-properties
+        v-if="isNetwork"
+        v-show="selectedTab === '1'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        :network-already-exists="networkAlreadyExists"
+        @change-edit-properties-data="onChangeNetworkEditPropertiesData"
+        @change-error-messages="onChangeErrorMessages"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-switch-properties
+        v-if="isSwitch"
+        v-show="selectedTab === '1'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        @change-edit-properties-data="onChangeSwitchEditPropertiesData"
+        @change-error-messages="onChangeErrorMessages"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-security
+        v-show="selectedTab === '2'"
+        :is-switch="isSwitch"
+        :initial-data="props.initialData"
+        @change-edit-security-data="onChangeEditSecurityData"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-traffic-shaping
+        v-show="selectedTab === '3'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        :is-switch="isSwitch"
+        @change-edit-traffic-shaping-data="onChangeEditTrafficShapingData"
+        @change-error-messages="onChangeErrorMessages"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-teaming-failover
+        v-show="selectedTab === '4'"
+        :is-switch="isSwitch"
+        :adapters="props.adapters"
+        :initial-data="props.initialData"
+        :adapter-status="adapterStatus"
+        :is-dark-mode="props.isDarkMode"
+        @change-edit-teaming-failover-data="onChangeEditTeamingFailoverData"
+        @change-adapter-status="onChangeAdapterStatus"
+      />
+    </template>
+    <template v-if="isPort">
+      <common-diagram-main-modals-edit-settings-tabs-port-properties
+        v-show="selectedTab === '1'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        @change-error-messages="onChangeErrorMessages"
+        @change-port-edit-properties-data="onChangePortEditPropertiesData"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+      <common-diagram-main-modals-edit-settings-tabs-port-ipv-four-settings
+        v-show="selectedTab === '2'"
+        :is-show-error-message-alert="isShowErrorMessageAlert"
+        :error-messages="errorMessages"
+        :initial-data="props.initialData"
+        :has-error-messages="hasErrorMessages"
+        @change-error-messages="onChangeErrorMessages"
+        @change-port-ipv-four-data="onChangePortEditIpvFourData"
+        @hide-error-message-alert="onHideErrorMessageAlert"
+      />
+    </template>
+    <common-diagram-main-modals-edit-settings-confirm-teaming-settings-modal
+      :is-show="isShowWithoutActiveAdapterModal"
+      @hide="onHideWithoutActiveAdapterModal"
+      @submit="onApproveWithoutActiveAdapterModal"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ItemsWithTotalCounts } from '~/lib/models/interfaces'
+import {
+  UI_I_AdapterStatus,
+  UI_I_ModalsInitialData,
+  UI_I_SwitchAdapterItem,
+  UI_I_SecurityFields,
+  UI_I_TrafficShapingFields,
+  UI_I_TeamingFailoverFields,
+  UI_I_EditFieldsData,
+  UI_I_PropertiesFields,
+  UI_I_EditSettingsErrorMessage,
+  UI_I_SwitchPropertiesFields,
+  UI_I_PortPropertiesFields,
+  UI_I_IpvFourSettingsFields,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+// Props from up
+const props = withDefaults(
+  defineProps<{
+    viewName: string
+    items: {
+      value: string
+      text: string
+    }[]
+    initialData?: UI_I_ModalsInitialData
+    adapters: UI_I_ItemsWithTotalCounts<UI_I_SwitchAdapterItem>
+    flagSendData: boolean
+    isDarkMode?: boolean
+  }>(),
+  {
+    initialData: () => ({}),
+    isDarkMode: false,
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'change-edit-fields-data', editFieldsData: UI_I_EditFieldsData): void
+  (
+    event: 'check-network-label',
+    label: string,
+    sendMessage: (message: string) => void
+  ): void
+  (event: 'send-edit-data', type: string): void
+}>()
+
+// View for the switch or the network
+const isSwitch = computed<boolean>(() => props.viewName === 'switch-edit')
+const isNetwork = computed<boolean>(() => props.viewName === 'network-edit')
+const isPort = computed<boolean>(() => props.viewName === 'port-edit')
+
+// Modal selected tab number
+const selectedTab = ref<string>('1')
+
+// Error notification from the nexted components validation
+const errorMessages = ref<UI_I_EditSettingsErrorMessage>({
+  networkLabel: '',
+  vlanId: '',
+  average: '',
+  peak: '',
+  burstSize: '',
+  mtu: '',
+  ipFourAddress: '',
+  subnetMask: '',
+  defaultGateway: '',
+})
+
+const onChangeErrorMessages = (
+  newErrorMessage: string,
+  fieldName: keyof UI_I_EditSettingsErrorMessage
+): void => {
+  errorMessages.value[fieldName] = newErrorMessage
+}
+
+const hasErrorMessages = computed(
+  () => !!Object.values(errorMessages.value).filter((err) => err !== '').length
+)
+
+// flag: to show error message
+const isShowErrorMessageAlert = ref<boolean>(false)
+
+const onShowErrorMessageAlert = (): void => {
+  isShowErrorMessageAlert.value = true
+}
+
+const onHideErrorMessageAlert = (): void => {
+  isShowErrorMessageAlert.value = false
+}
+
+const networkEditData = ref<UI_I_EditFieldsData>({})
+const initialNetworkLabel = ref<string>('-initial-networkLabel-123')
+
+const isFailoverOrderOverride = computed<string | number | boolean | undefined>(
+  () => networkEditData.value?.teamingFailover?.failoverOrder.checked
+)
+
+const adapterStatus = ref<UI_I_AdapterStatus>({
+  active: [],
+  standby: [],
+  unused: [],
+})
+const adapterStatusInitial = ref<UI_I_AdapterStatus>({
+  active: [],
+  standby: [],
+  unused: [],
+})
+
+const onChangeAdapterStatus = (newAdapterStatus: UI_I_AdapterStatus) => {
+  adapterStatus.value = newAdapterStatus
+}
+
+const onCheckNetworkLabel = (
+  label: string,
+  sendMessage: (message: string) => void
+) => {
+  emits('check-network-label', label, sendMessage)
+}
+
+const onChangeNetworkEditPropertiesData = (
+  newNetworkEditPropertiesData: UI_I_PropertiesFields
+) => {
+  networkEditData.value.properties = newNetworkEditPropertiesData
+  initialNetworkLabel.value === '-initial-networkLabel-123' &&
+    (initialNetworkLabel.value = newNetworkEditPropertiesData.networkLabel)
+}
+const onChangeSwitchEditPropertiesData = (
+  newSwitchEditPropertiesData: UI_I_SwitchPropertiesFields
+) => {
+  networkEditData.value.properties = newSwitchEditPropertiesData
+}
+const onChangePortEditPropertiesData = (
+  newPortEditPropertiesData: UI_I_PortPropertiesFields
+) => {
+  networkEditData.value.properties = newPortEditPropertiesData
+}
+const onChangePortEditIpvFourData = (
+  newPortEditIpvFourData: UI_I_IpvFourSettingsFields
+) => {
+  networkEditData.value.ipvFourSettings = newPortEditIpvFourData
+}
+
+const onChangeEditSecurityData = (newEditSecurityData: UI_I_SecurityFields) => {
+  networkEditData.value.security = newEditSecurityData
+}
+const onChangeEditTrafficShapingData = (
+  newEditTrafficShapingData: UI_I_TrafficShapingFields
+) => {
+  networkEditData.value.trafficShaping = newEditTrafficShapingData
+}
+const onChangeEditTeamingFailoverData = (
+  newEditTeamingFailoverData: UI_I_TeamingFailoverFields
+) => {
+  networkEditData.value.teamingFailover = {
+    ...newEditTeamingFailoverData,
+    adapters: adapterStatus.value,
+  }
+}
+
+const changeEditFieldsData = (newNetworkEditData: UI_I_EditFieldsData) =>
+  emits('change-edit-fields-data', newNetworkEditData)
+
+watch(
+  networkEditData,
+  (newNetworkEditData: UI_I_EditFieldsData) => {
+    changeEditFieldsData(newNetworkEditData)
+  },
+  { deep: true, immediate: true }
+)
+
+const isShowWithoutActiveAdapterModal = ref(false)
+const warningModalOpenedFromSending = ref(false)
+const isApprovedAdapterStatus = ref(true)
+
+const setApproveAdapterStatus = (value: boolean) =>
+  (isApprovedAdapterStatus.value = value)
+
+const onShowWithoutActiveAdapterModal = () => {
+  isShowWithoutActiveAdapterModal.value = true
+}
+
+const onHideWithoutActiveAdapterModal = () => {
+  isShowWithoutActiveAdapterModal.value = false
+  warningModalOpenedFromSending.value = false
+  setApproveAdapterStatus(false)
+}
+
+const onApproveWithoutActiveAdapterModal = () => {
+  setApproveAdapterStatus(true)
+  if (warningModalOpenedFromSending.value) {
+    onSendData()
+    warningModalOpenedFromSending.value = false
+    onHideWithoutActiveAdapterModal()
+    return
+  }
+
+  isShowWithoutActiveAdapterModal.value = false
+  selectedTab.value = selectedTabInAlertModal.value
+  lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
+}
+
+const isCheckedNetworkLabel = ref(false)
+const networkAlreadyExists = ref(false)
+
+const checkNetworkLabelCallback = (
+  type: 'tab' | 'send',
+  message: string,
+  newSelectedTab?: string
+) => {
+  if (!message) {
+    isCheckedNetworkLabel.value = true
+    networkAlreadyExists.value = false
+    type === 'tab' && (selectedTab.value = newSelectedTab || '4')
+    type === 'send' && emits('send-edit-data', props.viewName)
+    return
+  }
+
+  errorMessages.value.networkLabel = message
+  networkAlreadyExists.value = true
+  onShowErrorMessageAlert()
+}
+
+const networkLabel = computed<string>(
+  () =>
+    (networkEditData.value.properties as UI_I_PropertiesFields)?.networkLabel
+)
+const onSendData = () => {
+  if (isNetwork.value) {
+    if (!networkLabel.value) {
+      onShowErrorMessageAlert()
+      return
+    }
+    initialNetworkLabel.value !== networkLabel.value &&
+    selectedTab.value === '1'
+      ? onCheckNetworkLabel(networkLabel.value || '', (message) =>
+          checkNetworkLabelCallback('send', message)
+        )
+      : emits('send-edit-data', props.viewName)
+  }
+
+  ;(isSwitch.value || isPort.value) && emits('send-edit-data', props.viewName)
+}
+
+const isNotChangedAdapterStatusFunc = (): boolean => {
+  const adapterStatusString = JSON.stringify(adapterStatus.value)
+  const adapterStatusInitialString = JSON.stringify(adapterStatusInitial.value)
+  const adapterStatusLastSavedString = JSON.stringify(
+    lastSavedAdapterStatus.value
+  )
+  console.log(
+    adapterStatusLastSavedString,
+    adapterStatusString,
+    adapterStatusInitialString
+  )
+
+  return (
+    adapterStatusString === adapterStatusInitialString ||
+    adapterStatusString === adapterStatusLastSavedString
+  )
+}
+
+watch(
+  () => props.flagSendData,
+  () => {
+    if (hasErrorMessages.value) {
+      onShowErrorMessageAlert()
+      return
+    }
+    const isNotChangedAdapterStatus = isNotChangedAdapterStatusFunc()
+    console.log(
+      !isFailoverOrderOverride.value,
+      isNotChangedAdapterStatus,
+      isApprovedAdapterStatus.value
+    )
+    if (
+      !isFailoverOrderOverride.value ||
+      (isNotChangedAdapterStatus && isApprovedAdapterStatus.value) ||
+      adapterStatus.value.active.length !== 0
+    ) {
+      onSendData()
+      return
+    }
+
+    warningModalOpenedFromSending.value = true
+    adapterStatus.value.active.length === 0 && onShowWithoutActiveAdapterModal()
+  }
+)
+
+const selectedTabInAlertModal = ref<string>('')
+const lastSavedAdapterStatus = ref<UI_I_AdapterStatus>()
+
+const stopTabChanging = (newSelectedTab: string) => {
+  console.log('adapterStatus', adapterStatus.value)
+  adapterStatus.value.active.length === 0 && (selectedTab.value = '4')
+  selectedTabInAlertModal.value = newSelectedTab
+  lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
+  adapterStatus.value.active.length === 0 && onShowWithoutActiveAdapterModal()
+}
+
+watch(selectedTab, (newSelectedTab: string, oldSelectedTab: string) => {
+  if (oldSelectedTab === '4') {
+    if (!selectedTabInAlertModal.value && isFailoverOrderOverride.value) {
+      const isNotChangedAdapterStatus = isNotChangedAdapterStatusFunc()
+      if (isNotChangedAdapterStatus) {
+        lastSavedAdapterStatus.value = useDeepCopy(adapterStatus.value)
+        return
+      }
+
+      stopTabChanging(newSelectedTab)
+    } else if (
+      selectedTabInAlertModal.value &&
+      !isApprovedAdapterStatus.value &&
+      isFailoverOrderOverride.value
+    ) {
+      stopTabChanging(newSelectedTab)
+    } else if (selectedTabInAlertModal.value) {
+      selectedTabInAlertModal.value = ''
+    }
+  }
+
+  if (
+    isNetwork.value &&
+    newSelectedTab !== '1' &&
+    !isCheckedNetworkLabel.value
+  ) {
+    selectedTab.value = '1'
+    if (
+      networkLabel.value !== initialNetworkLabel.value &&
+      networkLabel.value !== ''
+    ) {
+      onCheckNetworkLabel(networkLabel.value || '', (message) =>
+        checkNetworkLabelCallback('tab', message, newSelectedTab)
+      )
+    } else if (networkLabel.value === '') {
+      onShowErrorMessageAlert()
+    } else {
+      isCheckedNetworkLabel.value = true
+      selectedTab.value = newSelectedTab
+    }
+  }
+})
+
+watch(
+  adapterStatus,
+  (newAdapterStatus: UI_I_AdapterStatus) => {
+    setApproveAdapterStatus(true)
+    if (networkEditData.value.teamingFailover) {
+      networkEditData.value.teamingFailover = {
+        ...networkEditData.value.teamingFailover,
+        adapters: newAdapterStatus,
+      }
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => networkLabel.value,
+  (newNetworkEditData: string, oldNetworkEditData: string) => {
+    if (newNetworkEditData === oldNetworkEditData) return
+    isCheckedNetworkLabel.value = false
+    errorMessages.value = { ...errorMessages.value, networkLabel: '' }
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  const active = useDeepCopy(props.initialData.activeAdapters) || []
+  const standby = useDeepCopy(props.initialData.standbyAdapters) || []
+  const unused = useDeepCopy(props.initialData.unusedAdapters) || []
+  const adapterStatusInit = {
+    active,
+    standby,
+    unused,
+  }
+  adapterStatus.value = adapterStatusInit
+  adapterStatusInitial.value = adapterStatusInit
+})
+</script>
+
+<style scoped lang="scss">
+:deep(.alert-modal) {
+  .modal-dialog .modal-header {
+    padding-bottom: 24px;
+    border-bottom: none;
+  }
+  .warning-text {
+    color: #666666;
+    font-size: 14px;
+    margin-top: 24px;
+  }
+}
+:deep(.wizard-content__container) {
+  margin-left: 220px;
+}
+.vertical-tabs__fixed-position {
+  position: absolute;
+}
+
+.loader {
+  position: absolute;
+  z-index: 1000;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+
+  .spinner {
+    left: unset;
+  }
+}
+</style>