From 02fcd892a4db2cc4a912cebd3be59cf5a0056315 Mon Sep 17 00:00:00 2001
From: Deepak Yadav <deepak.yadav@quartech.com>
Date: Fri, 27 Sep 2024 08:18:00 -0700
Subject: [PATCH 1/5] fixes/bugs-and-feedback

---
 .../src/components/ApplicationCard.vue        |   2 +-
 .../components/ApplicationRequirements.vue    |   2 +-
 .../src/components/Declaration.vue            |   4 +-
 .../components/ECEAssistantRequirements.vue   |   2 +-
 .../components/ECEFiveYearRequirements.vue    |   4 +-
 .../src/components/ECEOneYearRequirements.vue |   2 +-
 .../inputs/EceCharacterReferencePreview.vue   |   2 +-
 .../src/components/inputs/EceEducation.vue    | 370 +++++++++---------
 .../src/components/pages/Application.vue      |   1 +
 ...kExperienceReference400HoursEvaluation.vue |  29 +-
 10 files changed, 204 insertions(+), 214 deletions(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationCard.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationCard.vue
index 17296e9d7..f48c9ab3a 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationCard.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationCard.vue
@@ -38,7 +38,7 @@
       <div v-if="applicationStore.applicationStatus === undefined" class="d-flex flex-row justify-start ga-3 flex-wrap">
         <v-btn variant="flat" size="large" color="warning" @click="handleStartNewApplication">
           <v-icon size="large" icon="mdi-arrow-right" />
-          Apply Now
+          Apply now
         </v-btn>
       </div>
     </v-card-actions>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationRequirements.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationRequirements.vue
index 50c89c84c..07e35d60c 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationRequirements.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ApplicationRequirements.vue
@@ -27,7 +27,7 @@
       <ECEIteRegistrantRequirements />
     </template>
 
-    <v-btn class="mt-6" rounded="lg" color="primary" @click="continueClick">Apply Now</v-btn>
+    <v-btn class="mt-6" rounded="lg" color="primary" @click="continueClick">Apply now</v-btn>
   </v-container>
 </template>
 
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Declaration.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Declaration.vue
index cb403edc3..104c82f98 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Declaration.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/Declaration.vue
@@ -1,8 +1,8 @@
 <template>
   <v-container>
     <Breadcrumb :items="items" />
-    <h1>Declaration and consent</h1>
-    <p>You must read and agree to the following to apply for certification</p>
+    <h1 class="mb-5">Declaration and consent</h1>
+    <p>You must read and agree to the following to apply for certification.</p>
     <br />
     <ul class="ml-10">
       <li>I understand that the ECE Registry may require additional information (including supporting documents) in connection with this application.</li>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEAssistantRequirements.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEAssistantRequirements.vue
index 8cffc0d93..e494c9ad2 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEAssistantRequirements.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEAssistantRequirements.vue
@@ -11,7 +11,7 @@
   </v-row>
   <v-row>
     <v-col>
-      <ECEHeader title="Education Information"></ECEHeader>
+      <ECEHeader title="Education information"></ECEHeader>
       <p>You must have completed an early childhood education course in at least one of the following:</p>
       <br />
       <ul class="ml-10">
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearRequirements.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearRequirements.vue
index 344ba667b..083bcf532 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearRequirements.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEFiveYearRequirements.vue
@@ -11,7 +11,7 @@
   </v-row>
   <v-row>
     <v-col>
-      <ECEHeader title="Education Information"></ECEHeader>
+      <ECEHeader title="Education information"></ECEHeader>
       <p>
         You must have completed a basic early childhood education program. It must be
         <a
@@ -65,7 +65,7 @@
   </v-row>
   <v-row>
     <v-col>
-      <ECEHeader title="Work Experience" />
+      <ECEHeader title="Work experience" />
       <p>You need to have completed 500 hours of work experience. And be able to provide references to attest to all the hours.</p>
       <br />
       <p>Important information about calculating hours:</p>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEOneYearRequirements.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEOneYearRequirements.vue
index e72185e91..f1a4ec81d 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEOneYearRequirements.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/ECEOneYearRequirements.vue
@@ -11,7 +11,7 @@
   </v-row>
   <v-row>
     <v-col>
-      <ECEHeader title="Education Information"></ECEHeader>
+      <ECEHeader title="Education information"></ECEHeader>
       <p>
         You must have completed a basic early childhood education program. It must be
         <a
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue
index d96884da0..524daa9dc 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceCharacterReferencePreview.vue
@@ -1,5 +1,5 @@
 <template>
-  <PreviewCard title="Character Reference" portal-stage="CharacterReferences">
+  <PreviewCard title="Character reference" portal-stage="CharacterReferences">
     <template #content>
       <v-row>
         <v-col cols="4">
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
index f6afa073d..31bffa286 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
@@ -1,160 +1,50 @@
 <template>
-  <v-row v-if="mode === 'add'">
-    <v-col>
-      <h2>{{ clientId ? "Edit" : "Add" }} education</h2>
-      <br />
-      <p>
-        You'll need to request an official transcript from your educational institution for this course or program. It must be sent to us directly from them.
-      </p>
-      <br />
-      <p>When we receive your transcript, we will:</p>
-      <ul class="ml-10">
-        <li>Attach it to your application</li>
-        <li>Email you to let you know we've received it</li>
-      </ul>
-    </v-col>
-  </v-row>
-  <v-row>
-    <v-col v-if="mode === 'add'" md="8" lg="6" xl="4">
-      <v-form ref="addEducationForm" validate-on="input">
-        <v-row>
-          <v-col>
-            <h3>How will you provide your transcript?</h3>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-radio-group v-model="transcriptStatus" :rules="[Rules.required('Indicate the status of your transcript(s)')]" color="primary">
-            <v-radio label="I have requested the official transcript from my education institution" value="requested"></v-radio>
-            <v-radio
-              label="The ECE Registry already has my official transcript for the course/program relevant to this application and certificate type"
-              value="received"
-            ></v-radio>
-          </v-radio-group>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>What program did you take?</h3>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="program"
-              :rules="[Rules.required('Enter the name of your program or course')]"
-              label="Name of program or course"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="startYear"
-              :rules="[
-                Rules.required('Enter the start date'),
-                Rules.futureDateNotAllowedRule(),
-                Rules.conditionalWrapper(
-                  isDraftApplicationAssistantRenewal,
-                  Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'Start date must be within the last 5 years'),
-                ),
-              ]"
-              label="Start date of program or course"
-              type="date"
-              variant="outlined"
-              color="primary"
-              maxlength="50"
-              :max="today"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="endYear"
-              :rules="[
-                Rules.required('Enter the end date'),
-                Rules.futureDateNotAllowedRule(),
-                Rules.conditionalWrapper(
-                  isDraftApplicationAssistantRenewal,
-                  Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'End date must be within the last 5 years'),
-                ),
-              ]"
-              label="End date of program or course"
-              type="date"
-              variant="outlined"
-              color="primary"
-              maxlength="50"
-              :max="today"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>Where did you take it?</h3>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="school"
-              :rules="[Rules.required('Enter the name of the educational institution')]"
-              label="Full name of educational institution"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field v-model="campusLocation" label="Campus Location (Optional)" variant="outlined" color="primary" maxlength="200"></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field v-model="language" label="Language of institution (optional)" variant="outlined" color="primary" maxlength="100"></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>Name and student number on transcript</h3>
-            <br />
-            <p>Make sure this exactly matches your transcript. It may cause delays if we cannot match a transcript we receive to your application.</p>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="studentNumber"
-              :rules="[Rules.required('Enter your student number or ID')]"
-              label="Student number or ID"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
+  <div ref="addEducationComponent">
+    <v-row v-if="mode === 'add'">
+      <v-col>
+        <h2>{{ clientId ? "Edit" : "Add" }} education</h2>
         <br />
