bfg-common 1.5.431 → 1.5.433

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

@@ -0,0 +1,954 @@
+import { ref, computed, Ref, ComputedRef } from 'vue'
+import { useDeepCopy } from '~/composables/deepCopy'
+import type {
+  UI_I_ErrorFields,
+  UI_I_Loader,
+  UI_I_ValidationReturn,
+  UI_I_WizardStep,
+  UI_I_WizardStepNavigation,
+  UI_I_WizardSchemeData,
+} from '~/components/atoms/wizard/lib/models/interfaces'
+import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
+
+export default class Wizard {
+  private _initialSteps: Ref<UI_I_WizardStep[]>
+  private _initialStepsScheme: Ref<(number | UI_I_WizardSchemeData)[][]>
+  private _steps: Ref<UI_I_WizardStep[]>
+  private _stepsScheme: Ref<(number | UI_I_WizardSchemeData)[][]>
+  private _selectedSchemeId: Ref<number>
+  private _wizardLoader: Ref<UI_I_Loader>
+  private _waitingStepId: Ref<number>
+  isDisabledNextButton: Ref<boolean>
+  selectedScheme: ComputedRef<(number | UI_I_WizardSchemeData)[]>
+  alertMessages: ComputedRef<string[][]>
+  stepsInSelectedScheme: ComputedRef<UI_I_WizardStep[]>
+  stepsInSelectedSchemeWithStatus: ComputedRef<UI_I_WizardStepNavigation[]>
+  isLastStepCom: ComputedRef<boolean>
+  isFirstStepCom: ComputedRef<boolean>
+  selectedStepCom: ComputedRef<UI_I_WizardStep>
+  selectedStepDataFromScheme: ComputedRef<undefined | UI_I_WizardSchemeData>
+
+  constructor(
+    steps: UI_I_WizardStep[],
+    stepsSchemeInitial: (number | UI_I_WizardSchemeData)[][]
+  ) {
+    this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
+    this._initialSteps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
+    this._stepsScheme = ref<(number | UI_I_WizardSchemeData)[][]>(
+      useDeepCopy(stepsSchemeInitial)
+    )
+    this._initialStepsScheme = ref<(number | UI_I_WizardSchemeData)[][]>(
+      useDeepCopy(stepsSchemeInitial)
+    )
+    this._selectedSchemeId = ref<number>(0)
+    this._wizardLoader = ref<UI_I_Loader>({
+      status: false,
+      messages: [],
+    })
+    this._waitingStepId = ref<number>(-1)
+    this.isDisabledNextButton = ref<boolean>(false)
+    this.selectedScheme = computed<(number | UI_I_WizardSchemeData)[]>(
+      () => 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,
+          []
+        )
+      )
+    )
+
+    this.stepsInSelectedScheme = computed<UI_I_WizardStep[]>(() =>
+      this._steps.value.reduce(
+        (stepsInScheme: UI_I_WizardStep[], step: UI_I_WizardStep) => {
+          const isStandardStepFromScheme = this.selectedScheme.value.includes(
+            step.id
+          )
+
+          if (isStandardStepFromScheme) {
+            return [...stepsInScheme, step]
+          }
+
+          const stepDataFromScheme = this.selectedScheme.value.find(
+            (scheme: number | UI_I_WizardSchemeData) =>
+              typeof scheme !== 'number' && scheme.stepId === step.id
+          )
+
+          if (!!stepDataFromScheme) {
+            return [
+              ...stepsInScheme,
+              {
+                ...step,
+                dataId: stepDataFromScheme.dataId,
+              },
+            ]
+          }
+
+          return stepsInScheme
+        },
+        []
+      )
+    )
+
+    this.selectedStepDataFromScheme = computed<
+      undefined | UI_I_WizardSchemeData
+    >(() =>
+      this.selectedScheme.value.find(
+        (scheme: number | UI_I_WizardSchemeData) =>
+          typeof scheme !== 'number' &&
+          scheme.stepId === this.selectedStepCom.value.id
+      )
+    )
+
+    this.stepsInSelectedSchemeWithStatus = computed<
+      UI_I_WizardStepNavigation[]
+    >(() =>
+      this.stepsInSelectedScheme.value.map((step: UI_I_WizardStep) => {
+        return {
+          ...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) &&
+                this.wasCompleted()),
+          },
+        }
+      })
+    )
+
+    this.isLastStepCom = computed<boolean>(() => {
+      const lastStepStatus =
+        this.stepsInSelectedScheme.value[
+          this.stepsInSelectedScheme.value.length - 1
+        ].status
+      return this.isSelected(lastStepStatus)
+    })
+
+    this.isFirstStepCom = computed<boolean>(() => {
+      const firstStepStatus = this.stepsInSelectedScheme.value[0].status
+      return this.isSelected(firstStepStatus)
+    })
+
+    this.selectedStepCom = computed<UI_I_WizardStep>(
+      () =>
+        this.stepsInSelectedScheme.value.find((step: UI_I_WizardStep) =>
+          this.isSelected(step.status)
+        ) || this.stepsInSelectedScheme.value[0]
+    )
+  }
+
+  get steps(): UI_I_WizardStep[] {
+    return this._steps.value
+  }
+
+  set steps(newSteps: UI_I_WizardStep[]) {
+    this._steps.value = newSteps
+  }
+
+  set stepsScheme(newStepsScheme: (number | UI_I_WizardSchemeData)[][]) {
+    this._stepsScheme.value = newStepsScheme
+  }
+
+  get stepsScheme(): (number | UI_I_WizardSchemeData)[][] {
+    return this._stepsScheme.value
+  }
+
+  set selectedSchemeId(newSelectedSchemeId: number) {
+    this._selectedSchemeId.value = newSelectedSchemeId
+  }
+
+  get selectedSchemeId(): number {
+    return this._selectedSchemeId.value
+  }
+
+  set waitingStepId(id: number) {
+    this._waitingStepId.value = id
+  }
+
+  get waitingStepId(): number {
+    return this._waitingStepId.value
+  }
+
+  get wizardLoader(): UI_I_Loader {
+    return this._wizardLoader.value
+  }
+
+  get nextAvailableStep(): number {
+    const currentStepIndex = this.selectedScheme.value.indexOf(
+      this.selectedStepId
+    )
+    return this.selectedScheme.value[currentStepIndex + 1]
+  }
+
+  get nextStepData(): UI_I_WizardStep[] {
+    const currentStepIndex: number = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => this.isSelected(st.status)
+    )
+    const stepIndex: number = currentStepIndex + 1
+    const step: UI_I_WizardStep = this.stepsInSelectedScheme.value[stepIndex]
+
+    if (!step) return []
+
+    const index = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.id === step.id
+    )
+
+    return this.stepsInSelectedScheme.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 = this.stepsInSelectedScheme.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
+      }
+    )
+  }
+
+  get previousStepData(): UI_I_WizardStep[] {
+    const currentStepIndex: number = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => this.isSelected(st.status)
+    )
+    const stepIndex: number = currentStepIndex - 1
+    const step: UI_I_WizardStep = this.stepsInSelectedScheme.value[stepIndex]
+
+    const indexInactive = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+    )
+
+    if (!step) return []
+    const index = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.title === step.title
+    )
+
+    return this.stepsInSelectedScheme.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 &&
+            this.stepsInSelectedScheme.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
+      }
+    )
+  }
+
+  setDisabledNextButton(newValue: boolean) {
+    this.isDisabledNextButton.value = newValue
+  }
+
+  selectedStepData(step: UI_I_WizardStepNavigation): UI_I_WizardStep[] {
+    const index = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.id === step.id
+    )
+    const indexInactive = this.stepsInSelectedScheme.value.findIndex(
+      (st: UI_I_WizardStep) => st.status === UI_E_WIZARD_STATUS.INACTIVE
+    )
+
+    return this.stepsInSelectedScheme.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 &&
+            this.stepsInSelectedScheme.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
+      }
+    )
+  }
+
+  setLoader(status: boolean, messages?: string[]): void {
+    this._wizardLoader.value.status = status
+
+    if (!messages && !!this._wizardLoader.value?.messages?.length) {
+      this._wizardLoader.value.messages = []
+      return
+    }
+    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.fields[field].field = message
+
+    if (message) {
+      invalidStep.isValid = false
+
+      if (this.isSelected(invalidStep.status)) {
+        invalidStep.status = UI_E_WIZARD_STATUS.INVALID_SELECTED
+        return
+      }
+
+      invalidStep.status = UI_E_WIZARD_STATUS.INVALID
+    } else {
+      invalidStep.isValid = true
+      if (this.isSelected(invalidStep.status)) {
+        invalidStep.status = UI_E_WIZARD_STATUS.SELECTED
+      } else {
+        invalidStep.status = UI_E_WIZARD_STATUS.COMPLETED
+      }
+    }
+  }
+
+  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
+    )
+  }
+
+  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
+    )
+  }
+
+  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
+    ))
+  }
+
+  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
+  }
+
+  get selectedStep(): UI_I_WizardStep {
+    return this.steps.find(
+      (step: UI_I_WizardStep) => step.id === this.selectedStepId
+    )
+  }
+
+  private async finalValidationFunc(
+    value: UI_I_WizardStep[],
+    currentStep: UI_I_WizardStep,
+    nextStep: UI_I_WizardStep,
+    finalValidationFunc: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>,
+    isOnlyFinalValidation = false
+  ) {
+    const finalValidation: UI_I_ValidationReturn = await finalValidationFunc(
+      value,
+      currentStep,
+      nextStep
+    )
+
+    if (
+      finalValidation.stepHasError ||
+      finalValidation.stepShouldStop?.ifFromAnyStep ||
+      finalValidation.stepShouldStop?.ifOnCurrentStep
+    ) {
+      finalValidation.stepShouldStop?.ifFromAnyStep &&
+        currentStep.id < finalValidation.stepShouldStop?.stoppageStepId &&
+        this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
+
+      finalValidation.stepShouldStop?.ifOnCurrentStep &&
+        this.selectStepHard(finalValidation.stepShouldStop?.stoppageStepId)
+
+      finalValidation.stepHasError && this.goToFirstInvalidStep()
+
+      return
+    } else {
+      currentStep.status = UI_E_WIZARD_STATUS.COMPLETED
+    }
+
+    this.changeStep(finalValidation.newValue)
+  }
+
+  addNewStepToSteps(): void {
+    const lastStepOfType = this.steps.findLast(
+      (step: UI_I_WizardStep) => step.type === this.selectedStep.type
+    )
+
+    if (!lastStepOfType) return
+
+    this.steps = this.steps.reduce(
+      (acc: UI_I_WizardStep[], step: UI_I_WizardStep) => {
+        if (step.id < lastStepOfType.id) acc.push(step)
+        if (step.id === lastStepOfType.id) {
+          acc.push(step)
+
+          const lastStepOfTypeTitleNumber =
+            +lastStepOfType.title.match(/\d+/)[0]
+
+          acc.push({
+            ...step,
+            status: UI_E_WIZARD_STATUS.INACTIVE,
+            id: step.id + 1,
+            title: lastStepOfType.title.replace(
+              lastStepOfTypeTitleNumber,
+              lastStepOfTypeTitleNumber + 1
+            ),
+          })
+        }
+        if (step.id > lastStepOfType.id) {
+          acc.push({
+            ...step,
+            id: step.id + 1,
+          })
+        }
+
+        return acc
+      },
+      []
+    )
+
+    this.stepsScheme = [
+      ...this.stepsScheme.slice(0, this.selectedSchemeId),
+      this.stepsScheme[this.selectedSchemeId].reduce(
+        (acc: number[], step: number) => {
+          if (step < lastStepOfType.id) acc.push(step)
+          if (step === lastStepOfType.id) {
+            acc.push(step)
+            acc.push(step + 1)
+          }
+          if (step > lastStepOfType.id) {
+            acc.push(step + 1)
+          }
+
+          return acc
+        },
+        []
+      ),
+      ...this.stepsScheme.slice(this.selectedSchemeId + 1),
+    ]
+  }
+
+  removeSelectedStepFromSteps(title = ''): void {
+    const removedType = this.steps.find(
+      (step) => step.id === this.selectedStepId
+    )?.type
+    this.selectStepHard(this.selectedStepId - 1)
+
+    let count = 0
+
+    this.steps = this.steps.reduce(
+      (acc: UI_I_WizardStep[], step: UI_I_WizardStep) => {
+        const currentTitle =
+          step?.type === removedType ? title + ' ' + ++count : step.title
+        if (step.id < this.selectedStepId + 1)
+          acc.push({
+            ...step,
+            title: currentTitle,
+          })
+
+        if (step.id > this.selectedStepId + 1) {
+          acc.push({
+            ...step,
+            id: step.id - 1,
+            title: currentTitle,
+          })
+        }
+
+        return acc
+      },
+      []
+    )
+    this.stepsScheme[this.selectedSchemeId].pop()
+
+    this.stepsScheme = [
+      ...this.stepsScheme.slice(0, this.selectedSchemeId),
+      this.stepsScheme[this.selectedSchemeId],
+      ...this.stepsScheme.slice(this.selectedSchemeId + 1),
+    ]
+  }
+
+  async changeSteps(
+    value: UI_I_WizardStep[],
+    validationFunc?: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>,
+    finalValidationFunc?: (
+      value: UI_I_WizardStep[],
+      currentStep: UI_I_WizardStep,
+      nextStep: UI_I_WizardStep
+    ) => Promise<UI_I_ValidationReturn>,
+    isOnlyFinalValidation = false
+  ): 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 (
+      isOnlyFinalValidation &&
+      (this.isLastStep() ||
+        nextStep.id ===
+          this.selectedScheme.value[this.selectedScheme.value.length - 1]) &&
+      finalValidationFunc
+    ) {
+      this.finalValidationFunc(
+        value,
+        currentStep,
+        nextStep,
+        finalValidationFunc,
+        isOnlyFinalValidation
+      )
+
+      return
+    }
+
+    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 if (
+        (this.isLastStep() ||
+          nextStep.id ===
+            this.selectedScheme.value[this.selectedScheme.value.length - 1]) &&
+        finalValidationFunc
+      ) {
+        this.finalValidationFunc(
+          validation.newValue,
+          currentStep,
+          nextStep,
+          finalValidationFunc,
+          isOnlyFinalValidation
+        )
+
+        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) => {
+      if (st.id < stepId) return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+      if (st.id === stepId)
+        return { ...st, status: UI_E_WIZARD_STATUS.SELECTED }
+
+      // TODO Было сделано на скорую руку
+      if (st.id > stepId && st.status === UI_E_WIZARD_STATUS.SELECTED)
+        return { ...st, status: UI_E_WIZARD_STATUS.COMPLETED }
+
+      return st
+    })
+
+    this.changeStep(newSteps)
+  }
+
+  isValidateForStep(
+    step: number,
+    currentStepId: number,
+    nextStepId: number
+  ): boolean {
+    return (
+      nextStepId > step &&
+      currentStepId <= step &&
+      this.selectedScheme.value.includes(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
+  }
+
+  removeValidationLocal(stepId: number, field: string): void {
+    this.setValidationError(stepId, field, '')
+    this.setAlertMessage(stepId, field, '')
+  }
+
+  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 {
+    const activeStep = this.steps.find(
+      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.ACTIVE
+    )?.id
+
+    const invalidStep = this.steps.find(
+      (step: UI_I_WizardStep) => step.status === UI_E_WIZARD_STATUS.INVALID
+    )?.id
+
+    return activeStep || invalidStep || 0
+  }
+
+  wasCompleted(): boolean {
+    return this.activeStepId() > this.selectedStepId
+  }
+
+  isLastStep(): boolean {
+    return (
+      this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
+      this.selectedStepId
+    )
+  }
+
+  isSelectedScheme(schemeId: number): boolean {
+    return schemeId === this.selectedSchemeId
+  }
+
+  getStepIdByFieldName(fieldName: string): number {
+    return this.steps.find((step) => step.fields[fieldName])?.id || -1
+  }
+
+  setDynamicValidationField(fieldName: string | string[]): void {
+    const fields: {
+      [key: string]: UI_I_ErrorFields
+    } = this.steps[this.selectedStepId].fields
+
+    if (typeof fieldName === 'string') {
+      fields[fieldName] = {
+        alert: '',
+        field: '',
+      }
+    } else {
+      fieldName.forEach((name: string) => {
+        fields[name] = {
+          alert: '',
+          field: '',
+        }
+      })
+    }
+
+    this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === this.selectedStepId
+        ? {
+            ...step,
+            fields,
+          }
+        : step
+    )
+  }
+
+  removeDynamicValidationField(fieldName: string | string[]): void {
+    const newFields: {
+      [key: string]: UI_I_ErrorFields
+    } = this.steps[this.selectedStepId].fields
+
+    if (typeof fieldName === 'string') {
+      delete newFields[fieldName]
+    } else {
+      fieldName.forEach((name: string) => {
+        delete newFields[name]
+      })
+    }
+
+    this.steps = this.steps.map((step: UI_I_WizardStep) =>
+      step.id === this.selectedStepId
+        ? {
+            ...step,
+            fields: newFields,
+          }
+        : step
+    )
+  }
+
+  validateFieldLocal(
+    stepId: number,
+    field: string,
+    rule: boolean | boolean[],
+    fieldMessage: string | string[],
+    alertMessage: string | string[]
+  ): void {
+    if (typeof rule === 'boolean') {
+      if (rule) {
+        this.setValidation(stepId, field, {
+          fieldMessage: fieldMessage as string,
+          alertMessage: alertMessage as string,
+        })
+      } else if (this.hasMessage(stepId, field)) {
+        this.removeValidationLocal(stepId, field)
+      }
+    } else {
+      const ruleIndex = rule.indexOf(true)
+
+      if (ruleIndex !== -1) {
+        this.setValidation(stepId, field, {
+          fieldMessage: fieldMessage[ruleIndex],
+          alertMessage: alertMessage[ruleIndex],
+        })
+      } else if (this.hasMessage(stepId, field)) {
+        this.removeValidationLocal(stepId, field)
+      }
+    }
+  }
+}