Reduced code duplication for observation searching
This commit is contained in:
parent
892128a4be
commit
cc94b179c3
160
frontend/src/components/ObservationSearchBar.vue
Normal file
160
frontend/src/components/ObservationSearchBar.vue
Normal file
@ -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>
|
||||
@ -31,42 +31,7 @@
|
||||
</b-button-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<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="getFilteredAverage()">Refresh</b-button>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<observation-search-bar v-on:refresh="getFilteredAverage()"></observation-search-bar>
|
||||
<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,
|
||||
dateOptions: {
|
||||
format: "DD/MM/YYYY",
|
||||
useCurrent: false
|
||||
},
|
||||
siteOptions: [],
|
||||
tutorOptions: []
|
||||
errorMessage: null
|
||||
};
|
||||
},
|
||||
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,
|
||||
tutor: this.tutorSelection,
|
||||
site: this.$store.state.search.site,
|
||||
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,
|
||||
person: this.person
|
||||
whom: this.$store.state.search.whom,
|
||||
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>
|
||||
|
||||
@ -12,51 +12,7 @@
|
||||
</button>
|
||||
</div>
|
||||
</b-modal>
|
||||
<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 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>
|
||||
<observation-search-bar v-on:refresh="getFiltered()"></observation-search-bar>
|
||||
<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,
|
||||
tutor: this.tutorSelection,
|
||||
site: this.$store.state.search.site,
|
||||
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,
|
||||
person: this.person
|
||||
whom: this.$store.state.search.whom,
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user