-        <p>What name is shown on your transcript?</p>
+        <p>
+          You'll need to request an official transcript from your educational institution for this course or program. It must be sent to us directly from them.
+        </p>
         <br />
-        <v-radio-group v-model="previousNameRadio" :rules="[Rules.requiredRadio('Select an option')]" @update:model-value="previousNameRadioChanged">
-          <v-radio v-for="(step, index) in ApplicantNameRadioOptions" :key="index" :label="step.label" :value="step.value"></v-radio>
-        </v-radio-group>
-        <div v-if="previousNameRadio === 'other'">
+        <p>When we receive your transcript, we will:</p>
+        <ul class="ml-10">
+          <li>Attach it to your application</li>
+          <li>Email you to let you know we've received it</li>
+        </ul>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col v-if="mode === 'add'" md="8" lg="6" xl="4">
+        <v-form ref="addEducationForm" validate-on="input">
           <v-row>
             <v-col>
-              <v-text-field v-model="studentFirstName" label="First name on transcript" variant="outlined" color="primary" maxlength="100"></v-text-field>
+              <h3>How will you provide your transcript?</h3>
             </v-col>
           </v-row>
+
+          <v-row>
+            <v-radio-group v-model="transcriptStatus" :rules="[Rules.required('Indicate the status of your transcript(s)')]" color="primary">
+              <v-radio label="I have requested the official transcript from my education institution" value="requested"></v-radio>
+              <v-radio
+                label="The ECE Registry already has my official transcript for the course/program relevant to this application and certificate type"
+                value="received"
+              ></v-radio>
+            </v-radio-group>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>What program did you take?</h3>
+            </v-col>
+          </v-row>
+
           <v-row>
             <v-col>
               <v-text-field
-                v-model="studentMiddleName"
-                label="Middle name(s) on transcript (optional)"
+                v-model="program"
+                :rules="[Rules.required('Enter the name of your program or course')]"
+                label="Name of program or course"
                 variant="outlined"
                 color="primary"
                 maxlength="100"
@@ -164,44 +54,156 @@
           <v-row>
             <v-col>
               <v-text-field
-                v-model="studentLastName"
-                :rules="[Rules.required('Enter your last name')]"
-                label="Last name on transcript"
+                v-model="startYear"
+                :rules="[
+                  Rules.required('Enter the start date'),
+                  Rules.futureDateNotAllowedRule(),
+                  Rules.conditionalWrapper(
+                    isDraftApplicationAssistantRenewal,
+                    Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'Start date must be within the last 5 years'),
+                  ),
+                ]"
+                label="Start date of program or course"
+                type="date"
+                variant="outlined"
+                color="primary"
+                maxlength="50"
+                :max="today"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="endYear"
+                :rules="[
+                  Rules.required('Enter the end date'),
+                  Rules.futureDateNotAllowedRule(),
+                  Rules.conditionalWrapper(
+                    isDraftApplicationAssistantRenewal,
+                    Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'End date must be within the last 5 years'),
+                  ),
+                ]"
+                label="End date of program or course"
+                type="date"
+                variant="outlined"
+                color="primary"
+                maxlength="50"
+                :max="today"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>Where did you take it?</h3>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="school"
+                :rules="[Rules.required('Enter the name of the educational institution')]"
+                label="Full name of educational institution"
                 variant="outlined"
                 color="primary"
                 maxlength="100"
               ></v-text-field>
             </v-col>
           </v-row>
