Removed incorrect validation of tutor selections.
This commit is contained in:
parent
9e198fdaa5
commit
462e86bd36
@ -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"
|
||||
required></b-form-checkbox-group>
|
||||
:options="tutorOptions"></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");
|
||||
if (form.checkValidity()) {
|
||||
var form = document.getElementById("submission-form");
|
||||
if (form.checkValidity() && this.tutors.length > 0) {
|
||||
console.log("valid");
|
||||
this.$router.push("/observation");
|
||||
}
|
||||
form.classList.add("was-validated");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@ -1,35 +1,37 @@
|
||||
<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">
|
||||
<img src="../assets/Monitoring.svg" class="image-opacity" object-fill="contain" />
|
||||
<img src="../assets/Monitoring.svg" class="image-opacity" object-fill="contain"/>
|
||||
<div class="image-centered-text">{{ totals[0] }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-v="center" class="sidebar-vert-padding">
|
||||
<b-col class="centered-image">
|
||||
<img src="../assets/Control.svg" class="image-opacity" object-fill="contain" />
|
||||
<img src="../assets/Control.svg" class="image-opacity" object-fill="contain"/>
|
||||
<div class="image-centered-text">{{ totals[1] }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-v="center" class="sidebar-vert-padding">
|
||||
<b-col class="centered-image">
|
||||
<img src="../assets/Conservatism.svg" class="image-opacity" object-fill="contain" />
|
||||
<img src="../assets/Conservatism.svg" class="image-opacity" object-fill="contain"/>
|
||||
<div class="image-centered-text">{{ totals[2] }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-v="center" class="sidebar-vert-padding">
|
||||
<b-col class="centered-image">
|
||||
<img src="../assets/Teamwork.svg" class="image-opacity" object-fill="contain" />
|
||||
<img src="../assets/Teamwork.svg" class="image-opacity" object-fill="contain"/>
|
||||
<div class="image-centered-text">{{ totals[3] }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row align-v="center">
|
||||
<b-col class="centered-image">
|
||||
<img src="../assets/Knowledge.svg" class="image-opacity" object-fill="contain" />
|
||||
<img src="../assets/Knowledge.svg" class="image-opacity" object-fill="contain"/>
|
||||
<div class="image-centered-text">{{ totals[4] }}</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
@ -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,18 +90,30 @@
|
||||
</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>
|
||||
|
||||
<script>
|
||||
import "bootstrap/dist/css/bootstrap.css";
|
||||
import "bootstrap-vue/dist/bootstrap-vue.css";
|
||||
import "vue-awesome/icons/tag";
|
||||
import { mapState } from "vuex";
|
||||
import Vue from "vue";
|
||||
export default {
|
||||
import "bootstrap/dist/css/bootstrap.css";
|
||||
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() {
|
||||
data: function () {
|
||||
return {
|
||||
observations: [
|
||||
{
|
||||
@ -113,39 +131,39 @@ export default {
|
||||
...mapState(["description", "type", "whom", "site", "tutors"])
|
||||
},
|
||||
methods: {
|
||||
addAnotherObservation: function() {
|
||||
addAnotherObservation: function () {
|
||||
this.observations.push({
|
||||
type: null,
|
||||
rating: null,
|
||||
strengths: null,
|
||||
improvements: null
|
||||
});
|
||||
Vue.nextTick(function() {
|
||||
Vue.nextTick(function () {
|
||||
window.scrollTo(
|
||||
0,
|
||||
document.body.scrollHeight || document.documentElement.scrollHeight
|
||||
);
|
||||
});
|
||||
},
|
||||
deleteObservation: function(index) {
|
||||
deleteObservation: function (index) {
|
||||
this.observations.splice(index, 1);
|
||||
if (this.observations.length == 0) {
|
||||
if (this.observations.length === 0) {
|
||||
this.addAnotherObservation();
|
||||
}
|
||||
this.updateTotals();
|
||||
},
|
||||
changeType: function(index, ev) {
|
||||
changeType: function (index, ev) {
|
||||
this.observations[index].type = ev;
|
||||
this.updateTotals();
|
||||
},
|
||||
changeRating: function(index, ev) {
|
||||
changeRating: function (index, ev) {
|
||||
this.observations[index].rating = parseInt(ev);
|
||||
this.updateTotals();
|
||||
},
|
||||
updateTotals: function() {
|
||||
updateTotals: function () {
|
||||
var iTotals = [0, 0, 0, 0, 0];
|
||||
var counts = [0, 0, 0, 0, 0];
|
||||
this.observations.forEach(function(element) {
|
||||
this.observations.forEach(function (element) {
|
||||
if (element.rating > 0) {
|
||||
switch (element.type) {
|
||||
case "MONITORING":
|
||||
@ -172,30 +190,41 @@ 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;
|
||||
}
|
||||
}
|
||||
},
|
||||
onSubmit: function(e) {
|
||||
onSubmit: function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var form = document.getElementById("submission-form");
|
||||
console.log({
|
||||
siteId: this.site,
|
||||
tutorIds: this.tutors,
|
||||
observed: this.description,
|
||||
whom: this.whom,
|
||||
type: this.type,
|
||||
monitoring: this.totals[0],
|
||||
control: this.totals[1],
|
||||
conservatism: this.totals[2],
|
||||
teamwork: this.totals[3],
|
||||
knowledge: this.totals[4],
|
||||
rawData: JSON.parse(JSON.stringify(this.observations))
|
||||
});
|
||||
if (form.checkValidity()) {
|
||||
this.showModal();
|
||||
}
|
||||
form.classList.add("was-validated");
|
||||
},
|
||||
showModal() {
|
||||
this.$refs.submissionModal.show();
|
||||
},
|
||||
hideModal() {
|
||||
this.$refs.submissionModal.hide();
|
||||
this.submitPassword = null;
|
||||
},
|
||||
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", {
|
||||
@ -206,34 +235,31 @@ export default {
|
||||
type: this.type,
|
||||
entries: JSON.parse(JSON.stringify(this.observations))
|
||||
})
|
||||
.then(function(response) {
|
||||
.then(function (response) {
|
||||
this.hideModal();
|
||||
console.log(response);
|
||||
})
|
||||
.catch(function(error) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
};
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.top-buffer {
|
||||
.top-buffer {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.bottom-buffer {
|
||||
}
|
||||
|
||||
.bottom-buffer {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.image-centered-text {
|
||||
}
|
||||
|
||||
.image-centered-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
@ -241,15 +267,18 @@ export default {
|
||||
font-size: 50px;
|
||||
color: white;
|
||||
text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
|
||||
}
|
||||
.image-opacity {
|
||||
}
|
||||
|
||||
.image-opacity {
|
||||
opacity: 0.5;
|
||||
}
|
||||
.centered-image {
|
||||
}
|
||||
|
||||
.centered-image {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
}
|
||||
.sidebar {
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: 160px; /* Set the width of the sidebar */
|
||||
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
|
||||
z-index: 1; /* Stay on top */
|
||||
@ -257,16 +286,19 @@ export default {
|
||||
left: 0;
|
||||
overflow-x: hidden; /* Disable horizontal scroll */
|
||||
padding-top: 20px;
|
||||
}
|
||||
.sidebar-vert-padding {
|
||||
}
|
||||
|
||||
.sidebar-vert-padding {
|
||||
margin-bottom: 25%;
|
||||
}
|
||||
@media screen and (max-height: 500px) {
|
||||
}
|
||||
|
||||
@media screen and (max-height: 500px) {
|
||||
.sidebar {
|
||||
top: 0; /* Stay at the top */
|
||||
}
|
||||
}
|
||||
img {
|
||||
}
|
||||
|
||||
img {
|
||||
height: 80px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user