Merge pull request #1026 from midhunmanoj2024/SBCQ-60

SBCQ-60 Exam module changes

Author: josekudiyirippil

frontend/package-lock.json

@@ -33,8 +33,7 @@
     "bootstrap-vue": "^2.22.0",
     "buefy": "^0.9.21",
     "buffer": "^6.0.3",
-    "camunda-formio-tasklist-vue": "1.0.18",
-    "core-js": "^3.9.1",
+    "camunda-formio-tasklist-vue": "^1.0.19",
     "crypto-browserify": "^3.12.0",
     "es6-promise": "^4.2.8",
     "es6-shim": "^0.35.6",
@@ -51,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",
@@ -62,9 +62,11 @@
     "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-video-player": "^5.0.2",
+    "vue-router": "3.5.1",
+    "vue-search-select": "^2.9.6",
+    "vue-video-player": "5.0.2",
     "vue2-datepicker": "^3.11.0",
     "vue2-timepicker": "^1.1.6",
     "vuetify": "^2.6.10",
@@ -105,6 +107,7 @@
     "babel-loader": "8.2.2",
     "chalk": "4.1.0",
     "connect-history-api-fallback": "1.6.0",
+    "core-js": "^3.37.1",
     "cypress": "^12.17.4",
     "eslint": "^7.32.0",
     "eslint-friendly-formatter": "4.0.1",

frontend/package.json

@@ -263,4 +263,15 @@ input#app_timepicker_id {
   width: unset;
   position: unset;
   left: unset;
-}
+}
+
+
+.multiselect__option--highlight {
+  background-color: #ffffff;
+}
+
+.custom-multiselect .multiselect__option {
+  padding: 0;
+  text-wrap: wrap;
+}
+

frontend/src/assets/css/q.css

@@ -80,10 +80,10 @@
             :now="currentDay"
             color="primary"
             v-model="value"
-            first-time="08:30"
+            :first-time="startTime"
             interval-minutes="30"
             interval-height="40"
-            interval-count="17"
+            :interval-count="intervalCount"
             :type="type"
             category-show-all
             :categories="categories"
@@ -259,6 +259,8 @@ export default class Calendar extends Vue {
   mode: any = 'stack'
   weekday: any = [1, 2, 3, 4, 5]
   start: any = moment().format('YYYY-MM-DD')
+  startTime : string = '08:30'
+  intervalCount : string = '17'
 
   value: any = ''
   eventsList: any = []
@@ -693,10 +695,15 @@ export default class Calendar extends Vue {
 
   toggleOffsite (bool) {
     this.toggleOffsiteVisible(bool)
+  
     if (bool) {
       // I assume this empty block is intentional
+      this.startTime = "00:00"
+      this.intervalCount = "48"
     }
     if (!bool) {
+      this.startTime = "08:30"
+    this.intervalCount = "17"
       if (this.offsiteOnly) {
         // I assume this empty block is intentional
       }

frontend/src/components/Booking/calendar.vue

@@ -6,6 +6,10 @@ import { mapState } from 'vuex'
 import DatePicker from 'vue2-datepicker'
 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({
@@ -182,7 +186,9 @@ export class DateQuestion extends Vue {
 // DropdownQuestion
 @Component({
   components: {
-    Checkmark
+    Checkmark,
+    ModelListSelect,
+    Multiselect
   },
   computed: {
     ...mapState({
@@ -195,38 +201,35 @@ export class DateQuestion extends Vue {
   <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>
+        <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>
-        <div @click="clickInput" id="exam_type_dropdown">
-          <b-input read-only
-                  autocomplete="off"
-                  :value="inputText"
-                  placeholder="click here to see options"
-                  :style="inputStyle" />
-        </div>
+        <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"
+        >
+          <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>
-    <div :class="dropclass"
-          style="border: 1px solid grey"
-          @click="clickInput">
-      <template v-for="type in dropItems">
-        <b-dd-header v-if="type.header"
-                      :style="{backgroundColor: type.exam_color, listStyleType: 'none'}"
-                      :class="type.class">{{ type.exam_type_name }}</b-dd-header>
-        <b-dd-item v-else :style="{backgroundColor: type.exam_color, listStyleType: 'none'}"
-                    @click="preHandleInput(type.exam_type_id)"
-                    :name="type.exam_type_id"
-                    autocomplete="off"
-                    :id="type.exam_type_id"
-                    :class="type.class">{{ type.exam_type_name }}</b-dd-item>
-      </template>
-    </div>
     </b-row>
   </b-row>
 `
@@ -261,10 +264,16 @@ export class DropdownQuestion extends Vue {
   @State('addExamModal') private addExamModal!: any
   @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
 
   get dropItems () {
+    this.objectItem = {
+      exam_type_id: this.capturedExam.exam_type_id
+    }
     const sorter = (a, b) => {
       const typeA = a.exam_type_name
       const typeB = b.exam_type_name
@@ -313,13 +322,6 @@ export class DropdownQuestion extends Vue {
     return ''
   }
 
-  get inputStyle () {
-    if (this.exam_object && this.exam_object.exam_type_name) {
-      return { backgroundColor: `${this.exam_object.exam_color}` }
-    }
-    return {}
-  }
-
   get dropclass () {
     if (!this.addExamModal.step1MenuOpen) {
       return 'dropdown-menu'
@@ -337,13 +339,19 @@ export class DropdownQuestion extends Vue {
     this.setAddExamModalSetting({ step1MenuOpen: false })
   }
 
-  preHandleInput (id) {
+  customLabel(option) {
+    return option.exam_type_name
+  }
+
+  preHandleInput (item) {
     this.handleInput({
       target: {
         name: 'exam_type_id',
-        value: id
+        value: item.exam_type_id
       }
     })
+    this.displayText = item.exam_type_name
+    console.log("CAPTURED EXAM", item.exam_type_id);
   }
 }
 

frontend/src/components/exams/add-exam-form-components.ts

@@ -9,7 +9,7 @@
     @shown="initialize"
     @hidden="hideModal"
     :size="modalSize"
-    scrollable
+    style="overflow: visible !important;"
   >
     <template slot="modal-footer">
       <template v-if="unSubmitted">
@@ -467,6 +467,14 @@ export default class AddExamModal extends Vue {
 </script>
 
 <style>
+/* .modal-content {
+  overflow: unset !important;
+} */
+#add-exam-modal {
+  .modal-content {
+    overflow: unset !important;
+  }
+}
 .message-text {
   font-size: 0.9rem;
   font-weight: 500;

frontend/src/components/exams/add-exam-modal.vue

@@ -0,0 +1,57 @@
+<template>
+  <div v-if="visible" class="confirmation-modal">
+    <div class="modal-content">
+      <p>Room booking for the exam will be deleted. Are you sure you want to proceed?</p>
+      <div class="button-container">
+        <b-btn class="btn-primary mr-2" @click="$emit('cancel')">Cancel</b-btn>
+        <b-btn class="btn-danger ml-2" @click="$emit('confirm')">Confirm</b-btn>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  }
+}
+</script>
+
+<style scoped>
+.confirmation-modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000; /* Ensure it's above the parent component */
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  max-width: 25%;
+  text-align: center;
+}
+
+.modal-content p {
+  margin-bottom: 20px;
+}
+
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 20px;
+  gap: 20 px
+}
+</style>