-        </div>
-        <v-row justify="start" class="ml-1 mt-3">
-          <v-btn rounded="lg" color="alternate" class="mr-2" @click="handleSubmit">Save Education</v-btn>
-          <v-btn rounded="lg" variant="outlined" @click="handleCancel">Cancel</v-btn>
-        </v-row>
-      </v-form>
-    </v-col>
-    <div v-else-if="mode === 'list'" class="w-100">
-      <v-col sm="12" md="10" lg="8" xl="6">
-        <EducationList :educations="modelValue" @edit="handleEdit" @delete="handleDelete" />
-      </v-col>
-      <v-col cols="12" class="mt-6">
-        <v-row justify="start" class="ml-1">
-          <v-btn v-if="showAddEducationButton" prepend-icon="mdi-plus" rounded="lg" color="alternate" @click="handleAddEducation">Add education</v-btn>
-        </v-row>
-      </v-col>
-      <v-col>
-        <!-- this prevents form from proceeding if rules are not met -->
-        <v-input
-          :model-value="modelValue"
-          :rules="[
-            (v) => Object.keys(v).length > 0 || 'education required',
-            (v) => Object.keys(v).length >= numOfEducationRequired || `at least ${numOfEducationRequired} transcripts required`,
-          ]"
-          auto-hide="auto"
-        ></v-input>
+          <v-row>
+            <v-col>
+              <v-text-field v-model="campusLocation" label="Campus Location (Optional)" variant="outlined" color="primary" maxlength="200"></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field v-model="language" label="Language of institution (optional)" variant="outlined" color="primary" maxlength="100"></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>Name and student number on transcript</h3>
+              <br />
+              <p>Make sure this exactly matches your transcript. It may cause delays if we cannot match a transcript we receive to your application.</p>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="studentNumber"
+                :rules="[Rules.required('Enter your student number or ID')]"
+                label="Student number or ID"
+                variant="outlined"
+                color="primary"
+                maxlength="100"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <br />
+          <p>What name is shown on your transcript?</p>
+          <br />
+          <v-radio-group v-model="previousNameRadio" :rules="[Rules.requiredRadio('Select an option')]" @update:model-value="previousNameRadioChanged">
+            <v-radio v-for="(step, index) in ApplicantNameRadioOptions" :key="index" :label="step.label" :value="step.value"></v-radio>
+          </v-radio-group>
+          <div v-if="previousNameRadio === 'other'">
+            <v-row>
+              <v-col>
+                <v-text-field v-model="studentFirstName" label="First name on transcript" variant="outlined" color="primary" maxlength="100"></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  v-model="studentMiddleName"
+                  label="Middle name(s) on transcript (optional)"
+                  variant="outlined"
+                  color="primary"
+                  maxlength="100"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  v-model="studentLastName"
+                  :rules="[Rules.required('Enter your last name')]"
+                  label="Last name on transcript"
+                  variant="outlined"
+                  color="primary"
+                  maxlength="100"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </div>
+          <v-row justify="start" class="ml-1 mt-3">
+            <v-btn rounded="lg" color="alternate" class="mr-2" @click="handleSubmit">Save Education</v-btn>
+            <v-btn rounded="lg" variant="outlined" @click="handleCancel">Cancel</v-btn>
+          </v-row>
+        </v-form>
       </v-col>
-    </div>
-  </v-row>
+      <div v-else-if="mode === 'list'" class="w-100">
+        <v-col sm="12" md="10" lg="8" xl="6">
+          <EducationList :educations="modelValue" @edit="handleEdit" @delete="handleDelete" />
+        </v-col>
+        <v-col cols="12" class="mt-6">
+          <v-row justify="start" class="ml-1">
+            <v-btn v-if="showAddEducationButton" prepend-icon="mdi-plus" rounded="lg" color="alternate" @click="handleAddEducation">Add education</v-btn>
+          </v-row>
+        </v-col>
+        <v-col>
+          <!-- this prevents form from proceeding if rules are not met -->
+          <v-input
+            :model-value="modelValue"
+            :rules="[
+              (v) => Object.keys(v).length > 0 || 'education required',
+              (v) => Object.keys(v).length >= numOfEducationRequired || `at least ${numOfEducationRequired} transcripts required`,
+            ]"
+            auto-hide="auto"
+          ></v-input>
+        </v-col>
+      </div>
+    </v-row>
+  </div>
 </template>
 
 <script lang="ts">
@@ -340,6 +342,13 @@ export default defineComponent({
       return formatDate(DateTime.now().toString());
     },
   },
+  watch: {
+    mode(newValue) {
+      if (newValue === "list") {
+        this.scrollToElement(this.$refs.addEducationComponent);
+      }
+    },
+  },
   mounted() {
     this.mode = "list";
   },
@@ -482,6 +491,11 @@ export default defineComponent({
       this.isNameUnverified = true;
       this.previousNameRadio = undefined;
     },
+    scrollToElement(element: any) {
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    },
     formatDate,
   },
 });
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue
index c088050e5..56bc48beb 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue
@@ -26,6 +26,7 @@
               :title="step.title"
               :editable="index + 1 < wizardStore.step && wizardStore.listComponentMode !== 'add'"
               :complete="index + 1 < wizardStore.step"
+              style="white-space: nowrap; font-size: 0.9em"
             >
               <template #title>
                 <a v-if="index + 1 < wizardStore.step && wizardStore.listComponentMode !== 'add'" href="#" @click.prevent>{{ step.title }}</a>
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/reference/inputs/EceWorkExperienceReference400HoursEvaluation.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/reference/inputs/EceWorkExperienceReference400HoursEvaluation.vue
index 893051f3b..b74b19dcd 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/reference/inputs/EceWorkExperienceReference400HoursEvaluation.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/reference/inputs/EceWorkExperienceReference400HoursEvaluation.vue
@@ -104,21 +104,7 @@
             hide-details="auto"
             type="date"
             :max="today"
-            :rules="[
-              Rules.required('Enter the start date of hours'),
-              Rules.conditionalWrapper(
-                latestCertificateStatus === 'Active',
-                Rules.dateBetweenRule(
-                  latestCertificateEffectiveDate || '',
-                  today || '',
-                  'The start date of hours must be within the term of current certificate',
-                ),
-              ),
-              Rules.conditionalWrapper(
-                latestCertificateStatus === 'Expired',
-                Rules.dateBetweenRule(fiveYearsAgo || '', today || '', 'The start date of hours must be within the last 5 years'),
-              ),
-            ]"
+            :rules="[Rules.required('Enter the start date of hours'), Rules.futureDateNotAllowedRule('Start date of hours cannot be in the future')]"
             @update:model-value="updateField('startDate', $event)"
           ></v-text-field>
         </v-col>
@@ -135,18 +121,7 @@
             :rules="[
               Rules.required('Enter the end date of hours'),
               Rules.dateBeforeRule(modelValue.startDate || ''),
-              Rules.conditionalWrapper(
-                latestCertificateStatus === 'Active',
-                Rules.dateBetweenRule(
-                  latestCertificateEffectiveDate || '',
-                  today || '',
-                  'The end date of hours must be within the term of current certificate',
-                ),
-              ),
-              Rules.conditionalWrapper(
-                latestCertificateStatus === 'Expired',
-                Rules.dateBetweenRule(fiveYearsAgo || '', today || '', 'The end date of hours must be within the last 5 years'),
-              ),
+              Rules.futureDateNotAllowedRule('End date of hours cannot be in the future'),
             ]"
             @update:model-value="updateField('endDate', $event)"
           ></v-text-field>

