Skip to content

Commit 241dc81

Browse files
SoLetsDevSoLetsDev
authored
Merge pull request #1434 from bcgov/stories/ecer-4786
Stories/ecer 4786
2 parents 5e8f3fa + e0badb6 commit 241dc81

File tree

6 files changed

+286
-7
lines changed

6 files changed

+286
-7
lines changed

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

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,41 @@
11
<template>
2-
<PreviewCard title="Employment experience" portal-stage="EmploymentExperience">
2+
<PreviewCard title="Employment experience references" portal-stage="EmploymentExperience">
33
<template #content>
4-
<!-- TODO: Add content -->
4+
<div v-for="(experience, index) in employmentExperiences" :key="index">
5+
<v-divider v-if="index !== 0" :thickness="2" color="grey-lightest" class="border-opacity-100 my-6" />
6+
<v-row>
7+
<v-col cols="4">
8+
<p class="small">Reference last name</p>
9+
</v-col>
10+
<v-col>
11+
<p id="employmentExperienceLastName" class="small font-weight-bold">{{ experience.lastName }}</p>
12+
</v-col>
13+
</v-row>
14+
<v-row>
15+
<v-col cols="4">
16+
<p class="small">Reference first name</p>
17+
</v-col>
18+
<v-col>
19+
<p id="employmentExperienceLastName" class="small font-weight-bold">{{ experience.firstName }}</p>
20+
</v-col>
21+
</v-row>
22+
<v-row>
23+
<v-col cols="4">
24+
<p class="small">Reference email</p>
25+
</v-col>
26+
<v-col>
27+
<p class="small font-weight-bold">{{ experience.emailAddress }}</p>
28+
</v-col>
29+
</v-row>
30+
<v-row>
31+
<v-col cols="4">
32+
<p class="small">Reference phone number (optional)</p>
33+
</v-col>
34+
<v-col>
35+
<p class="small font-weight-bold">{{ experience?.phoneNumber || "—" }}</p>
36+
</v-col>
37+
</v-row>
38+
</div>
539
</template>
640
</PreviewCard>
741
</template>
@@ -11,6 +45,7 @@ import { defineComponent } from "vue";
1145
1246
import PreviewCard from "@/components/PreviewCard.vue";
1347
import { useWizardStore } from "@/store/wizard";
48+
import type { Components } from "@/types/openapi";
1449
1550
export default defineComponent({
1651
name: "EceEmploymentExperiencePreview",
@@ -24,7 +59,9 @@ export default defineComponent({
2459
};
2560
},
2661
computed: {
27-
// TODO: Add computed properties
62+
employmentExperiences(): Components.Schemas.WorkExperienceReference[] {
63+
return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps?.employmentExperience?.form?.inputs?.employmentExperience?.id || ""];
64+
},
2865
},
2966
});
3067
</script>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
id="txtRegulatoryAuthorityValidation"
7070
v-model="onlineCertificateValidationToolOfRegulatoryAuthority"
7171
label="Online certificate validation tool of regulatory authority (optional)"
72-
:rules="[]"
72+
:rules="[Rules.website()]"
7373
></EceTextField>
7474
</v-col>
7575
</v-row>

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

