Skip to content

Commit bfc3d72

Browse files
SoLetsDevSoLetsDev
committed
ecer-4786 preview pages done for ICRA
1 parent 1a2c937 commit bfc3d72

File tree

3 files changed

+181
-6
lines changed

3 files changed

+181
-6
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
@@ -68,7 +68,7 @@
6868
id="txtRegulatoryAuthorityValidation"
6969
v-model="onlineCertificateValidationToolOfRegulatoryAuthority"
7070
label="Online certificate validation tool of regulatory authority (optional)"
71-
:rules="[]"
71+
:rules="[Rules.website()]"
7272
></EceTextField>
7373
</v-col>
7474
</v-row>

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

Lines changed: 140 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 TODO: FIX countryName</p>
9+
</v-col>
10+
<v-col>
11+
<p class="small font-weight-bold">{{ `${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,6 +138,8 @@
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";
14144
15145
export default defineComponent({
@@ -21,10 +151,18 @@ export default defineComponent({
21151
const wizardStore = useWizardStore();
22152
return {
23153
wizardStore,
154+
formatDate,
24155
};
25156
},
157+
methods: {
158+
fullName(internationalCertificate: Components.Schemas.InternationalCertification): string {
159+
return `${internationalCertificate?.otherFirstName || ""} ${internationalCertificate?.otherMiddleName || ""} ${internationalCertificate?.otherLastName || ""}`.trim();
160+
},
161+
},
26162
computed: {
27-
// TODO: Add computed properties
163+
internationalCertificates(): Components.Schemas.InternationalCertification[] {
164+
return this.wizardStore.wizardData[this.wizardStore.wizardConfig.steps?.internationalCertification?.form?.inputs?.internationalCertification?.id || ""];
165+
},
28166
},
29167
});
30168
</script>

0 commit comments

Comments
 (0)