Merge pull request #76 from sjrumsby/search-filtering

Added components for performing search filtering

api/app/models/bookings/exam.py

@@ -38,6 +38,7 @@ class Exam(Base):
     booking = db.relationship("Booking")
     exam_type = db.relationship("ExamType")
     invigilator = db.relationship("Invigilator")
+    office = db.relationship("Office")
 
     def __repr__(self):
         return '<Exam Name: (name={self.exam_name!r})>'.format(self=self)

api/app/resources/bookings/exam/exam_list.py

@@ -31,12 +31,16 @@ class ExamList(Resource):
     def get(self):
         try:
             csr = CSR.find_by_username(g.oidc_token_info['username'])
-
             exams = Exam.query.filter(Exam.deleted_date.is_(None)).filter_by(office_id=csr.office_id)
 
+            search_kwargs = {}
+
             if request.args:
+                for key in request.args:
+                    if hasattr(Exam, key):
+                        search_kwargs[key] = request.args.get(key)
 
-                exams = exams.filter_by(**request.args)
+                exams = exams.filter_by(**search_kwargs)
 
             result = self.exam_schema.dump(exams)
 

api/app/schemas/bookings/exam_schema.py

@@ -16,6 +16,7 @@
 import toastedmarshmallow
 from app.models.bookings import Exam
 from app.schemas.bookings import BookingSchema, ExamTypeSchema, InvigilatorSchema
+from app.schemas.theq import OfficeSchema
 from qsystem import ma
 
 
@@ -45,3 +46,4 @@ class Meta:
     booking = fields.Nested(BookingSchema())
     exam_type = fields.Nested(ExamTypeSchema())
     invigilator = fields.Nested(InvigilatorSchema())
+    office = fields.Nested(OfficeSchema(exclude=("csrs",)))

frontend/src/add-citizen/form-components/channel.vue

@@ -35,7 +35,6 @@
       channel: {
         get() { return this.form_data.channel },
         set(value) {
-          console.log('setter did it')
           this.$store.commit('updateAddModalForm', { type: 'channel', value })
         }
       }

frontend/src/exams/exam-inventory-table.vue

@@ -1,88 +1,71 @@
 <template>
   <div style="margin-left: 20px">
-    <b-form inline class="pb-2 pl-3">
-      <font-awesome-icon icon="filter"
-                         class="mr-1"
-                         style="font-size: 1.0rem"/>
-      <b-form-select :options="filters"
-                     :value="filter"
-                     @input.native="changeFilter"/>
-      <font-awesome-icon icon="binoculars"
-                         class="ml-3 mr-1"
-                         style="font-size: 1.0rem"/>
-      <b-form-input placeholder="type to search"/>
-    </b-form>
-    <b-table :items="examInventory"
-             :fields="fields"
+    <b-col md="6" class="my-1">
+      <b-form-group horizontal label="Filter" class="mb-0">
+        <b-input-group>
+          <b-form-input v-model="filter" placeholder="Type to Search" />
+          <b-input-group-append>
+            <b-btn :disabled="!filter" @click="filter = ''">Clear</b-btn>
+          </b-input-group-append>
+        </b-input-group>
+      </b-form-group>
+    </b-col>
+    <b-table :items="exams"
+             :fields=getFields
              class="m-0 p-0"
              head-variant="light"
+             empty-text="There are no exams that match this filter criteria"
              small
              outlined
-             hover>
-      <template slot="roomloc" slot-scope="row">
-        <div v-if="row.item.location">
-          {{ row.item.location }}
-        </div>
-        <div v-if="row.item.room">
-          {{ row.item.room }}
-        </div>
-      </template>
+             hover
+             show-empty
+             :filter="filter">
     </b-table>
-
   </div>
 </template>
 
 <script>
