ECER-973: Stepper for Application Certification

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Wizard.vue

@@ -1,23 +1,37 @@
 <template>
   <WizardHeader class="mb-6" />
-  <v-stepper v-model="wizardStore.step" min-height="100dvh" flat color="primary" :items="getStepTitles()" :alt-labels="true" :mobile="$vuetify.display.mobile">
-    <template v-for="step in wizard.steps" :key="step.stage" #[step.key]>
-      <v-container>
-        <h3>{{ step.title }}</h3>
-        <h4>{{ step.subtitle }}</h4>
-        <DeclarationStepContent v-if="step.stage == 'Declaration'" class="mt-6" />
-        <v-row>
-          <v-col cols="12">
-            <EceForm
-              :form="step.form"
-              :form-data="wizardStore.wizardData"
-              @updated-form-data="wizardStore.setWizardData"
-              @updated-validation="$emit('updatedValidation', $event)"
-            />
-          </v-col>
-        </v-row>
-      </v-container>
-    </template>
+  <v-stepper v-model="wizardStore.step" min-height="100dvh" :alt-labels="true" :mobile="$vuetify.display.mobile">
+    <v-stepper-header>
+      <template v-for="(step, index) in Object.values(wizard.steps)" :key="step.stage">
+        <v-stepper-item
+          color="primary"
+          :step="wizardStore.step"
+          :value="index + 1"
+          :title="step.title"
+          :rules="wizardStore.step <= index + 1 ? [] : [() => wizardStore.validationState[step.stage]]"
+        ></v-stepper-item>
+        <v-divider v-if="index !== Object.values(wizard.steps).length - 1" :key="`divider-${index}`" />
+      </template>
+    </v-stepper-header>
+    <v-stepper-window v-model="wizardStore.step">
+      <v-stepper-window-item v-for="(step, index) in Object.values(wizard.steps)" :key="step.stage" :value="index + 1">
+        <v-container>
+          <h3>{{ step.title }}</h3>
+          <h4>{{ step.subtitle }}</h4>
+          <DeclarationStepContent v-if="step.stage == 'Declaration'" class="mt-6" />
+          <v-row>
+            <v-col cols="12">
+              <EceForm
+                :form="step.form"
+                :form-data="wizardStore.wizardData"
+                @updated-form-data="wizardStore.setWizardData"
+                @updated-validation="$emit('updatedValidation', $event)"
+              />
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-stepper-window-item>
+    </v-stepper-window>
     <template #actions>
       <slot name="actions"></slot>
     </template>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/preview-form.ts

@@ -15,7 +15,7 @@ const previewForm: Form = {
       props: {},
       cols: {
         md: 8,
-        lg: 6,
+        lg: 8,
         xl: 6,
       },
     },
@@ -25,7 +25,7 @@ const previewForm: Form = {
       props: {},
       cols: {
         md: 8,
-        lg: 6,
+        lg: 8,
         xl: 6,
       },
     },
@@ -35,7 +35,7 @@ const previewForm: Form = {
       props: {},
       cols: {
         md: 8,
-        lg: 6,
+        lg: 8,
         xl: 6,
       },
     },
@@ -45,7 +45,7 @@ const previewForm: Form = {
       props: {},
       cols: {
         md: 8,
-        lg: 6,
+        lg: 8,
         xl: 6,
       },
     },
@@ -55,7 +55,7 @@ const previewForm: Form = {
       props: {},
       cols: {
         md: 8,
-        lg: 6,
+        lg: 8,
         xl: 6,
       },
     },

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts

@@ -15,6 +15,10 @@ export interface WizardState {
   wizardData: WizardData;
 }
 
+export type PortalStageValidation = {
+  [key in Components.Schemas.PortalStage]: boolean;
+};
+
 export const useWizardStore = defineStore("wizard", {
   state: (): WizardState => ({
     step: 1,
@@ -23,7 +27,9 @@ export const useWizardStore = defineStore("wizard", {
   }),
   persist: true,
   getters: {
-    steps: (state) => Object.values(state.wizardConfig.steps),
+    steps(state): Step[] {
+      return Object.values(state.wizardConfig.steps);
+    },
     currentStep(state): Step {
       return this.steps[state.step - 1];
     },
@@ -33,6 +39,27 @@ export const useWizardStore = defineStore("wizard", {
     currentStepStage(state): Components.Schemas.PortalStage {
       return this.steps[state.step - 1].stage;
     },
+    validationState(state): PortalStageValidation {
+      let totalHours = 0;
+      const referenceListPath = state.wizardData[this.wizardConfig.steps.workReference.form.inputs.referenceList.id];
+      if (Array.isArray(referenceListPath) && referenceListPath.length > 0) {
+        totalHours = referenceListPath.reduce((sum, currentReference) => {
+          return sum + (currentReference.hours || 0);
+        }, 0);
+      }
+
+      return {
+        CertificationType: (state.wizardData[this.wizardConfig.steps.certificationType.form.inputs.certificationSelection.id].length || []) > 0,
+        Declaration:
+          state.wizardData[this.wizardConfig.steps.declaration.form.inputs.signedDate.id] !== null &&
+          state.wizardData[this.wizardConfig.steps.declaration.form.inputs.consentCheckbox.id] === true,
+        ContactInformation: true,
+        Education: Object.values(state.wizardData[this.wizardConfig.steps.education.form.inputs.educationList.id]).length > 0,
+        CharacterReferences: (state.wizardData[this.wizardConfig.steps.characterReferences.form.inputs.characterReferences.id].length || []) > 0,
+        WorkReferences: Object.values(state.wizardData[this.wizardConfig.steps.workReference.form.inputs.referenceList.id]).length > 0 && totalHours >= 500,
+        Review: true,
+      };
+    },
   },
   actions: {
     initializeWizard(wizard: Wizard, draftApplication: Components.Schemas.DraftApplication): void {
@@ -107,11 +134,13 @@ export const useWizardStore = defineStore("wizard", {
     incrementStep(): void {
       if (this.step < Object.keys(this.wizardConfig.steps).length) {
         this.step += 1;
+        window.scrollTo(0, 0);
       }
     },
     decrementStep(): void {
       if (this.step > 1) {
         this.step -= 1;
+        window.scrollTo(0, 0);
       }
     },
   },

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/styles/main.scss

@@ -1,7 +1,6 @@
 @import "./typography.scss";
 @import "./v-btn.scss";
 @import "./v-navigation-drawer.scss";
-@import "./v-stepper.scss";
 @import "./v-expansion-panel.scss";
 @import "./v-radio.scss";
 @import "./v-checkbox.scss";