bfg-common 1.0.21 → 1.0.22

package/components/common/addNetworking/steps/SelectedTargetDevice.vue

@@ -1,563 +1,563 @@
-<template>
-  <div class="wizard-content-container add-networking-step">
-    <common-add-networking-steps-header
-      :title="props.title"
-      :text="props.text"
-    />
-    <div class="wizard-content">
-      <atoms-alert
-        v-if="hasValidationError"
-        status="alert-danger"
-        :items="props.errorMessages"
-        @remove="onHideErrorMessageAlert"
-      />
-      <form>
-        <div v-show="props.connectionType === '0'">
-          <div class="radio">
-            <input
-              id="existing-network"
-              v-model="fields.selected"
-              type="radio"
-              value="0"
-              name="target-device"
-            />
-            <label for="existing-network">
-              {{ localization.selectExistingNetwork }}
-            </label>
-          </div>
-          <fieldset
-            :class="{
-              disabled: fields.selected !== '0',
-            }"
-          >
-            <div>
-              <input v-model="fields.network" type="text" disabled />
-              <button
-                type="button"
-                class="btn btn-link"
-                @click="onShowModal('select-network')"
-              >
-                {{ localization.browseDoted }}
-              </button>
-            </div>
-          </fieldset>
-        </div>
-
-        <div v-show="isConnectionTypeFirstTwo">
-          <div class="radio">
-            <input
-              id="existing-standard-switch"
-              v-model="fields.selected"
-              type="radio"
-              value="1"
-              name="target-device"
-            />
-
-            <!--              :checked="isConnectionTypeFirstTwo"-->
-            <label for="existing-standard-switch">
-              {{ localization.selectExistingStandardSwitch }}
-            </label>
-          </div>
-          <fieldset
-            :class="{
-              disabled: fields.selected !== '1',
-            }"
-          >
-            <div>
-              <atoms-tooltip-error
-                :has-error="
-                  fields.selected === '1' &&
-                  !!fieldsErrorMessages.standardSwitch
-                "
-              >
-                <template #elem>
-                  <fieldset class="fieldset-block">
-                    <div>
-                      <input
-                        v-model="fields.standardSwitch"
-                        type="text"
-                        disabled
-                        :class="[
-                          'tooltip-field show-arrow',
-                          {
-                            'danger-not-valid':
-                              fields.selected === '1' &&
-                              fieldsErrorMessages.standardSwitch,
-                          },
-                        ]"
-                      />
-                      <button
-                        type="button"
-                        class="btn btn-link"
-                        @click="onShowModal('select-standard-switch')"
-                      >
-                        {{ localization.browseDoted }}
-                      </button>
-                    </div>
-                  </fieldset>
-                </template>
-                <template #content>
-                  {{ fieldsErrorMessages.standardSwitch }}
-                </template>
-              </atoms-tooltip-error>
-            </div>
-          </fieldset>
-        </div>
-
-        <div v-show="props.connectionType === '2'">
-          <div class="radio">
-            <input
-              id="existing-switch"
-              v-model="fields.selected"
-              type="radio"
-              value="2"
-              name="target-device"
-            />
-            <!--              :checked="props.connectionType === '2'"-->
-            <label for="existing-switch">
-              {{ localization.selectExistingSwitch }}
-            </label>
-          </div>
-          <fieldset
-            :class="{
-              disabled: fields.selected !== '2',
-            }"
-          >
-            <div>
-              <input v-model="fields.switch" type="text" disabled />
-              <button
-                type="button"
-                class="btn btn-link"
-                @click="onShowModal('select-switch')"
-              >
-                {{ localization.browseDoted }}
-              </button>
-            </div>
-          </fieldset>
-        </div>
-
-        <div>
-          <div
-            :class="[
-              'radio',
-              { 'disabled-on-time': props.connectionType === '1' },
-            ]"
-          >
-            <input
-              id="standard-switch"
-              v-model="fields.selected"
-              type="radio"
-              value="3"
-              name="target-device"
-            />
-
-            <label for="standard-switch">
-              {{ localization.newStandardSwitch }}
-            </label>
-          </div>
-          <fieldset
-            :class="{
-              disabled: fields.selected !== '3',
-            }"
-          >
-            <div class="horizontal-flex-container">
-              <label class="property-label-group">
-                {{ localization.mtuBytes }}
-              </label>
-              <div class="margin-left-property-value-group">
-                <div class="property-value-group tooltip-field-container">
-                  <fieldset>
-                    <atoms-tooltip-error :has-error="!!fieldsErrorMessages.mtu">
-                      <template #elem>
-                        <input
-                          id="mtu"
-                          v-model="fields.mtu"
-                          type="number"
-                          name="mtu"
-                          :class="[
-                            'tooltip-field show-arrow',
-                            {
-                              'danger-not-valid': fieldsErrorMessages.mtu,
-                            },
-                          ]"
-                          @click.stop
-                        />
-                      </template>
-                      <template #content>
-                        {{ fieldsErrorMessages.mtu }}
-                      </template>
-                    </atoms-tooltip-error>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </fieldset>
-        </div>
-      </form>
-    </div>
-  </div>
-  <teleport to="body">
-    <common-add-networking-modals-select-standard-switch
-      modal-name="select-standard-switch-modal"
-      view-name="select-standard-switch"
-      width="576px"
-      height="468px"
-      :title="localization.selectSwitch"
-      :standard-switches-initial="props.standardSwitchesInitial"
-      :show="isShowStandardSwitchModal"
-      @select-standard-switch="onSelectStandardSwitch"
-      @hide="onHideStandardSwitchModal"
-    />
-    <common-add-networking-modals-select-switch
-      modal-name="select-switch-modal"
-      view-name="select-switch"
-      width="576px"
-      height="468px"
-      :title="localization.selectSwitch"
-      :data="temporarySwitches"
-      :show="isShowSwitchModal"
-      @select-switch="onSelectSwitch"
-      @hide="onHideSwitchModal"
-    />
-    <common-add-networking-modals-select-network
-      modal-name="select-network-modal"
-      view-name="select-network"
-      width="576px"
-      height="468px"
-      :title="localization.selectNetwork"
-      :data="temporaryNetworks"
-      :show="isShowNetworkModal"
-      @select-network="onSelectNetwork"
-      @hide="onHideNetworkModal"
-    />
-  </teleport>
-</template>
-
-<script setup lang="ts">
-import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
-import {
-  UI_I_TargetDevice,
-  UI_I_Switch,
-  UI_I_Network,
-  UI_I_TargetDeviceFieldsErrorMessages,
-} from '~/components/common/addNetworking/models/interfaces'
-import {
-  temporarySwitches,
-  temporaryNetworks,
-  targetDeviceFieldsErrorMessages,
-} from '~/components/common/addNetworking/config'
-import { UI_T_TargetDeviceFieldName } from '~/components/common/addNetworking/models/types'
-
-// Props from up
-const props = defineProps<{
-  title: string
-  text: string
-  stepId: number
-  connectionType: string
-  targetDevice: UI_I_TargetDevice
-  isShowErrorMessageAlert: boolean
-  errorMessages: string[]
-  standardSwitchesInitial: UI_I_Switch[]
-  error: UI_I_ArbitraryObject<string>
-}>()
-
-// UI_I_Localization
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-// Define emits for changing data and validation messages
-const emits = defineEmits<{
-  (event: 'change-target-device', targetDevice: UI_I_TargetDevice): void
-  (
-    event: 'change-error-messages',
-    errorMessages: string[],
-    stepIndex: number
-  ): void
-  (event: 'hide-error-message-alert'): void
-  (event: 'set-error-empty', fieldName: string): void
-}>()
-
-const isConnectionTypeFirstTwo = computed<boolean>(() =>
-  ['0', '1'].includes(props.connectionType)
-)
-
-// Validation error check for this step
-const hasValidationError = computed<boolean>(
-  () => props.isShowErrorMessageAlert && !!props.errorMessages.length
-)
-
-const fields = ref<UI_I_TargetDevice>(useDeepCopy(props.targetDevice))
-
-const fieldsErrorMessages = ref<UI_I_TargetDeviceFieldsErrorMessages>(
-  targetDeviceFieldsErrorMessages
-)
-
-const messageTexts = (
-  local: UI_I_Localization
-): UI_I_ArbitraryObject<string> => ({
-  network: local.networkInvalidMessage,
-  switch: local.switchInvalidMessage,
-  standardSwitch: local.standardSwitchInvalidMessage,
-  mtu: local.mtuInvalidMessage,
-})
-
-const isIntegerNumberInRange = (
-  value: number | string | undefined,
-  down: number,
-  up: number
-) =>
-  isNaN(Number(value)) ||
-  Number(value) < down ||
-  Number(value) > up ||
-  Number(value) !== Math.round(Number(value))
-
-const setMessageOnChangedField = (
-  selected: string,
-  values: UI_I_TargetDevice,
-  name: UI_T_TargetDeviceFieldName,
-  text: string
-): void => {
-  if (
-    selected === '3' &&
-    name === 'mtu' &&
-    (values.mtu === 0 ? '0' : values.mtu) &&
-    isIntegerNumberInRange(values.mtu, 1280, 65535)
-  ) {
-    fieldsErrorMessages.value[name] = text
-    return
-  }
-  if (selected === '0' && name === 'network' && !values.network) {
-    fieldsErrorMessages.value[name] = text
-    return
-  }
-  if (selected === '2' && name === 'switch' && !values.switch) {
-    fieldsErrorMessages.value[name] = text
-    return
-  }
-  if (selected === '1' && name === 'standardSwitch' && !values.standardSwitch) {
-    fieldsErrorMessages.value[name] = text
-    return
-  }
-  fieldsErrorMessages.value[name] = ''
-}
-
-watch(
-  () => props.error,
-  (newError) => {
-    fieldsErrorMessages.value = {
-      network: '',
-      switch: '',
-      standardSwitch: newError.switch,
-      mtu: newError['new_switch.mtu'],
-    }
-
-    const fieldsErrorMessagesFiltered = Object.values(
-      fieldsErrorMessages.value
-    ).filter(
-      (errorMessage: string | undefined) =>
-        errorMessage !== '' && errorMessage !== undefined
-    )
-
-    emits('change-error-messages', fieldsErrorMessagesFiltered, props.stepId)
-  },
-  { deep: true, immediate: true }
-)
-
-const oldFields = ref<any>(useDeepCopy(fields.value))
-
-const cacheOldFields = (newFields: UI_I_TargetDevice): void => {
-  oldFields.value = useDeepCopy(newFields)
-}
-
-const setErrorEmpty = (
-  newValue: UI_I_TargetDevice,
-  oldValue: UI_I_TargetDevice,
-  fieldName: keyof UI_I_TargetDevice,
-  errFieldName: string
-): void => {
-  ;(newValue[fieldName] !== oldValue[fieldName] ||
-    newValue.selected !== oldValue.selected) &&
-    emits('set-error-empty', errFieldName)
-}
-
-// Changing data and validate they
-watch(
-  fields,
-  (newFields: UI_I_TargetDevice) => {
-    fieldsErrorMessages.value = targetDeviceFieldsErrorMessages
-
-    setErrorEmpty(newFields, oldFields.value, 'standardSwitch', 'switch')
-    setErrorEmpty(newFields, oldFields.value, 'network', 'network')
-    setErrorEmpty(newFields, oldFields.value, 'switch', 'switch')
-    setErrorEmpty(newFields, oldFields.value, 'mtu', 'new_switch.mtu')
-
-    cacheOldFields(newFields)
-
-    setMessageOnChangedField(
-      newFields.selected,
-      newFields,
-      'mtu',
-      messageTexts(localization.value).mtu
-    )
-
-    setMessageOnChangedField(
-      newFields.selected,
-      newFields,
-      'network',
-      messageTexts(localization.value).network
-    )
-
-    setMessageOnChangedField(
-      newFields.selected,
-      newFields,
-      'switch',
-      messageTexts(localization.value).switch
-    )
-
-    setMessageOnChangedField(
-      newFields.selected,
-      newFields,
-      'standardSwitch',
-      messageTexts(localization.value).standardSwitch
-    )
-
-    const fieldsErrorMessagesFiltered = Object.values(
-      fieldsErrorMessages.value
-    ).filter((errorMessage: string) => errorMessage !== '')
-
-    fieldsErrorMessagesFiltered.length === 0 &&
-      emits('hide-error-message-alert')
-
-    emits('change-error-messages', fieldsErrorMessagesFiltered, props.stepId)
-
-    emits('change-target-device', newFields)
-  },
-  { deep: true }
-)
-
-// The switches selection modal hide and show functionality
-const isShowStandardSwitchModal = ref<boolean>(false)
-const onHideStandardSwitchModal = (): void => {
-  isShowStandardSwitchModal.value = false
-}
-const isShowSwitchModal = ref<boolean>(false)
-const onHideSwitchModal = (): void => {
-  isShowSwitchModal.value = false
-}
-const isShowNetworkModal = ref<boolean>(false)
-const onHideNetworkModal = (): void => {
-  isShowNetworkModal.value = false
-}
-
-const onShowModal = (value: string): void => {
-  switch (value) {
-    case 'select-standard-switch':
-      isShowStandardSwitchModal.value = true
-      break
-    case 'select-switch':
-      isShowSwitchModal.value = true
-      break
-    case 'select-network':
-      isShowNetworkModal.value = true
-      break
-  }
-}
-
-// Switches selection functionality
-const onSelectSwitch = (selectedSwitchId: string): void => {
-  fields.value.switch = temporarySwitches.find(
-    (switchData: UI_I_Switch) => switchData.id === selectedSwitchId
-  )?.name
-}
-const onSelectStandardSwitch = (selectedSwitchId: string): void => {
-  const selectedSwitch = props.standardSwitchesInitial.find(
-    (switchData: UI_I_Switch) => switchData.id === selectedSwitchId
-  )
-  fields.value.standardSwitch = selectedSwitch?.name
-}
-const onSelectNetwork = (selectedNetworkId: string): void => {
-  fields.value.network = temporaryNetworks.find(
-    (networkData: UI_I_Network) => networkData.id === selectedNetworkId
-  )?.name
-}
-
-watch(
-  () => props.standardSwitchesInitial,
-  (newStandardSwitchesInitial) => {
-    !fields.value.standardSwitch &&
-      (fields.value.standardSwitch =
-        newStandardSwitchesInitial?.[0]?.name || '')
-  },
-  { deep: true, immediate: true }
-)
-
-// Validation message show and hide
-const onHideErrorMessageAlert = (): void => {
-  emits('hide-error-message-alert')
-}
-onUnmounted(() => {
-  emits('hide-error-message-alert')
-})
-</script>
-
-<style scoped lang="scss">
-.wizard-content-container {
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  flex: 1 1 100%;
-  box-sizing: border-box;
-  padding: 16px 15px 10px 10px;
-  overflow-y: auto;
-  background-color: #fff;
-  color: #333;
-  order: 2;
-  width: 100%;
-
-  .wizard-content {
-    height: auto;
-    width: inherit;
-    margin: 0;
-    padding-top: 12px;
-
-    fieldset {
-      display: flex;
-      flex-flow: column;
-      padding-left: 23px;
-
-      .fieldset-block {
-        padding-left: 0;
-        margin-right: 5px;
-      }
-
-      input[type='text'] {
-        width: 390px;
-
-        &:disabled {
-          opacity: 0.5;
-          cursor: not-allowed;
-        }
-      }
-
-      button {
-        text-transform: uppercase;
-      }
-    }
-
-    .radio {
-      min-height: 20px;
-      margin: 10px 0;
-
-      label {
-        font-weight: 700;
-        margin: 6px 12px 6px 0;
-      }
-    }
-  }
-}
-
-:deep(.select-table-modal) {
-  .table-top-margin-container {
-    margin-top: 10px;
-  }
-}
-</style>
+<template>
+  <div class="wizard-content-container add-networking-step">
+    <common-add-networking-steps-header
+      :title="props.title"
+      :text="props.text"
+    />
+    <div class="wizard-content">
+      <atoms-alert
+        v-if="hasValidationError"
+        status="alert-danger"
+        :items="props.errorMessages"
+        @remove="onHideErrorMessageAlert"
+      />
+      <form>
+        <div v-show="props.connectionType === '0'">
+          <div class="radio">
+            <input
+              id="existing-network"
+              v-model="fields.selected"
+              type="radio"
+              value="0"
+              name="target-device"
+            />
+            <label for="existing-network">
+              {{ localization.selectExistingNetwork }}
+            </label>
+          </div>
+          <fieldset
+            :class="{
+              disabled: fields.selected !== '0',
+            }"
+          >
+            <div>
+              <input v-model="fields.network" type="text" disabled />
+              <button
+                type="button"
+                class="btn btn-link"
+                @click="onShowModal('select-network')"
+              >
+                {{ localization.browseDoted }}
+              </button>
+            </div>
+          </fieldset>
+        </div>
+
+        <div v-show="isConnectionTypeFirstTwo">
+          <div class="radio">
+            <input
+              id="existing-standard-switch"
+              v-model="fields.selected"
+              type="radio"
+              value="1"
+              name="target-device"
+            />
+
+            <!--              :checked="isConnectionTypeFirstTwo"-->
+            <label for="existing-standard-switch">
+              {{ localization.selectExistingStandardSwitch }}
+            </label>
+          </div>
+          <fieldset
+            :class="{
+              disabled: fields.selected !== '1',
+            }"
+          >
+            <div>
+              <atoms-tooltip-error
+                :has-error="
+                  fields.selected === '1' &&
+                  !!fieldsErrorMessages.standardSwitch
+                "
+              >
+                <template #elem>
+                  <fieldset class="fieldset-block">
+                    <div>
+                      <input
+                        v-model="fields.standardSwitch"
+                        type="text"
+                        disabled
+                        :class="[
+                          'tooltip-field show-arrow',
+                          {
+                            'danger-not-valid':
+                              fields.selected === '1' &&
+                              fieldsErrorMessages.standardSwitch,
+                          },
+                        ]"
+                      />
+                      <button
+                        type="button"
+                        class="btn btn-link"
+                        @click="onShowModal('select-standard-switch')"
+                      >
+                        {{ localization.browseDoted }}
+                      </button>
+                    </div>
+                  </fieldset>
+                </template>
+                <template #content>
+                  {{ fieldsErrorMessages.standardSwitch }}
+                </template>
+              </atoms-tooltip-error>
+            </div>
+          </fieldset>
+        </div>
+
+        <div v-show="props.connectionType === '2'">
+          <div class="radio">
+            <input
+              id="existing-switch"
+              v-model="fields.selected"
+              type="radio"
+              value="2"
+              name="target-device"
+            />
+            <!--              :checked="props.connectionType === '2'"-->
+            <label for="existing-switch">
+              {{ localization.selectExistingSwitch }}
+            </label>
+          </div>
+          <fieldset
+            :class="{
+              disabled: fields.selected !== '2',
+            }"
+          >
+            <div>
+              <input v-model="fields.switch" type="text" disabled />
+              <button
+                type="button"
+                class="btn btn-link"
+                @click="onShowModal('select-switch')"
+              >
+                {{ localization.browseDoted }}
+              </button>
+            </div>
+          </fieldset>
+        </div>
+
+        <div>
+          <div
+            :class="[
+              'radio',
+              { 'disabled-on-time': props.connectionType === '1' },
+            ]"
+          >
+            <input
+              id="standard-switch"
+              v-model="fields.selected"
+              type="radio"
+              value="3"
+              name="target-device"
+            />
+
+            <label for="standard-switch">
+              {{ localization.newStandardSwitch }}
+            </label>
+          </div>
+          <fieldset
+            :class="{
+              disabled: fields.selected !== '3',
+            }"
+          >
+            <div class="horizontal-flex-container">
+              <label class="property-label-group">
+                {{ localization.mtuBytes }}
+              </label>
+              <div class="margin-left-property-value-group">
+                <div class="property-value-group tooltip-field-container">
+                  <fieldset>
+                    <atoms-tooltip-error :has-error="!!fieldsErrorMessages.mtu">
+                      <template #elem>
+                        <input
+                          id="mtu"
+                          v-model="fields.mtu"
+                          type="number"
+                          name="mtu"
+                          :class="[
+                            'tooltip-field show-arrow',
+                            {
+                              'danger-not-valid': fieldsErrorMessages.mtu,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ fieldsErrorMessages.mtu }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      </form>
+    </div>
+  </div>
+  <teleport to="body">
+    <common-add-networking-modals-select-standard-switch
+      modal-name="select-standard-switch-modal"
+      view-name="select-standard-switch"
+      width="576px"
+      height="468px"
+      :title="localization.selectSwitch"
+      :standard-switches-initial="props.standardSwitchesInitial"
+      :show="isShowStandardSwitchModal"
+      @select-standard-switch="onSelectStandardSwitch"
+      @hide="onHideStandardSwitchModal"
+    />
+    <common-add-networking-modals-select-switch
+      modal-name="select-switch-modal"
+      view-name="select-switch"
+      width="576px"
+      height="468px"
+      :title="localization.selectSwitch"
+      :data="temporarySwitches"
+      :show="isShowSwitchModal"
+      @select-switch="onSelectSwitch"
+      @hide="onHideSwitchModal"
+    />
+    <common-add-networking-modals-select-network
+      modal-name="select-network-modal"
+      view-name="select-network"
+      width="576px"
+      height="468px"
+      :title="localization.selectNetwork"
+      :data="temporaryNetworks"
+      :show="isShowNetworkModal"
+      @select-network="onSelectNetwork"
+      @hide="onHideNetworkModal"
+    />
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { UI_I_ArbitraryObject, UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_TargetDevice,
+  UI_I_Switch,
+  UI_I_Network,
+  UI_I_TargetDeviceFieldsErrorMessages,
+} from '~/components/common/addNetworking/models/interfaces'
+import {
+  temporarySwitches,
+  temporaryNetworks,
+  targetDeviceFieldsErrorMessages,
+} from '~/components/common/addNetworking/config'
+import { UI_T_TargetDeviceFieldName } from '~/components/common/addNetworking/models/types'
+
+// Props from up
+const props = defineProps<{
+  title: string
+  text: string
+  stepId: number
+  connectionType: string
+  targetDevice: UI_I_TargetDevice
+  isShowErrorMessageAlert: boolean
+  errorMessages: string[]
+  standardSwitchesInitial: UI_I_Switch[]
+  error: UI_I_ArbitraryObject<string>
+}>()
+
+// UI_I_Localization
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+// Define emits for changing data and validation messages
+const emits = defineEmits<{
+  (event: 'change-target-device', targetDevice: UI_I_TargetDevice): void
+  (
+    event: 'change-error-messages',
+    errorMessages: string[],
+    stepIndex: number
+  ): void
+  (event: 'hide-error-message-alert'): void
+  (event: 'set-error-empty', fieldName: string): void
+}>()
+
+const isConnectionTypeFirstTwo = computed<boolean>(() =>
+  ['0', '1'].includes(props.connectionType)
+)
+
+// Validation error check for this step
+const hasValidationError = computed<boolean>(
+  () => props.isShowErrorMessageAlert && !!props.errorMessages.length
+)
+
+const fields = ref<UI_I_TargetDevice>(useDeepCopy(props.targetDevice))
+
+const fieldsErrorMessages = ref<UI_I_TargetDeviceFieldsErrorMessages>(
+  targetDeviceFieldsErrorMessages
+)
+
+const messageTexts = (
+  local: UI_I_Localization
+): UI_I_ArbitraryObject<string> => ({
+  network: local.networkInvalidMessage,
+  switch: local.switchInvalidMessage,
+  standardSwitch: local.standardSwitchInvalidMessage,
+  mtu: local.mtuInvalidMessage,
+})
+
+const isIntegerNumberInRange = (
+  value: number | string | undefined,
+  down: number,
+  up: number
+) =>
+  isNaN(Number(value)) ||
+  Number(value) < down ||
+  Number(value) > up ||
+  Number(value) !== Math.round(Number(value))
+
+const setMessageOnChangedField = (
+  selected: string,
+  values: UI_I_TargetDevice,
+  name: UI_T_TargetDeviceFieldName,
+  text: string
+): void => {
+  if (
+    selected === '3' &&
+    name === 'mtu' &&
+    (values.mtu === 0 ? '0' : values.mtu) &&
+    isIntegerNumberInRange(values.mtu, 1280, 65535)
+  ) {
+    fieldsErrorMessages.value[name] = text
+    return
+  }
+  if (selected === '0' && name === 'network' && !values.network) {
+    fieldsErrorMessages.value[name] = text
+    return
+  }
+  if (selected === '2' && name === 'switch' && !values.switch) {
+    fieldsErrorMessages.value[name] = text
+    return
+  }
+  if (selected === '1' && name === 'standardSwitch' && !values.standardSwitch) {
+    fieldsErrorMessages.value[name] = text
+    return
+  }
+  fieldsErrorMessages.value[name] = ''
+}
+
+watch(
+  () => props.error,
+  (newError) => {
+    fieldsErrorMessages.value = {
+      network: '',
+      switch: '',
+      standardSwitch: newError.switch,
+      mtu: newError['new_switch.mtu'],
+    }
+
+    const fieldsErrorMessagesFiltered = Object.values(
+      fieldsErrorMessages.value
+    ).filter(
+      (errorMessage: string | undefined) =>
+        errorMessage !== '' && errorMessage !== undefined
+    )
+
+    emits('change-error-messages', fieldsErrorMessagesFiltered, props.stepId)
+  },
+  { deep: true, immediate: true }
+)
+
+const oldFields = ref<any>(useDeepCopy(fields.value))
+
+const cacheOldFields = (newFields: UI_I_TargetDevice): void => {
+  oldFields.value = useDeepCopy(newFields)
+}
+
+const setErrorEmpty = (
+  newValue: UI_I_TargetDevice,
+  oldValue: UI_I_TargetDevice,
+  fieldName: keyof UI_I_TargetDevice,
+  errFieldName: string
+): void => {
+  ;(newValue[fieldName] !== oldValue[fieldName] ||
+    newValue.selected !== oldValue.selected) &&
+    emits('set-error-empty', errFieldName)
+}
+
+// Changing data and validate they
+watch(
+  fields,
+  (newFields: UI_I_TargetDevice) => {
+    fieldsErrorMessages.value = targetDeviceFieldsErrorMessages
+
+    setErrorEmpty(newFields, oldFields.value, 'standardSwitch', 'switch')
+    setErrorEmpty(newFields, oldFields.value, 'network', 'network')
+    setErrorEmpty(newFields, oldFields.value, 'switch', 'switch')
+    setErrorEmpty(newFields, oldFields.value, 'mtu', 'new_switch.mtu')
+
+    cacheOldFields(newFields)
+
+    setMessageOnChangedField(
+      newFields.selected,
+      newFields,
+      'mtu',
+      messageTexts(localization.value).mtu
+    )
+
+    setMessageOnChangedField(
+      newFields.selected,
+      newFields,
+      'network',
+      messageTexts(localization.value).network
+    )
+
+    setMessageOnChangedField(
+      newFields.selected,
+      newFields,
+      'switch',
+      messageTexts(localization.value).switch
+    )
+
+    setMessageOnChangedField(
+      newFields.selected,
+      newFields,
+      'standardSwitch',
+      messageTexts(localization.value).standardSwitch
+    )
+
+    const fieldsErrorMessagesFiltered = Object.values(
+      fieldsErrorMessages.value
+    ).filter((errorMessage: string) => errorMessage !== '')
+
+    fieldsErrorMessagesFiltered.length === 0 &&
+      emits('hide-error-message-alert')
+
+    emits('change-error-messages', fieldsErrorMessagesFiltered, props.stepId)
+
+    emits('change-target-device', newFields)
+  },
+  { deep: true }
+)
+
+// The switches selection modal hide and show functionality
+const isShowStandardSwitchModal = ref<boolean>(false)
+const onHideStandardSwitchModal = (): void => {
+  isShowStandardSwitchModal.value = false
+}
+const isShowSwitchModal = ref<boolean>(false)
+const onHideSwitchModal = (): void => {
+  isShowSwitchModal.value = false
+}
+const isShowNetworkModal = ref<boolean>(false)
+const onHideNetworkModal = (): void => {
+  isShowNetworkModal.value = false
+}
+
+const onShowModal = (value: string): void => {
+  switch (value) {
+    case 'select-standard-switch':
+      isShowStandardSwitchModal.value = true
+      break
+    case 'select-switch':
+      isShowSwitchModal.value = true
+      break
+    case 'select-network':
+      isShowNetworkModal.value = true
+      break
+  }
+}
+
+// Switches selection functionality
+const onSelectSwitch = (selectedSwitchId: string): void => {
+  fields.value.switch = temporarySwitches.find(
+    (switchData: UI_I_Switch) => switchData.id === selectedSwitchId
+  )?.name
+}
+const onSelectStandardSwitch = (selectedSwitchId: string): void => {
+  const selectedSwitch = props.standardSwitchesInitial.find(
+    (switchData: UI_I_Switch) => switchData.id === selectedSwitchId
+  )
+  fields.value.standardSwitch = selectedSwitch?.name
+}
+const onSelectNetwork = (selectedNetworkId: string): void => {
+  fields.value.network = temporaryNetworks.find(
+    (networkData: UI_I_Network) => networkData.id === selectedNetworkId
+  )?.name
+}
+
+watch(
+  () => props.standardSwitchesInitial,
+  (newStandardSwitchesInitial) => {
+    !fields.value.standardSwitch &&
+      (fields.value.standardSwitch =
+        newStandardSwitchesInitial?.[0]?.name || '')
+  },
+  { deep: true, immediate: true }
+)
+
+// Validation message show and hide
+const onHideErrorMessageAlert = (): void => {
+  emits('hide-error-message-alert')
+}
+onUnmounted(() => {
+  emits('hide-error-message-alert')
+})
+</script>
+
+<style scoped lang="scss">
+.wizard-content-container {
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  flex: 1 1 100%;
+  box-sizing: border-box;
+  padding: 16px 15px 10px 10px;
+  overflow-y: auto;
+  background-color: #fff;
+  color: #333;
+  order: 2;
+  width: 100%;
+
+  .wizard-content {
+    height: auto;
+    width: inherit;
+    margin: 0;
+    padding-top: 12px;
+
+    fieldset {
+      display: flex;
+      flex-flow: column;
+      padding-left: 23px;
+
+      .fieldset-block {
+        padding-left: 0;
+        margin-right: 5px;
+      }
+
+      input[type='text'] {
+        width: 390px;
+
+        &:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+      }
+
+      button {
+        text-transform: uppercase;
+      }
+    }
+
+    .radio {
+      min-height: 20px;
+      margin: 10px 0;
+
+      label {
+        font-weight: 700;
+        margin: 6px 12px 6px 0;
+      }
+    }
+  }
+}
+
+:deep(.select-table-modal) {
+  .table-top-margin-container {
+    margin-top: 10px;
+  }
+}
+</style>