From f73194daba1fe29760b1feb929b10f50ee62ab70 Mon Sep 17 00:00:00 2001
From: Farzad <farzad.alankesh@quartech.com>
Date: Thu, 21 Mar 2024 11:59:32 -0700
Subject: [PATCH 1/3] ECER-966: Edit functionality added to the project.

---
 .../inputs/EceCertificationTypePreview.vue         | 14 ++++++++++----
 .../inputs/EceCharacterReferencePreview.vue        | 14 ++++++++++----
 .../inputs/EceContactInformationPreview.vue        | 14 ++++++++++----
 .../src/components/inputs/EceEducationPreview.vue  | 14 ++++++++++----
 .../inputs/EceWorkExperienceReferencePreview.vue   | 13 ++++++++++---
 .../src/store/wizard.ts                            |  6 ++++--
 6 files changed, 54 insertions(+), 21 deletions(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCertificationTypePreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCertificationTypePreview.vue
index 9b16dc2f4..cadbb019d 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCertificationTypePreview.vue
+++ b/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 @click="setWizard('CertificationType')" v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
         </v-col>
       </v-row>
       <v-row>
@@ -23,7 +23,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-
+import { useApplicationStore } from "@/store/application";
 import PreviewCard from "@/components/PreviewCard.vue";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
@@ -41,11 +41,17 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
-
+    const applicationStore = useApplicationStore();
     return {
-      wizardStore,
+      wizardStore,applicationStore,
     };
   },
