bfg-common 1.3.409 → 1.3.411

package/components/atoms/wizard/Wizard.vue

@@ -11,8 +11,7 @@
           </h1>
           <atoms-wizard-step
             :test-id="props.testId"
-            :steps="steps"
-            :was-completed="props.wasCompleted"
+            :steps="props.wizard.stepsInSelectedSchemeWithStatus.value"
             @change="onSelectStep"
           />
         </nav>
@@ -22,7 +21,7 @@
               <div class="modal-title-wrapper">
                 <h2 class="modal-title">
                   <span class="modal-title-text">
-                    {{ selectedStep.title }}
+                    {{ props.wizard.selectedStepCom.value.title }}
                   </span>
                 </h2>
               </div>
@@ -37,12 +36,20 @@
             </button>
           </div>
           <div class="modal-body" style="padding: 16px 15px 10px 10px">
-            <div v-if="selectedStep.subTitle" class="content-heading">
-              <div v-if="selectedStep.subTitle !== 'border'">
-                <h2>{{ selectedStep.subTitle }}</h2>
+            <div
+              v-if="props.wizard.selectedStepCom.value.subTitle"
+              class="content-heading"
+            >
+              <div
+                v-if="props.wizard.selectedStepCom.value.subTitle !== 'border'"
+              >
+                <h2>{{ props.wizard.selectedStepCom.value.subTitle }}</h2>
               </div>
             </div>
-            <slot name="modalBody" :selected-step="selectedStep" />
+            <slot
+              name="modalBody"
+              :selected-step="props.wizard.selectedStepCom.value"
+            />
           </div>
           <div class="modal-footer">
             <slot name="modalFooterContent"></slot>
@@ -56,7 +63,7 @@
                 {{ props.localization.cancel }}
               </button>
               <button
-                v-if="!isFirstStep"
+                v-if="!props.wizard.isFirstStepCom.value"
                 :id="`${props.testId}-back-button`"
                 :data-id="`${props.testId}-back-button`"
                 class="btn btn-outline"
@@ -65,7 +72,7 @@
                 {{ props.localization.back }}
               </button>
               <button
-                v-if="isLastStep"
+                v-if="props.wizard.isLastStepCom.value"
                 :id="`${props.testId}-finish-button`"
                 :data-id="`${props.testId}-finish-button`"
                 class="btn btn-success"
@@ -88,10 +95,13 @@
         </div>
       </div>
 
-      <div v-show="props.isLoading" class="loader">
+      <div v-show="props.wizard.wizardLoader.status" 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">
+        <div v-if="props.wizard.wizardLoader.messages.length" class="text">
+          <p
+            v-for="message in props.wizard.wizardLoader.messages"
+            :key="message"
+          >
             {{ message }}
           </p>
         </div>
@@ -107,26 +117,20 @@ import type {
   UI_I_WizardStep,
   UI_I_WizardStepNavigation,
 } from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/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
     maxHeight?: string
+    wizard: any
   }>(),
   {
-    isLoading: false,
-    loaderMessages: () => [],
     isDisabledNext: false,
     isDisabledFinish: false,
     localization: () => ({}),
@@ -141,175 +145,21 @@ const emits = defineEmits<{
   (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)
+  emits('change-steps', props.wizard.selectedStepData(step))
 }
 
 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)
+  emits('change-steps', props.wizard.nextStepData)
 }
 
 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)
+  emits('change-steps', props.wizard.previousStepData)
 }
-
-watch(
-  () => props.selectedScheme,
-  (newValue: number[]) => {
-    steps.value = props.steps.filter((step: UI_I_WizardStep) =>
-      newValue.includes(step.id)
-    )
-  },
-  { deep: true, immediate: true }
-)
-watch(
-  () => props.steps,
-  (newValue: UI_I_WizardStep[]) => {
-    steps.value = newValue.filter((step: UI_I_WizardStep) =>
-      props.selectedScheme.includes(step.id)
-    )
-  },
-  { deep: true, immediate: true }
-)
 </script>
 
 <style scoped lang="scss">

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

@@ -5,6 +5,7 @@ import {
   UI_I_Loader,
   UI_I_ValidationReturn,
   UI_I_WizardStep,
+  UI_I_WizardStepNavigation,
 } from '~/components/atoms/wizard/lib/models/interfaces'
 import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
 
@@ -18,6 +19,11 @@ export default class Wizard {
   private _waitingStepId: Ref<number>
   selectedScheme: ComputedRef<number[]>
   alertMessages: ComputedRef<string[][]>
+  stepsInSelectedScheme: ComputedRef<UI_I_WizardStep[]>
+  stepsInSelectedSchemeWithStatus: ComputedRef<UI_I_WizardStepNavigation[]>
+  isLastStepCom: ComputedRef<boolean>
+  isFirstStepCom: ComputedRef<boolean>
+  selectedStepCom: ComputedRef<UI_I_WizardStep>
 
   constructor(steps: UI_I_WizardStep[], stepsSchemeInitial: number[][]) {
     this._steps = ref<UI_I_WizardStep[]>(useDeepCopy(steps))
@@ -33,6 +39,7 @@ export default class Wizard {
     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(
@@ -42,6 +49,56 @@ export default class Wizard {
         )
       )
     )
+    this.stepsInSelectedScheme = computed<UI_I_WizardStep[]>(() =>
+      this._steps.value.filter((step: UI_I_WizardStep) =>
+        this.selectedScheme.value.includes(step.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[] {
@@ -87,6 +144,128 @@ export default class Wizard {
     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
+      }
+    )
+  }
+
+  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
 
@@ -317,7 +496,12 @@ export default class Wizard {
         validation.stepHasError && this.goToFirstInvalidStep()
 
         return
-      } else if (this.isLastStep() && finalValidationFunc) {
+      } else if (
+        (this.isLastStep() ||
+          nextStep.id ===
+            this.selectedScheme.value[this.selectedScheme.value.length - 1]) &&
+        finalValidationFunc
+      ) {
         const finalValidation: UI_I_ValidationReturn =
           await finalValidationFunc(value, currentStep, nextStep)
 
@@ -474,6 +658,10 @@ export default class Wizard {
   }
 
   isLastStep(): boolean {
+    console.log(
+      this.selectedScheme.value[this.selectedScheme.value.length - 2],
+      this.selectedStepId
+    )
     return (
       this.selectedScheme.value[this.selectedScheme.value.length - 2] ===
       this.selectedStepId

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

@@ -2,7 +2,7 @@
   <div class="clr-wizard-stepnav">
     <div class="clr-wizard-stepnav-list">
       <div
-        v-for="(step, key) in steps"
+        v-for="(step, key) in props.steps"
         :key="key"
         :class="[
           'clr-wizard clr-wizard-stepnav-item clr-nav-link nav-item',
@@ -27,42 +27,16 @@
 </template>
 
 <script setup lang="ts">
-import type {
-  UI_I_WizardStep,
-  UI_I_WizardStepNavigation,
-} from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_WIZARD_STATUS } from '~/components/atoms/wizard/lib/models/enums'
+import type { UI_I_WizardStepNavigation } from '~/components/atoms/wizard/lib/models/interfaces'
 
 const props = withDefaults(
   defineProps<{
-    steps: UI_I_WizardStep[]
-    wasCompleted: boolean
+    steps: UI_I_WizardStepNavigation[]
     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
 }>()