Merge pull request #155 from bcgov/Stories/ECER-966

ECER-966: Edit in preview page

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

@@ -37,7 +37,6 @@ export default defineComponent({
     },
     totalHours(): number {
       return this.referenceList.reduce((acc, reference) => {
-
         return acc + (reference.hours as number);
       }, 0);
     },

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

@@ -6,7 +6,7 @@
           <h3 class="font-black">Certification Selection</h3>
         </v-col>
         <v-col align="end">
-          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
+          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" @click="setWizard('CertificationType')" />
         </v-col>
       </v-row>
       <v-row>
@@ -25,9 +25,10 @@
 import { defineComponent } from "vue";
 
 import PreviewCard from "@/components/PreviewCard.vue";
+import { useApplicationStore } from "@/store/application";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
-
+import type { Components } from "@/types/openapi";
 export default defineComponent({
   name: "EceCertificationTypePreview",
   components: {
@@ -41,9 +42,10 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
-
+    const applicationStore = useApplicationStore();
     return {
       wizardStore,
+      applicationStore,
     };
   },
   computed: {
@@ -68,5 +70,11 @@ export default defineComponent({
       return certificationType;
     },
   },
+  methods: {
+    setWizard(stage: Components.Schemas.PortalStage) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
 });
 </script>

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

@@ -6,7 +6,7 @@
           <h3 class="font-black">Character Reference</h3>
         </v-col>
         <v-col align="end">
-          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
+          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" @click="setWizard('CharacterReferences')" />
         </v-col>
       </v-row>
       <v-row>
@@ -49,6 +49,7 @@
 import { defineComponent } from "vue";
 
 import PreviewCard from "@/components/PreviewCard.vue";
+import { useApplicationStore } from "@/store/application";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
 import type { Components } from "@/types/openapi";
@@ -66,9 +67,10 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
-
+    const applicationStore = useApplicationStore();
     return {
       wizardStore,
+      applicationStore,
     };
   },
   computed: {
@@ -82,5 +84,11 @@ export default defineComponent({
       };
     },
   },
+  methods: {
+    setWizard(stage: Components.Schemas.PortalStage) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
 });
 </script>

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

@@ -6,7 +6,7 @@
           <h3 class="font-black">Contact Information</h3>
         </v-col>
         <v-col align="end">
-          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
+          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" @click="setWizard('ContactInformation')" />
         </v-col>
       </v-row>
       <v-row>
@@ -106,9 +106,10 @@ import { defineComponent } from "vue";
 
 import type { AddressesData } from "@/components/inputs/EceAddresses.vue";
 import PreviewCard from "@/components/PreviewCard.vue";
+import { useApplicationStore } from "@/store/application";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
-
+import type { Components } from "@/types/openapi";
 export default defineComponent({
   name: "EceContactInformationPreview",
   components: {
@@ -122,9 +123,10 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
-
+    const applicationStore = useApplicationStore();
     return {
       wizardStore,
+      applicationStore,
     };
   },
   computed: {
@@ -164,5 +166,11 @@ export default defineComponent({
       return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.profile.form.inputs.alternateContactNumber.id] ?? "—";
     },
   },
+  methods: {
+    setWizard(stage: Components.Schemas.PortalStage) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
 });
 </script>

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

@@ -6,7 +6,7 @@
           <h3>Education</h3>
         </v-col>
         <v-col align="end">
-          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
+          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" @click="setWizard('Education')" />
         </v-col>
       </v-row>
       <div v-for="(education, id, index) in educations" :key="id">
@@ -81,6 +81,7 @@
 import { defineComponent } from "vue";
 
 import PreviewCard from "@/components/PreviewCard.vue";
+import { useApplicationStore } from "@/store/application";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
 import type { Components } from "@/types/openapi";
@@ -98,15 +99,22 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
-
+    const applicationStore = useApplicationStore();
     return {
       wizardStore,
+      applicationStore,
     };
   },
   computed: {
     educations(): { [id: string]: Components.Schemas.Transcript } {
       return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.education.form.inputs.educationList.id];
     },
   },
+  methods: {
+    setWizard(stage: Components.Schemas.PortalStage) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
 });
 </script>

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

@@ -6,7 +6,7 @@
           <h3>Work Experience References</h3>
         </v-col>
         <v-col align="end">
-          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
+          <v-btn v-bind="props" icon="mdi-pencil" color="primary" variant="plain" @click="setWizard('WorkReferences')" />
         </v-col>
       </v-row>
       <div v-for="(experience, id, index) in references" :key="id">
@@ -49,6 +49,7 @@
 import { defineComponent } from "vue";
 
 import PreviewCard from "@/components/PreviewCard.vue";
+import { useApplicationStore } from "@/store/application";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
 import type { Components } from "@/types/openapi";
@@ -66,15 +67,23 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
+    const applicationStore = useApplicationStore();
 
     return {
       wizardStore,
+      applicationStore,
     };
   },
   computed: {
     references(): { [id: string]: Components.Schemas.WorkExperienceReference } {
       return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.workReference.form.inputs.referenceList.id];
     },
   },
+  methods: {
+    setWizard(stage: Components.Schemas.PortalStage) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
 });
 </script>

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

@@ -216,7 +216,7 @@ export default defineComponent({
           lastName: this.lastName,
           emailAddress: this.email,
           phoneNumber: this.phoneNumber,
-          hours: parseInt(this.hours),
+          hours: parseInt(this.hours!.toString()),
         };
 
         // see if we already have a clientId (which is edit), if not use the newClientId (which is add)

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

@@ -5,7 +5,6 @@ import type { Components } from "@/types/openapi";
 import type { Step, Wizard } from "@/types/wizard";
 
 import { useUserStore } from "./user";
-
 export interface WizardData {
   [key: string]: any;
 }
@@ -101,6 +100,10 @@ export const useWizardStore = defineStore("wizard", {
     setWizardData(wizardData: WizardData): void {
       this.wizardData = { ...this.wizardData, ...wizardData };
     },
+    setCurrentStep(stage: Components.Schemas.PortalStage): void {
+      const item = Object.values(this.wizardConfig.steps).findIndex((step) => step.stage === stage) + 1;
+      this.step = item;
+    },
     incrementStep(): void {
       if (this.step < Object.keys(this.wizardConfig.steps).length) {
         this.step += 1;