Skip to content

Commit 67cecbb

Browse files
pcatkinspcatkins
committed
Content changes
1 parent 9f04326 commit 67cecbb

File tree

7 files changed

+137
-29
lines changed

7 files changed

+137
-29
lines changed

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -351,8 +351,8 @@ export default defineComponent({
351351
case "certificate-terms-and-conditions":
352352
return [...this.baseItems, { title: "Terms and conditions", disabled: true, href: `/certificate-terms-and-conditions/${params.certificationId}` }];
353353
354-
case "my-other-certifications":
355-
return [...this.baseItems, { title: "My other certifications", disabled: true, href: "/my-other-certifications" }];
354+
case "my-certifications":
355+
return [...this.baseItems, { title: "My certifications", disabled: true, href: "/my-certifications" }];
356356
357357
case "profile":
358358
return [...this.baseItems, { title: "Profile", disabled: true, href: "/profile" }];

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,21 @@
2626
<!-- Certificate Inline on mobile -->
2727
<template v-if="!mdAndUp">
2828
<a v-if="isCertificateActive && doesCertificateFileExist" :href="pdfUrl" target="_blank">{{ generateFileDisplayName() }}</a>
29-
<span v-if="certificateGenerationRequested" class="d-flex align-center ga-4">
29+
<span v-if="isCertificateActive && certificateGenerationRequested" class="d-flex align-center ga-4">
3030
<v-progress-circular class="mb-2" color="primary" indeterminate></v-progress-circular>
3131
<h4>Your certificate is being generated. This may take up to 10 minutes. Please check back later to download it.</h4>
3232
</span>
3333
</template>
3434

35-
<RenewAction v-if="!hasApplication" :certification="certification" />
35+
<RenewAction v-if="!hasApplication && isLatestOfType" :certification="certification" />
3636
</div>
3737
</v-col>
3838
<v-col v-if="mdAndUp" cols="4" class="text-center d-flex justify-end align-center" style="min-width: 215px">
3939
<div v-if="isCertificateActive && doesCertificateFileExist" class="d-flex flex-column align-center justify-center">
4040
<img src="../assets/certificate.svg" width="215" class="logo" alt="Certificate" />
4141
<a v-if="isCertificateActive && doesCertificateFileExist" :href="pdfUrl" target="_blank">{{ generateFileDisplayName() }}</a>
4242
</div>
43-
<div v-if="certificateGenerationRequested" class="mt-8">
43+
<div v-if="isCertificateActive && certificateGenerationRequested" class="mt-8">
4444
<v-progress-circular class="mb-2" color="primary" indeterminate></v-progress-circular>
4545
<h4>Your certificate is being generated. This may take up to 10 minutes. Please check back later to download it.</h4>
4646
</div>
@@ -81,6 +81,10 @@ export default defineComponent({
8181
type: Boolean,
8282
default: false,
8383
},
84+
isLatestOfType: {
85+
type: Boolean,
86+
default: false,
87+
},
8488
},
8589
setup() {
8690
const certificationStore = useCertificationStore();

‎src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/CertificationList.stories.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,30 @@ const meta = {
3535
],
3636
certificateConditions: [],
3737
},
38+
{
39+
id: "f403a278-8020-f011-998a-6045bdf9b81b",
40+
name: "KARISSA CAULKINS",
41+
number: "016359",
42+
expiryDate: "2026-04-23T00:00:00",
43+
effectiveDate: "2025-04-23T00:00:00",
44+
date: "2025-04-23T00:00:00",
45+
printDate: null,
46+
hasConditions: false,
47+
levelName: "ECE Assistant",
48+
statusCode: "Expired",
49+
certificatePDFGeneration: "Yes",
50+
levels: [{ id: "556b387e-8020-f011-998a-7c1e52871876", type: "Assistant" }],
51+
files: [
52+
{
53+
id: "3979ff88-f262-4747-b294-c289caa2402a",
54+
url: "ecer_certificate/f403a278-8020-f011-998a-6045bdf9b81b",
55+
extention: ".pdf",
56+
size: "322.00 KB",
57+
name: "Cover Letter-016359.pdf",
58+
},
59+
],
60+
certificateConditions: [],
61+
},
3862
{
3963
id: "f403a278-8020-f011-998a-6045bdf9b81b",
4064
name: "KARISSA CAULKINS",

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

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,29 @@
11
<template>
22
<v-row>
3-
<v-col cols="12" v-for="(cert, index) in certifications" :key="index">
4-
<CertificationCard :certification="cert" :has-application="applicationStore.hasApplication" />
3+
<v-col cols="12">
4+
<div class="d-flex">
5+
<p class="align-self-center mr-4"><strong>SHOW:</strong></p>
6+
<v-sheet class="">
7+
<v-btn-toggle v-model="filter" color="primary" mandatory>
8+
<v-btn value="latest">Latest</v-btn>
9+
<v-btn value="all">All</v-btn>
10+
</v-btn-toggle>
11+
</v-sheet>
12+
</div>
13+
</v-col>
14+
<v-col cols="12">
15+
<p v-if="filter === 'latest'">Showing only your most recent certificate of each type</p>
16+
<p v-else>Showing your entire certification history</p>
17+
</v-col>
18+
<v-col cols="12" v-for="(cert, index) in displayCertifications" :key="index">
19+
<CertificationCard :certification="cert" :has-application="applicationStore.hasApplication" :is-latest-of-type="latestCertifications.includes(cert)" />
520
</v-col>
621
</v-row>
722
</template>
823

924
<script lang="ts">
1025
import { defineComponent, type PropType } from "vue";
26+
import { orderBy } from "lodash";
1127
import type { Components } from "@/types/openapi";
1228
import CertificationCard from "@/components/CertificationCard.vue";
1329
import { useApplicationStore } from "@/store/application";
@@ -23,9 +39,83 @@ export default defineComponent({
2339
required: true,
2440
},
2541
},
42+
computed: {
43+
// Helper function to get the highest priority certification type
44+
getCertificationTypePriority() {
45+
return (cert: Components.Schemas.Certification) => {
46+
if (cert.levels?.some((level) => level.type === "ECE 5 YR")) {
47+
return 1; // Highest priority
48+
} else if (cert.levels?.some((level) => level.type === "ECE 1 YR")) {
49+
return 2; // Medium priority
50+
} else if (cert.levels?.some((level) => level.type === "Assistant")) {
51+
return 3; // Lowest priority
52+
}
53+
return 4; // Other types
54+
};
55+
},
56+
57+
// Helper function to get status priority
58+
getStatusPriority() {
59+
return (statusCode: string) => {
60+
switch (statusCode) {
61+
case "Active":
62+
return 1;
63+
case "Cancelled":
64+
return 2;
65+
case "Suspended":
66+
return 3;
67+
case "Expired":
68+
return 4;
69+
default:
70+
return 5;
71+
}
72+
};
73+
},
74+
75+
// Sort certifications by status, expiry date, and certification type priority
76+
sortedCertifications() {
77+
return orderBy(
78+
this.certifications,
79+
[({ statusCode }: Components.Schemas.Certification) => this.getStatusPriority(statusCode || ""), "expiryDate", this.getCertificationTypePriority],
80+
["asc", "desc", "asc"], // asc for status (Active first), desc for expiry date (latest first), asc for type priority (ECE 5 YR = 1, Assistant = 3)
81+
);
82+
},
83+
84+
latestCertifications() {
85+
// Get the best certification from each type from the already sorted list
86+
const seenTypes = new Set<string>();
87+
const result: Components.Schemas.Certification[] = [];
88+
89+
for (const cert of this.sortedCertifications) {
90+
const certType = cert.levels?.find((level) => level.type === "ECE 5 YR" || level.type === "ECE 1 YR" || level.type === "Assistant")?.type;
91+
92+
if (certType && !seenTypes.has(certType)) {
93+
seenTypes.add(certType);
94+
result.push(cert);
95+
}
96+
}
97+
98+
return result;
99+
},
100+
101+
displayCertifications() {
102+
return this.filter === "latest" ? this.latestCertifications : this.sortedCertifications;
103+
},
104+
},
105+
data() {
106+
return {
107+
filter: "latest",
108+
};
109+
},
26110
setup() {
27111
const applicationStore = useApplicationStore();
28112
return { applicationStore };
29113
},
30114
});
31115
</script>
116+
117+
<style scoped>
118+
.v-btn-toggle > .v-btn {
119+
border-radius: 0 !important;
120+
}
121+
</style>

‎src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Certifications.vue‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
<template>
22
<v-container>
33
<Breadcrumb />
4-
<h1>My other certifications</h1>
4+
<h1>My certifications</h1>
55
<div class="d-flex flex-column ga-3 my-6">
6-
<p>You may wish to renew another certification you hold if you do not meet the requirements for higher certification levels. This may be due to:</p>
6+
<p>Review your certification records. You can also:</p>
77
<ul class="ml-10">
8-
<li>Inability to complete work experience and/or professional development hours within the term of your current certificate</li>
9-
<li>Working outside of the ECE field due to personal or extenuating circumstances</li>
10-
<li>Missing a basic and/or specialized ECE educational training program</li>
8+
<li>Download a PDF of your active certificate(s)</li>
9+
<li>Renew your latest certificate</li>
10+
<li>Renew another certificate type (e.g., if you do not meet the requirements for higher certification levels)</li>
1111
</ul>
1212
</div>
13-
<CertificationList :certifications="getOtherCertifications()" />
13+
<CertificationList :certifications="certificationStore.certifications ?? []" />
1414
</v-container>
1515
</template>
1616

@@ -35,16 +35,5 @@ export default defineComponent({
3535
certificationStore,
3636
};
3737
},
38-
methods: {
39-
getOtherCertifications() {
40-
// Get all certifications except the current one
41-
if (!this.certificationStore.certifications || this.certificationStore.certifications.length <= 1) {
42-
return [];
43-
}
44-
const currentCertification = this.certificationStore.currentCertification;
45-
if (!currentCertification) return [];
46-
return this.certificationStore.certifications.filter((cert) => cert.id !== currentCertification.id);
47-
},
48-
},
4938
});
5039
</script>

