Merge pull request #42 from bcgov/tasks/ECER-785

ECER-785: Select Certification Type

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

@@ -0,0 +1,26 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <p class="small">
+          ECE Assistant certification requires completion of at least one early childhood education course in child guidance, child health, safety, nutrition or
+          child development, completed within the last 5 years at a recognized educational institution.
+          <br />
+          <br />
+          As an ECE Assistant you can work in a licensed facility with children 0 to 5 years old under the supervision of a certified EC
+        </p>
+      </v-col>
+    </v-row>
+  </v-container>
+  <p></p>
+  <br />
+  <p></p>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ECEAssistantContent",
+});
+</script>

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

@@ -0,0 +1,65 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <p class="small">
+          Five Year Certification requires completion of an early childhood education program from a recognized educational institution or an equivalent
+          program, or equivalent certification/registration in another province or territory. You must have completed 500 hours of supervised work experience.
+          <br />
+          <br />
+          This certification allows you to work alone and/or as the primary educator in licensed child care programs for children 3 to 5 years of age and may
+          work alongside an Infant Toddler Educator in licensed programs for children under 36-months.
+        </p>
+      </v-col>
+      <v-col cols="12">
+        <div class="d-flex flex-row align-center">
+          <v-icon class="mr-2" size="large" icon="mdi-alert-circle-outline" />
+          <p class="small">
+            NOTE: If you are eligible for an ECE Five Year Certificate, the Registry will assess you for one or both specialized certificates below as part of
+            your application for the ECE Five Year Certificate. You only need to submit one application.
+          </p>
+        </div>
+      </v-col>
+      <v-col cols="11" offset="1">
+        <v-checkbox v-model="selection" label="Infant and Toddler Educator (ITE)" value="ITE">
+          <template #details>
+            <div class="ml-10">
+              An Infant and Toddler specialization requires successful completion of an infant and toddler educator training program recognized by the ECE
+              Registry.
+            </div>
+          </template>
+        </v-checkbox>
+
+        <v-checkbox v-model="selection" label="Special Needs Educator (SNE)" value="SNE">
+          <template #details>
+            <div class="ml-10">
+              A Special Needs specialization requires successful completion of a special needs early childhood educator training program recognized by the ECE
+              Registry.
+            </div>
+          </template>
+        </v-checkbox>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ECEFiveYearContent",
+  emits: {
+    selection: (_selected: Array<string>) => true,
+  },
+  data() {
+    return {
+      selection: [] as Array<string>,
+    };
+  },
+  watch: {
+    selection(selected: Array<string>) {
+      this.$emit("selection", selected);
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,28 @@
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="12">
+        <p class="small">
+          ECE One Year certification requires successful completion of a basic early childhood education training program recognized by the ECE Registry.
+          <br />
+          <br />
+          This certification, allows you to work in the position of a fully certified ECE while working towards your 500 hours of work experience.
+        </p>
+      </v-col>
+      <v-col cols="12">
+        <div class="d-flex flex-row align-center">
+          <v-icon class="mr-2" size="large" icon="mdi-alert-circle-outline" />
+          <p class="small">NOTE: This certificate may only be renewed ONCE.</p>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "ECEOneYearContent",
+});
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+  <v-expansion-panels :model-value="selected" @update:model-value="handlePanelChange">
+    <v-expansion-panel v-for="option in options" :key="option.id" :value="option.id" class="rounded-lg">
+      <v-expansion-panel-title>
+        <v-radio-group :mandatory="true" :hide-details="true" :model-value="selected" @update:model-value="handleRadioChange">
+          <v-radio :label="option.title" :value="option.id"></v-radio>
+        </v-radio-group>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text>
+        <Component :is="option.contentComponent" v-if="option.hasSubSelection" @selection="handleSubSelectionChange" />
+        <Component :is="option.contentComponent" v-else />
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import type { ExpandSelectOption } from "@/types/expand-select";
+
+export default defineComponent({
+  name: "ExpandSelect",
+  props: {
+    options: {
+      type: Array as () => ExpandSelectOption[],
+      default: () => [],
+    },
+    subSelected: {
+      type: Array<string>,
+      default: () => [],
+    },
+    selected: {
+      type: String,
+      default: "-1",
+    },
+  },
+  emits: {
+    selection: (_selected: string) => true,
+    subSelection: (_selected: Array<string>) => true,
+  },
+  methods: {
+    handleSubSelectionChange(selected: Array<string>) {
+      this.$emit("subSelection", selected);
+    },
+    handleRadioChange(selected: string | null) {
+      typeof selected === "string" ? this.$emit("selection", selected) : this.$emit("selection", "-1");
+      this.$emit("subSelection", []);
+    },
+    handlePanelChange(selected: unknown) {
+      typeof selected === "string" ? this.$emit("selection", selected) : this.$emit("selection", "-1");
+      this.$emit("subSelection", []);
+    },
+  },
+});
+</script>

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

