Merge pull request #1295 from bcgov/stories/ecer-1563

ECER-1563: Add consent screen and refactor Breadcrumb component

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) {