Adjust breadcrumb instances and remove items

Author: pcatkins

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

@@ -1,8 +1,6 @@
 <template>
   <v-container>
-    <v-breadcrumbs class="pl-0" :items="items" color="primary">
-      <template #divider>/</template>
-    </v-breadcrumbs>
+    <Breadcrumb />
     <div class="d-flex flex-column ga-3">
       <h1 class="mt-5">Professional development</h1>
       <v-row>
@@ -270,7 +268,7 @@ import type { Components } from "@/types/openapi";
 import { formatDate } from "@/utils/format";
 import { isNumber } from "@/utils/formInput";
 import * as Rules from "@/utils/formRules";
-
+import Breadcrumb from "@/components/Breadcrumb.vue";
 import type { FileItem } from "./UploadFileItem.vue";
 
 interface ProfessionalDevelopmentData {
@@ -281,7 +279,7 @@ interface ProfessionalDevelopmentData {
 
 export default defineComponent({
   name: "AddProfessionalDevelopment",
-  components: { FileUploader, EceTextField, EceDateInput },
+  components: { FileUploader, EceTextField, EceDateInput, Breadcrumb },
   props: {
     applicationId: {
       type: String,
@@ -309,36 +307,13 @@ export default defineComponent({
     };
   },
   data() {
-    const items = [
-      {
-        title: "Home",
-        disabled: false,
-        href: "/",
-      },
-      {
-        title: "Application",
-        disabled: false,
-        href: `/manage-application/${this.applicationId}`,
-      },
-      {
-        title: "Professional development",
-        disabled: false,
-        href: `/manage-application/${this.applicationId}/professional-development`,
-      },
-      {
-        title: "Add",
-        disabled: true,
-        href: `/manage-application/${this.applicationId}/professional-development/add`,
-      },
-    ];
-
     const professionalDevelopment: ProfessionalDevelopmentData & Components.Schemas.ProfessionalDevelopment = {
       selection: [],
       areAttachedFilesValid: true,
       isFileUploadInProgress: false,
     };
 
-    return { items, professionalDevelopment, Rules };
+    return { professionalDevelopment, Rules };
   },
   computed: {
     applicationType() {

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

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <Breadcrumb :items="items" />
+    <Breadcrumb />
 
     <!-- Renewal -->
     <template v-if="applicationStore.isDraftApplicationRenewal">
@@ -107,53 +107,7 @@ export default defineComponent({
     return { applicationStore, certificationStore, userStore, router };
   },
   data() {
-    const applicationStore = useApplicationStore();
-    const userStore = useUserStore();
-
-    let items: { title: string; disabled: boolean; href: string }[] = [
-      {
-        title: "Home",
-        disabled: false,
-        href: "/",
-      },
-    ];
-
-    if (applicationStore.isDraftApplicationLaborMobility) {
-      items.push(
-        {
-          title: "Check your transfer eligibility",
-          disabled: false,
-          href: "/application/transfer",
-        },
-        {
-          title: "Requirements",
-          disabled: true,
-          href: "/application/certification/requirements",
-        },
-      );
-    } else if (applicationStore.isDraftApplicationRenewal || userStore.isRegistrant) {
-      items.push({
-        title: "Requirements",
-        disabled: true,
-        href: "/application/certification/requirements",
-      });
-    } else {
-      items.push(
-        {
-          title: "Application types",
-          disabled: false,
-          href: "/application/certification",
-        },
-        {
-          title: "Requirements",
-          disabled: true,
-          href: "/application/certification/requirements",
-        },
-      );
-    }
-
     return {
-      items,
       specializationSelection: [] as Components.Schemas.CertificationType[],
     };
   },

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

@@ -1,9 +1,6 @@
 <template>
   <v-container>
-    <v-breadcrumbs class="pl-0" :items="items" color="primary">
-      <template #divider>/</template>
-    </v-breadcrumbs>
-
+    <Breadcrumb />
     <ApplicationCertificationTypeHeader :certification-types="applicationStore.applications?.[0]?.certificationTypes || []" class="pb-5" />
     <h2>Status</h2>
     <p class="pb-3">It is a 3-step process to apply.</p>
@@ -88,7 +85,7 @@
         :go-to="
           () =>
             router.push({
-              name: 'viewCharacterReference',
+              name: 'view-character-reference',
               params: { applicationId: route.params.applicationId, referenceId: reference.id?.toString() },
             })
         "
@@ -220,7 +217,7 @@
           :go-to="
             () =>
               router.push({
-                name: 'viewCharacterReference',
+                name: 'view-character-reference',
                 params: { applicationId: route.params.applicationId, referenceId: reference.id?.toString() },
               })
           "
@@ -261,6 +258,7 @@ import ApplicationSummaryCharacterReferenceListItem from "./ApplicationSummaryCh
 import ApplicationSummaryTranscriptListItem from "./ApplicationSummaryTranscriptListItem.vue";
 import ApplicationSummaryHeader from "./ApplicationSummaryHeader.vue";
 import { useConfigStore } from "@/store/config";
+import Breadcrumb from "@/components/Breadcrumb.vue";
 
 export default defineComponent({
   name: "ApplicationSummary",
@@ -270,6 +268,7 @@ export default defineComponent({
     ApplicationSummaryCharacterReferenceListItem,
     ApplicationSummaryActionListItem,
     ApplicationSummaryHeader,
+    Breadcrumb,
   },
   setup: async () => {
     const { smAndUp } = useDisplay();
@@ -297,22 +296,7 @@ export default defineComponent({
       route,
     };
   },
-  data() {
-    return {
-      items: [
-        {
-          title: "Home",
-          disabled: false,
-          href: "/",
-        },
-        {
-          title: "Application",
-          disabled: true,
-          href: "application",
-        },
-      ],
-    };
-  },
+
   computed: {
     currentStep() {
       switch (this.applicationStatus?.status) {

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

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <Breadcrumb :items="items" />
+    <Breadcrumb />
     <div v-for="certificationType in certificationTypes" :key="certificationType">
       <ECEAssistantRenewalRequirements v-if="certificationType === CertificationType.ECE_ASSISTANT" />
       <ECEOneYearRenewalRequirements v-if="certificationType === CertificationType.ONE_YEAR" />
@@ -36,21 +36,5 @@ export default defineComponent({
   setup: () => {
     return { CertificationType };
   },
-  data() {
-    return {
-      items: [
-        {
-          title: "Home",
-          disabled: false,
-          href: "/",
-        },
-        {
-          title: "Renew",
-          disabled: true,
-          href: "/application/certification/requirements",
-        },
-      ],
-    };
-  },
 });
 </script>

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

@@ -0,0 +1,40 @@
+<template>
+  <v-container>
+    <Breadcrumb />
+    <h1 class="mb-5">Parent or guardian consent will be required</h1>
+    <div class="d-flex flex-column ga-3 my-6">
+      <p>Applicants under 19 years old need consent from a parent or legal guardian to apply for certification.</p>
+      <p>To provide consent, you will need to:</p>
+      <ol class="ml-10">
+        <li>Choose the type of certification you want to apply for</li>
+        <li>Submit your application form</li>
+        <li>Get a parent or guardian to sign the consent form we will send you in a message (it will include your application details)</li>
+        <li>Send us a photo or scanned copy of the signed consent form</li>
+      </ol>
+    </div>
+    <v-btn class="mt-6" rounded="lg" color="primary" @click="continueClick" id="btnContinue">Continue</v-btn>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import Breadcrumb from "@/components/Breadcrumb.vue";
+
+import { useRouter } from "vue-router";
+
+export default defineComponent({
+  name: "ConsentRequired",
+  components: { Breadcrumb },
+  async setup() {
+    const router = useRouter();
+
+    return { router };
+  },
+
+  methods: {
+    async continueClick() {
+      this.router.push({ name: "application-requirements" });
+    },
+  },
+});
+</script>

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

@@ -1,6 +1,6 @@
 <template>
   <v-container>
-    <Breadcrumb :items="items" />
+    <Breadcrumb />
     <h1 class="mb-5">Declaration and consent</h1>
     <p>You must read and agree to the following to apply for certification.</p>
     <br />
@@ -73,71 +73,7 @@ export default defineComponent({
       userStore.setUserProfile(userProfile);
     }
 
-    const items = applicationStore.isDraftApplicationLaborMobility
-      ? [
-          {
-            title: "Home",
-            disabled: false,
-            href: "/",
-          },
-          {
-            title: "Check your transfer eligibility",
-            disabled: false,
-            href: "/application/transfer",
-          },
-          {
-            title: "Requirements",
-            disabled: false,
-            href: "/application/certification/requirements",
-          },
-          {
-            title: "Declaration",
-            disabled: true,
-            href: "/application/declaration",
-          },
-        ]
-      : applicationStore.isDraftApplicationRenewal || userStore.isRegistrant
-        ? [
-            {
-              title: "Home",
-              disabled: false,
-              href: "/",
-            },
-            {
-              title: "Requirements",
-              disabled: false,
-              href: "/application/certification/requirements",
-            },
-            {
-              title: "Declaration",
-              disabled: true,
-              href: "/application/declaration",
-            },
-          ]
-        : [
-            {
-              title: "Home",
-              disabled: false,
-              href: "/",
-            },
-            {
-              title: "Application types",
-              disabled: false,
-              href: "/application/certification",
-            },
-            {
-              title: "Requirements",
-              disabled: false,
-              href: "/application/certification/requirements",
-            },
-            {
-              title: "Declaration",
-              disabled: true,
-              href: "/application/declaration",
-            },
-          ];
-
-    return { items, Rules, userStore, applicationStore, alertStore, loadingStore, configStore, router };
+    return { Rules, userStore, applicationStore, alertStore, loadingStore, configStore, router };
   },
   data() {
     return {