bfg-common 1.2.157 → 1.2.159

package/assets/scss/common/global.scss

@@ -113,7 +113,8 @@ form {
   }
 }
 
-/* _____SELECT DARK AND LIGHT MODE STYLES_____ */
+/* _____SELECT DARK AND LIGHT MODE STY
+LES_____ */
 //.clr-select-wrapper {
 select {
   background-color: transparent;
@@ -148,6 +149,22 @@ input[type='number'] {
   -moz-appearance: textfield;
 }
 
+//html.dark-theme
+html.light-theme {
+  .stack-block-expanded {
+    .input-text-color,
+    .input-text-color input {
+      color: var(--row-selected-text-color);
+    }
+  }
+}
+
+//.stack-block-expandable {
+//  .input-text-color {
+//    input {}
+//  }
+//}
+
 .btn-trigger {
   width: 100%;
   @include flex($align: center);

package/components/atoms/wizard/Wizard.vue

@@ -0,0 +1,442 @@
+<template>
+  <div v-if="props.show" class="modal clr-wizard wizard-xl">
+    <div class="modal-dialog modal-xl relative">
+      <div class="modal-content-wrapper">
+        <nav class="modal-nav clr-wizard-stepnav-wrapper">
+          <h1 class="clr-wizard-title">
+            {{ props.title }}
+          </h1>
+          <atoms-wizard-step
+            :test-id="props.testId"
+            :steps="steps"
+            :was-completed="props.wasCompleted"
+            @change="onSelectStep"
+          />
+        </nav>
+        <div class="modal-content">
+          <div class="modal-header--accessible">
+            <slot name="contentHeading">
+              <div class="modal-title-wrapper">
+                <h2 class="modal-title">
+                  <span class="modal-title-text">
+                    {{ selectedStep.title }}
+                  </span>
+                </h2>
+              </div>
+            </slot>
+            <button
+              :id="`${props.testId}-close-icon`"
+              class="close"
+              @click="onHide"
+            >
+              <atoms-the-icon class="close-icon" name="close" />
+            </button>
+          </div>
+          <div class="modal-body" style="padding: 16px 15px 10px 10px">
+            <div v-if="selectedStep.subTitle" class="content-heading">
+              <div>
+                <h2>{{ selectedStep.subTitle }}</h2>
+              </div>
+            </div>
+            <slot name="modalBody" :selected-step="selectedStep" />
+          </div>
+          <div class="modal-footer">
+            <slot name="modalFooter">
+              <button
+                :id="`${props.testId}-cancel-button`"
+                class="btn btn-link"
+                @click="onHide"
+              >
+                {{ props.localization.cancel }}
+              </button>
+              <button
+                v-if="!isFirstStep"
+                :id="`${props.testId}-back-button`"
+                class="btn btn-outline"
+                @click="onPreviousStep"
+              >
+                {{ props.localization.back }}
+              </button>
+              <button
+                v-if="isLastStep"
+                :id="`${props.testId}-finish-button`"
+                class="btn btn-success"
+                @click="emits('submit')"
+              >
+                {{ props.localization.finish }}
+              </button>
+              <button
+                v-else
+                :id="`${props.testId}-next-button`"
+                :disabled="props.isDisabledFinish"
+                class="btn btn-primary"
+                @click="onNextStep"
+              >
+                {{ props.localization.next }}
+              </button>
+            </slot>
+          </div>
+        </div>
+      </div>
+
+      <div v-show="props.isLoading" class="loader">
+        <i class="fa clr-tree-node-caret-icon spinner" />
+        <div v-if="props.loaderMessages.length" class="text">
+          <p v-for="message in props.loaderMessages" :key="message">
+            {{ message }}
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/models/interfaces'
+import type {
+  UI_I_WizardStep,
+  UI_I_WizardStepNavigation,
+} from '~/components/atoms/wizard/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/models/enums'
+
+const props = withDefaults(
+  defineProps<{
+    title: string
+    show: boolean
+    steps: UI_I_WizardStep[]
+    selectedScheme: number[]
+    isLoading?: boolean
+    loaderMessages?: string[]
+    isDisabledNext?: boolean
+    isDisabledFinish?: boolean
+    localization?: UI_I_Localization
+    testId?: string
+    wasCompleted: boolean
+  }>(),
+  {
+    isLoading: false,
+    loaderMessages: () => [],
+    isDisabledNext: false,
+    isDisabledFinish: false,
+    localization: () => ({}),
+    testId: '',
+  }
+)
+
+const emits = defineEmits<{
+  (event: 'submit'): void
+  (event: 'hide'): void
+  (event: 'change-steps', value: UI_I_WizardStep[]): void
+}>()
+
+const steps = ref<UI_I_WizardStep[]>(
+  useDeepCopy(
+    props.steps.filter((step: UI_I_WizardStep) =>
+      props.selectedScheme.includes(step.id)
+    )
+  )
+)
+
+const onHide = (): void => {
+  emits('hide')
+}
+
+const isSelected = (status: UI_E_WIZARD_STATUS): boolean =>
+  status === UI_E_WIZARD_STATUS.SELECTED ||
+  status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+
+const isLastStep = computed<boolean>(() => {
+  const lastStepStatus = steps.value[steps.value.length - 1].status
+  return isSelected(lastStepStatus)
+})
+
+const isFirstStep = computed<boolean>(() => {
+  const firstStepStatus = steps.value[0].status
+  return isSelected(firstStepStatus)
+})
+
+const selectedStep = computed<UI_I_WizardStep>(
+  () =>
+    steps.value.find((step: UI_I_WizardStep) => isSelected(step.status)) ||
+    steps.value[0]
+)
+
+const onSelectStep = (step: UI_I_WizardStepNavigation): void => {
+  const index = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.id === step.id
+  )
+  const indexInactive = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+  )
+
+  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
+    if (!st.isValid && index === i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+    if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+    if (!st.isValid && index !== i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+    // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step, but it is not to be selected, set it as active
+    if (
+      (indexInactive - 1 === i && index !== indexInactive - 1) ||
+      (indexInactive < 0 && steps.value.length - 1 === i && index !== i)
+    )
+      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+    if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
+      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+    return st
+  })
+
+  emits('change-steps', newSteps)
+}
+
+const onNextStep = (): void => {
+  const currentStepIndex: number = steps.value.findIndex(
+    (st: UI_I_WizardStep) => isSelected(st.status)
+  )
+  const stepIndex: number = currentStepIndex + 1
+  const step: UI_I_WizardStep = steps.value[stepIndex]
+
+  if (!step) return
+
+  const index = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.id === step.id
+  )
+
+  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
+    if (!st.isValid && index === i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+    if (!st.isValid && index !== i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+    const indexInactive = steps.value.findIndex(
+      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+    )
+
+    // If current step is not equal selected step, and it is not inactive or active, set it as completed
+    if (
+      index !== i &&
+      st.status !== UI_E_WIZARD_STATUS.INACTIVE &&
+      st.status !== UI_E_WIZARD_STATUS.ACTIVE
+    )
+      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+    if (index === i) {
+      return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+    }
+
+    if (stepIndex !== indexInactive && indexInactive - 1 === i)
+      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+    return st
+  })
+
+  emits('change-steps', newSteps)
+}
+
+const onPreviousStep = (): void => {
+  const currentStepIndex: number = steps.value.findIndex(
+    (st: UI_I_WizardStep) => isSelected(st.status)
+  )
+  const stepIndex: number = currentStepIndex - 1
+  const step: UI_I_WizardStep = steps.value[stepIndex]
+
+  const indexInactive = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+  )
+
+  if (!step) return
+  const index = steps.value.findIndex(
+    (st: UI_I_WizardStep) => st.title === step.title
+  )
+
+  const newSteps = steps.value.map((st: UI_I_WizardStep, i: number) => {
+    if (!st.isValid && index === i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+
+    if (index === i) return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+    if (!st.isValid && index !== i)
+      return { ...st, status: UI_E_WIZARD_STATUS.INVALID }
+
+    // If current step is before first inactive, and it is not to be selected or hasn't inactive index, and it is last step
+    if (
+      (indexInactive - 1 === i && index !== indexInactive - 1) ||
+      (indexInactive < 0 && steps.value.length - 1 === i)
+    )
+      return { ...st, status: UI_E_WIZARD_STATUS.ACTIVE }
+
+    if (index !== i && st.status !== UI_E_WIZARD_STATUS.INACTIVE)
+      return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+    return st
+  })
+
+  emits('change-steps', newSteps)
+}
+
+watch(
+  () => props.selectedScheme,
+  (newValue: number[]) => {
+    steps.value = props.steps.filter((_step: UI_I_WizardStep, index: number) =>
+      newValue.includes(index)
+    )
+  },
+  { deep: true, immediate: true }
+)
+watch(
+  () => props.steps,
+  (newValue: UI_I_WizardStep[]) => {
+    steps.value = newValue.filter((_step: UI_I_WizardStep, index: number) =>
+      props.selectedScheme.includes(index)
+    )
+  },
+  { deep: true, immediate: true }
+)
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+
+  .modal-nav {
+    background-color: var(--block-view-bg-color4);
+    .clr-wizard-title {
+      color: var(--main-color-mode);
+      font-size: 22px;
+      padding: 24px 12px 24px 24px;
+      //line-height: 1.2rem;
+    }
+  }
+
+  .modal-content-wrapper {
+    position: relative;
+    -webkit-animation-name: animateTop;
+    -webkit-animation-duration: 0.4s;
+    animation-name: animateTop;
+    animation-duration: 0.4s;
+  }
+
+  .modal-content {
+    background-color: var(--modal-bg-color);
+
+    .modal-header--accessible {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      width: 100%;
+      padding: 24px 19px 6px 24px;
+
+      .modal-title-text {
+        color: var(--main-color-mode);
+        font-size: 22px;
+      }
+
+      .close-icon {
+        fill: var(--close-icon);
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+    .modal-body {
+      padding: 0 3px;
+    }
+
+    .modal-footer {
+      display: flex;
+      justify-content: flex-end;
+      padding: 24px;
+      flex: unset;
+      min-height: 0;
+      height: auto;
+    }
+  }
+
+  .loader {
+    position: absolute;
+    z-index: 1000;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba(0, 0, 0, 0.3);
+
+    .spinner {
+      left: unset;
+    }
+
+    .text {
+      position: absolute;
+      top: calc(40% + 75px);
+      text-align: center;
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 5px 10px;
+      border-radius: 3px;
+
+      p {
+        color: white;
+      }
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+}
+h1,
+h2 {
+  // просмотреть если нигде не ломается переместит глобально
+  line-height: inherit;
+}
+
+.content-heading {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid #a6a6a6;
+
+  & > div h2 {
+    font-weight: 400;
+    font-size: 13px;
+    line-height: inherit;
+    color: var(--add-vm-context-sub-title);
+  }
+}
+
+:root.dark-theme {
+  .loader .text {
+    position: absolute;
+    top: calc(40% + 75px);
+    text-align: center;
+    background-color: rgba(250, 250, 250, 0.5);
+    padding: 5px 10px;
+    border-radius: 5px;
+
+    p {
+      color: black;
+    }
+  }
+}
+</style>

package/components/atoms/wizard/models/enums.ts

@@ -0,0 +1,8 @@
+export enum UI_E_WIZARD_STATUS {
+  COMPLETED,
+  SELECTED,
+  INACTIVE,
+  ACTIVE,
+  INVALID,
+  INVALID_SELECTED,
+}

package/components/atoms/wizard/models/interfaces.ts

@@ -0,0 +1,47 @@
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/models/enums'
+
+export interface UI_I_ErrorFields {
+  alert: string
+  field: string
+}
+
+export interface UI_I_WizardStep {
+  id: number
+  stepName?: string
+  title: string
+  subTitle?: string
+  status: UI_E_WIZARD_STATUS
+  fields: {
+    [key: string]: UI_I_ErrorFields
+  }
+  isValid: boolean
+}
+
+export interface UI_I_WizardStepNavigation
+  extends Omit<UI_I_WizardStep, 'status'> {
+  status: {
+    disabled: boolean
+    active: boolean
+    error: boolean
+    complete: boolean
+  }
+}
+
+export interface UI_I_Loader {
+  status?: boolean
+  messages?: string[]
+}
+
+export interface UI_I_ValidationReturn {
+  stepHasError: boolean
+  stepShouldStop?: {
+    ifOnCurrentStep: boolean
+    ifFromAnyStep: boolean
+    stoppageStepId: number
+  }
+  newValue: UI_I_WizardStep[]
+}
+
+// export interface UI_I_WizardSlot {
+//   selectedStep: UI_I_WizardStep
+// }

package/components/atoms/wizard/step/Step.vue

@@ -0,0 +1,112 @@
+<template>
+  <div class="clr-wizard-stepnav">
+    <div class="clr-wizard-stepnav-list">
+      <div
+        v-for="(step, key) in steps"
+        :key="key"
+        :class="[
+          'clr-wizard clr-wizard-stepnav-item clr-nav-link nav-item',
+          step.status,
+        ]"
+      >
+        <button
+          :id="`${props.testId}-step-button-${key}`"
+          class="btn btn-link clr-wizard-stepnav-link"
+          :style="{ 'margin-left': '8px' }"
+          :disabled="step.status.disabled"
+          @click="changeStep(step)"
+        >
+          <span class="clr-wizard-stepnav-link-title">
+            {{ step.stepName || step.title }}
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_WizardStep,
+  UI_I_WizardStepNavigation,
+} from '~/components/atoms/wizard/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/models/enums'
+
+const props = withDefaults(
+  defineProps<{
+    steps: UI_I_WizardStep[]
+    wasCompleted: boolean
+    testId?: string
+  }>(),
+  { testId: 'ui-vertical-step' }
+)
+
+const steps = computed<UI_I_WizardStepNavigation[]>(() =>
+  props.steps.map((step: UI_I_WizardStep) => ({
+    ...step,
+    status: {
+      disabled: step.status === UI_E_WIZARD_STATUS.INACTIVE,
+      active:
+        step.status === UI_E_WIZARD_STATUS.SELECTED ||
+        step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED,
+      error:
+        step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED ||
+        step.status === UI_E_WIZARD_STATUS.INVALID,
+      complete:
+        step.status === UI_E_WIZARD_STATUS.COMPLETED ||
+        ((step.status === UI_E_WIZARD_STATUS.SELECTED ||
+          step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED ||
+          step.status === UI_E_WIZARD_STATUS.INVALID) &&
+          props.wasCompleted),
+    },
+  }))
+)
+
+const emits = defineEmits<{
+  (event: 'change', step: UI_I_WizardStepNavigation): void
+}>()
+
+const changeStep = (step: UI_I_WizardStepNavigation): void => {
+  emits('change', step)
+}
+</script>
+
+<style scoped lang="scss">
+.clr-wizard-stepnav {
+  .clr-wizard-stepnav-item {
+    padding: 0.3rem 0 0.4rem;
+
+    &.active {
+      button:hover,
+      button {
+        color: var(--vertical-steps-active-color);
+        background-color: var(--vertical-steps-active-bg-color);
+        cursor: default;
+        span {
+          color: var(--checkbox-mark-color);
+        }
+      }
+    }
+    &.complete:not(&.active) {
+      button {
+        background: var(--block-view-bg-color3);
+      }
+      button:hover {
+        color: var(--vertical-steps-complete-color);
+        background-color: var(--vertical-steps-complete-bg-color);
+        border-bottom: 1px solid var(--vertical-steps-hover-border-color);
+      }
+    }
+    &.error {
+      box-shadow: 4px 0 0 #c21d00 inset;
+      transition: box-shadow 0.2s ease-in;
+    }
+    button {
+      color: var(--add-vm-context-title);
+      .clr-wizard-stepnav-link-title {
+        font-size: 14px;
+      }
+    }
+  }
+}
+</style>

package/components/atoms/wizard/utils/utils.ts

@@ -0,0 +1,407 @@
+import { ref, computed, Ref, ComputedRef } from 'vue'
+import { useDeepCopy } from '~/composables/deepCopy'
+import {
+  UI_I_ErrorFields,
+  UI_I_Loader,
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+} from '~/components/atoms/wizard/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/models/enums'
+
+export default class Wizard {
+  private _initialSteps: Ref<UI_I_WizardStep[]>
+  private _initialStepsScheme: Ref<number[][]>
+  private _steps: Ref<UI_I_WizardStep[]>
+  private _stepsScheme: Ref<number[][]>
+  private _selectedSchemeId: Ref<number>
+  private _wizardLoader: Ref<UI_I_Loader>
+  selectedScheme: ComputedRef<number[]>
+  alertMessages: ComputedRef<string[][]>
+
+  constructor(steps: UI_I_WizardStep[], stepsSchemeInitial: number[][]) {
+    this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
+    this._initialSteps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
+    this._stepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
+    this._initialStepsScheme = ref<number[][]>(useDeepCopy(stepsSchemeInitial))
+    this._selectedSchemeId = ref<number>(0)
+    this._wizardLoader = ref<UI_I_Loader>({
+      status: false,
+      messages: [],
+    })
+    this.selectedScheme = computed<number[]>(
+      () => this._stepsScheme.value[this._selectedSchemeId.value]
+    )
+    this.alertMessages = computed<string[][]>(() =>
+      this._steps.value.map((step: UI_I_WizardStep) =>
+        Object.values(step.fields).reduce(
+          (result: string[], obj: UI_I_ErrorFields) =>
+            obj.alert ? [...result, obj.alert] : result,
+          []
+        )
+      )
+    )
+  }
+
+  get steps(): UI_I_WizardStep[] {
+    return this._steps.value
+  }
+
+  set steps(newSteps: UI_I_WizardStep[]) {
+    this._steps.value = newSteps
+  }
+
+  set stepsScheme(newStepsScheme: number[][]) {
+    this._stepsScheme.value = newStepsScheme
+  }
+
+  get stepsScheme(): number[][] {
+    return this._stepsScheme.value
+  }
+
+  set selectedSchemeId(newSelectedSchemeId: number) {
+    this._selectedSchemeId.value = newSelectedSchemeId
+  }
+
+  get selectedSchemeId(): number {
+    return this._selectedSchemeId.value
+  }
+
+  get wizardLoader(): UI_I_Loader {
+    return this._wizardLoader.value
+  }
+
+  setLoader(status: boolean, messages?: string[]): void {
+    this._wizardLoader.value.status = status
+
+    if (!messages) return
+
+    messages.length > 0 && (this._wizardLoader.value.messages = messages)
+  }
+
+  changeScheme(schemeId: number): void {
+    this.selectedSchemeId = schemeId
+    this.resetAfterSelected()
+  }
+
+  goToFirstInvalidStep(): void {
+    const firstInvalidStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) => this.isInvalid(step.status)
+    )
+
+    if (!firstInvalidStep) return
+
+    const firstInvalidStepId: number = firstInvalidStep.id
+
+    this.steps = this.steps.map((step: UI_I_WizardStep): UI_I_WizardStep => {
+      if (step.id === firstInvalidStepId) {
+        return { ...step, status: UI_E_WIZARD_STATUS.INVALID_SELECTED }
+      }
+      if (step.status === UI_E_WIZARD_STATUS.SELECTED) {
+        return { ...step, status: UI_E_WIZARD_STATUS.COMPLETED }
+      }
+
+      return step
+    })
+  }
+
+  goToFirstStoppageStep(stoppageStepId: number): void {
+    console.log('goToFirstStoppageStep', stoppageStepId)
+  }
+
+  hasMessage(stepId: number, field: string): boolean {
+    return (
+      !!this.steps[stepId].fields?.[field].field ||
+      !!this.steps[stepId].fields?.[field].alert
+    )
+  }
+
+  setValidationError(stepId: number, field: string, message: string): void {
+    const invalidStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep): boolean => step.id === stepId
+    )
+
+    if (!invalidStep) return
+
+    invalidStep.isValid = false
+    invalidStep.fields[field].field = message
+
+    if (this.isSelected(invalidStep.status)) {
+      invalidStep.status = UI_E_WIZARD_STATUS.INVALID_SELECTED
+      return
+    }
+
+    invalidStep.status = UI_E_WIZARD_STATUS.INVALID
+  }
+
+  setAlertMessage(stepId: number, field: string, message: string): void {
+    this.steps[stepId].fields[field].alert = message
+  }
+
+  removeAlertMessage(
+    stepId: number,
+    field: string,
+    value?: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    const invalidStep: UI_I_WizardStep = this.steps[stepId]
+
+    invalidStep.fields[field].alert = ''
+    if (!value) return this.steps
+
+    return value.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id === invalidStep.id ? invalidStep : step
+    )
+  }
+
+  hideAlertMessagesByStepId(stepId: number): UI_I_WizardStep[] {
+    const modifiedStep: UI_I_WizardStep = this.steps[stepId]
+
+    for (const field in modifiedStep.fields) {
+      modifiedStep.fields[field].alert = ''
+    }
+
+    return (this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === stepId ? modifiedStep : step
+    ))
+  }
+
+  private removeValidationError(
+    stepId: number,
+    field: string,
+    nextStep: boolean,
+    value?: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    const invalidStep: UI_I_WizardStep = this.steps[stepId]
+
+    if (!invalidStep) return this.steps
+
+    invalidStep.fields[field].field = ''
+
+    const messages: UI_I_ErrorFields[] = Object.values(
+      invalidStep.fields
+    ).filter((message: UI_I_ErrorFields): boolean => message.field !== '')
+
+    invalidStep.isValid = !messages.length
+
+    if (nextStep && invalidStep.isValid && this.isInvalid(invalidStep.status)) {
+      invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
+    }
+
+    if (
+      !nextStep &&
+      invalidStep.isValid &&
+      invalidStep.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    ) {
+      invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
+    }
+
+    if (nextStep) this.goToFirstInvalidStep()
+
+    if (!value) return this.steps
+
+    return value.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id === invalidStep.id ? invalidStep : step
+    )
+  }
+
+  changeStep(value: UI_I_WizardStep[]): void {
+    this.steps = this.steps.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep => ({
+        ...step,
+        ...(value.find(
+          (stepFind: UI_I_WizardStep): boolean => stepFind.id === step.id
+        ) || step),
+      })
+    )
+  }
+
+  isSelected(status: UI_E_WIZARD_STATUS): boolean {
+    return (
+      status === UI_E_WIZARD_STATUS.SELECTED ||
+      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+  }
+
+  isInvalid(status: UI_E_WIZARD_STATUS): boolean {
+    return (
+      status === UI_E_WIZARD_STATUS.INVALID ||
+      status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+  }
+
+  get selectedStepId(): number {
+    const selectedStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) =>
+        step.status === UI_E_WIZARD_STATUS.SELECTED ||
+        step.status === UI_E_WIZARD_STATUS.INVALID_SELECTED
+    )
+
+    return selectedStep !== undefined ? selectedStep.id : this.steps[0].id
+  }
+
+  async changeSteps(
+    value: UI_I_WizardStep[],
+    validationFunc: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>
+  ): Promise<void> {
+    const currentStep: UI_I_WizardStep | undefined = this.steps.find(
+      (step: UI_I_WizardStep) => this.isSelected(step.status)
+    )
+
+    const nextStep: UI_I_WizardStep | undefined = value.find(
+      (step: UI_I_WizardStep) => this.isSelected(step.status)
+    )
+
+    if (!currentStep || !nextStep) return
+    if (currentStep.id > nextStep.id) return this.changeStep(value)
+
+    if (validationFunc) {
+      const validation: UI_I_ValidationReturn = await validationFunc(
+        value,
+        currentStep,
+        nextStep
+      )
+
+      if (
+        validation.stepHasError ||
+        validation.stepShouldStop?.ifFromAnyStep ||
+        validation.stepShouldStop?.ifOnCurrentStep
+      ) {
+        validation.stepShouldStop?.ifFromAnyStep &&
+          currentStep.id < validation.stepShouldStop?.stoppageStepId &&
+          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
+
+        validation.stepShouldStop?.ifOnCurrentStep &&
+          this.selectStepHard(validation.stepShouldStop?.stoppageStepId)
+
+        validation.stepHasError && this.goToFirstInvalidStep()
+
+        return
+      } else {
+        currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
+      }
+
+      this.changeStep(validation.newValue)
+
+      return
+    }
+
+    this.changeStep(value)
+  }
+
+  selectStepHard(stepId: number): void {
+    const newSteps = this.steps.map((st: UI_I_WizardStep) => {
+      console.log(st.id, stepId)
+      if (st.id < stepId) return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+      console.log(st.id, stepId)
+      if (st.id === stepId)
+        return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+      return st
+    })
+
+    this.changeStep(newSteps)
+  }
+
+  isValidateForStep(
+    step: number,
+    currentStepId: number,
+    nextStepId: number
+  ): boolean {
+    return nextStepId > step && currentStepId <= step
+  }
+
+  setValidation(
+    stepId: number,
+    field: string,
+    message: {
+      fieldMessage?: string
+      alertMessage?: string
+    }
+  ): true {
+    message.fieldMessage &&
+      this.setValidationError(stepId, field, message.fieldMessage)
+    message.alertMessage &&
+      this.setAlertMessage(stepId, field, message.alertMessage)
+
+    return true
+  }
+
+  removeValidation(
+    stepId: number,
+    field: string,
+    value: UI_I_WizardStep[]
+  ): UI_I_WizardStep[] {
+    let newValue: UI_I_WizardStep[] = this.removeValidationError(
+      stepId,
+      field,
+      true,
+      value
+    )
+    newValue = this.removeAlertMessage(stepId, field, newValue)
+    return newValue
+  }
+
+  reset(): void {
+    this.steps = useDeepCopy(this._initialSteps.value)
+    this.stepsScheme = useDeepCopy(this._initialStepsScheme.value)
+    this.selectedSchemeId = 0
+  }
+
+  setEmptyErrorFields(fields: { [key: string]: UI_I_ErrorFields }): {
+    [key: string]: UI_I_ErrorFields
+  } {
+    const keys: string[] = Object.keys(fields)
+    const obj: { [key: string]: UI_I_ErrorFields } = {}
+
+    keys.forEach((key: string): void => {
+      obj[key] = {
+        alert: '',
+        field: '',
+      }
+    })
+
+    return obj
+  }
+
+  resetAfterSelected(): void {
+    this.steps = this.steps.map(
+      (step: UI_I_WizardStep): UI_I_WizardStep =>
+        step.id > this.selectedStepId
+          ? {
+              ...step,
+              status: UI_E_WIZARD_STATUS.INACTIVE,
+              isValid: true,
+              fields: this.setEmptyErrorFields(step.fields),
+            }
+          : step
+    )
+  }
+
+  activeStepId(): number {
+    return (
+      this.steps.find(
+        (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.ACTIVE
+      )?.id || 0
+    )
+  }
+
+  wasCompleted(): boolean {
+    return this.activeStepId() > this.selectedStepId
+  }
+
+  isLastStep(): boolean {
+    return (
+      this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
+      this.selectedStepId
+    )
+  }
+
+  getStepIdByFieldName(fieldName: string): number {
+    return this.steps.find((step) => step.fields[fieldName])?.id || -1
+  }
+}

package/components/common/addNetworking/AddNetworking.vue

@@ -1114,6 +1114,7 @@ const onHideAddNetworkingModal = (): void => {
         color: #fff;
       }
     }
+    }
 
     .select-adapter-info span {
       color: var(--main-color-mode2);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.2.157",
+  "version": "1.2.159",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",