Reduced code duplication for observation searching

frontend/src/components/ObservationSearchBar.vue

@@ -0,0 +1,160 @@
+<template>
+  <b-row>
+    <b-col>
+      <b-form-group label="Site">
+        <b-form-select class="text-center" v-model="siteSelection" :options="siteOptions"/>
+      </b-form-group>
+    </b-col>
+    <b-col>
+      <b-form-group label="Tutor">
+        <b-form-select class="text-center" v-model="tutorSelection" :options="tutorOptions"/>
+      </b-form-group>
+    </b-col>
+    <b-col>
+      <b-form-group label="Shift">
+        <b-form-input class="text-center" v-model="whom" type="text"></b-form-input>
+      </b-form-group>
+    </b-col>
+    <b-col>
+      <b-form-group label="Person">
+        <b-form-input v-model="person" type="text" class="text-center"></b-form-input>
+      </b-form-group>
+    </b-col>
+    <b-col>
+      <b-form-group label="From">
+        <date-picker
+          v-model="startDate"
+          @dp-change="changeStartDate"
+          value="startDate"
+          :config="dateOptions"
+        />
+      </b-form-group>
+    </b-col>
+    <b-col>
+      <b-form-group label="To">
+        <date-picker
+          v-model="endDate"
+          @dp-change="changeEndDate"
+          value="endDate"
+          :config="dateOptions"
+        />
+      </b-form-group>
+    </b-col>
+    <b-col>
+      <b-button v-on:click="$emit('refresh')">Refresh</b-button>
+    </b-col>
+  </b-row>
+</template>
+<script>
+import Vue from "vue";
+export default {
+  data: function() {
+    return {
+      dateOptions: {
+        format: "DD/MM/YYYY",
+        useCurrent: false
+      },
+      siteOptions: [],
+      tutorOptions: []
+    };
+  },
+  computed: {
+    startDate: {
+      get() {
+        return this.$store.state.search.start;
+      },
+      set(data) {
+        this.$store.commit("setSearchStartDate", data);
+      }
+    },
+    endDate: {
+      get() {
+        return this.$store.state.search.end;
+      },
+      set(data) {
+        this.$store.commit("setSearchEndDate", data);
+      }
+    },
+    siteSelection: {
+      get() {
+        return this.$store.state.search.site;
+      },
+      set(data) {
+        this.$store.commit("setSearchSite", data);
+      }
+    },
+    tutorSelection: {
+      get() {
+        return this.$store.state.search.tutor;
+      },
+      set(data) {
+        this.$store.commit("setSearchTutor", data);
+      }
+    },
+    whom: {
+      get() {
+        return this.$store.state.search.whom;
+      },
+      set(data) {
+        this.$store.commit("setSearchWhom", data);
+      }
+    },
+    person: {
+      get() {
+        return this.$store.state.search.person;
+      },
+      set(data) {
+        this.$store.commit("setSearchPerson", data);
+      }
+    }
+  },
+  methods: {
+    getTutors: function() {
+      if (this.siteSelection != null) {
+        Vue.axios
+          .get("/site/" + this.siteSelection + "/tutors")
+          .then(response => {
+            this.tutorOptions = [{ text: "Any", value: null }].concat(
+              response.data
+            );
+          });
+      }
+    },
+    changeStartDate: function(e) {
+      this.startDate = e.date;
+    },
+    changeEndDate: function(e) {
+      this.endDate = e.date;
+    },
+    setInterval: function(amount, timeType) {
+      this.endDate = moment();
+      this.startDate = moment().subtract(amount, timeType);
+    }
+  },
+  watch: {
+    siteSelection: function() {
+      this.tutorOptions = [];
+      this.tutorSelection = null;
+      this.getTutors();
+    }
+  },
+  mounted() {
+    Vue.axios
+      .get("/site")
+      .then(response => {
+        this.siteOptions = response.data;
+      })
+      .catch(error => {
+        if (error.response.status === 404) {
+          this.$router.push("/dberror");
+          return;
+        }
+        this.errorStatus = error.response.status;
+        this.errorMessage = error.response.data;
+        this.$refs.errorModal.show();
+      });
+    this.getTutors();
+    this.$emit('refresh');
+  }
+};
+</script>

frontend/src/views/Stats.vue

@@ -31,42 +31,7 @@
             </b-button-group>
           </b-col>
         </b-row>
