Removed incorrect validation of tutor selections.

frontend/src/views/Home.vue

@@ -65,8 +65,7 @@
                             <p v-if="site == null">Select a site first.</p>
                             <v-icon name="spinner" spin v-if="loadingTutors"/>
                             <b-form-checkbox-group :value="tutors" @input="setTutors"
-                                                   :options="tutorOptions"
+                                                   :options="tutorOptions"></b-form-checkbox-group>
-                                                   required></b-form-checkbox-group>
                         </b-form-group>
                     </b-col>
                 </b-row>
@@ -144,10 +143,12 @@
                 console.log("submit");
                 e.preventDefault();
                 e.stopPropagation();
-                let form = document.getElementById("submission-form");
+                var form = document.getElementById("submission-form");
-                if (form.checkValidity()) {
+                if (form.checkValidity() && this.tutors.length > 0) {
+                    console.log("valid");
                     this.$router.push("/observation");
                 }
+                form.classList.add("was-validated");
             }
         }
     };

frontend/src/views/Observation.vue

@@ -1,7 +1,9 @@
 <template>
     <b-container>
         <h3>
-      <v-icon name="tag" scale="1.5" />{{type}}/{{description}}</h3>
+            <v-icon name="tag" scale="1.5"/>
+            {{type}}/{{description}}
+        </h3>
         <b-container class="sidebar">
             <b-row align-v="center" class="sidebar-vert-padding">
                 <b-col class="centered-image">
@@ -49,7 +51,9 @@
                             </b-form-select>
                         </b-form-group>
                         <b-form-group label="Rating">
-              <b-form-radio-group buttons button-variant="outline-info" size="lg" v-bind:value="item.rating" @change="changeRating(index, $event)" required>
+                            <b-form-radio-group buttons button-variant="outline-info" size="lg"
+                                                v-bind:value="item.rating" @change="changeRating(index, $event)"
+                                                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>
@@ -60,11 +64,13 @@
                     </b-col>
                     <b-col>
                         <b-form-group label="Strengths">
-              <b-form-textarea v-model="item.strengths" placeholder="Enter Strengths" :rows="3" :max-rows="6" required no-resize>
+                            <b-form-textarea v-model="item.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="item.improvements" placeholder="Enter Areas of Improvement" :rows="3" :max-rows="6" required no-resize>
+                            <b-form-textarea v-model="item.improvements" placeholder="Enter Areas of Improvement"
+                                             :rows="3" :max-rows="6" required no-resize>
                             </b-form-textarea>
                         </b-form-group>
                     </b-col>
@@ -84,6 +90,17 @@
                 </b-col>
             </b-row>
         </b-form>
+        <b-modal id="submissionModal"
+                 ref="modal"
+                 title="Enter password to confirm submission"
+                 @ok="handleOk"
+                 @shown="clearPassword">
+            <form @submit.stop.prevent="handleSubmit">
+                <b-form-input type="password"
+                              placeholder="Enter password"
+                              v-model="name"></b-form-input>
+            </form>
+        </b-modal>
     </b-container>
 </template>
 
@@ -93,6 +110,7 @@ import "bootstrap-vue/dist/bootstrap-vue.css";
     import "vue-awesome/icons/tag";
     import {mapState} from "vuex";
     import Vue from "vue";
+
     export default {
         name: "observation",
         data: function () {
@@ -129,7 +147,7 @@ export default {
             },
             deleteObservation: function (index) {
                 this.observations.splice(index, 1);
-      if (this.observations.length == 0) {
+                if (this.observations.length === 0) {
                     this.addAnotherObservation();
                 }
                 this.updateTotals();
@@ -172,7 +190,7 @@ export default {
                     }
                 });
                 for (var i = 0; i < iTotals.length; i++) {
-        if (counts[i] != 0) {
+                    if (counts[i] !== 0) {
                         this.totals[i] = (iTotals[i] / counts[i]).toFixed(1);
                     } else {
                         this.totals[i] = 0;
@@ -183,19 +201,30 @@ export default {
                 e.preventDefault();
                 e.stopPropagation();
                 var form = document.getElementById("submission-form");
-      console.log({
+                if (form.checkValidity()) {
-        siteId: this.site,
+                    this.showModal();
-        tutorIds: this.tutors,
+                }
-        observed: this.description,
+                form.classList.add("was-validated");
-        whom: this.whom,
+            },
-        type: this.type,
+            showModal() {
-        monitoring: this.totals[0],
+                this.$refs.submissionModal.show();
-        control: this.totals[1],
+            },
-        conservatism: this.totals[2],
+            hideModal() {
-        teamwork: this.totals[3],
+                this.$refs.submissionModal.hide();
-        knowledge: this.totals[4],
+                this.submitPassword = null;
-        rawData: JSON.parse(JSON.stringify(this.observations))
+            },
-      });
+            clearPassword() {
+                this.submitPassword = null
+            },
+            handleOk(evt) {
+                // Prevent modal from closing
+                evt.preventDefault();
+                if(this.password) {
+                    this.handleSubmit()
+                }
+            },
+            handleSubmit() {
+                var form = document.getElementById("submission-form");
                 if (form.checkValidity()) {
                     Vue.axios
                         .post("/observation", {
@@ -207,20 +236,15 @@ export default {
                             entries: JSON.parse(JSON.stringify(this.observations))
                         })
                         .then(function (response) {
+                            this.hideModal();
                             console.log(response);
                         })
                         .catch(function (error) {
                             console.log(error);
                         });
                 }
+                this.clearPassword();
                 form.classList.add("was-validated");
-    },
-    showModal() {
-      this.$refs.submissionModal.show();
-    },
-    hideModal() {
-      this.$refs.submissionModal.hide();
-      this.submitPassword = null;
             }
         }
     };
@@ -230,9 +254,11 @@ export default {
     .top-buffer {
         margin-top: 10px;
     }
+
     .bottom-buffer {
         margin-bottom: 10px;
     }
+
     .image-centered-text {
         position: absolute;
         top: 50%;
@@ -242,13 +268,16 @@ export default {
         color: white;
         text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
     }
+
     .image-opacity {
         opacity: 0.5;
     }
+
     .centered-image {
         position: relative;
         text-align: center;
     }
+
     .sidebar {
         width: 160px; /* Set the width of the sidebar */
         position: fixed; /* Fixed Sidebar (stay in place on scroll) */
@@ -258,14 +287,17 @@ export default {
         overflow-x: hidden; /* Disable horizontal scroll */
         padding-top: 20px;
     }
+
     .sidebar-vert-padding {
         margin-bottom: 25%;
     }
+
     @media screen and (max-height: 500px) {
         .sidebar {
             top: 0; /* Stay at the top */
         }
     }
+
     img {
         height: 80px;
     }