From fe07841094b316a26050f1b4fc946a44511ecdfb Mon Sep 17 00:00:00 2001
From: Deepak Yadav <deepak.yadav@quartech.com>
Date: Fri, 27 Sep 2024 09:20:15 -0700
Subject: [PATCH 2/5] Update EceEducation.vue

---
 .../src/components/inputs/EceEducation.vue    | 364 +++++++++---------
 1 file changed, 189 insertions(+), 175 deletions(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
index 80df7f16b..8bbc51cac 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
@@ -1,160 +1,50 @@
 <template>
-  <v-row v-if="mode === 'add'">
-    <v-col>
-      <h2>{{ clientId ? "Edit" : "Add" }} education</h2>
-      <br />
-      <p>
-        You'll need to request an official transcript from your educational institution for this course or program. It must be sent to us directly from them.
-      </p>
-      <br />
-      <p>When we receive your transcript, we will:</p>
-      <ul class="ml-10">
-        <li>Attach it to your application</li>
-        <li>Email you to let you know we've received it</li>
-      </ul>
-    </v-col>
-  </v-row>
-  <v-row>
-    <v-col v-if="mode === 'add'" md="8" lg="6" xl="4">
-      <v-form ref="addEducationForm" validate-on="input">
-        <v-row>
-          <v-col>
-            <h3>How will you provide your transcript?</h3>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-radio-group v-model="transcriptStatus" :rules="[Rules.required('Indicate the status of your transcript(s)')]" color="primary">
-            <v-radio label="I have requested the official transcript from my education institution" value="requested"></v-radio>
-            <v-radio
-              label="The ECE Registry already has my official transcript for the course/program relevant to this application and certificate type"
-              value="received"
-            ></v-radio>
-          </v-radio-group>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>What program did you take?</h3>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="program"
-              :rules="[Rules.required('Enter the name of your program or course')]"
-              label="Name of program or course"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="startYear"
-              :rules="[
-                Rules.required('Enter the start date'),
-                Rules.futureDateNotAllowedRule(),
-                Rules.conditionalWrapper(
-                  isDraftApplicationAssistantRenewal,
-                  Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'Start date must be within the last 5 years'),
-                ),
-              ]"
-              label="Start date of program or course"
-              type="date"
-              variant="outlined"
-              color="primary"
-              maxlength="50"
-              :max="today"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="endYear"
-              :rules="[
-                Rules.required('Enter the end date'),
-                Rules.futureDateNotAllowedRule(),
-                Rules.conditionalWrapper(
-                  isDraftApplicationAssistantRenewal,
-                  Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'End date must be within the last 5 years'),
-                ),
-              ]"
-              label="End date of program or course"
-              type="date"
-              variant="outlined"
-              color="primary"
-              maxlength="50"
-              :max="today"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>Where did you take it?</h3>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="school"
-              :rules="[Rules.required('Enter the name of the educational institution')]"
-              label="Full name of educational institution"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field v-model="campusLocation" label="Campus Location (Optional)" variant="outlined" color="primary" maxlength="200"></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field v-model="language" label="Language of institution (optional)" variant="outlined" color="primary" maxlength="100"></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>Name and student number on transcript</h3>
-            <br />
-            <p>Make sure this exactly matches your transcript. It may cause delays if we cannot match a transcript we receive to your application.</p>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="studentNumber"
-              :rules="[Rules.required('Enter your student number or ID')]"
-              label="Student number or ID"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
+  <div ref="addEducationComponent">
+    <v-row v-if="mode === 'add'">
+      <v-col>
+        <h2>{{ clientId ? "Edit" : "Add" }} education</h2>
         <br />
-        <p>What name is shown on your transcript?</p>
+        <p>
+          You'll need to request an official transcript from your educational institution for this course or program. It must be sent to us directly from them.
+        </p>
         <br />
-        <v-radio-group v-model="previousNameRadio" :rules="[Rules.requiredRadio('Select an option')]" @update:model-value="previousNameRadioChanged">
-          <v-radio v-for="(step, index) in ApplicantNameRadioOptions" :key="index" :label="step.label" :value="step.value"></v-radio>
-        </v-radio-group>
-        <div v-if="previousNameRadio === 'other'">
+        <p>When we receive your transcript, we will:</p>
+        <ul class="ml-10">
+          <li>Attach it to your application</li>
+          <li>Email you to let you know we've received it</li>
+        </ul>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col v-if="mode === 'add'" md="8" lg="6" xl="4">
+        <v-form ref="addEducationForm" validate-on="input">
           <v-row>
             <v-col>
-              <v-text-field v-model="studentFirstName" label="First name on transcript" variant="outlined" color="primary" maxlength="100"></v-text-field>
+              <h3>How will you provide your transcript?</h3>
             </v-col>
           </v-row>
+
+          <v-row>
+            <v-radio-group v-model="transcriptStatus" :rules="[Rules.required('Indicate the status of your transcript(s)')]" color="primary">
+              <v-radio label="I have requested the official transcript from my education institution" value="requested"></v-radio>
+              <v-radio
+                label="The ECE Registry already has my official transcript for the course/program relevant to this application and certificate type"
+                value="received"
+              ></v-radio>
+            </v-radio-group>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>What program did you take?</h3>
+            </v-col>
+          </v-row>
+
           <v-row>
             <v-col>
               <v-text-field
-                v-model="studentMiddleName"
-                label="Middle name(s) on transcript (optional)"
+                v-model="program"
+                :rules="[Rules.required('Enter the name of your program or course')]"
+                label="Name of program or course"
                 variant="outlined"
                 color="primary"
                 maxlength="100"
@@ -164,41 +54,153 @@
           <v-row>
             <v-col>
               <v-text-field
