From 2e44466818121584d92a0951a25c034eee5e468e Mon Sep 17 00:00:00 2001 From: Midhun Jisha Manoj Date: Fri, 30 Aug 2024 23:03:35 +0000 Subject: [PATCH] Added searchable multiselect --- frontend/package-lock.json | 52 ++++++-------- frontend/package.json | 2 + frontend/src/assets/css/q.css | 14 ++-- .../exams/add-exam-form-components.ts | 67 +++++++++++-------- 4 files changed, 69 insertions(+), 66 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index a765ee8e0..6c78829f5 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -40,6 +40,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", @@ -51,6 +52,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", @@ -8681,7 +8683,6 @@ "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz", "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==", "dev": true, - "license": "MIT", "dependencies": { "pump": "^3.0.0" }, @@ -8692,28 +8693,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/cypress/node_modules/human-signals": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz", - "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==", - "dev": true, - "license": "Apache-2.0", - "engines": { - "node": ">=8.12.0" - } - }, - "node_modules/cypress/node_modules/is-ci": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.1.tgz", - "integrity": "sha512-ZYvCgrefwqoQ6yTyYUbQu64HsITZ3NfKX1lzaEYdkTDcfKzzCI/wthRRYKkdjHKFVgNiXKAKm65Zo1pk2as/QQ==", - "dev": true, - "dependencies": { - "ci-info": "^3.2.0" - }, - "bin": { - "is-ci": "bin.js" - } - }, "node_modules/cypress/node_modules/is-stream": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", @@ -12114,13 +12093,6 @@ "async": "^3.2.0" } }, - "node_modules/getos/node_modules/async": { - "version": "3.2.6", - "resolved": "https://registry.npmjs.org/async/-/async-3.2.6.tgz", - "integrity": "sha512-htCUDlxyyCLMgaM3xXg0C0LW2xqfuQ6p05pCEIsXuyQ+a1koYKTuBMzRNwmybfLgvJDMd0r1LTn4+E0Ti6C2AA==", - "dev": true, - "license": "MIT" - }, "node_modules/getpass": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz", @@ -20697,6 +20669,11 @@ "integrity": "sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==", "dev": true }, + "node_modules/select2": { + "version": "4.1.0-rc.0", + "resolved": "https://registry.npmjs.org/select2/-/select2-4.1.0-rc.0.tgz", + "integrity": "sha512-Hr9TdhyHCZUtwznEH2CBf7967mEM0idtJ5nMtjvk3Up5tPukOLXbHUNmh10oRfeNIhj+3GD3niu+g6sVK+gK0A==" + }, "node_modules/selfsigned": { "version": "2.4.1", "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.4.1.tgz", @@ -22323,9 +22300,9 @@ } }, "node_modules/tslib": { - "version": "2.6.3", - "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.3.tgz", - "integrity": "sha512-xNvxJEOUiWPGhUuUdQgAJPKOOJfGnIyKySOc09XkKsgdUV/3E2zvwZYdejjmRgPCgcym1juLH3226yA7sEFJKQ==" + "version": "2.7.0", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.7.0.tgz", + "integrity": "sha512-gLXCKdN1/j47AiHiOkJN69hJmcbGTHI0ImLmbYLHykhgeN0jVGola9yVjFgzCUklsZQMW55o+dW7IXv3RCXDzA==" }, "node_modules/tsml": { "version": "1.0.1", @@ -23191,6 +23168,15 @@ "node": ">=4.0.0" } }, + "node_modules/vue-multiselect": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/vue-multiselect/-/vue-multiselect-2.1.9.tgz", + "integrity": "sha512-nGEppmzhQQT2iDz4cl+ZCX3BpeNhygK50zWFTIRS+r7K7i61uWXJWSioMuf+V/161EPQjexI8NaEBdUlF3dp+g==", + "engines": { + "node": ">= 4.0.0", + "npm": ">= 3.0.0" + } + }, "node_modules/vue-property-decorator": { "version": "9.1.2", "resolved": "https://registry.npmjs.org/vue-property-decorator/-/vue-property-decorator-9.1.2.tgz", diff --git a/frontend/package.json b/frontend/package.json index ca1c9c469..8d40595bb 100644 --- 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 index b47709ab3..85f666392 100644 --- 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; -} \ No newline at end of file diff --git a/frontend/src/components/exams/add-exam-form-components.ts b/frontend/src/components/exams/add-exam-form-components.ts index 0c419e9ea..c9f5cd972 100644 --- 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: ` - - -
Add Group Exam
-
Add Individual SkilledTradesBC Exam
-
Add Non-SkilledTradesBC Exam
-
Add Environment Exam
- - -
- - + +
Add Group Exam
+
Add Individual SkilledTradesBC Exam
+
Add Non-SkilledTradesBC Exam
+
Add Environment Exam
+ + +
+ -

{{ type.exam_type_name }}

- - - + + + + + - ` }) 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: {