+  methods:{
+    setWizard(stage:string) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
   computed: {
     certificationType() {
       let certificationType = "";
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue
index cb5a63fbc..c548cada4 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue
+++ b/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" @click="setWizard('CharacterReferences')" icon="mdi-pencil" color="primary" variant="plain" />
         </v-col>
       </v-row>
       <v-row>
@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-
+import { useApplicationStore } from "@/store/application";
 import PreviewCard from "@/components/PreviewCard.vue";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
@@ -66,11 +66,17 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
-
+    const applicationStore = useApplicationStore();
     return {
-      wizardStore,
+      wizardStore, applicationStore,
     };
   },
+  methods:{
+    setWizard(stage:string) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
   computed: {
     characterReference(): Components.Schemas.CharacterReference {
       return {
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceContactInformationPreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceContactInformationPreview.vue
index 39b5518b3..22d7834e7 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceContactInformationPreview.vue
+++ b/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 @click="setWizard('ContactInformation')" v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
         </v-col>
       </v-row>
       <v-row>
@@ -103,7 +103,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-
+import { useApplicationStore } from "@/store/application";
 import type { AddressesData } from "@/components/inputs/EceAddresses.vue";
 import PreviewCard from "@/components/PreviewCard.vue";
 import { useWizardStore } from "@/store/wizard";
@@ -122,11 +122,17 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
-
+    const applicationStore = useApplicationStore();
     return {
-      wizardStore,
+      wizardStore,applicationStore,
     };
   },
+  methods:{
+    setWizard(stage:string) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
   computed: {
     legalLastName() {
       return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.profile.form.inputs.legalLastName.id] ?? "—";
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducationPreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducationPreview.vue
index c72767ba0..9838e5c0c 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducationPreview.vue
+++ b/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 @click="setWizard('Education')" v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
         </v-col>
       </v-row>
       <div v-for="(education, id, index) in educations" :key="id">
@@ -79,7 +79,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-
+import { useApplicationStore } from "@/store/application";
 import PreviewCard from "@/components/PreviewCard.vue";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
@@ -98,11 +98,17 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
-
+    const applicationStore = useApplicationStore();
     return {
-      wizardStore,
+      wizardStore,applicationStore,
     };
   },
+  methods:{
+    setWizard(stage:string) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
   computed: {
     educations(): { [id: string]: Components.Schemas.Transcript } {
       return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.education.form.inputs.educationList.id];
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferencePreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferencePreview.vue
index b969d151d..e3f521a2d 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferencePreview.vue
+++ b/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 @click="setWizard('WorkReferences')" v-bind="props" icon="mdi-pencil" color="primary" variant="plain" />
         </v-col>
       </v-row>
       <div v-for="(experience, id, index) in references" :key="id">
@@ -47,7 +47,7 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-
+import { useApplicationStore } from "@/store/application";
 import PreviewCard from "@/components/PreviewCard.vue";
 import { useWizardStore } from "@/store/wizard";
 import type { EcePreviewProps } from "@/types/input";
@@ -66,11 +66,18 @@ export default defineComponent({
   },
   setup: () => {
     const wizardStore = useWizardStore();
+    const applicationStore = useApplicationStore();
 
     return {
-      wizardStore,
+      wizardStore,applicationStore,
     };
   },
+  methods:{
+    setWizard(stage:string) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
   computed: {
     references(): { [id: string]: Components.Schemas.WorkExperienceReference } {
       return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.workReference.form.inputs.referenceList.id];
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts
index c889446f3..cde9b18d0 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts
@@ -1,9 +1,7 @@
 import { defineStore } from "pinia";
-
 import { AddressType } from "@/components/inputs/EceAddresses.vue";
 import type { Components } from "@/types/openapi";
 import type { Step, Wizard } from "@/types/wizard";
-
 import { useUserStore } from "./user";
 
 export interface WizardData {
@@ -101,6 +99,10 @@ export const useWizardStore = defineStore("wizard", {
     setWizardData(wizardData: WizardData): void {
       this.wizardData = { ...this.wizardData, ...wizardData };
     },
+    setCurrentStep(stage: string): 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;

From e71414ddedb6c7ea19a04d2a081b7807ea940461 Mon Sep 17 00:00:00 2001
From: Farzad <farzad.alankesh@quartech.com>
Date: Fri, 22 Mar 2024 14:00:57 -0700
Subject: [PATCH 2/3] ECER-966: minor warning fix

---
 .../src/components/inputs/EceWorkExperienceReferences.vue       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferences.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferences.vue
index 2584f70f8..792518c7b 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferences.vue
+++ b/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)

From 3798a5119fe28aa400d7c685902f45c2c67cd095 Mon Sep 17 00:00:00 2001
From: Farzad <farzad.alankesh@quartech.com>
Date: Mon, 25 Mar 2024 10:19:05 -0700
Subject: [PATCH 3/3] ECER-966: SetStage input changed to PortalStage (PR
 feedbacks)

---
 .../WorkExperienceReferenceProgressBar.vue    |  1 -
 .../inputs/EceCertificationTypePreview.vue    | 22 ++++++++++---------
 .../inputs/EceCharacterReferencePreview.vue   | 20 +++++++++--------
 .../inputs/EceContactInformationPreview.vue   | 22 ++++++++++---------
 .../components/inputs/EceEducationPreview.vue | 20 +++++++++--------
 .../EceWorkExperienceReferencePreview.vue     | 20 +++++++++--------
 .../src/store/wizard.ts                       |  5 +++--
 7 files changed, 60 insertions(+), 50 deletions(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/WorkExperienceReferenceProgressBar.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/WorkExperienceReferenceProgressBar.vue
index af583dfe6..b286a62eb 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/WorkExperienceReferenceProgressBar.vue
+++ b/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);
     },
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCertificationTypePreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCertificationTypePreview.vue
index cadbb019d..fbeaedd60 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCertificationTypePreview.vue
+++ b/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 @click="setWizard('CertificationType')" 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>
@@ -23,11 +23,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useApplicationStore } from "@/store/application";
+
 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: {
@@ -43,15 +44,10 @@ export default defineComponent({
     const wizardStore = useWizardStore();
     const applicationStore = useApplicationStore();
     return {
-      wizardStore,applicationStore,
+      wizardStore,
+      applicationStore,
     };
   },
-  methods:{
-    setWizard(stage:string) {
-      this.wizardStore.setCurrentStep(stage);
-      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
-    },
-  },
   computed: {
     certificationType() {
       let certificationType = "";
@@ -74,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>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue
index c548cada4..01345a69e 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue
+++ b/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" @click="setWizard('CharacterReferences')" 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>
@@ -47,8 +47,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useApplicationStore } from "@/store/application";
+
 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";
@@ -68,15 +69,10 @@ export default defineComponent({
     const wizardStore = useWizardStore();
     const applicationStore = useApplicationStore();
     return {
-      wizardStore, applicationStore,
+      wizardStore,
+      applicationStore,
     };
   },
-  methods:{
-    setWizard(stage:string) {
-      this.wizardStore.setCurrentStep(stage);
-      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
-    },
-  },
   computed: {
     characterReference(): Components.Schemas.CharacterReference {
       return {
@@ -88,5 +84,11 @@ export default defineComponent({
       };
     },
   },
+  methods: {
+    setWizard(stage: Components.Schemas.PortalStage) {
+      this.wizardStore.setCurrentStep(stage);
+      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
+    },
+  },
 });
 </script>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceContactInformationPreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceContactInformationPreview.vue
index 22d7834e7..a1cc0cf43 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceContactInformationPreview.vue
+++ b/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 @click="setWizard('ContactInformation')" 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>
@@ -103,12 +103,13 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useApplicationStore } from "@/store/application";
+
 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: {
@@ -124,15 +125,10 @@ export default defineComponent({
     const wizardStore = useWizardStore();
     const applicationStore = useApplicationStore();
     return {
-      wizardStore,applicationStore,
+      wizardStore,
+      applicationStore,
     };
   },
-  methods:{
-    setWizard(stage:string) {
-      this.wizardStore.setCurrentStep(stage);
-      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
-    },
-  },
   computed: {
     legalLastName() {
       return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.profile.form.inputs.legalLastName.id] ?? "—";
@@ -170,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>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducationPreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducationPreview.vue
index 9838e5c0c..2623ce384 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducationPreview.vue
+++ b/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 @click="setWizard('Education')" 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">
@@ -79,8 +79,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useApplicationStore } from "@/store/application";
+
 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";
@@ -100,19 +101,20 @@ export default defineComponent({
     const wizardStore = useWizardStore();
     const applicationStore = useApplicationStore();
     return {
-      wizardStore,applicationStore,
+      wizardStore,
+      applicationStore,
     };
   },
-  methods:{
-    setWizard(stage:string) {
-      this.wizardStore.setCurrentStep(stage);
-      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
-    },
-  },
   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>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferencePreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferencePreview.vue
index e3f521a2d..2926211e4 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceWorkExperienceReferencePreview.vue
+++ b/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 @click="setWizard('WorkReferences')" 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">
@@ -47,8 +47,9 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useApplicationStore } from "@/store/application";
+
 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";
@@ -69,19 +70,20 @@ export default defineComponent({
     const applicationStore = useApplicationStore();
 
     return {
-      wizardStore,applicationStore,
+      wizardStore,
+      applicationStore,
     };
   },
-  methods:{
-    setWizard(stage:string) {
-      this.wizardStore.setCurrentStep(stage);
-      this.applicationStore.draftApplication.stage = this.wizardStore.currentStepStage;
-    },
-  },
   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>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts
index cde9b18d0..e56b9df83 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/store/wizard.ts
@@ -1,9 +1,10 @@
 import { defineStore } from "pinia";
+
 import { AddressType } from "@/components/inputs/EceAddresses.vue";
 import type { Components } from "@/types/openapi";
 import type { Step, Wizard } from "@/types/wizard";
-import { useUserStore } from "./user";
 
+import { useUserStore } from "./user";
 export interface WizardData {
   [key: string]: any;
 }
@@ -99,7 +100,7 @@ export const useWizardStore = defineStore("wizard", {
     setWizardData(wizardData: WizardData): void {
       this.wizardData = { ...this.wizardData, ...wizardData };
     },
-    setCurrentStep(stage: string): void {
+    setCurrentStep(stage: Components.Schemas.PortalStage): void {
       const item = Object.values(this.wizardConfig.steps).findIndex((step) => step.stage === stage) + 1;
       this.step = item;
     },