Merge pull request #657 from bcgov/vuetify-mt

added enter button
bcgov · Oct 30, 2024 · 4d3bb52 · 4d3bb52
2 parents 956a053 + c3764a0
commit 4d3bb52
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 18 deletions.
diff --git a/frontend/src/components/Courses/CourseAdvancedSearch.vue b/frontend/src/components/Courses/CourseAdvancedSearch.vue
@@ -28,6 +28,7 @@
               v-model="advancedSearchInput.courseCode.value"
               placeholder=""
               tabindex="1"
+              v-on:keyup="keyHandler"
             />
           </div>
           <div class="advanced-search-field col-12 col-md-2">
@@ -54,6 +55,7 @@
               v-model="advancedSearchInput.courseLevel.value"
               placeholder=""
               tabindex="2"
+              v-on:keyup="keyHandler"
             />
           </div>
           <div class="advanced-search-field col-12 col-md-2">
@@ -80,6 +82,7 @@
               v-model="advancedSearchInput.courseName.value"
               placeholder=""
               tabindex="3"
+              v-on:keyup="keyHandler"
             />
           </div>
           <div class="advanced-search-field col-12 col-md-2">
@@ -92,6 +95,7 @@
               item-title="text"
               item-value="value"
               tabindex="4"
+              v-on:keyup="keyHandler"
             ></v-select>
           </div>
           <div class="advanced-search-field col-12 col-md-auto">
@@ -122,6 +126,7 @@
               :date-format-options="{ year: '4-digit' }"
               autocomplete="off"
               tabindex="6"
+              v-on:keyup="keyHandler"
             ></v-text-field>
           </div>
         </v-row>
@@ -303,6 +308,12 @@ export default {
         }
       }
     },
+    keyHandler: function (e) {
+      if (e.keyCode === 13) {
+        //enter key pressed
+        this.advanceCourseSearch();
+      }
+    },
     advanceCourseSearch() {
       this.totalResults = "";
       this.advancedSearchMessage = "";

diff --git a/frontend/src/components/Header/BCHeader.vue b/frontend/src/components/Header/BCHeader.vue
@@ -98,14 +98,13 @@
           <v-form @submit.prevent class="d-flex mb-0">
             <v-text-field
               density="compact"
-              size="small"
               variant="outlined"
+              size="30"
               type="search"
               v-model="penInput"
               maxlength="9"
               minlength="9"
               placeholder="PEN"
-              class=""
               ref="penSearch"
               hide-details
               v-on:keyup="keyHandler"

diff --git a/frontend/src/components/StudentSearch/StudentAdvancedSearch.vue b/frontend/src/components/StudentSearch/StudentAdvancedSearch.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="advanced-search-form mb-4">
     <h3>Advanced Student Search</h3>
+    {{ advancedSearchInput }}
     <p class="px-1">
       Use the advanced search to look up students by specified criteria.
     </p>
@@ -507,17 +508,17 @@ export default {
     this.unsetStudent();
   },
   methods: {
-    keyHandler: function (e) {
-      if (e.keyCode === 13) {
-        //enter key pressed
-        this.studentSearchResults = [];
-        if (this.penInput) {
-          this.findStudentByPen();
-        } else if (this.surnameInput) {
-          this.findStudentBySurname();
-        }
-      }
-    },
+    // keyHandler: function (e) {
+    //   if (e.keyCode === 13) {
+    //     //enter key pressed
+    //     this.studentSearchResults = [];
+    //     if (this.penInput) {
+    //       this.findStudentByPen();
+    //     } else if (this.surnameInput) {
+    //       this.findStudentBySurname();
+    //     }
+    //   }
+    // },
     findStudentsByAdvancedSearch: function () {
       this.advancedSearchMessage = "";
       this.message = "";
@@ -591,9 +592,16 @@ export default {
     showAdvancedSearch: function () {
       this.showAdvancedSearchForm = true;
     },
+    keyHandler: function (e) {
+      if (e.keyCode === 13) {
+        this.studentSearchResults = [];
+        //enter key pressed
+        this.findStudentsByAdvancedSearch();
+      }
+    },
     clearInput: function () {
       // this.penInput = "";
-      this.studentSearchResults = "";
+      this.studentSearchResults = [];
       for (const key in this.advancedSearchInput) {
         if (this.advancedSearchInput.hasOwnProperty(key)) {
           this.advancedSearchInput[key].value = "";

diff --git a/frontend/src/views/PSI.vue b/frontend/src/views/PSI.vue
@@ -32,6 +32,7 @@
                 class="form__input"
                 trim
                 tabindex="1"
+                v-on:keyup="keyHandler"
               ></v-text-field>
             </div>
             <div class="advanced-search-field col-12 col-md-2">
@@ -61,6 +62,7 @@
                 class="form__input"
                 trim
                 tabindex="2"
+                v-on:keyup="keyHandler"
               ></v-text-field>
             </div>
             <div class="advanced-search-field col-12 col-md-2">
@@ -91,6 +93,7 @@
                 class="form__input"
                 trim
                 tabindex="3"
+                v-on:keyup="keyHandler"
               ></v-text-field>
             </div>
             <div class="advanced-search-field col-12 col-md-2">
@@ -103,6 +106,7 @@
                 item-title="text"
                 item-value="value"
                 tabindex="4"
+                v-on:keyup="keyHandler"
               ></v-select>
             </div>
             <div class="advanced-search-field col-12 col-md-2">
@@ -132,6 +136,7 @@
                 class="form__input"
                 trim
                 tabindex="5"
+                v-on:keyup="keyHandler"
               ></v-text-field>
             </div>
           </div>
@@ -172,8 +177,8 @@
               variant="tonal"
               border="start"
               class="mt-8 mb-0 ml-1 py-3 width-fit-content"
-              v-if="!!searchMessage"
-              :text="searchMessage"
+              v-if="!!advancedSearchMessage"
+              :text="advancedSearchMessage"
             ></v-alert>
           </div>
         </div>
@@ -320,8 +325,7 @@ export default {
   },
   methods: {
     clearInput: function () {
-      this.penInput = "";
-      this.psiResults = "";
+      this.psiResults = [];
       for (const key in this.advancedSearchInput) {
         if (this.advancedSearchInput.hasOwnProperty(key)) {
           this.advancedSearchInput[key].value = "";
@@ -335,6 +339,12 @@ export default {
         }
       }
     },
+    keyHandler: function (e) {
+      if (e.keyCode === 13) {
+        //enter key pressed
+        this.advancePSISearch();
+      }
+    },
     advancePSISearch() {
       this.totalResults = "";
       this.advancedSearchMessage = "";