From 07622febd3fdd705aeb0dec089dab19efd0c25d1 Mon Sep 17 00:00:00 2001
From: Nathan Cannon <nathan.cannon@edf-energy.com>
Date: Thu, 20 Sep 2018 12:13:38 +0100
Subject: [PATCH] Add entry areas for observation data.

---
 frontend/src/views/Observation.vue | 90 +++++++++++++++++++++++++-----
 1 file changed, 77 insertions(+), 13 deletions(-)

diff --git a/frontend/src/views/Observation.vue b/frontend/src/views/Observation.vue
index 3973ce5..b9741c0 100644
--- a/frontend/src/views/Observation.vue
+++ b/frontend/src/views/Observation.vue
@@ -1,35 +1,83 @@
 <template>
   <b-container>
-    <b-container v-for="(item, index) in observations" v-bind:key="index" v-bind:type="item.type" v-bind:rating="item.rating" v-bind:strengths="item.strengths" v-bind:improvements="item.improvements">
-      <b-button v-on:click="deleteObservation(index)">Delete</b-button>
-    </b-container>
-    <b-button v-on:click="this.addAnotherObservation">Add Entry</b-button>
+    <b-form @submit="onSubmit" id="submission-form" novalidate>
+      <b-container v-for="(item, index) in observations" v-bind:key="index" class="border bottom-buffer">
+        <b-row class="top-buffer">
+          <b-col cols="3">
+            <b-form-group label="Type">
+              <b-form-select v-model="observations[index].type" required>
+                <option value="">Please select an option</option>
+                <option value="MONITORING">Monitoring</option>
+                <option value="CONTROL">Control</option>
+                <option value="CONSERVATISM">Conservatism</option>
+                <option value="TEAMWORK">Teamwork</option>
+                <option value="KNOWLEDGE">Knowledge</option>
+              </b-form-select>
+            </b-form-group>
+            <b-form-group label="Rating">
+              <b-form-radio-group buttons button-variant="outline-info" size="lg" v-model="observations[index].rating" required>
+                <b-form-radio value="1">1</b-form-radio>
+                <b-form-radio value="2">2</b-form-radio>
+                <b-form-radio value="3">3</b-form-radio>
+                <b-form-radio value="4">4</b-form-radio>
+                <b-form-radio value="5">5</b-form-radio>
+              </b-form-radio-group>
+            </b-form-group>
+          </b-col>
+          <b-col>
+            <b-form-group label="Strengths">
+              <b-form-textarea v-model="observations[index].strengths" placeholder="Enter Strengths" :rows="3" :max-rows="6" required no-resize>
+              </b-form-textarea>
+            </b-form-group>
+            <b-form-group label="Areas of Improvement">
+              <b-form-textarea v-model="observations[index].improvements" placeholder="Enter Areas of Improvement" :rows="3" :max-rows="6" required no-resize>
+              </b-form-textarea>
+            </b-form-group>
+          </b-col>
+        </b-row>
+        <b-row class="bottom-buffer">
+          <b-col>
+            <b-button v-on:click="deleteObservation(index)">Delete</b-button>
+          </b-col>
+        </b-row>
+      </b-container>
+      <b-button type="submit" variant="primary">Submit</b-button>
+      <b-button v-on:click="this.addAnotherObservation">Add Entry</b-button>
+    </b-form>
   </b-container>
 </template>
 
 <script>
+import "bootstrap/dist/css/bootstrap.css";
+import "bootstrap-vue/dist/bootstrap-vue.css";
+import Vue from "vue";
 export default {
   name: "observation",
   data: function() {
     return {
       observations: [
         {
-          type: "",
-          rating: 0,
-          strengths: "",
-          improvements: ""
+          type: null,
+          rating: null,
+          strengths: null,
+          improvements: null
         }
       ]
     };
   },
   methods: {
     addAnotherObservation: function() {
-      console.log("Adding");
       this.observations.push({
-        type: "",
-        rating: 0,
-        strengths: "",
-        improvements: ""
+        type: null,
+        rating: null,
+        strengths: null,
+        improvements: null
+      });
+      Vue.nextTick(function() {
+        window.scrollTo(
+          0,
+          document.body.scrollHeight || document.documentElement.scrollHeight
+        );
       });
     },
     deleteObservation: function(index) {
@@ -37,7 +85,23 @@ export default {
       if (this.observations.length == 0) {
         this.addAnotherObservation();
       }
+    },
+    onSubmit: function(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      var form = document.getElementById("submission-form");
+      console.log(form.checkValidity());
+      form.classList.add("was-validated");
     }
   }
 };
 </script>
+
+<style>
+.top-buffer {
+  margin-top: 10px;
+}
+.bottom-buffer {
+  margin-bottom: 10px;
+}
+</style>