bfg-common 1.0.0

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

@@ -0,0 +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>