‎src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Dashboard.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,7 @@
9797
:is-rounded="false"
9898
:certification="certificationStore.currentCertification"
9999
:has-application="applicationStore.hasApplication"
100+
:is-latest-of-type="true"
100101
/>
101102
</template>
102103
</div>
@@ -106,14 +107,14 @@
106107
</v-col>
107108
</v-row>
108109

109-
<!-- My Other Certifications -->
110+
<!-- My Certifications -->
110111
<v-row v-if="certifications && hasOtherCertifications()" justify="center" class="mt-6">
111112
<v-col>
112113
<v-row>
113114
<v-col cols="12">
114115
<div>
115-
<v-btn block size="x-large" variant="outlined" color="primary" @click="router.push('/my-other-certifications')" class="force-full-content">
116-
My other certifications
116+
<v-btn block size="x-large" variant="outlined" color="primary" @click="router.push('/my-certifications')" class="force-full-content">
117+
All my certifications
117118
<v-icon size="large" icon="mdi-arrow-right" />
118119
</v-btn>
119120
</div>

‎src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/router.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ const router = createRouter({
2222
name: "dashboard",
2323
},
2424
{
25-
path: "/my-other-certifications",
25+
path: "/my-certifications",
2626
component: () => import("./components/pages/Certifications.vue"),
2727
meta: { requiresAuth: true, requiresVerification: true },
28-
name: "my-other-certifications",
28+
name: "my-certifications",
2929
},
3030
{
3131
path: "/certificate-terms-and-conditions/:certificationId",

0 commit comments

Comments
 (0)