@@ -0,0 +1,61 @@
+<template>
+  <PageContainer>
+    <v-row class="ga-4">
+      <v-col cols="1">
+        <v-btn variant="text" @click="$router.back()">
+          <v-icon start icon="mdi-arrow-left"></v-icon>
+          Back
+        </v-btn>
+      </v-col>
+      <v-col cols="12">
+        <h2>What certificate type(s) are you applying for?</h2>
+      </v-col>
+      <v-col cols="12" md="8" lg="8" xl="8">
+        <ExpandSelect
+          :options="certificationTypes"
+          :selected="selectedCertificationType"
+          @selection="handleExpandSelectSelection"
+          @sub-selection="handleExpandSelectSubSelection"
+        ></ExpandSelect>
+        <v-row justify="end" class="mt-12">
+          <v-btn variant="outlined" class="mr-2" @click="$router.back()">Cancel</v-btn>
+          <v-btn color="primary" :disabled="selectedCertificationType == '-1'" @click="submit">Start Application</v-btn>
+        </v-row>
+      </v-col>
+    </v-row>
+  </PageContainer>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import ExpandSelect from "@/components/ExpandSelect.vue";
+import PageContainer from "@/components/PageContainer.vue";
+import certificationTypes from "@/config/certification-types";
+
+export default defineComponent({
+  name: "CertificationType",
+  components: { ExpandSelect, PageContainer },
+  setup() {
+    return { certificationTypes };
+  },
+  data() {
+    return {
+      subSelection: [] as Array<string>,
+      selectedCertificationType: "-1" as string,
+    };
+  },
+  methods: {
+    submit() {
+      // TODO handle passing data to application wizard
+      this.$router.push("/application");
+    },
+    handleExpandSelectSelection(selected: string) {
+      this.selectedCertificationType = selected;
+    },
+    handleExpandSelectSubSelection(selected: Array<string>) {
+      this.subSelection = selected;
+    },
+  },
+});
+</script>

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

@@ -42,7 +42,7 @@
                 <p class="small">Complete and submit your application for certification in early childhood education.</p>
               </v-card-item>
               <v-card-actions class="ma-4">
-                <v-btn variant="flat" rounded="lg" color="primary">Apply Now</v-btn>
+                <v-btn variant="flat" rounded="lg" color="primary" @click="$router.push('/certification-type')">Apply Now</v-btn>
               </v-card-actions>
             </v-card>
           </v-col>
@@ -52,7 +52,7 @@
                 <p class="small">Not sure which certificate to apply for? Fill out a quick self-assessment to see your certification options.</p>
               </v-card-item>
               <v-card-actions class="ma-4">
-                <v-btn variant="flat" rounded="lg" color="warning">Check Elegibility</v-btn>
+                <v-btn variant="flat" rounded="lg" color="warning">Check Eligibility</v-btn>
               </v-card-actions>
             </v-card>
           </v-col>

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/config/certification-types.ts

@@ -0,0 +1,27 @@
+import ECEAssistantContent from "@/components/ECEAssistantContent.vue";
+import ECEFiveYearContent from "@/components/ECEFiveYearContent.vue";
+import ECEOneYearContent from "@/components/ECEOneYearContent.vue";
+import type { ExpandSelectOption } from "@/types/expand-select";
+
+const certificationTypes: ExpandSelectOption[] = [
+  {
+    id: "1",
+    title: "ECE Assistant",
+    contentComponent: ECEAssistantContent,
+    hasSubSelection: false,
+  },
+  {
+    id: "2",
+    title: "ECE One Year",
+    contentComponent: ECEOneYearContent,
+    hasSubSelection: false,
+  },
+  {
+    id: "3",
+    title: "ECE Five Year",
+    contentComponent: ECEFiveYearContent,
+    hasSubSelection: true,
+  },
+];
+
+export default certificationTypes;

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

@@ -42,7 +42,11 @@ const router = createRouter({
         },
       ],
     },
-
+    {
+      path: "/certification-type",
+      component: () => import("./components/pages/CertificationType.vue"),
+      meta: { requiresAuth: true },
+    },
     {
       path: "/login",
       component: () => import("./components/pages/Login.vue"),

src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/types/expand-select.ts

@@ -0,0 +1,8 @@
+import type { Component } from "vue";
+
+export type ExpandSelectOption = {
+  id: string;
+  title: string;
+  contentComponent: Component;
+  hasSubSelection: boolean;
+};