|
3 | 3 | <div v-if="mode === 'add'"> |
4 | 4 | <v-row v-if="mode === 'add'"> |
5 | 5 | <v-col> |
6 | | - <h3>{{ `${professionalDevelopmentFormMode === "add" ? "Add" : "Edit"} course or workshop` }}</h3> |
| 6 | + <p>To meet the professional development requirement, you need to have completed 40 hours of training.</p> |
7 | 7 | <br /> |
8 | | - <p>The course or workshop must:</p> |
| 8 | + <p>Each course or workshop must:</p> |
9 | 9 | <br /> |
10 | 10 | <ul class="ml-10"> |
11 | | - <li>Be relevant to the field of early childhood education</li> |
| 11 | + <li>Be related to early childhood education</li> |
12 | 12 | <li v-if="certificationStore.certificateStatus(applicationStore.draftApplication.fromCertificate) === 'Active'"> |
13 | | - {{ |
14 | | - `Have been completed within the term of your current certificate (Between ${formatDate(certificationStore.certificationEffectiveDate(applicationStore.draftApplication.fromCertificate) || "", "LLLL d, yyyy")} to ${formatDate(certificationStore.certificationExpiryDate(applicationStore.draftApplication.fromCertificate) || "", "LLLL d, yyyy")})` |
15 | | - }} |
| 13 | + Have been completed within the dates of your current certificate: |
| 14 | + <strong> |
| 15 | + {{ formatDate(certificationStore.certificationEffectiveDate(applicationStore.draftApplication.fromCertificate) || "", "LLLL d, yyyy") }} |
| 16 | + </strong> |
| 17 | + to |
| 18 | + <strong> |
| 19 | + {{ formatDate(certificationStore.certificationExpiryDate(applicationStore.draftApplication.fromCertificate) || "", "LLLL d, yyyy") }} |
| 20 | + </strong> |
16 | 21 | </li> |
17 | 22 | <li v-else-if="certificationStore.certificateStatus(applicationStore.draftApplication.fromCertificate) === 'Expired'"> |
18 | 23 | Have been completed within the last 5 years |
19 | 24 | </li> |
20 | 25 | </ul> |
| 26 | + <template v-if="professionalDevelopmentFormMode === 'add'"> |
| 27 | + <br /> |
| 28 | + <p> |
| 29 | + To add additional professional development, save this form, and add the next. Continue until you have reached the required 40 hours or training. |
| 30 | + </p> |
| 31 | + </template> |
21 | 32 | </v-col> |
22 | 33 | </v-row> |
23 | | - <v-form ref="professionalDevelopmentForm"> |
| 34 | + <v-form ref="professionalDevelopmentForm" class="mt-6"> |
24 | 35 | <v-row> |
25 | 36 | <v-col> |
26 | 37 | <h3>Course or workshop information</h3> |
|
251 | 262 | <!-- List view --> |
252 | 263 | <div v-else> |
253 | 264 | <v-row> |
254 | | - <v-col sm="12" md="10" lg="8" xl="6"> |
255 | | - <p> |
256 | | - You must have completed at least 40 hours of professional development relevant to early childhood education. Add the courses or workshops you’ve |
257 | | - taken. |
258 | | - </p> |
| 265 | + <v-col> |
| 266 | + <p>To meet the professional development requirement, you need to have completed 40 hours of training.</p> |
| 267 | + <br /> |
| 268 | + <p><strong>What courses or workshops are eligible?</strong></p> |
| 269 | + <br /> |
| 270 | + <p>Each course or workshop must:</p> |
| 271 | + <br /> |
| 272 | + <ul class="ml-10"> |
| 273 | + <li>Be related to early childhood education</li> |
| 274 | + <li v-if="certificationStore.certificateStatus(applicationStore.draftApplication.fromCertificate) === 'Active'"> |
| 275 | + Have been completed within the dates of your current certificate: |
| 276 | + <strong> |
| 277 | + {{ formatDate(certificationStore.certificationEffectiveDate(applicationStore.draftApplication.fromCertificate) || "", "LLLL d, yyyy") }} |
| 278 | + </strong> |
| 279 | + to |
| 280 | + <strong> |
| 281 | + {{ formatDate(certificationStore.certificationExpiryDate(applicationStore.draftApplication.fromCertificate) || "", "LLLL d, yyyy") }} |
| 282 | + </strong> |
| 283 | + </li> |
| 284 | + <li v-else-if="certificationStore.certificateStatus(applicationStore.draftApplication.fromCertificate) === 'Expired'"> |
| 285 | + Have been completed within the last 5 years |
| 286 | + </li> |
| 287 | + </ul> |
| 288 | + </v-col> |
| 289 | + </v-row> |
| 290 | + <v-row v-if="totalHours < hoursRequired"> |
| 291 | + <v-col> |
| 292 | + <Callout type="warning" title="Adding your courses and/or workshops"> |
| 293 | + <p class="mt-4"> |
| 294 | + You will be asked to provide details for |
| 295 | + <strong>each course or workshop</strong> |
| 296 | + . If you have taken multiple courses or workshops, please add them separately. |
| 297 | + </p> |
| 298 | + <br /> |
| 299 | + <p>As you add entries, the number of hours will increase in the progress bar, up to the 40 hours required.</p> |
| 300 | + <br /> |
| 301 | + <p>There is no need to add courses or workshops past the 40 hour requirement.</p> |
| 302 | + </Callout> |
259 | 303 | </v-col> |
260 | 304 | </v-row> |
261 | 305 | <v-row> |
|
280 | 324 |
|
281 | 325 | <v-row> |
282 | 326 | <v-col sm="12" md="10" lg="8" xl="6"> |
283 | | - <p v-if="totalHours >= hoursRequired"> |
284 | | - No additional professional development may be added. You provided the required 40 hours. After you submit your application, the registry will review |
285 | | - and verify the professional development added. If needed, the registry will contact you for additional information. |
| 327 | + <p v-if="isDisabled" class="mb-4"> |
| 328 | + You have provided the required number of hours. No more courses can be added. If needed, we will follow up for more info. |
286 | 329 | </p> |
287 | 330 | <v-btn |
288 | | - v-else |
289 | 331 | prepend-icon="mdi-plus" |
290 | 332 | rounded="lg" |
291 | 333 | color="primary" |
@@ -319,6 +361,7 @@ import type { VForm, VInput } from "vuetify/components"; |
319 | 361 |
|
320 | 362 | import EceDateInput from "@/components/inputs/EceDateInput.vue"; |
321 | 363 | import EceTextField from "@/components/inputs/EceTextField.vue"; |
| 364 | +import Callout from "@/components/Callout.vue"; |
322 | 365 | import type { FileItem } from "@/components/UploadFileItem.vue"; |
323 | 366 | import { useAlertStore } from "@/store/alert"; |
324 | 367 | import { useApplicationStore } from "@/store/application"; |
@@ -349,7 +392,7 @@ export interface ProfessionalDevelopmentExtended extends Components.Schemas.Prof |
349 | 392 |
|
350 | 393 | export default defineComponent({ |
351 | 394 | name: "EceProfessionalDevelopment", |
352 | | - components: { ProgressBar, FileUploader, ProfessionalDevelopmentCard, EceDateInput, EceTextField }, |
| 395 | + components: { ProgressBar, FileUploader, ProfessionalDevelopmentCard, EceDateInput, EceTextField, Callout }, |
353 | 396 | props: { |
354 | 397 | modelValue: { |
355 | 398 | type: Object as () => ProfessionalDevelopmentExtended[], |
@@ -405,7 +448,7 @@ export default defineComponent({ |
405 | 448 | computed: { |
406 | 449 | ...mapWritableState(useWizardStore, { mode: "listComponentMode" }), |
407 | 450 | isDisabled() { |
408 | | - return false; |
| 451 | + return this.totalHours >= this.hoursRequired; |
409 | 452 | }, |
410 | 453 | totalHours() { |
411 | 454 | return this.modelValue.reduce((acc, professionalDevelopment) => { |
|
0 commit comments