-  import { mapGetters, mapState } from 'vuex'
+  import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
 
   export default {
     name: "ExamInventoryTable",
     props: ['mode'],
     data() {
       return {
         filter: null,
-        filters: [
-          {text: 'Select a Filter', value: null},
-        ],
-        fieldsModal: [
-          {key: 'event_id', label: 'Event ID', sortable: false, thStyle: {width: '9%'} },
-          {key: 'exam_name', label: 'Exam Name', sortable: true, thStyle: {width: '17%'} },
-          {key: 'exam_method', label: 'Method', sortable: false, thStyle: {width: '8%'} },
-          {key: 'expiry_date', label: 'Expirey Date', sortable: true, thStyle: {width: '9%'} },
-          {key: 'exam_received', label: 'Received', sortable: true, thStyle: {width: '10%'} },
-          {key: 'examinee_name', label: 'Student Name', sortable: true, thStyle: {width: '18%'}},
-          {key: 'notes', label: 'Notes', sortable: true, thStyle: {width: '18%'}},
-          {key: 'number_of_students', label: 'Students', sortable: false, thStyle: {width: '11%'}}
-        ],
-        fieldsInventory: [
-          {key: 'event_id', label: 'Event ID', sortable: false, thStyle: {width: '9%'} },
-          {key: 'exam_name', label: 'Exam Name', sortable: true, thStyle: {width: '17%'} },
-          {key: 'exam_method', label: 'Method', sortable: false, thStyle: {width: '8%'} },
-          {key: 'expiry_date', label: 'Expirey Date', sortable: true, thStyle: {width: '9%'} },
-          {key: 'exam_received', label: 'Received', sortable: true, thStyle: {width: '10%'} },
-          {key: 'examinee_name', label: 'Student Name', sortable: true, thStyle: {width: '18%'}},
-          {key: 'notes', label: 'Notes', sortable: true, thStyle: {width: '18%'}},
-          {key: 'number_of_students', label: 'Students', sortable: false, thStyle: {width: '11%'}}
+        fields: [
+          {key: 'office.office_name', label: 'Office', sortable: true},
+          {key: 'event_id', label: 'Event ID', sortable: true },
+          {key: 'exam_name', label: 'Exam Name', sortable: true },
+          {key: 'exam_method', label: 'Method', sortable: true },
+          {key: 'expiry_date', label: 'Expiry Date', sortable: true },
+          {key: 'exam_received', label: 'Received', sortable: true },
+          {key: 'examinee_name', label: 'Student Name', sortable: true },
+          {key: 'notes', label: 'Notes', sortable: true },
+          {key: 'invigilator.invigilator_name', label: 'Invigilator', sortable: true },
+          {key: 'booking.room.room_name', label: 'Location', sortable: true },
         ],
       }
     },
+    methods: {
+      ...mapActions(['getExams']),
+    },
+    mounted() {
+      this.getExams()
+    },
     computed: {
+      ...mapState(['exams']),
       ...mapGetters(['role_code']),
-      ...mapState(['examInventory']),
-      fields() {
-        if (this.mode === 'inventory') {
-          if (this.role_code === 'GA' || this.role_code === 'CSR' || this.role_code === 'SUPPORT') {
-            return this.fieldsInventory
-          }
-        } else if (this.mode === 'modal') {
-          return this.fieldsModal
+      getFields() {
+        if ("LIASON" === this.role_code) {
+          return this.fields
+        } else {
+          let returnFields = this.fields
+          let index = this.fields.findIndex(x => x.key === "office.office_name")
+          returnFields.splice(index, 1)
+          return returnFields
         }
       }
-    },
-
+    }
   }
 </script>
-
-<style scoped>
-
-</style>

frontend/src/store/index.js

@@ -164,23 +164,7 @@ export const store = new Vuex.Store({
       office_id: null,
     },
     addIndividualITAExamModalVisibe: false,
-    examInventory: [
-      {
-        event_id: 1,
-        booking_id: null,
-        exam_type_id: 2,
-        invigilator_id: null,
-        office_id: 1,
-        exam_name: 'Some Exam Name',
-        examinee_name: 'Student One',
-        expiry_date: 'Jan 22, 2019',
-        notes: '250-477-3960',
-        exam_received: 'Oct 24, 2018',
-        session_number: null,
-        number_of_students: 1,
-        exam_method: 'online',
-      },
-    ],
+    exams: [],
     iframeLogedIn: false,
     viewPortSizes: {
       h: null,
@@ -549,6 +533,18 @@ export const store = new Vuex.Store({
         })
     },
 
+    getExams(context) {
+      Axios(context).get('/exams/')
+        .then(resp => {
+          context.commit('setExams', resp.data.exams)
+        })
+        .catch(error => {
+          console.log('error @ store.actions.getCsrs')
+          console.log(error.response)
+          console.log(error.message)
+        })
+    },
+
     getServices(context) {
       let office_id = context.state.user.office.office_id
       Axios(context).get(`/services/?office_id=${office_id}`)
@@ -1608,6 +1604,11 @@ export const store = new Vuex.Store({
       state.csrs = payload
     },
 
+    setExams(state, payload) {
+      state.exams = []
+      state.exams = payload
+    },
+
     updateCitizen(state, payload) {
       Vue.set(state.citizens, payload.index, payload.citizen)
     },
@@ -1726,16 +1727,6 @@ export const store = new Vuex.Store({
       })
     },
 
-    setExamInventory(state, exams) {
-      let inventory = []
-      exams.forEach(exam =>{
-        exam.expiry_date = exam.expiry_date.split('T')[0]
-        exam.exam_received = exam.exam_received === 1 ? 'Yes' : 'No'
-        inventory.push(exam)
-      })
-      state.examInventory = inventory
-    },
-
     toggleIndividualCaptureTabRadio(state, payload) {
       Vue.set(
         state.captureITAExamTabSetup,