From 9925a900c63e9f1ef616897a2dc1dc2db3d862e5 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Wed, 10 Oct 2018 10:22:55 +0100
Subject: [PATCH] User now prompted when no data returned to view, rather than
 just showing nothing.

---
 frontend/src/views/Stats.vue            | 230 ++++++++++++------------
 frontend/src/views/ViewObservations.vue | 167 +++++++++--------
 2 files changed, 207 insertions(+), 190 deletions(-)

diff --git a/frontend/src/views/Stats.vue b/frontend/src/views/Stats.vue
index 1823b5a..3c8aed6 100644
--- a/frontend/src/views/Stats.vue
+++ b/frontend/src/views/Stats.vue
@@ -49,127 +49,133 @@
                 <stats-view v-bind:chartData="chartData"
                             style="position: relative; height:80vh" :options="options"/>
             </b-col>
+            <b-col v-else>
+                <v-icon name="search"></v-icon>
+                <p>No data found with the given search parameters.</p>
+            </b-col>
         </b-row>
     </b-container>
 </template>
 
 <script>
-    import Vue from "vue";
-    import StatsView from "../components/StatsView";
-    import "vue-awesome/icons/exclamation-circle";
-    var moment = require("moment");
+import Vue from "vue";
+import StatsView from "../components/StatsView";
+import "vue-awesome/icons/exclamation-circle";
+import "vue-awesome/icons/search";
 
-    export default {
-        name: "stats",
-        components: {StatsView},
-        data: function () {
-            return {
-                chartData: null,
-                options: {
-                    responsive: true,
-                    maintainAspectRatio: false,
-                    tooltips: {
-                        mode: "index",
-                        intersect: false
-                    },
-                    hover: {
-                        mode: "nearest",
-                        intersect: true
-                    },
-                    scales: {
-                        xAxes: [
-                            {
-                                display: true,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: "Date"
-                                }
-                            }
-                        ],
-                        yAxes: [
-                            {
-                                display: true,
-                                scaleLabel: {
-                                    display: true,
-                                    labelString: "Average Score"
-                                }
-                            }
-                        ]
-                    }
-                },
-                errorStatus: null,
-                errorMessage: null,
-                startDate: moment().subtract(7, "days"),
-                endDate: moment(),
-                dateOptions: {
-                    format: "DD/MM/YYYY",
-                    useCurrent: false
-                },
-                siteSelection: null,
-                siteOptions: [],
-                tutorSelection: null,
-                tutorOptions: [],
-                whom: null
-            };
+var moment = require("moment");
+
+export default {
+  name: "stats",
+  components: { StatsView },
+  data: function() {
+    return {
+      chartData: null,
+      options: {
+        responsive: true,
+        maintainAspectRatio: false,
+        tooltips: {
+          mode: "index",
+          intersect: false
         },
-        methods: {
-            getFilteredAverage: function () {
-                Vue.axios
-                    .post("/observations/chartdata", {
-                        'site': this.siteSelection,
-                        'tutor': this.tutorSelection,
-                        'startDate': moment(this.startDate).format("YYYY-MM-DD"),
-                        'endDate': moment(this.endDate).format("YYYY-MM-DD"),
-                        'whom': this.whom
-                    })
-                    .then(response => {
-                        this.chartData = response.data;
-                    })
-                    .catch(error => {
-                        this.errorStatus = error.response.status;
-                        this.errorMessage = error.response.data;
-                        this.$refs.errorModal.show();
-                    });
-            },
-            getTutors: function () {
-                if (this.siteSelection != null) {
-                    Vue.axios
-                        .get("/site/" + this.siteSelection + "/tutors")
-                        .then(response => {
-                            this.tutorOptions = response.data;
-                        });
-                }
-            },
-            changeStartDate: function (e) {
-                this.startDate = e.date;
-            },
-            changeEndDate: function (e) {
-                this.endDate = e.date;
+        hover: {
+          mode: "nearest",
+          intersect: true
+        },
+        scales: {
+          xAxes: [
+            {
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: "Date"
+              }
             }
-        },
-        watch: {
-            siteSelection: function () {
-                this.tutorOptions = [];
-                this.tutorSelection = null;
-                this.getTutors();
+          ],
+          yAxes: [
+            {
+              display: true,
+              scaleLabel: {
+                display: true,
+                labelString: "Average Score"
+              }
             }
-        },
-        mounted() {
-            this.getFilteredAverage();
-            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();
-                });
+          ]
         }
+      },
+      errorStatus: null,
+      errorMessage: null,
+      startDate: moment().subtract(7, "days"),
+      endDate: moment(),
+      dateOptions: {
+        format: "DD/MM/YYYY",
+        useCurrent: false
+      },
+      siteSelection: null,
+      siteOptions: [],
+      tutorSelection: null,
+      tutorOptions: [],
+      whom: null
     };
+  },
+  methods: {
+    getFilteredAverage: function() {
+      Vue.axios
+        .post("/observations/chartdata", {
+          site: this.siteSelection,
+          tutor: this.tutorSelection,
+          startDate: moment(this.startDate).format("YYYY-MM-DD"),
+          endDate: moment(this.endDate).format("YYYY-MM-DD"),
+          whom: this.whom
+        })
+        .then(response => {
+          this.chartData = response.data;
+        })
+        .catch(error => {
+          this.errorStatus = error.response.status;
+          this.errorMessage = error.response.data;
+          this.$refs.errorModal.show();
+        });
+    },
+    getTutors: function() {
+      if (this.siteSelection != null) {
+        Vue.axios
+          .get("/site/" + this.siteSelection + "/tutors")
+          .then(response => {
+            this.tutorOptions = response.data;
+          });
+      }
+    },
+    changeStartDate: function(e) {
+      this.startDate = e.date;
+    },
+    changeEndDate: function(e) {
+      this.endDate = e.date;
+    }
+  },
+  watch: {
+    siteSelection: function() {
+      this.tutorOptions = [];
+      this.tutorSelection = null;
+      this.getTutors();
+    }
+  },
+  mounted() {
+    this.getFilteredAverage();
+    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();
+      });
+  }
+};
 </script>
