bfg-common 1.2.186 → 1.2.187

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

@@ -1,9 +1,5 @@
 <template>
   <div class="wizard-content-container add-networking-step">
-    <common-add-networking-steps-header
-      :title="props.title"
-      :text="props.text"
-    />
     <div class="wizard-content">
       <form @change="onChangeConnectionType">
         <div class="radio">
@@ -59,23 +55,18 @@
 <script setup lang="ts">
 import { UI_I_Localization } from '~/models/interfaces'
 
-// Props from up
 const props = defineProps<{
-  title: string
-  text: string
-  stepId: number
   connectionType: string
 }>()
 
-// UI_I_Localization
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-// Changing data
 const emits = defineEmits<{
   (event: 'change-connection-type', connectionType: string): void
 }>()
-const onChangeConnectionType = (newConnectionType: any): void => {
-  emits('change-connection-type', newConnectionType.target.value)
+const onChangeConnectionType = (newConnectionType: Event): void => {
+  const target = newConnectionType.target as HTMLFormElement
+  emits('change-connection-type', target?.value)
 }
 </script>
 
@@ -84,7 +75,6 @@ const onChangeConnectionType = (newConnectionType: any): void => {
   height: auto;
   width: inherit;
   margin: 0;
-  padding-top: 12px;
 
   .radio {
     min-height: 20px;
@@ -101,6 +91,4 @@ const onChangeConnectionType = (newConnectionType: any): void => {
     color: #333;
   }
 }
-
-
 </style>

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

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

package/components/common/wizards/network/add/utils/index.ts

@@ -0,0 +1,4 @@
+export const getVlanId = (vlanId: string): string =>
+  (vlanId === 'All (4095)' && '4095') ||
+  (vlanId === 'None (0)' && '0') ||
+  vlanId

package/components/common/wizards/network/add/validations/common.ts

@@ -0,0 +1,58 @@
+import type Wizard from '~/components/atoms/wizard/utils/utils'
+
+export const isIntegerNumberInRange = (
+  value: number | string | undefined,
+  down: number,
+  up: number
+): boolean =>
+  isNaN(Number(value)) ||
+  Number(value) < down ||
+  Number(value) > up ||
+  Number(value) !== Math.round(Number(value))
+
+export const checkIfValidIP = (str: string): boolean => {
+  const regexExp =
+    /^(([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])\.){3}([0-9]|[1-9][0-9]|1[0-9]{2}|2[0-4][0-9]|25[0-5])$/gi
+
+  return regexExp.test(str)
+}
+
+export const checkVlanId = (vlanId: string): boolean =>
+  vlanId !== 'None (0)' &&
+  vlanId !== 'All (4095)' &&
+  (isIntegerNumberInRange(vlanId, 0, 4095) || vlanId === '')
+
+export const checkMtu = (mtu: number): boolean => {
+  return !!(mtu === 0 ? '0' : mtu) && isIntegerNumberInRange(mtu, 1280, 65535)
+}
+
+export const validateFieldLocal = (
+  wizard: Wizard,
+  stepId: number,
+  field: string,
+  rule: boolean | boolean[],
+  fieldMessage: string | string[],
+  alertMessage: string | string[]
+): void => {
+  if (typeof rule === 'boolean') {
+    if (rule) {
+      wizard.setValidation(stepId, field, {
+        fieldMessage: fieldMessage as string,
+        alertMessage: alertMessage as string,
+      })
+    } else if (wizard.hasMessage(stepId, field)) {
+      wizard.removeValidationLocal(stepId, field)
+    }
+  } else {
+    const ruleIndex = rule.indexOf(true)
+
+    if (ruleIndex !== -1) {
+      wizard.setValidation(stepId, field, {
+        fieldMessage: fieldMessage[ruleIndex],
+        alertMessage: alertMessage[ruleIndex],
+      })
+    } else if (wizard.hasMessage(stepId, field)) {
+      wizard.removeValidationLocal(stepId, field)
+    }
+  }
+}

package/components/common/wizards/network/add/validations/connectionSettings.ts

@@ -0,0 +1,75 @@
+import { UI_I_ConnectionSettings } from '~/components/common/wizards/network/add/models/interfaces'
+import { UI_E_ValidationFields } from '~/components/common/wizards/network/add/models/enums'
+import { UI_I_Localization } from '~/models/interfaces'
+import type Wizard from '~/components/atoms/wizard/utils/utils'
+import {
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+} from '~/components/atoms/wizard/models/interfaces'
+import {
+  validateFieldLocal,
+  checkVlanId,
+} from '~/components/common/wizards/network/add/validations/common'
+
+export const validateVlanIdConnectionSettingsLocal = (
+  localization: UI_I_Localization,
+  data: UI_I_ConnectionSettings,
+  wizard: Wizard
+): void => {
+  validateFieldLocal(
+    wizard,
+    5,
+    UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN,
+    checkVlanId(data.vlanId),
+    localization.vlanIdInvalidMessage,
+    localization.vlanIdInvalidMessage
+  )
+}
+
+export const validateNetworkConnectionSettingsLocal = (
+  localization: UI_I_Localization,
+  data: UI_I_ConnectionSettings,
+  wizard: Wizard
+): void => {
+  validateFieldLocal(
+    wizard,
+    5,
+    UI_E_ValidationFields.CONNECTION_SETTINGS_NETWORK,
+    data.networkLabel === '',
+    localization.networkLabelInvalidMessage,
+    localization.networkLabelInvalidMessage
+  )
+}
+
+export const checkConnectionSettingsSync = (
+  localization: UI_I_Localization,
+  data: UI_I_ConnectionSettings,
+  wizard: Wizard,
+  value: UI_I_WizardStep[]
+): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  if (checkVlanId(data.vlanId)) {
+    stepHasError = wizard.setValidation(
+      5,
+      UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN,
+      {
+        fieldMessage: localization.vlanIdInvalidMessage,
+        alertMessage: localization.vlanIdInvalidMessage,
+      }
+    )
+  } else if (
+    wizard.hasMessage(5, UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN)
+  ) {
+    value = wizard.removeValidation(
+      5,
+      UI_E_ValidationFields.CONNECTION_SETTINGS_VLAN,
+      value
+    )
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+  }
+}

package/components/common/wizards/network/add/validations/createStandardSwitch.ts

@@ -0,0 +1,58 @@
+import {
+  UI_I_AdapterStatus,
+  UI_I_Adapter,
+} from '~/components/common/diagramMain/models/interfaces'
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+} from '~/components/atoms/wizard/models/interfaces'
+
+export const checkAdaptersSync = (
+  localization: UI_I_Localization,
+  data: UI_I_AdapterStatus,
+  value: UI_I_WizardStep[],
+  currentStepId: number,
+  nextStepId: number,
+  freeAdapters: UI_I_Adapter[],
+  showNoActiveAdaptersModal: () => void,
+  showNoConnectedActiveAdaptersModal: () => void
+): UI_I_ValidationReturn => {
+  const stepShouldStop = {
+    ifOnCurrentStep: false,
+    ifFromAnyStep: false,
+    stoppageStepId: 2,
+  }
+
+  const isOnStoppageStep = currentStepId === stepShouldStop.stoppageStepId
+
+  if (isOnStoppageStep && data.active.length === 0) {
+    stepShouldStop.ifOnCurrentStep = true
+    showNoActiveAdaptersModal()
+  }
+
+  if (stepShouldStop.ifOnCurrentStep)
+    return {
+      newValue: value,
+      stepHasError: false,
+      stepShouldStop,
+    }
+
+  const activeAndConnectedAdapters = data.active.filter(
+    (adapterName: string) =>
+      freeAdapters.find(
+        (freeAdapter: UI_I_Adapter) => freeAdapter.name === adapterName
+      )?.carrier
+  )
+
+  if (isOnStoppageStep && activeAndConnectedAdapters.length === 0) {
+    stepShouldStop.ifOnCurrentStep = true
+    showNoConnectedActiveAdaptersModal()
+  }
+
+  return {
+    newValue: value,
+    stepHasError: false,
+    stepShouldStop,
+  }
+}