bfg-common 1.2.189 → 1.2.190

package/components/common/{wizards/network/add → addNetworking}/steps/SelectedTargetDevice.vue

@@ -1,11 +1,15 @@
 <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="props.alertMessages.length"
+        v-if="hasValidationError"
         status="alert-danger"
-        :items="props.alertMessages"
-        @remove="onHideAlert"
+        :items="props.errorMessages"
+        @remove="onHideErrorMessageAlert"
       />
       <form>
         <div v-show="props.connectionType === '0'">
@@ -27,42 +31,14 @@
             }"
           >
             <div>
-              <atoms-tooltip-error
-                :has-error="
-                  fields.selected === '0' &&
-                  !!props.messagesFields.network.field
-                "
+              <input v-model="fields.network" type="text" disabled />
+              <button
+                type="button"
+                class="btn btn-link"
+                @click="onShowModal('select-network')"
               >
-                <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>
+                {{ localization.browseDoted }}
+              </button>
             </div>
           </fieldset>
         </div>
@@ -90,7 +66,8 @@
             <div>
               <atoms-tooltip-error
                 :has-error="
-                  fields.selected === '1' && !!props.messagesFields.switch.field
+                  fields.selected === '1' &&
+                  !!fieldsErrorMessages.standardSwitch
                 "
               >
                 <template #elem>
@@ -105,7 +82,7 @@
                           {
                             'danger-not-valid':
                               fields.selected === '1' &&
-                              props.messagesFields.switch.field,
+                              fieldsErrorMessages.standardSwitch,
                           },
                         ]"
                       />
@@ -120,7 +97,7 @@
                   </fieldset>
                 </template>
                 <template #content>
-                  {{ props.messagesFields.switch.field }}
+                  {{ fieldsErrorMessages.standardSwitch }}
                 </template>
               </atoms-tooltip-error>
             </div>
@@ -147,42 +124,14 @@
             }"
           >
             <div>
-              <atoms-tooltip-error
-                :has-error="
-                  fields.selected === '2' &&
-                  !!props.messagesFields.switch2.field
-                "
+              <input v-model="fields.switch" type="text" disabled />
+              <button
+                type="button"
+                class="btn btn-link"
+                @click="onShowModal('select-switch')"
               >
-                <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>
+                {{ localization.browseDoted }}
+              </button>
             </div>
           </fieldset>
         </div>
@@ -213,11 +162,7 @@
               <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
-                      "
-                    >
+                    <atoms-tooltip-error :has-error="!!fieldsErrorMessages.mtu">
                       <template #elem>
                         <input
                           id="mtu"
@@ -227,15 +172,14 @@
                           :class="[
                             'tooltip-field show-arrow',
                             {
-                              'danger-not-valid':
-                                props.messagesFields['new_switch.mtu'].field,
+                              'danger-not-valid': fieldsErrorMessages.mtu,
                             },
                           ]"
                           @click.stop
                         />
                       </template>
                       <template #content>
-                        {{ props.messagesFields['new_switch.mtu'].field }}
+                        {{ fieldsErrorMessages.mtu }}
                       </template>
                     </atoms-tooltip-error>
                   </fieldset>
@@ -248,7 +192,7 @@
     </div>
   </div>
   <teleport to="body">
-    <common-wizards-network-add-modals-select-standard-switch
+    <common-add-networking-modals-select-standard-switch
       modal-name="select-standard-switch-modal"
       view-name="select-standard-switch"
       width="576px"
@@ -259,24 +203,24 @@
       @select-standard-switch="onSelectStandardSwitch"
       @hide="onHideStandardSwitchModal"
     />
-    <common-wizards-network-add-modals-select-switch
+    <common-add-networking-modals-select-switch
       modal-name="select-switch-modal"
       view-name="select-switch"
       width="576px"
       height="468px"
       :title="localization.selectSwitch"
-      :data="[]"
+      :data="temporarySwitches"
       :show="isShowSwitchModal"
       @select-switch="onSelectSwitch"
       @hide="onHideSwitchModal"
     />
-    <common-wizards-network-add-modals-select-network
+    <common-add-networking-modals-select-network
       modal-name="select-network-modal"
       view-name="select-network"
       width="576px"
       height="468px"
       :title="localization.selectNetwork"
-      :data="[]"
+      :data="temporaryNetworks"
       :show="isShowNetworkModal"
       @select-network="onSelectNetwork"
       @hide="onHideNetworkModal"