-        <b-row>
+        <observation-search-bar v-on:refresh="getFilteredAverage()"></observation-search-bar>
-            <b-col>
-                <b-form-group label="Site">
-                    <b-form-select class="text-center" v-model="siteSelection" :options="siteOptions"/>
-                </b-form-group>
-            </b-col>
-            <b-col>
-                <b-form-group label="Tutor">
-                    <b-form-select class="text-center" v-model="tutorSelection" :options="tutorOptions"/>
-                </b-form-group>
-            </b-col>
-            <b-col>
-                <b-form-group label="Shift">
-                    <b-form-input class="text-center" v-model="whom" type="text"></b-form-input>
-                </b-form-group>
-            </b-col>
-            <b-col>
-                <b-form-group label="Person">
-                    <b-form-input v-model="person" type="text" class="text-center"></b-form-input>
-                </b-form-group>
-            </b-col>
-            <b-col>
-                <b-form-group label="From">
-                    <date-picker v-model="startDate" @dp-change="changeStartDate" value="startDate"
-                                 :config="dateOptions"/>
-                </b-form-group>
-            </b-col>
-            <b-col>
-                <b-form-group label="To">
-                    <date-picker v-model="endDate" @dp-change="changeEndDate" value="endDate" :config="dateOptions"/>
-                </b-form-group>
-            </b-col>
-            <b-col>
-                <b-button v-on:click="getFilteredAverage()">Refresh</b-button>
-            </b-col>
-        </b-row>
         <b-row v-if="chartData != null && chartData.labels.length > 0 && !loading">
             <b-col v-if="chartMode == 0">
                 <stats-view v-bind:chartData="chartData"
@@ -92,6 +57,7 @@
 import Vue from "vue";
 import StatsView from "../components/StatsView";
 import AfiPie from "../components/AfiPie"
+import ObservationSearchBar from "../components/ObservationSearchBar"
 import "vue-awesome/icons/exclamation-circle";
 import "vue-awesome/icons/search";
 
