Skip to content

Commit

Permalink
Merge pull request bcgov#1026 from midhunmanoj2024/SBCQ-60
Browse files Browse the repository at this point in the history
SBCQ-60 Exam module changes
  • Loading branch information
josekudiyirippil authored Dec 4, 2024
2 parents 06dea9d + 3bc0ec1 commit 0e7f884
Show file tree
Hide file tree
Showing 12 changed files with 1,526 additions and 3,235 deletions.
4,347 changes: 1,253 additions & 3,094 deletions frontend/package-lock.json

Large diffs are not rendered by default.

11 changes: 7 additions & 4 deletions frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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",
Expand All @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
13 changes: 12 additions & 1 deletion frontend/src/assets/css/q.css
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

11 changes: 9 additions & 2 deletions frontend/src/components/Booking/calendar.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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 = []
Expand Down Expand Up @@ -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
}
Expand Down
84 changes: 46 additions & 38 deletions frontend/src/components/exams/add-exam-form-components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down Expand Up @@ -182,7 +186,9 @@ export class DateQuestion extends Vue {
// DropdownQuestion
@Component({
components: {
Checkmark
Checkmark,
ModelListSelect,
Multiselect
},
computed: {
...mapState({
Expand All @@ -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>
`
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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'
Expand All @@ -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);
}
}

Expand Down
10 changes: 9 additions & 1 deletion frontend/src/components/exams/add-exam-modal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
@shown="initialize"
@hidden="hideModal"
:size="modalSize"
scrollable
style="overflow: visible !important;"
>
<template slot="modal-footer">
<template v-if="unSubmitted">
Expand Down Expand Up @@ -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;
Expand Down
57 changes: 57 additions & 0 deletions frontend/src/components/exams/edit-exam-confirmation-modal.vue
Original file line number Diff line number Diff line change
@@ -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>
Loading

0 comments on commit 0e7f884

Please sign in to comment.