Merge pull request #194 from bcgov/bugs/ecer-1674

bug fix for certification type to reflect in wizard header
bcgov · Apr 12, 2024 · 62b89d8 · 62b89d8
2 parents f0f7030 + f2fb602
commit 62b89d8
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Wizard.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Wizard.vue
@@ -1,5 +1,5 @@
 <template>
-  <WizardHeader class="mb-6" />
+  <slot name="header"></slot>
   <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">
@@ -46,7 +46,6 @@ import { defineComponent, type PropType } from "vue";
 
 import DeclarationStepContent from "@/components/DeclarationStepContent.vue";
 import EceForm from "@/components/Form.vue";
-import WizardHeader from "@/components/WizardHeader.vue";
 import applicationWizard from "@/config/application-wizard";
 import { useAlertStore } from "@/store/alert";
 import { useCertificationTypeStore } from "@/store/certificationType";
@@ -56,7 +55,7 @@ import type { Step, Wizard } from "@/types/wizard";
 
 export default defineComponent({
   name: "Wizard",
-  components: { WizardHeader, EceForm, DeclarationStepContent },
+  components: { EceForm, DeclarationStepContent },
   props: {
     wizard: {
       type: Object as PropType<Wizard>,

diff --git a/...Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/WizardHeader.vue b/...Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/WizardHeader.vue
@@ -11,7 +11,7 @@
     </v-row>
     <v-row justify="space-between" class="pb-6">
       <v-col offset-md="1" cols="12" sm="8">
-        <h3>Application for ECE Assistant Certification</h3>
+        <h3>{{ `Application for ${certificationType} Certification` }}</h3>
       </v-col>
       <v-col v-if="false" cols="auto" offset="1">
         <v-btn class="mr-2" rounded="lg" variant="outlined" color="primary">Cancel Application</v-btn>
@@ -23,8 +23,17 @@
 <script lang="ts">
 import { defineComponent } from "vue";
 
+import { useWizardStore } from "@/store/wizard";
+
 export default defineComponent({
   name: "WizardHeader",
+  setup() {
+    const wizardStore = useWizardStore();
+
+    return {
+      wizardStore,
+    };
+  },
   data: () => ({
     items: [
       {
@@ -40,5 +49,29 @@ export default defineComponent({
       },
     ],
   }),
+  computed: {
+    certificationType() {
+      let certificationType = "";
+      if (this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.certificationType.form.inputs.certificationSelection.id].includes("EceAssistant")) {
+        certificationType = "ECE Assistant";
+      } else if (this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.certificationType.form.inputs.certificationSelection.id].includes("OneYear")) {
+        certificationType = "One Year";
+      } else if (
+        this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.certificationType.form.inputs.certificationSelection.id].includes("FiveYears")
+      ) {
+        certificationType = "Five Year";
+
+        if (this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.certificationType.form.inputs.certificationSelection.id].includes("Sne")) {
+          certificationType += " & Special Needs Educator (SNE)";
+        }
+        if (this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps.certificationType.form.inputs.certificationSelection.id].includes("Ite")) {
+          certificationType += " & Infant and Toddle Educator (ITE)";
+        }
+      } else {
+        certificationType += "ECE Assistant";
+      }
+      return certificationType;
+    },
+  },
 });
 </script>
diff --git a/...ts.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue b/...ts.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue
@@ -1,5 +1,8 @@
 <template>
   <Wizard :ref="'wizard'" :wizard="applicationWizard">
+    <template #header>
+      <WizardHeader class="mb-6" />
+    </template>
     <template #PrintPreview>
       <ConfirmationDialog
         :config="{
@@ -68,10 +71,11 @@ import { useUserStore } from "@/store/user";
 import { useWizardStore } from "@/store/wizard";
 
 import { AddressType } from "../inputs/EceAddresses.vue";
+import WizardHeader from "../WizardHeader.vue";
 
 export default defineComponent({
   name: "Application",
-  components: { Wizard, ConfirmationDialog },
+  components: { Wizard, WizardHeader, ConfirmationDialog },
   setup: async () => {
     const wizardStore = useWizardStore();
     const userStore = useUserStore();