Added searchable multiselect

bcgov · Nov 4, 2024 · 2e44466 · 2e44466
1 parent 4d3606d
commit 2e44466
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 66 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -50,6 +50,7 @@
     "postinstall-postinstall": "^2.1.0",
     "process": "^0.11.10",
     "rrule": "^2.6.8",
+    "select2": "^4.1.0-rc.0",
     "semantic-ui-css": "git+https://github.com/Semantic-Org/Semantic-UI-CSS.git",
     "socket.io-client": "^4.0.0",
     "stream-browserify": "^3.0.0",
@@ -61,6 +62,7 @@
     "vue-bootstrap-typeahead": "^0.2.6",
     "vue-class-component": "^7.2.3",
     "vue-fragment": "^1.5.2",
+    "vue-multiselect": "^2.1.9",
     "vue-property-decorator": "^9.1.2",
     "vue-router": "3.5.1",
     "vue-search-select": "^2.9.6",

diff --git a/frontend/src/assets/css/q.css b/frontend/src/assets/css/q.css
@@ -265,11 +265,13 @@ input#app_timepicker_id {
   left: unset;
 }
 
-.custom-dropdown > a {
-  padding: 0 !important;
+
+.multiselect__option--highlight {
+  background-color: #ffffff;
+}
+
+.custom-multiselect .multiselect__option {
+  padding: 0;
+  text-wrap: wrap;
 }
 
-.dropdown-scrollable .dropdown-menu {
-  max-height: 300px;
-  overflow-y: auto;
-}
diff --git a/frontend/src/components/exams/add-exam-form-components.ts b/frontend/src/components/exams/add-exam-form-components.ts
@@ -8,6 +8,8 @@ import OfficeDrop from './office-drop.vue'
 import moment from 'moment'
 import { ModelListSelect } from "vue-search-select"
 import { throws } from 'assert'
+import Multiselect from 'vue-multiselect'
+import 'vue-multiselect/dist/vue-multiselect.min.css'
 
 // Checkmark
 @Component({
@@ -185,7 +187,8 @@ export class DateQuestion extends Vue {
 @Component({
   components: {
     Checkmark,
-    ModelListSelect
+    ModelListSelect,
+    Multiselect
   },
   computed: {
     ...mapState({
@@ -196,30 +199,39 @@ export class DateQuestion extends Vue {
   },
   template: `
   <b-row no-gutters>
-  <b-row>
-    <b-col class="dropdown">
-      <h5 v-if="addExamModal.setup === 'group'">Add Group Exam</h5>
-      <h5 v-if="addExamModal.setup === 'individual'">Add Individual SkilledTradesBC Exam</h5>
-      <h5 v-if="addExamModal.setup === 'other'">Add Non-SkilledTradesBC Exam</h5>
-      <h5 v-if="addExamModal.setup === 'pesticide'">Add Environment Exam</h5>
-    </b-col>
-    <b-col>
-      <label>Exam Type</label><br>
-      <b-dropdown size="sm" split split-variant="primary" :text="displayText" class="m-md-2 dropdown-scrollable"   variant="info">
-        <b-dropdown-item
-          v-for="type in dropItems"
-          :key="type.exam_type_id"
-          @click="preHandleInput(type)"
-          class="custom-dropdown"
+    <b-row>
+      <b-col class="dropdown">
+        <h5 v-if="addExamModal.setup === 'group'">Add Group Exam</h5>
+        <h5 v-if="addExamModal.setup === 'individual'">Add Individual SkilledTradesBC Exam</h5>
+        <h5 v-if="addExamModal.setup === 'other'">Add Non-SkilledTradesBC Exam</h5>
+        <h5 v-if="addExamModal.setup === 'pesticide'">Add Environment Exam</h5>
+      </b-col>
+      <b-col>
+        <label>Exam Type</label><br>
+        <multiselect
+          v-model="selectedExam"
+          :options="dropItems"
+          :track-by="'exam_type_id'"
+          :label="'exam_type_name'"
+          class="custom-multiselect"
+          :show-labels="false"
+          @input="preHandleInput"
+          :placeholder="displayText"
         >
-          <p
-          :style="{backgroundColor: type.exam_color,  padding: '5px 10px'}"
-          >{{ type.exam_type_name }}</p>
-        </b-dropdown-item>
-      </b-dropdown>
-    </b-col>
+          <template #singleLabel="{ selectedOptions }">
+            <span class="multiselect__single">
+              <span >{{ displayText }}</span>
+            </span>
+          </template>
+          <template #option="{ option }">
+            <p :style="{ backgroundColor: option.exam_color, padding: '10px' }">
+              {{ option.exam_type_name }}
+            </p>
+          </template>
+        </multiselect>
+      </b-col>
+    </b-row>
   </b-row>
-</b-row>
 `
 })
 export class DropdownQuestion extends Vue {
@@ -253,6 +265,7 @@ export class DropdownQuestion extends Vue {
   @State('capturedExam') private capturedExam!: any
   @State('nonITAExam') private nonITAExam!: any
   private objectItem:any = {};
+  private selectedExam:any = []
   private displayText : string = 'Select An Exam Type'
 
   @Mutation('setAddExamModalSetting') public setAddExamModalSetting: any
@@ -302,10 +315,6 @@ export class DropdownQuestion extends Vue {
     }
   }
 
-  get selectedExam () {
-    return this.capturedExam.exam_type_id ?? 0;
-  }
-
   get inputText () {
     if (this.exam_object && this.exam_object.exam_type_name) {
       return this.exam_object.exam_type_name
@@ -330,6 +339,10 @@ export class DropdownQuestion extends Vue {
     this.setAddExamModalSetting({ step1MenuOpen: false })
   }
 
+  customLabel(option) {
+    return option.exam_type_name
+  }
+
   preHandleInput (item) {
     this.handleInput({
       target: {