-                v-model="studentLastName"
-                :rules="[Rules.required('Enter your last name')]"
-                label="Last name on transcript"
+                v-model="startYear"
+                :rules="[
+                  Rules.required('Enter the start date'),
+                  Rules.futureDateNotAllowedRule(),
+                  Rules.conditionalWrapper(
+                    isDraftApplicationAssistantRenewal,
+                    Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'Start date must be within the last 5 years'),
+                  ),
+                ]"
+                label="Start date of program or course"
+                type="date"
+                variant="outlined"
+                color="primary"
+                maxlength="50"
+                :max="today"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="endYear"
+                :rules="[
+                  Rules.required('Enter the end date'),
+                  Rules.futureDateNotAllowedRule(),
+                  Rules.conditionalWrapper(
+                    isDraftApplicationAssistantRenewal,
+                    Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'End date must be within the last 5 years'),
+                  ),
+                ]"
+                label="End date of program or course"
+                type="date"
+                variant="outlined"
+                color="primary"
+                maxlength="50"
+                :max="today"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>Where did you take it?</h3>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="school"
+                :rules="[Rules.required('Enter the name of the educational institution')]"
+                label="Full name of educational institution"
                 variant="outlined"
                 color="primary"
                 maxlength="100"
               ></v-text-field>
             </v-col>
           </v-row>
-        </div>
-        <v-row justify="start" class="ml-1 mt-3">
-          <v-btn rounded="lg" color="alternate" class="mr-2" @click="handleSubmit">Save Education</v-btn>
-          <v-btn rounded="lg" variant="outlined" @click="handleCancel">Cancel</v-btn>
-        </v-row>
-      </v-form>
-    </v-col>
-    <div v-else-if="mode === 'list'" class="w-100">
-      <v-col sm="12" md="10" lg="8" xl="6">
-        <EducationList :educations="modelValue" @edit="handleEdit" @delete="handleDelete" />
-      </v-col>
-      <v-col cols="12" class="mt-6">
-        <v-row justify="start" class="ml-1">
-          <v-btn v-if="showAddEducationButton" prepend-icon="mdi-plus" rounded="lg" color="alternate" @click="handleAddEducation">Add education</v-btn>
-        </v-row>
-      </v-col>
-      <v-col>
-        <!-- this prevents form from proceeding if rules are not met -->
-        <v-input
-          :model-value="modelValue"
-          :rules="[(v) => Object.keys(v).length > 0 || 'You must enter at least 1 education entry']"
-          auto-hide="auto"
-        ></v-input>
+          <v-row>
+            <v-col>
+              <v-text-field v-model="campusLocation" label="Campus Location (Optional)" variant="outlined" color="primary" maxlength="200"></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field v-model="language" label="Language of institution (optional)" variant="outlined" color="primary" maxlength="100"></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>Name and student number on transcript</h3>
+              <br />
+              <p>Make sure this exactly matches your transcript. It may cause delays if we cannot match a transcript we receive to your application.</p>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="studentNumber"
+                :rules="[Rules.required('Enter your student number or ID')]"
+                label="Student number or ID"
+                variant="outlined"
+                color="primary"
+                maxlength="100"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <br />
+          <p>What name is shown on your transcript?</p>
+          <br />
+          <v-radio-group v-model="previousNameRadio" :rules="[Rules.requiredRadio('Select an option')]" @update:model-value="previousNameRadioChanged">
+            <v-radio v-for="(step, index) in ApplicantNameRadioOptions" :key="index" :label="step.label" :value="step.value"></v-radio>
+          </v-radio-group>
+          <div v-if="previousNameRadio === 'other'">
+            <v-row>
+              <v-col>
+                <v-text-field v-model="studentFirstName" label="First name on transcript" variant="outlined" color="primary" maxlength="100"></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  v-model="studentMiddleName"
+                  label="Middle name(s) on transcript (optional)"
+                  variant="outlined"
+                  color="primary"
+                  maxlength="100"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  v-model="studentLastName"
+                  :rules="[Rules.required('Enter your last name')]"
+                  label="Last name on transcript"
+                  variant="outlined"
+                  color="primary"
+                  maxlength="100"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </div>
+          <v-row justify="start" class="ml-1 mt-3">
+            <v-btn rounded="lg" color="alternate" class="mr-2" @click="handleSubmit">Save Education</v-btn>
+            <v-btn rounded="lg" variant="outlined" @click="handleCancel">Cancel</v-btn>
+          </v-row>
+        </v-form>
       </v-col>
-    </div>
-  </v-row>
+      <div v-else-if="mode === 'list'" class="w-100">
+        <v-col sm="12" md="10" lg="8" xl="6">
+          <EducationList :educations="modelValue" @edit="handleEdit" @delete="handleDelete" />
+        </v-col>
+        <v-col cols="12" class="mt-6">
+          <v-row justify="start" class="ml-1">
+            <v-btn v-if="showAddEducationButton" prepend-icon="mdi-plus" rounded="lg" color="alternate" @click="handleAddEducation">Add education</v-btn>
+          </v-row>
+        </v-col>
+        <v-col>
+          <!-- this prevents form from proceeding if rules are not met -->
+          <v-input
+            :model-value="modelValue"
+            :rules="[(v) => Object.keys(v).length > 0 || 'You must enter at least 1 education entry']"
+            auto-hide="auto"
+          ></v-input>
+        </v-col>
+      </div>
+    </v-row>
+  </div>
 </template>
 
 <script lang="ts">
@@ -329,6 +331,13 @@ export default defineComponent({
       return formatDate(DateTime.now().toString());
     },
   },
+  watch: {
+    mode(newValue) {
+      if (newValue === "list") {
+        this.scrollToElement(this.$refs.addEducationComponent);
+      }
+    },
+  },
   mounted() {
     this.mode = "list";
   },
@@ -471,6 +480,11 @@ export default defineComponent({
       this.isNameUnverified = true;
       this.previousNameRadio = undefined;
     },
+    scrollToElement(element: any) {
+      if (element) {
+        element.scrollIntoView({ behavior: "smooth" });
+      }
+    },
     formatDate,
   },
 });

From 23c240cf46107ce571ae435d18aeed4b831886f8 Mon Sep 17 00:00:00 2001
From: Deepak Yadav <deepak.yadav@quartech.com>
Date: Fri, 27 Sep 2024 13:10:29 -0700
Subject: [PATCH 3/5] Update Application.vue: addressed review comments