Lines changed: 144 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,135 @@
11
<template>
22
<PreviewCard title="International certification" portal-stage="InternationalCertification">
33
<template #content>
4-
<!-- TODO: Add content -->
4+
<div v-for="(internationalCertificate, index) in internationalCertificates" :key="internationalCertificate.id!">
5+
<v-divider v-if="index !== 0" :thickness="2" color="grey-lightest" class="border-opacity-100 my-6" />
6+
<v-row>
7+
<v-col cols="4">
8+
<p class="small">Country of Institution</p>
9+
</v-col>
10+
<v-col>
11+
<p class="small font-weight-bold">{{ `${configStore.countryName(internationalCertificate.countryId || '')}` }}</p>
12+
</v-col>
13+
</v-row>
14+
<v-row>
15+
<v-col cols="4">
16+
<p class="small">Name of regulatory authority</p>
17+
</v-col>
18+
<v-col>
19+
<p id="courseProvince" class="small font-weight-bold">{{ internationalCertificate.nameOfRegulatoryAuthority }}</p>
20+
</v-col>
21+
</v-row>
22+
<v-row>
23+
<v-col cols="4">
24+
<p class="small">Email of regulatory authority</p>
25+
</v-col>
26+
<v-col>
27+
<p class="small font-weight-bold">{{ internationalCertificate.emailOfRegulatoryAuthority }}</p>
28+
</v-col>
29+
</v-row>
30+
<v-row>
31+
<v-col cols="4">
32+
<p class="small">Phone number of regulatory authority (optional)</p>
33+
</v-col>
34+
<v-col>
35+
<p class="small font-weight-bold">
36+
{{ `${internationalCertificate.phoneOfRegulatoryAuthority || "—"}` }}
37+
</p>
38+
</v-col>
39+
</v-row>
40+
<v-row>
41+
<v-col cols="4">
42+
<p class="small">Website of regulatory authority (optional)</p>
43+
</v-col>
44+
<v-col>
45+
<p class="small font-weight-bold">
46+
<a
47+
v-if="internationalCertificate?.websiteOfRegulatoryAuthority"
48+
:href="internationalCertificate.websiteOfRegulatoryAuthority"
49+
target="_blank"
50+
>{{ internationalCertificate.websiteOfRegulatoryAuthority }}</a>
51+
<div v-else>{{ "—" }}</div>
52+
</p>
53+
</v-col>
54+
</v-row>
55+
<v-row>
56+
<v-col cols="4">
57+
<p class="small">Online certificate validation tool of regulatory authority (optional)</p>
58+
</v-col>
59+
<v-col>
60+
<p class="small font-weight-bold">
61+
<a
62+
v-if="internationalCertificate?.onlineCertificateValidationToolOfRegulatoryAuthority"
63+
:href="internationalCertificate.onlineCertificateValidationToolOfRegulatoryAuthority"
64+
target="_blank"
65+
>{{ internationalCertificate.onlineCertificateValidationToolOfRegulatoryAuthority }}</a>
66+
<div v-else>{{ "—" }}</div>
67+
</p>
68+
</v-col>
69+
</v-row>
70+
<v-row>
71+
<v-col cols="4">
72+
<p class="small">Certification status</p>
73+
</v-col>
74+
<v-col>
75+
<p class="small font-weight-bold">
76+
{{ internationalCertificate.certificateStatus }}
77+
</p>
78+
</v-col>
79+
</v-row>
80+
<v-row>
81+
<v-col cols="4">
82+
<p class="small">Certificate title</p>
83+
</v-col>
84+
<v-col>
85+
<p class="small font-weight-bold">
86+
{{ internationalCertificate.certificateTitle }}
87+
</p>
88+
</v-col>
89+
</v-row>
90+
<v-row>
91+
<v-col cols="4">
92+
<p class="small">Issue date</p>
93+
</v-col>
94+
<v-col>
95+
<p class="small font-weight-bold">
96+
{{ `${formatDate(internationalCertificate.issueDate || "", "LLLL d, yyyy")}` }}
97+
</p>
98+
</v-col>
99+
</v-row>
100+
<v-row>
101+
<v-col cols="4">
102+
<p class="small">Expiry date (if applicable to your certificate)</p>
103+
</v-col>
104+
<v-col>
105+
<p class="small font-weight-bold">
106+
{{ `${internationalCertificate?.expiryDate ? formatDate(internationalCertificate.expiryDate || "", "LLLL d, yyyy") : "—"} ` }}
107+
</p>
108+
</v-col>
109+
</v-row>
110+
<v-row>
111+
<v-col cols="4">
112+
<p class="small">Name on certificate</p>
113+
</v-col>
114+
<v-col>
115+
<p class="small font-weight-bold">
116+
{{ fullName(internationalCertificate) }}
117+
</p>
118+
</v-col>
119+
</v-row>
120+
<v-row>
121+
<v-col cols="4">
122+
<p class="small">Copy of certificate</p>
123+
</v-col>
124+
<v-col>
125+
<v-row no-gutters>
126+
<v-col v-for="(file, childIndex) in internationalCertificate.files" :key="childIndex" cols="12" class="small font-weight-bold">
127+
{{ file.name }}
128+
</v-col>
129+
</v-row>
130+
</v-col>
131+
</v-row>
132+
</div>
5133
</template>
6134
</PreviewCard>
7135
</template>
@@ -10,7 +138,10 @@
10138
import { defineComponent } from "vue";
11139
12140
import PreviewCard from "@/components/PreviewCard.vue";
141+
import { formatDate } from "@/utils/format";
142+
import type { Components } from "@/types/openapi";
13143
import { useWizardStore } from "@/store/wizard";
144+
import { useConfigStore } from "@/store/config";
14145
15146
export default defineComponent({
16147
name: "EceInternationalCertificationPreview",
@@ -19,12 +150,23 @@ export default defineComponent({
19150
},
20151
setup: () => {
21152
const wizardStore = useWizardStore();
153+
const configStore = useConfigStore();
154+
22155
return {
23156
wizardStore,
157+
configStore,
158+
formatDate,
24159
};
25160
},
161+
methods: {
162+
fullName(internationalCertificate: Components.Schemas.InternationalCertification): string {
163+
return `${internationalCertificate?.otherFirstName || ""} ${internationalCertificate?.otherMiddleName || ""} ${internationalCertificate?.otherLastName || ""}`.trim();
164+
},
165+
},
26166
computed: {
27-
// TODO: Add computed properties
167+
internationalCertificates(): Components.Schemas.InternationalCertification[] {
168+
return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps?.internationalCertification?.form?.inputs?.internationalCertification?.id || ""];
169+
},
28170
},
29171
});
30172
</script>

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

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<template>
2+
<v-card :rounded="'0'" flat color="background-light-success" class="success-banner">
3+
<v-container>
4+
<div class="d-flex">
5+
<v-icon size="90px" color="#42814A" icon="mdi-check-circle" class="mr-2"></v-icon>
6+
<h1 id="titleApplicationSubmitted" class="align-self-center">Submission received</h1>
7+
</div>
8+
</v-container>
9+
</v-card>
10+
<PageContainer>
11+
<h2>What to expect next</h2>
12+
<br />
13+
<p>
14+
We will determine your eligibility to apply for ECE Five Year certification in British Columbia using professional experience obtained outside of Canada
15+
and contact you about your application options.
16+
</p>
17+
<br />
18+
<p>It is important to keep your contact information up to date in your My ECE Registry profile.</p>
19+
<br />
20+
<h3>International Certification</h3>
21+
<br />
22+
<ul class="ml-10">
23+
<li>We will review your information and contact your regulatory authority to verify the status of your certification</li>
24+
<li>We will notify you once we confirm your certification</li>
25+
</ul>
26+
<br />
27+
28+
<h3>References</h3>
29+
<br />
30+
<ul class="ml-10">
31+
<li>We have emailed the people you identified as a reference with a link to an online form</li>
32+
<li>Your references must complete the online form to provide a reference for you</li>
33+
<li>We will notify you when we receive the references</li>
34+
</ul>
35+
<br />
36+
37+
<h3>Eligibility</h3>
38+
<br />
39+
<ul class="ml-10">
40+
<li>
41+
We will determine your eligibility to apply for ECE Five Year certification in British Columbia using professional experience obtained outside of Canada
42+
and, if approved, you can continue to apply for certification
43+
</li>
44+
<li>We review complete submissions in the order they are received</li>
45+
<li>We will notify you once we have determined your eligibility</li>
46+
</ul>
47+
<br />
48+
<h3>Status</h3>
49+
<br />
50+
<ul class="ml-10">
51+
<li>You may view the status of your submission online in the My ECE Registry</li>
52+
<li>If needed, you can resend a link to your reference or manage your references</li>
53+
</ul>
54+
<br />
55+
56+
<router-link :to="{ name: 'manage-icra-eligibility', params: { icraEligibilityId: icraEligibilityId } }">
57+
<v-btn id="btnIcraEligibilitySummary" class="mt-5" type="" rounded="lg" color="primary">Go to submission summary (TODO NOT IMPLEMENTED)</v-btn>
58+
</router-link>
59+
</PageContainer>
60+
</template>
61+
<script lang="ts">
62+
import { defineComponent } from "vue";
63+
64+
import PageContainer from "@/components/PageContainer.vue";
65+
import { useIcraStore } from "@/store/icra";
66+
67+
export default defineComponent({
68+
name: "IcraEligibilitySubmitted",
69+
components: { PageContainer },
70+
props: {
71+
icraEligibilityId: {
72+
type: String,
73+
required: true,
74+
},
75+
},
76+
setup: () => {
77+
const icraStore = useIcraStore();
78+
// reset the draft application, so user cannot click the back button and submit another application
79+
icraStore.resetDraftIcraEligibility();
80+
return { icraStore };
81+
},
82+
});
83+
</script>
84+
<style scoped>
85+
.success-banner {
86+
min-height: 200px;
87+
display: flex;
88+
align-items: center;
89+
}
90+
</style>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,13 @@ const router = createRouter({
266266
props: true,
267267
meta: { requiresAuth: true, requiresVerification: true },
268268
},
269+
{
270+
path: "/icra-eligibility/submitted/:icraEligibilityId",
271+
name: "icra-eligibility-submitted",
272+
component: () => import("./components/pages/IcraEligibilitySubmitted.vue"),
273+
props: true,
274+
meta: { requiresAuth: true, requiresVerification: true, requiresICRAFeature: true },
275+
},
269276
{
270277
path: "/verify/:token",
271278
component: () => import("./components/reference/Reference.vue"),
@@ -315,7 +322,7 @@ const router = createRouter({
315322
props: { stream: "Eligibility" },
316323
},
317324
{
318-
path: "/manage-icra-eligibility/:icraEligibilityId",
325+
path: "/icra-eligibility/manage/:icraEligibilityId",
319326
name: "manage-icra-eligibility",
320327
component: () => import("./components/IcraEligibilitySummary.vue"),
321328
meta: { requiresAuth: true, requiresVerification: true, requiresICRAFeature: true },

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@ export const useConfigStore = defineStore("config", {
5454
provinceName(state) {
5555
return (provinceId: string) => state.provinceList.find((province) => province.provinceId === provinceId)?.provinceName;
5656
},
57+
countryName(state) {
58+
return (countryId: string) => state.countryList.find((country) => country.countryId === countryId)?.countryName;
59+
},
5760
canada(state) {
5861
return state.countryList.find((country) => country.countryName!.toLowerCase() === "canada");
5962
},

0 commit comments

Comments
 (0)