@@ -290,42 +234,195 @@ import {
   UI_I_TargetDevice,
   UI_I_Switch,
   UI_I_Network,
-} from '~/components/common/wizards/network/add/models/interfaces'
-import { UI_I_ErrorFields } from '~/components/atoms/wizard/models/interfaces'
-import type Wizard from '~/components/atoms/wizard/utils/utils'
-import { validateMtuTargetDeviceLocal } from '~/components/common/wizards/network/add/validations/validations'
+  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<{
-  targetDevice: UI_I_TargetDevice
+  title: string
+  text: string
+  stepId: number
   connectionType: string
+  targetDevice: UI_I_TargetDevice
+  isShowErrorMessageAlert: boolean
+  errorMessages: string[]
   standardSwitchesInitial: UI_I_Switch[]
-  alertMessages: string[]
-  messagesFields: UI_I_ArbitraryObject<UI_I_ErrorFields>
-  wizard: Wizard
+  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: 'hide-alert', stepId: 2): 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))
 
-let prevMtu = fields.value.mtu
+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) => {
-    newFields.mtu !== prevMtu &&
-      validateMtuTargetDeviceLocal(localization.value, newFields, props.wizard)
+    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
+    )
 
-    prevMtu = newFields.mtu
+    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)
   },
@@ -362,7 +459,9 @@ const onShowModal = (value: string): void => {
 
 // Switches selection functionality
 const onSelectSwitch = (selectedSwitchId: string): void => {
-  fields.value.switch = ''
+  fields.value.switch = temporarySwitches.find(
+    (switchData: UI_I_Switch) => switchData.id === selectedSwitchId
+  )?.name
 }
 const onSelectStandardSwitch = (selectedSwitchId: string): void => {
   const selectedSwitch = props.standardSwitchesInitial.find(
@@ -371,7 +470,9 @@ const onSelectStandardSwitch = (selectedSwitchId: string): void => {
   fields.value.standardSwitch = selectedSwitch?.name
 }
 const onSelectNetwork = (selectedNetworkId: string): void => {
-  fields.value.network = ''
+  fields.value.network = temporaryNetworks.find(
+    (networkData: UI_I_Network) => networkData.id === selectedNetworkId
+  )?.name
 }
 
 watch(
@@ -384,9 +485,13 @@ watch(
   { deep: true, immediate: true }
 )
 
-const onHideAlert = (): void => {
-  emits('hide-alert', 1)
+// Validation message show and hide
+const onHideErrorMessageAlert = (): void => {
+  emits('hide-error-message-alert')
 }
+onUnmounted(() => {
+  emits('hide-error-message-alert')
+})
 </script>
 
 <style scoped lang="scss">
@@ -406,6 +511,7 @@ const onHideAlert = (): void => {
     height: auto;
     width: inherit;
     margin: 0;
+    padding-top: 12px;
 
     fieldset {
       display: flex;

package/components/common/addNetworking/utils/index.ts

@@ -0,0 +1,212 @@
+import {
+  UI_I_NetworkLabelCheckExisting,
+  UI_I_Step,
+} from '~/components/common/addNetworking/models/interfaces'
+import { UI_E_StepStatus } from '~/components/common/addNetworking/models/enums'
+
+export class Wizard {
+  stepsScheme: UI_I_Step[][]
+  selectedStepScheme: Ref<number>
+  private _selectedStep: Ref<number>
+  completedStepsId: Ref<number[]>
+  private _waitingStepId: Ref<number>
+
+  constructor(stepsScheme: UI_I_Step[][]) {
+    this.selectedStepScheme = ref<number>(0)
+    this._selectedStep = ref<number>(0)
+    this.stepsScheme = stepsScheme
+    this.completedStepsId = ref<number[]>([])
+    this._waitingStepId = ref<number>(0)
+  }
+
+  get selectedScheme(): number {
+    return this.selectedStepScheme.value
+  }
+
+  set selectedScheme(stepScheme: number) {
+    this.selectedStepScheme.value = stepScheme
+  }
+
+  isSelectedScheme(stepScheme: number): boolean {
+    return this.selectedStepScheme.value === stepScheme
+  }
+
+  resetStepsUntilX(x: number): void {
+    this.completedStepsId.value.length >= x &&
+      (this.completedStepsId.value.length = x - 1)
+  }
+
+  get selectedStep(): number {
+    return this._selectedStep.value
+  }
+
+  set selectedStep(step: number) {
+    this._selectedStep.value = step
+  }
+
+  get waitingStepId(): number {
+    return this._waitingStepId.value
+  }
+
+  set waitingStepId(step: number) {
+    this._waitingStepId.value = step
+  }
+
+  isSelectedStep(step: number): boolean {
+    return this.selectedStep === step
+  }
+
+  isUpThenSelectedStep(step: number): boolean {
+    return this.selectedStep <= step
+  }
+
+  isDownThenSelectedStep(step: number): boolean {
+    return this.selectedStep >= step
+  }
+
+  reset(): void {
+    this.selectedScheme = 0
+    this.selectedStep = 0
+    this.resetStepsUntilX(1)
+  }
+
+  goToNextStep(
+    cb?: (
+      selectedStepIndex: number,
+      nextStepId: number,
+      ...args: any
+    ) => boolean,
+    ...args: any
+  ): void {
+    const selectedStepIndex: number = this.stepsWithStatus().findIndex(
+      (step: UI_I_Step) => this.isSelectedStep(step.id)
+    )
+
+    const nextStepId: number = this.stepsWithStatus()[selectedStepIndex + 1].id
+
+    if (!cb || cb(selectedStepIndex, nextStepId, ...args)) {
+      this.selectedStep = this.stepsWithStatus()[selectedStepIndex + 1].id
+    }
+  }
+
+  goToSelectedStep(step: number, cb?: (step: number) => boolean): void {
+    if (!cb || cb(step)) {
+      this.selectedStep = step
+    }
+  }
+
+  goToBackStep(): void {
+    const selectedStepIndex: number = this.stepsWithStatus().findIndex(
+      (step: UI_I_Step) => this.isSelectedStep(step.id)
+    )
+    this.selectedStep = this.stepsWithStatus()[selectedStepIndex - 1].id
+  }
+
+  isBeforeLastStep(): boolean {
+    const selectedScheme: UI_I_Step[] = this.stepsScheme[this.selectedScheme]
+
+    return selectedScheme[selectedScheme.length - 2].id === this.selectedStep
+  }
+
+  isLastStep(step: number): boolean {
+    const selectedScheme: UI_I_Step[] = this.stepsScheme[this.selectedScheme]
+
+    return selectedScheme[selectedScheme.length - 1].id === step
+  }
+
+  stepsWithStatus(): UI_I_Step[] {
+    // let selectedFlag = false
+    let lastId = 0
+
+    return this.stepsScheme[this.selectedScheme].map(
+      (step: UI_I_Step): UI_I_Step => {
+        if (
+          // If a selected step is completed
+          step.id === this.selectedStep &&
+          this.completedStepsId.value.includes(step.id)
+        ) {
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.CompleteSelected }
+        } else if (
+          // If a step is completed
+          step.id < this.selectedStep ||
+          this.completedStepsId.value.includes(step.id)
+        ) {
+          !this.completedStepsId.value.includes(step.id) &&
+            this.completedStepsId.value.push(step.id)
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.Complete }
+        } else if (
+          // If a step is selected, but is not active
+          step.id === this.selectedStep
+        ) {
+          // selectedFlag = true
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.Selected }
+        } else if (
+          // If a step is active
+
+          lastId ===
+          this.completedStepsId.value[this.completedStepsId.value.length - 1]
+        ) {
+          // console.log(selectedFlag)
+          // selectedFlag = false
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.Active }
+        } // If a step is disabled
+        else {
+          lastId = step.id
+          return { ...step, status: UI_E_StepStatus.Disabled }
+        }
+      }
+    )
+  }
+
+  // -----------------
+  // Not common-------
+
+  checkNetworkLabelBeforeGoToNextStep(
+    currentStep: number,
+    networkLabel: string,
+    isNetworkInvalid: UI_I_NetworkLabelCheckExisting | undefined,
+    checkNetwork: (networkLabel: string, nextStep?: number) => void
+  ): boolean {
+    if (
+      this.isSelectedStep(currentStep) &&
+      (!isNetworkInvalid?.checked ||
+        (isNetworkInvalid.checked && !isNetworkInvalid.valid))
+    ) {
+      checkNetwork(networkLabel)
+      return true
+    }
+    return false
+  }
+
+  checkNetworkLabelBeforeGoToNewStep(
+    nextStep: number,
+    currentStepScheme: number,
+    currentStep: number,
+    networkLabel: string,
+    isNetworkInvalid: UI_I_NetworkLabelCheckExisting | undefined,
+    checkNetwork: (networkLabel: string, nextStep?: number) => void
+  ): boolean {
+    if (
+      this.isSelectedScheme(currentStepScheme) &&
+      nextStep > currentStep &&
+      (!isNetworkInvalid?.checked ||
+        (isNetworkInvalid.checked && !isNetworkInvalid.valid))
+    ) {
+      checkNetwork(networkLabel, nextStep)
+      return true
+    }
+    return false
+  }
+
+  // Not common-------
+  // -----------------
+}
+
+export const getVlanId = (vlanId: string): string =>
+  (vlanId === 'All (4095)' && '4095') ||
+  (vlanId === 'None (0)' && '0') ||
+  vlanId