---
 .../src/components/pages/Application.vue                     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue
index 56bc48beb..7c76c187a 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/pages/Application.vue
@@ -26,7 +26,7 @@
               :title="step.title"
               :editable="index + 1 < wizardStore.step && wizardStore.listComponentMode !== 'add'"
               :complete="index + 1 < wizardStore.step"
-              style="white-space: nowrap; font-size: 0.9em"
+              :class="`small ${mdAndDown ? 'text-wrap' : 'text-no-wrap'}`"
             >
               <template #title>
                 <a v-if="index + 1 < wizardStore.step && wizardStore.listComponentMode !== 'add'" href="#" @click.prevent>{{ step.title }}</a>
@@ -75,6 +75,7 @@
 import { DateTime } from "luxon";
 import { mapWritableState } from "pinia";
 import { defineComponent } from "vue";
+import { useDisplay } from "vuetify";
 
 import { getProfile, putProfile } from "@/api/profile";
 import Wizard from "@/components/Wizard.vue";
@@ -109,6 +110,7 @@ export default defineComponent({
     const applicationStore = useApplicationStore();
     const loadingStore = useLoadingStore();
     const certificationStore = useCertificationStore();
+    const { mdAndDown } = useDisplay();
     let wizardConfigSetup: WizardType | undefined = undefined;
 
     // Refresh userProfile from the server
@@ -172,6 +174,7 @@ export default defineComponent({
       applicationWizardAssistantAndOneYear,
       certificationStore,
       wizardConfigSetup,
+      mdAndDown,
     };
   },
   computed: {

From cbe4a0ded28fb8086cbb20d0d3ce5dfc4d22e918 Mon Sep 17 00:00:00 2001
From: Deepak Yadav <deepak.yadav@quartech.com>
Date: Thu, 3 Oct 2024 12:35:37 -0700
Subject: [PATCH 4/5] Education Component scrolling fix

---
 .../src/components/inputs/EceEducation.vue    | 365 +++++++++---------
 .../src/utils/functions.ts                    |  20 +
 2 files changed, 206 insertions(+), 179 deletions(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
index eb0ee8eb8..cdfa1876e 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
@@ -1,205 +1,207 @@
 <template>
-  <v-row v-if="mode === 'add'">
-    <v-col>
-      <h2>{{ clientId ? "Edit" : "Add" }} education</h2>
-      <br />
-      <p>
-        You'll need to request an official transcript from your educational institution for this course or program. It must be sent to us directly from them.
-      </p>
-      <br />
-      <p>When we receive your transcript, we will:</p>
-      <br />
-      <ul class="ml-10">
-        <li>Attach it to your application</li>
-        <li>Email you to let you know we've received it</li>
-      </ul>
-    </v-col>
-  </v-row>
-  <v-row>
-    <v-col v-if="mode === 'add'" md="8" lg="6" xl="4">
-      <v-form ref="addEducationForm" validate-on="input">
-        <v-row>
-          <v-col>
-            <h3>How will you provide your transcript?</h3>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-radio-group v-model="transcriptStatus" :rules="[Rules.required('Indicate the status of your transcript(s)')]" color="primary">
-            <v-radio label="I have requested the official transcript from my education institution" value="requested"></v-radio>
-            <v-radio
-              label="The ECE Registry already has my official transcript for the course/program relevant to this application and certificate type"
-              value="received"
-            ></v-radio>
-          </v-radio-group>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>What program did you take?</h3>
-          </v-col>
-        </v-row>
-
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="program"
-              :rules="[Rules.required('Enter the name of your program or course')]"
-              label="Name of program or course"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="startYear"
-              :rules="[
-                Rules.required('Enter the start date'),
-                Rules.futureDateNotAllowedRule(),
-                Rules.conditionalWrapper(
-                  isDraftApplicationAssistantRenewal,
-                  Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'Start date must be within the last 5 years'),
-                ),
-              ]"
-              label="Start date of program or course"
-              type="date"
-              variant="outlined"
-              color="primary"
-              maxlength="50"
-              :max="today"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="endYear"
-              :rules="[
-                Rules.required('Enter the end date'),
-                Rules.futureDateNotAllowedRule(),
-                Rules.conditionalWrapper(
-                  isDraftApplicationAssistantRenewal,
-                  Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'End date must be within the last 5 years'),
-                ),
-              ]"
-              label="End date of program or course"
-              type="date"
-              variant="outlined"
-              color="primary"
-              maxlength="50"
-              :max="today"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>Where did you take it?</h3>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="school"
-              :rules="[Rules.required('Enter the name of the educational institution')]"
-              label="Full name of educational institution"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field v-model="campusLocation" label="Campus location (optional)" variant="outlined" color="primary" maxlength="200"></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field v-model="language" label="Language of institution (optional)" variant="outlined" color="primary" maxlength="100"></v-text-field>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <h3>Name and student number on transcript</h3>
-            <br />
-            <p>Make sure this exactly matches your transcript. It may cause delays if we cannot match a transcript we receive to your application.</p>
-          </v-col>
-        </v-row>
-        <v-row>
-          <v-col>
-            <v-text-field
-              v-model="studentNumber"
-              :rules="[Rules.required('Enter your student number or ID')]"
-              label="Student number or ID"
-              variant="outlined"
-              color="primary"
-              maxlength="100"
-            ></v-text-field>
-          </v-col>
-        </v-row>
+  <div ref="addEducationComponent">
+    <v-row v-if="mode === 'add'">
+      <v-col>
+        <h2>{{ clientId ? "Edit" : "Add" }} education</h2>
+        <br />
+        <p>
+          You'll need to request an official transcript from your educational institution for this course or program. It must be sent to us directly from them.
+        </p>
         <br />
-        <p>What name is shown on your transcript?</p>
+        <p>When we receive your transcript, we will:</p>
         <br />
