bfg-common 1.3.238 → 1.3.240

package/components/common/wizards/network/add/steps/SelectedTargetDevice.vue

@@ -1,462 +1,473 @@
-<template>
-  <div class="wizard-content-container add-networking-step">
-    <div class="wizard-content">
-      <atoms-alert
-        v-if="props.alertMessages.length"
-        status="alert-danger"
-        :items="props.alertMessages"
-        @remove="onHideAlert"
-      />
-      <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>
-              <atoms-tooltip-error
-                :has-error="
-                  fields.selected === '0' &&
-                  !!props.messagesFields.network.field
-                "
-              >
-                <template #elem>
-                  <fieldset class="fieldset-block">
-                    <div>
-                      <input
-                        v-model="fields.network"
-                        type="text"
-                        disabled
-                        :class="[
-                          'tooltip-field show-arrow',
-                          {
-                            'danger-not-valid':
-                              fields.selected === '0' &&
-                              props.messagesFields.network.field,
-                          },
-                        ]"
-                      />
-                      <button
-                        type="button"
-                        class="btn btn-link"
-                        @click="onShowModal('select-network')"
-                      >
-                        {{ localization.browseDoted }}
-                      </button>
-                    </div>
-                  </fieldset>
-                </template>
-                <template #content>
-                  {{ props.messagesFields.network.field }}
-                </template>
-              </atoms-tooltip-error>
-            </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' && !!props.messagesFields.switch.field
-                "
-              >
-                <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' &&
-                              props.messagesFields.switch.field,
-                          },
-                        ]"
-                      />
-                      <button
-                        type="button"
-                        class="btn btn-link"
-                        @click="onShowModal('select-standard-switch')"
-                      >
-                        {{ localization.browseDoted }}
-                      </button>
-                    </div>
-                  </fieldset>
-                </template>
-                <template #content>
-                  {{ props.messagesFields.switch.field }}
-                </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>
-              <atoms-tooltip-error
-                :has-error="
-                  fields.selected === '2' &&
-                  !!props.messagesFields.switch2.field
-                "
-              >
-                <template #elem>
-                  <fieldset class="fieldset-block">
-                    <div>
-                      <input
-                        v-model="fields.switch"
-                        type="text"
-                        disabled
-                        :class="[
-                          'tooltip-field show-arrow',
-                          {
-                            'danger-not-valid':
-                              fields.selected === '2' &&
-                              props.messagesFields.switch2.field,
-                          },
-                        ]"
-                      />
-                      <button
-                        type="button"
-                        class="btn btn-link"
-                        @click="onShowModal('select-switch')"
-                      >
-                        {{ localization.browseDoted }}
-                      </button>
-                    </div>
-                  </fieldset>
-                </template>
-                <template #content>
-                  {{ props.messagesFields.switch2.field }}
-                </template>
-              </atoms-tooltip-error>
-            </div>
-          </fieldset>
-        </div>
-
-        <div>
-          <div
-            :class="[
-              'radio',
-              {
-                'disabled-on-time': props.connectionType === '2',
-              },
-            ]"
-          >
-            <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="
-                        !!props.messagesFields['new_switch.mtu'].field
-                      "
-                    >
-                      <template #elem>
-                        <input
-                          id="mtu"
-                          v-model="fields.mtu"
-                          type="number"
-                          name="mtu"
-                          :class="[
-                            'tooltip-field show-arrow',
-                            {
-                              'danger-not-valid':
-                                props.messagesFields['new_switch.mtu'].field,
-                            },
-                          ]"
-                          @click.stop
-                        />
-                      </template>
-                      <template #content>
-                        {{ props.messagesFields['new_switch.mtu'].field }}
-                      </template>
-                    </atoms-tooltip-error>
-                  </fieldset>
-                </div>
-              </div>
-            </div>
-          </fieldset>
-        </div>
-      </form>
-    </div>
-  </div>
-  <teleport to="body">
-    <common-wizards-network-add-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-wizards-network-add-modals-select-switch
-      modal-name="select-switch-modal"
-      view-name="select-switch"
-      width="576px"
-      height="468px"
-      :title="localization.selectSwitch"
-      :data="props.standardSwitchesInitial"
-      :show="isShowSwitchModal"
-      @select-switch="onSelectSwitch"
-      @hide="onHideSwitchModal"
-    />
-    <common-wizards-network-add-modals-select-network
-      modal-name="select-network-modal"
-      view-name="select-network"
-      width="576px"
-      height="468px"
-      :title="localization.selectNetwork"
-      :data="[]"
-      :show="isShowNetworkModal"
-      @select-network="onSelectNetwork"
-      @hide="onHideNetworkModal"
-    />
-  </teleport>
-</template>
-
-<script setup lang="ts">
-import {
-  UI_I_ArbitraryObject,
-  UI_I_Localization,
-} from '~/lib/models/interfaces'
-import {
-  UI_I_TargetDevice,
-  UI_I_Switch,
-} from '~/components/common/wizards/network/add/lib/models/interfaces'
-import { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
-import { validateMtuTargetDeviceLocal } from '~/components/common/wizards/network/add/validations/validations'
-
-const props = withDefaults(
-  defineProps<{
-    targetDevice: UI_I_TargetDevice
-    connectionType: string
-    standardSwitchesInitial: UI_I_Switch[]
-    alertMessages: string[]
-    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-    wizard: Wizard
-    selectedStandardSwitchId?: string
-    selectedSwitchId?: string
-  }>(),
-  {
-    selectedStandardSwitchId: '',
-    selectedSwitchId: '',
-  }
-)
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const emits = defineEmits<{
-  (event: 'change-target-device', targetDevice: UI_I_TargetDevice): void
-  (event: 'hide-alert', stepId: 1): void
-}>()
-
-const isConnectionTypeFirstTwo = computed<boolean>(() =>
-  ['0', '1'].includes(props.connectionType)
-)
-
-const fields = ref<UI_I_TargetDevice>(useDeepCopy(props.targetDevice))
-
-let prevMtu = fields.value.mtu
-
-watch(
-  fields,
-  (newFields: UI_I_TargetDevice) => {
-    newFields.mtu !== prevMtu &&
-      validateMtuTargetDeviceLocal(localization.value, newFields, props.wizard)
-
-    prevMtu = newFields.mtu
-
-    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 = selectedSwitchId
-}
-const onSelectStandardSwitch = (selectedStandardSwitchId: string): void => {
-  fields.value.standardSwitch = selectedStandardSwitchId
-}
-const onSelectNetwork = (_selectedNetworkId: string): void => {
-  fields.value.network = ''
-}
-
-onMounted(() => {
-  !fields.value.standardSwitch &&
-    (fields.value.standardSwitch = props.selectedStandardSwitchId)
-
-  !fields.value.switch && (fields.value.switch = props.selectedSwitchId)
-})
-
-const onHideAlert = (): void => {
-  emits('hide-alert', 1)
-}
-</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;
-  color: #333;
-  order: 2;
-  width: 100%;
-
-  .wizard-content {
-    height: auto;
-    width: inherit;
-    margin: 0;
-
-    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">
+    <div class="wizard-content">
+      <atoms-alert
+        v-if="props.alertMessages.length"
+        status="alert-danger"
+        :items="props.alertMessages"
+        @remove="onHideAlert"
+      />
+      <form>
+        <div v-show="props.connectionType === '0'">
+          <div class="radio">
+            <input
+              id="existing-network"
+              v-model="fields.selected"
+              data-id="existing-network-radio"
+              type="radio"
+              value="0"
+              name="target-device"
+            />
+            <label for="existing-network">
+              {{ localization.selectExistingNetwork }}
+            </label>
+          </div>
+          <fieldset
+            :class="{
+              disabled: fields.selected !== '0',
+            }"
+          >
+            <div>
+              <atoms-tooltip-error
+                :has-error="
+                  fields.selected === '0' &&
+                  !!props.messagesFields.network.field
+                "
+              >
+                <template #elem>
+                  <fieldset class="fieldset-block">
+                    <div>
+                      <input
+                        v-model="fields.network"
+                        data-id="network-input"
+                        type="text"
+                        disabled
+                        :class="[
+                          'tooltip-field show-arrow',
+                          {
+                            'danger-not-valid':
+                              fields.selected === '0' &&
+                              props.messagesFields.network.field,
+                          },
+                        ]"
+                      />
+                      <button
+                        type="button"
+                        class="btn btn-link"
+                        data-id="show-select-network-modal-button"
+                        @click="onShowModal('select-network')"
+                      >
+                        {{ localization.browseDoted }}
+                      </button>
+                    </div>
+                  </fieldset>
+                </template>
+                <template #content>
+                  {{ props.messagesFields.network.field }}
+                </template>
+              </atoms-tooltip-error>
+            </div>
+          </fieldset>
+        </div>
+
+        <div v-show="isConnectionTypeFirstTwo">
+          <div class="radio">
+            <input
+              id="existing-standard-switch"
+              v-model="fields.selected"
+              data-id="existing-standard-switch-radio"
+              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' && !!props.messagesFields.switch.field
+                "
+              >
+                <template #elem>
+                  <fieldset class="fieldset-block">
+                    <div>
+                      <input
+                        v-model="fields.standardSwitch"
+                        data-id="standard-switch-input"
+                        type="text"
+                        disabled
+                        :class="[
+                          'tooltip-field show-arrow',
+                          {
+                            'danger-not-valid':
+                              fields.selected === '1' &&
+                              props.messagesFields.switch.field,
+                          },
+                        ]"
+                      />
+                      <button
+                        type="button"
+                        class="btn btn-link"
+                        data-id="show-select-standard-switch-button"
+                        @click="onShowModal('select-standard-switch')"
+                      >
+                        {{ localization.browseDoted }}
+                      </button>
+                    </div>
+                  </fieldset>
+                </template>
+                <template #content>
+                  {{ props.messagesFields.switch.field }}
+                </template>
+              </atoms-tooltip-error>
+            </div>
+          </fieldset>
+        </div>
+
+        <div v-show="props.connectionType === '2'">
+          <div class="radio">
+            <input
+              id="existing-switch"
+              v-model="fields.selected"
+              data-id="existing-switch-radio"
+              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>
+              <atoms-tooltip-error
+                :has-error="
+                  fields.selected === '2' &&
+                  !!props.messagesFields.switch2.field
+                "
+              >
+                <template #elem>
+                  <fieldset class="fieldset-block">
+                    <div>
+                      <input
+                        v-model="fields.switch"
+                        data-id="switch-input"
+                        type="text"
+                        disabled
+                        :class="[
+                          'tooltip-field show-arrow',
+                          {
+                            'danger-not-valid':
+                              fields.selected === '2' &&
+                              props.messagesFields.switch2.field,
+                          },
+                        ]"
+                      />
+                      <button
+                        type="button"
+                        data-id="show-select-switch-modal-button"
+                        class="btn btn-link"
+                        @click="onShowModal('select-switch')"
+                      >
+                        {{ localization.browseDoted }}
+                      </button>
+                    </div>
+                  </fieldset>
+                </template>
+                <template #content>
+                  {{ props.messagesFields.switch2.field }}
+                </template>
+              </atoms-tooltip-error>
+            </div>
+          </fieldset>
+        </div>
+
+        <div>
+          <div
+            :class="[
+              'radio',
+              {
+                'disabled-on-time': props.connectionType === '2',
+              },
+            ]"
+          >
+            <input
+              id="standard-switch"
+              v-model="fields.selected"
+              data-id="standard-switch-radio"
+              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="
+                        !!props.messagesFields['new_switch.mtu'].field
+                      "
+                    >
+                      <template #elem>
+                        <input
+                          id="mtu"
+                          v-model="fields.mtu"
+                          data-id="mtu-input"
+                          type="number"
+                          name="mtu"
+                          :class="[
+                            'tooltip-field show-arrow',
+                            {
+                              'danger-not-valid':
+                                props.messagesFields['new_switch.mtu'].field,
+                            },
+                          ]"
+                          @click.stop
+                        />
+                      </template>
+                      <template #content>
+                        {{ props.messagesFields['new_switch.mtu'].field }}
+                      </template>
+                    </atoms-tooltip-error>
+                  </fieldset>
+                </div>
+              </div>
+            </div>
+          </fieldset>
+        </div>
+      </form>
+    </div>
+  </div>
+  <teleport to="body">
+    <common-wizards-network-add-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-wizards-network-add-modals-select-switch
+      modal-name="select-switch-modal"
+      view-name="select-switch"
+      width="576px"
+      height="468px"
+      :title="localization.selectSwitch"
+      :data="props.standardSwitchesInitial"
+      :show="isShowSwitchModal"
+      @select-switch="onSelectSwitch"
+      @hide="onHideSwitchModal"
+    />
+    <common-wizards-network-add-modals-select-network
+      modal-name="select-network-modal"
+      view-name="select-network"
+      width="576px"
+      height="468px"
+      :title="localization.selectNetwork"
+      :data="[]"
+      :show="isShowNetworkModal"
+      @select-network="onSelectNetwork"
+      @hide="onHideNetworkModal"
+    />
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import {
+  UI_I_ArbitraryObject,
+  UI_I_Localization,
+} from '~/lib/models/interfaces'
+import {
+  UI_I_TargetDevice,
+  UI_I_Switch,
+} from '~/components/common/wizards/network/add/lib/models/interfaces'
+import { UI_I_ErrorFields } from '~/components/atoms/wizard/lib/models/interfaces'
+import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
+import { validateMtuTargetDeviceLocal } from '~/components/common/wizards/network/add/validations/validations'
+
+const props = withDefaults(
+  defineProps<{
+    targetDevice: UI_I_TargetDevice
+    connectionType: string
+    standardSwitchesInitial: UI_I_Switch[]
+    alertMessages: string[]
+    messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
+    wizard: Wizard
+    selectedStandardSwitchId?: string
+    selectedSwitchId?: string
+  }>(),
+  {
+    selectedStandardSwitchId: '',
+    selectedSwitchId: '',
+  }
+)
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'change-target-device', targetDevice: UI_I_TargetDevice): void
+  (event: 'hide-alert', stepId: 1): void
+}>()
+
+const isConnectionTypeFirstTwo = computed<boolean>(() =>
+  ['0', '1'].includes(props.connectionType)
+)
+
+const fields = ref<UI_I_TargetDevice>(useDeepCopy(props.targetDevice))
+
+let prevMtu = fields.value.mtu
+
+watch(
+  fields,
+  (newFields: UI_I_TargetDevice) => {
+    newFields.mtu !== prevMtu &&
+      validateMtuTargetDeviceLocal(localization.value, newFields, props.wizard)
+
+    prevMtu = newFields.mtu
+
+    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 = selectedSwitchId
+}
+const onSelectStandardSwitch = (selectedStandardSwitchId: string): void => {
+  fields.value.standardSwitch = selectedStandardSwitchId
+}
+const onSelectNetwork = (_selectedNetworkId: string): void => {
+  fields.value.network = ''
+}
+
+onMounted(() => {
+  !fields.value.standardSwitch &&
+    (fields.value.standardSwitch = props.selectedStandardSwitchId)
+
+  !fields.value.switch && (fields.value.switch = props.selectedSwitchId)
+})
+
+const onHideAlert = (): void => {
+  emits('hide-alert', 1)
+}
+</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;
+  color: #333;
+  order: 2;
+  width: 100%;
+
+  .wizard-content {
+    height: auto;
+    width: inherit;
+    margin: 0;
+
+    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>