@@ -100,7 +66,7 @@ var moment = require("moment");
 export default {
   name: "stats",
   title: "Statistics",
-  components: { StatsView, AfiPie },
+  components: { StatsView, AfiPie, ObservationSearchBar },
   data: function() {
     return {
       chartMode: 0,
@@ -144,13 +110,7 @@ export default {
         maintainAspectRatio: false
       },
       errorStatus: null,
-      errorMessage: null,
+      errorMessage: null
-      dateOptions: {
-        format: "DD/MM/YYYY",
-        useCurrent: false
-      },
-      siteOptions: [],
-      tutorOptions: []
     };
   },
   computed: {
@@ -169,38 +129,6 @@ export default {
       set(data){
         this.$store.commit('setSearchEndDate', data);
       }
-    },
-    siteSelection: {
-      get(){
-        return this.$store.state.search.site;
-      },
-      set(data){
-        this.$store.commit('setSearchSite', data);
-      }
-    },
-    tutorSelection: {
-      get(){
-        return this.$store.state.search.tutor;
-      },
-      set(data){
-        this.$store.commit('setSearchTutor', data)
-      }
-    },
-    whom: {
-      get(){
-        return this.$store.state.search.whom;
-      },
-      set(data){
-        this.$store.commit('setSearchWhom', data)
-      }
-    },
-    person: {
-      get(){
-        return this.$store.state.search.person;
-      },
-      set(data){
-        this.$store.commit('setSearchPerson', data)
-      }
     }
   },
   methods: {
@@ -208,12 +136,12 @@ export default {
       this.loading = true;
       Vue.axios
         .post(this.endpoints[this.chartMode], {
-          site: this.siteSelection,
+          site: this.$store.state.search.site,
-          tutor: this.tutorSelection,
+          tutor: this.$store.state.search.tutor,
           startDate: moment(this.startDate).format("YYYY-MM-DD"),
           endDate: moment(this.endDate).format("YYYY-MM-DD"),
-          whom: this.whom,
+          whom: this.$store.state.search.whom,
-          person: this.person
+          person: this.$store.state.search.person
         })
         .then(response => {
           this.chartData = response.data;
@@ -226,52 +154,10 @@ export default {
           this.loading = false;
         });
     },
-    getTutors: function() {
-      if (this.siteSelection != null) {
-        Vue.axios
-          .get("/site/" + this.siteSelection + "/tutors")
-          .then(response => {
-            this.tutorOptions = [{ text: "Any", value: null }].concat(
-              response.data
-            );
-          });
-      }
-    },
-    changeStartDate: function(e) {
-      this.startDate = e.date;
-    },
-    changeEndDate: function(e) {
-      this.endDate = e.date;
-    },
     setInterval: function(amount, timeType){
       this.endDate = moment();
       this.startDate = moment().subtract(amount, timeType);
     }
-  },
-  watch: {
-    siteSelection: function() {
-      this.tutorOptions = [];
-      this.tutorSelection = null;
-      this.getTutors();
-    }
-  },
-  mounted() {
-    Vue.axios
-      .get("/site")
-      .then(response => {
-        this.siteOptions = response.data;
-      })
-      .catch(error => {
-        if (error.response.status === 404) {
-          this.$router.push("/dberror");
-          return;
-        }
-        this.errorStatus = error.response.status;
-        this.errorMessage = error.response.data;
-        this.$refs.errorModal.show();
-      });
-    this.getTutors();
-    this.getFilteredAverage();
   }
 };
 </script>

frontend/src/views/ViewObservations.vue

@@ -12,51 +12,7 @@
         </button>
       </div>
     </b-modal>
-    <b-row>
+    <observation-search-bar v-on:refresh="getFiltered()"></observation-search-bar>
-      <b-col>
-        <b-form-group label="Site">
-          <b-form-select class="text-center" v-model="siteSelection" :options="siteOptions"/>
-        </b-form-group>
-      </b-col>
-      <b-col>
-        <b-form-group label="Tutor">
-          <b-form-select class="text-center" v-model="tutorSelection" :options="tutorOptions"/>
-        </b-form-group>
-      </b-col>
-      <b-col>
-        <b-form-group label="Shift">
-          <b-form-input v-model="whom" type="text" class="text-center"></b-form-input>
-        </b-form-group>
-      </b-col>
-      <b-col>
-        <b-form-group label="Person">
-          <b-form-input v-model="person" type="text" class="text-center"></b-form-input>
-        </b-form-group>
-      </b-col>
-      <b-col>
-        <b-form-group label="From">
-          <date-picker
-            v-model="startDate"
-            @dp-change="changeStartDate"
-            value="startDate"
-            :config="dateOptions"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col>
-        <b-form-group label="To">
-          <date-picker
-            v-model="endDate"
-            @dp-change="changeEndDate"
-            value="endDate"
-            :config="dateOptions"
-          />
-        </b-form-group>
-      </b-col>
-      <b-col>
-        <b-button v-on:click="getFiltered()">Refresh</b-button>
-      </b-col>
-    </b-row>
     <b-container v-if="observationData != null && observationData.length > 0" fluid>
       <b-card no-body>
         <b-tabs pills card vertical>
@@ -185,40 +141,20 @@
 import Vue from "vue";
 import "vue-awesome/icons/search";
 import ObservationEntry from "../components/ObservationEntry.vue";
+import ObservationSearchBar from "../components/ObservationSearchBar"
 
 var moment = require("moment");
 export default {
   name: "viewobservations",
   title: "Observations History",
-  components: { ObservationEntry },
+  components: { ObservationEntry, ObservationSearchBar },
   data: function() {
     return {
-      dateOptions: {
-        format: "DD/MM/YYYY",
-        useCurrent: false
-      },
-      siteOptions: [],
-      tutorOptions: [],
       observationData: null,
       errorStatus: null,
       errorMessage: null
     };
   },
-  mounted() {
-    Vue.axios
-      .get("/site")
-      .then(response => {
-        this.siteOptions = response.data;
-      })
-      .catch(error => {
-        if (error.response.status === 404) {
-          this.$router.push("/dberror");
-          return;
-        }
-      });
-    this.getTutors();
-    this.getFiltered();
-  },
   computed: {
     startDate: {
       get() {
@@ -235,50 +171,18 @@ export default {
       set(data) {
         this.$store.commit("setSearchEndDate", data);
       }
-    },
-    siteSelection: {
-      get() {
-        return this.$store.state.search.site;
-      },
-      set(data) {
-        this.$store.commit("setSearchSite", data);
-      }
-    },
-    tutorSelection: {
-      get() {
-        return this.$store.state.search.tutor;
-      },
-      set(data) {
-        this.$store.commit("setSearchTutor", data);
-      }
-    },
-    whom: {
-      get() {
-        return this.$store.state.search.whom;
-      },
-      set(data) {
-        this.$store.commit("setSearchWhom", data);
-      }
-    },
-    person: {
-      get() {
-        return this.$store.state.search.person;
-      },
-      set(data) {
-        this.$store.commit("setSearchPerson", data);
-      }
     }
   },
   methods: {
     getFiltered: function() {
       Vue.axios
         .post("/observations", {
-          site: this.siteSelection,
+          site: this.$store.state.search.site,
-          tutor: this.tutorSelection,
+          tutor: this.$store.state.search.tutor,
           startDate: moment(this.startDate).format("YYYY-MM-DD"),
           endDate: moment(this.endDate).format("YYYY-MM-DD"),
-          whom: this.whom,
+          whom: this.$store.state.search.whom,
-          person: this.person
+          person: this.$store.state.search.person
         })
         .then(response => {
           this.observationData = response.data;
@@ -289,23 +193,6 @@ export default {
           this.$refs.errorModal.show();
         });
     },
-    changeStartDate: function(e) {
-      this.startDate = e.date;
-    },
-    changeEndDate: function(e) {
-      this.endDate = e.date;
-    },
-    getTutors: function() {
-      if (this.siteSelection != null) {
-        Vue.axios
-          .get("/site/" + this.siteSelection + "/tutors")
-          .then(response => {
-            this.tutorOptions = [{ text: "Any", value: null }].concat(
-              response.data
-            );
-          });
-      }
-    },
     getCSV: function() {
       Vue.axios
         .post("/observations/csv", {
@@ -338,13 +225,6 @@ export default {
         return data.substr(0, 20) + "...";
       }
     }
-  },
-  watch: {
-    siteSelection: function() {
-      this.tutorOptions = [];
-      this.tutorSelection = null;
-      this.getTutors();
-    }
   }
 };
 </script>