-        <v-radio-group v-model="previousNameRadio" :rules="[Rules.requiredRadio('Select an option')]" @update:model-value="previousNameRadioChanged">
-          <v-radio v-for="(step, index) in applicantNameRadioOptions" :key="index" :label="step.label" :value="step.value"></v-radio>
-        </v-radio-group>
-        <div v-if="previousNameRadio === 'other'">
+        <ul class="ml-10">
+          <li>Attach it to your application</li>
+          <li>Email you to let you know we've received it</li>
+        </ul>
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col v-if="mode === 'add'" md="8" lg="6" xl="4">
+        <v-form ref="addEducationForm" validate-on="input">
+          <v-row>
+            <v-col>
+              <h3>How will you provide your transcript?</h3>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-radio-group v-model="transcriptStatus" :rules="[Rules.required('Indicate the status of your transcript(s)')]" color="primary">
+              <v-radio label="I have requested the official transcript from my education institution" value="requested"></v-radio>
+              <v-radio
+                label="The ECE Registry already has my official transcript for the course/program relevant to this application and certificate type"
+                value="received"
+              ></v-radio>
+            </v-radio-group>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>What program did you take?</h3>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="program"
+                :rules="[Rules.required('Enter the name of your program or course')]"
+                label="Name of program or course"
+                variant="outlined"
+                color="primary"
+                maxlength="100"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field
+                v-model="startYear"
+                :rules="[
+                  Rules.required('Enter the start date'),
+                  Rules.futureDateNotAllowedRule(),
+                  Rules.conditionalWrapper(
+                    isDraftApplicationAssistantRenewal,
+                    Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'Start date must be within the last 5 years'),
+                  ),
+                ]"
+                label="Start date of program or course"
+                type="date"
+                variant="outlined"
+                color="primary"
+                maxlength="50"
+                :max="today"
+              ></v-text-field>
+            </v-col>
+          </v-row>
           <v-row>
             <v-col>
-              <v-text-field v-model="studentFirstName" label="First name on transcript" variant="outlined" color="primary" maxlength="100"></v-text-field>
+              <v-text-field
+                v-model="endYear"
+                :rules="[
+                  Rules.required('Enter the end date'),
+                  Rules.futureDateNotAllowedRule(),
+                  Rules.conditionalWrapper(
+                    isDraftApplicationAssistantRenewal,
+                    Rules.dateRuleRange(applicationStore.draftApplication.createdOn!, 5, 'End date must be within the last 5 years'),
+                  ),
+                ]"
+                label="End date of program or course"
+                type="date"
+                variant="outlined"
+                color="primary"
+                maxlength="50"
+                :max="today"
+              ></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>Where did you take it?</h3>
             </v-col>
           </v-row>
           <v-row>
             <v-col>
               <v-text-field
-                v-model="studentMiddleName"
-                label="Middle name(s) on transcript (optional)"
+                v-model="school"
+                :rules="[Rules.required('Enter the name of the educational institution')]"
+                label="Full name of educational institution"
                 variant="outlined"
                 color="primary"
                 maxlength="100"
               ></v-text-field>
             </v-col>
           </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field v-model="campusLocation" label="Campus location (optional)" variant="outlined" color="primary" maxlength="200"></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <v-text-field v-model="language" label="Language of institution (optional)" variant="outlined" color="primary" maxlength="100"></v-text-field>
+            </v-col>
+          </v-row>
+          <v-row>
+            <v-col>
+              <h3>Name and student number on transcript</h3>
+              <br />
+              <p>Make sure this exactly matches your transcript. It may cause delays if we cannot match a transcript we receive to your application.</p>
+            </v-col>
+          </v-row>
           <v-row>
             <v-col>
               <v-text-field
-                v-model="studentLastName"
-                :rules="[Rules.required('Enter your last name')]"
-                label="Last name on transcript"
+                v-model="studentNumber"
+                :rules="[Rules.required('Enter your student number or ID')]"
+                label="Student number or ID"
                 variant="outlined"
                 color="primary"
                 maxlength="100"
               ></v-text-field>
             </v-col>
           </v-row>
-        </div>
-        <v-row justify="start" class="ml-1 mt-3">
-          <v-btn rounded="lg" color="alternate" class="mr-2" @click="handleSubmit">Save Education</v-btn>
-          <v-btn rounded="lg" variant="outlined" @click="handleCancel">Cancel</v-btn>
-        </v-row>
-      </v-form>
-    </v-col>
-    <div v-else-if="mode === 'list'" class="w-100">
-      <v-col>
-        <EducationList :educations="modelValue" @edit="handleEdit" @delete="handleDelete" />
-      </v-col>
-      <v-col cols="12" class="mt-6">
-        <v-row justify="start" class="ml-1">
-          <v-btn v-if="showAddEducationButton" prepend-icon="mdi-plus" rounded="lg" color="alternate" @click="handleAddEducation">Add education</v-btn>
-        </v-row>
-      </v-col>
-      <v-col>
-        <!-- this prevents form from proceeding if rules are not met -->
-        <v-input
-          :model-value="modelValue"
-          :rules="[(v) => Object.keys(v).length > 0 || 'You must enter at least 1 education entry']"
-          auto-hide="auto"
-        ></v-input>
+          <br />
+          <p>What name is shown on your transcript?</p>
+          <br />
+          <v-radio-group v-model="previousNameRadio" :rules="[Rules.requiredRadio('Select an option')]" @update:model-value="previousNameRadioChanged">
+            <v-radio v-for="(step, index) in applicantNameRadioOptions" :key="index" :label="step.label" :value="step.value"></v-radio>
+          </v-radio-group>
+          <div v-if="previousNameRadio === 'other'">
+            <v-row>
+              <v-col>
+                <v-text-field v-model="studentFirstName" label="First name on transcript" variant="outlined" color="primary" maxlength="100"></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  v-model="studentMiddleName"
+                  label="Middle name(s) on transcript (optional)"
+                  variant="outlined"
+                  color="primary"
+                  maxlength="100"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+            <v-row>
+              <v-col>
+                <v-text-field
+                  v-model="studentLastName"
+                  :rules="[Rules.required('Enter your last name')]"
+                  label="Last name on transcript"
+                  variant="outlined"
+                  color="primary"
+                  maxlength="100"
+                ></v-text-field>
+              </v-col>
+            </v-row>
+          </div>
+          <v-row justify="start" class="ml-1 mt-3">
+            <v-btn rounded="lg" color="alternate" class="mr-2" @click="handleSubmit">Save Education</v-btn>
+            <v-btn rounded="lg" variant="outlined" @click="handleCancel">Cancel</v-btn>
+          </v-row>
+        </v-form>
       </v-col>