diff --git a/frontend/src/views/ViewObservations.vue b/frontend/src/views/ViewObservations.vue
index 6c4094a..73428f5 100644
--- a/frontend/src/views/ViewObservations.vue
+++ b/frontend/src/views/ViewObservations.vue
@@ -67,88 +67,99 @@
                 </b-tabs>
             </b-card>
         </b-container>
+        <b-container v-else>
+            <b-row>
+                <b-col>
+                    <b-col v-else>
+                        <v-icon name="search"></v-icon>
+                        <p>No data found with the given search parameters.</p>
+                    </b-col>
+                </b-col>
+            </b-row>
+        </b-container>
     </b-container>
 </template>
 
 <script>
-    import Vue from "vue";
+import Vue from "vue";
+import "vue-awesome/icons/search";
 
-    var moment = require("moment");
-    export default {
-        name: "viewobservations",
-        data: function () {
-            return {
-                startDate: moment().subtract(7, "days"),
-                endDate: moment(),
-                dateOptions: {
-                    format: "DD/MM/YYYY",
-                    useCurrent: false
-                },
-                siteSelection: null,
-                siteOptions: [],
-                tutorSelection: null,
-                tutorOptions: [],
-                whom: null,
-                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;
-                    }
-                    console.log(error);
-                });
-        },
-        methods: {
-            getFiltered: function () {
-                Vue.axios
-                    .post("/observations", {
-                        site: this.siteSelection,
-                        tutor: this.tutorSelection,
-                        startDate: moment(this.startDate).format("YYYY-MM-DD"),
-                        endDate: moment(this.endDate).format("YYYY-MM-DD"),
-                        whom: this.whom
-                    })
-                    .then(response => {
-                        this.observationData = response.data;
-                    })
-                    .catch(error => {
-                        this.errorStatus = error.response.status;
-                        this.errorMessage = error.response.data;
-                        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 = response.data;
-                        });
-                }
-            }
-        },
-        watch: {
-            siteSelection: function () {
-                this.tutorOptions = [];
-                this.tutorSelection = null;
-                this.getTutors();
-            }
-        }
+var moment = require("moment");
+export default {
+  name: "viewobservations",
+  data: function() {
+    return {
+      startDate: moment().subtract(7, "days"),
+      endDate: moment(),
+      dateOptions: {
+        format: "DD/MM/YYYY",
+        useCurrent: false
+      },
+      siteSelection: null,
+      siteOptions: [],
+      tutorSelection: null,
+      tutorOptions: [],
+      whom: null,
+      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;
+        }
+        console.log(error);
+      });
+  },
+  methods: {
+    getFiltered: function() {
+      Vue.axios
+        .post("/observations", {
+          site: this.siteSelection,
+          tutor: this.tutorSelection,
+          startDate: moment(this.startDate).format("YYYY-MM-DD"),
+          endDate: moment(this.endDate).format("YYYY-MM-DD"),
+          whom: this.whom
+        })
+        .then(response => {
+          this.observationData = response.data;
+        })
+        .catch(error => {
+          this.errorStatus = error.response.status;
+          this.errorMessage = error.response.data;
+          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 = response.data;
+          });
+      }
+    }
+  },
+  watch: {
+    siteSelection: function() {
+      this.tutorOptions = [];
+      this.tutorSelection = null;
+      this.getTutors();
+    }
+  }
+};
 </script>