-    </div>
-  </v-row>
+      <div v-else-if="mode === 'list'" class="w-100">
+        <v-col>
+          <EducationList :educations="modelValue" @edit="handleEdit" @delete="handleDelete" />
+        </v-col>
+        <v-col cols="12" class="mt-6">
+          <v-row justify="start" class="ml-1">
+            <v-btn v-if="showAddEducationButton" prepend-icon="mdi-plus" rounded="lg" color="alternate" @click="handleAddEducation">Add education</v-btn>
+          </v-row>
+        </v-col>
+        <v-col>
+          <!-- this prevents form from proceeding if rules are not met -->
+          <v-input
+            :model-value="modelValue"
+            :rules="[(v) => Object.keys(v).length > 0 || 'You must enter at least 1 education entry']"
+            auto-hide="auto"
+          ></v-input>
+        </v-col>
+      </div>
+    </v-row>
+  </div>
 </template>
 
 <script lang="ts">
@@ -216,6 +218,7 @@ import type { EceEducationProps } from "@/types/input";
 import type { Components } from "@/types/openapi";
 import { formatDate } from "@/utils/format";
 import * as Rules from "@/utils/formRules";
+import { scrollToElement } from "@/utils/functions";
 
 interface EceEducationData {
   clientId: string;
@@ -330,6 +333,13 @@ export default defineComponent({
       return formatDate(DateTime.now().toString());
     },
   },
+  watch: {
+    mode(newValue) {
+      if (newValue === "list") {
+        scrollToElement(this.$refs.addEducationComponent as HTMLElement, "smooth");
+      }
+    },
+  },
   mounted() {
     this.mode = "list";
   },
@@ -374,8 +384,6 @@ export default defineComponent({
 
         // Change mode to education list
         this.mode = "list";
-
-        window.scroll(0, 0);
       } else {
         this.alertStore.setFailureAlert("You must enter all required fields in the valid format.");
       }
@@ -384,7 +392,6 @@ export default defineComponent({
       // Change mode to education list
       this.mode = "list";
       this.resetFormData();
-      window.scroll(0, 0);
     },
     handleAddEducation() {
       // Reset the form fields
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/utils/functions.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/utils/functions.ts
index a2e611083..928cac546 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/utils/functions.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/utils/functions.ts
@@ -152,3 +152,23 @@ export function sanitizeFilename(filename: string) {
   // eslint-disable-next-line no-control-regex
   return filename.replace(/[^\x00-\x7F]/g, "");
 }
+
+/**
+ * Scrolls to a given element using specified options for behavior, block, and inline alignment.
+ *
+ * @param {HTMLElement} element - The element to scroll to.
+ * @param {string} behavior - The scroll behavior ('auto', 'smooth').
+ * @param {string} block - The vertical alignment ('start', 'center', 'end', 'nearest').
+ * @param {string} inline - The horizontal alignment ('start', 'center', 'end', 'nearest').
+ */
+export function scrollToElement(element: HTMLElement, behavior: string = "auto", block: string = "start", inline: string = "nearest") {
+  if (element) {
+    element.scrollIntoView({
+      behavior: behavior as ScrollBehavior,
+      block: block as ScrollLogicalPosition,
+      inline: inline as ScrollLogicalPosition,
+    });
+  } else {
+    console.error("scrollToElement() :: element not found");
+  }
+}

From 590ba168343b53cfc98fed35f1c3582a2716c76f Mon Sep 17 00:00:00 2001
From: Deepak Yadav <deepak.yadav@quartech.com>
Date: Thu, 3 Oct 2024 14:21:07 -0700
Subject: [PATCH 5/5] Addressed review comment - updated scrollToElement
 function

---
 .../src/components/inputs/EceEducation.vue    |  2 +-
 .../src/utils/functions.ts                    | 24 ++++++++++---------
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
index cdfa1876e..a40fde916 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/components/inputs/EceEducation.vue
@@ -336,7 +336,7 @@ export default defineComponent({
   watch: {
     mode(newValue) {
       if (newValue === "list") {
-        scrollToElement(this.$refs.addEducationComponent as HTMLElement, "smooth");
+        scrollToElement(this.$refs.addEducationComponent as HTMLElement);
       }
     },
   },
diff --git a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/utils/functions.ts b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/utils/functions.ts
index 928cac546..d17e11bff 100644
--- a/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/utils/functions.ts
+++ b/src/ECER.Clients.RegistryPortal/ecer.clients.registryportal.client/src/utils/functions.ts
@@ -157,18 +157,20 @@ export function sanitizeFilename(filename: string) {
  * Scrolls to a given element using specified options for behavior, block, and inline alignment.
  *
  * @param {HTMLElement} element - The element to scroll to.
- * @param {string} behavior - The scroll behavior ('auto', 'smooth').
- * @param {string} block - The vertical alignment ('start', 'center', 'end', 'nearest').
- * @param {string} inline - The horizontal alignment ('start', 'center', 'end', 'nearest').
+ * @param {ScrollBehavior} [behavior='smooth'] - The scroll behavior ('auto', 'smooth').
+ * @param {ScrollLogicalPosition} [block='start'] - The vertical alignment ('start', 'center', 'end', 'nearest').
+ * @param {ScrollLogicalPosition} [inline='nearest'] - The horizontal alignment ('start', 'center', 'end', 'nearest').
  */
-export function scrollToElement(element: HTMLElement, behavior: string = "auto", block: string = "start", inline: string = "nearest") {
-  if (element) {
-    element.scrollIntoView({
-      behavior: behavior as ScrollBehavior,
-      block: block as ScrollLogicalPosition,
-      inline: inline as ScrollLogicalPosition,
-    });
-  } else {
+export function scrollToElement(
+  element: HTMLElement | null,
+  behavior: ScrollBehavior = "smooth",
+  block: ScrollLogicalPosition = "start",
+  inline: ScrollLogicalPosition = "nearest",
+) {
+  if (!element) {
     console.error("scrollToElement() :: element not found");
+    return;
   }
+
+  element.scrollIntoView({ behavior, block, inline });
 }