From 3472fb7e0420f073b632bb8213c45ee4ee38452a Mon Sep 17 00:00:00 2001
From: Adam Kroon <adam@olivewood.io>
Date: Mon, 21 Jan 2019 15:19:36 -0800
Subject: [PATCH] Update Exams - Move from Div to B-Modal

During the development of the update/return/bookings actions on the exams invetory table, early development used nested divs to create modals for actions instead of using bootstrap modals. As final clean-up of this sprint task, the actions had to move towards using b-modal, as well as using b-alert to tell the user whether or not the PUT methods taken on exam objects were successful or erroneous.
---
 frontend/src/App.vue                          |  17 +-
 frontend/src/assets/css/q.css                 |  92 ---------
 frontend/src/booking/calendar.vue             |   5 +-
 frontend/src/exams/edit-exam-form-modal.vue   | 179 ++++++++----------
 frontend/src/exams/exam-inventory-table.vue   |  19 +-
 frontend/src/exams/failure-exam-alert.vue     |  41 ++++
 frontend/src/exams/return-exam-form-modal.vue | 156 +++++++--------
 frontend/src/exams/success-exam-alert.vue     |  45 +++++
 frontend/src/store/index.js                   |  17 ++
 9 files changed, 284 insertions(+), 287 deletions(-)
 create mode 100644 frontend/src/exams/failure-exam-alert.vue
 create mode 100644 frontend/src/exams/success-exam-alert.vue

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index eb24340ba..d3bf0ebf0 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -18,6 +18,8 @@ limitations under the License.*/
     <div v-if="user.username && isLoggedIn" :style="style">
       <Alert />
       <ExamAlert />
+      <SuccessExamAlert />
+      <FailureExamAlert />
       <Nav v-if="isLoggedIn" />
       <Socket v-show="1===2" />
       <Feedback />
@@ -42,10 +44,23 @@ limitations under the License.*/
   import Nav from './layout/nav'
   import Login from "./Login";
   import LoginWarning from './login-warning'
+  import SuccessExamAlert from './exams/success-exam-alert'
+  import FailureExamAlert from './exams/failure-exam-alert'
 
   export default {
     name: 'App',
-    components: { Login, LoginWarning, Nav, Alert, ExamAlert, Header, Socket, Footer, Feedback, Response },
+    components: { Login,
+                  LoginWarning,
+                  Nav,
+                  Alert,
+                  ExamAlert,
+                  Header,
+                  Socket,
+                  Footer,
+                  Feedback,
+                  Response,
+                  SuccessExamAlert,
+                  FailureExamAlert },
     computed: {
       ...mapState(['isLoggedIn', 'showSchedulingIndicator', 'user' ]),
       style() {
diff --git a/frontend/src/assets/css/q.css b/frontend/src/assets/css/q.css
index f41185e56..6a46bc157 100644
--- a/frontend/src/assets/css/q.css
+++ b/frontend/src/assets/css/q.css
@@ -1,82 +1,3 @@
-.edit-exam-modal {
-  position: fixed;
-  z-index: 3;
-  left: 25%;
-  top: 20%;
-  width: 50%;
-  height: 60%;
-  overflow: hidden;
-  transition: display 1s;
-  border: 10px solid white;
-  border-radius: 25px;
-}
-
-.edit-exam-modal-background {
-  position: fixed;
-  left: 0;
-  top: 0;
-  z-index: 2;
-  width: 100%;
-  height: 100%;
-  background-color: rgb(0,0,0);
-  background-color: rgba(0,0,0,0.4);
-}
-
-.edit-exam-modal-content {
-  background-color: #fefefe;
-  margin-right: auto;
-  margin-left: auto;
-  width: 100%;
-  height: 100%;
-  padding: 1%;
-  position: relative;
-}
-
-.edit-exam-modal-content-message {
-  background-color: #fefefe;
-  position: fixed;
-  z-index: 3;
-  left: 35%;
-  top: 35%;
-  width: 30%;
-  height: 22%;
-  overflow: hidden;
-  transition: display 1s;
-  border: 10px solid white;
-  border-radius: 25px;
-  padding-left: 10px;
-}
-
-.exam-modal-content-message {
-  background-color: #fefefe;
-  position: fixed;
-  z-index: 3;
-  left: 35%;
-  top: 35%;
-  width: 22%;
-  height: 22%;
-  overflow: hidden;
-  transition: display 1s;
-  border: 10px solid white;
-  border-radius: 25px;
-  padding-left: 10px;
-}
-
-.exam-modal-content-message-failure {
-  background-color: #fefefe;
-  position: fixed;
-  z-index: 3;
-  left: 35%;
-  top: 35%;
-  width: 35%;
-  height: 20%;
-  overflow: hidden;
-  transition: display 1s;
-  border: 10px solid white;
-  border-radius: 25px;
-  padding-left: 10px;
-}
-
 .q-inline-title {
   display: inline;
   margin: 0px 0px -30px 20px;
@@ -114,16 +35,3 @@
   padding: 1%;
   position: relative;
 }
-
-.return-exam-modal {
-  position: fixed;
-  z-index: 3;
-  left: 35%;
-  top: 35%;
-  width: 40%;
-  height: 33%;
-  overflow: hidden;
-  transition: display 1s;
-  border: 10px solid white;
-  border-radius: 25px;
-}
diff --git a/frontend/src/booking/calendar.vue b/frontend/src/booking/calendar.vue
index b2fa526ff..6ae414eb7 100644
--- a/frontend/src/booking/calendar.vue
+++ b/frontend/src/booking/calendar.vue
@@ -380,12 +380,9 @@
         if (view.name === 'agendaDay' || view.name === 'agendaWeek') {
           this.options({ name: 'height', value: 'auto' })
         }
-        if(this.$route.params.date){
+        if(this.$route.params.date) {
           this.$refs.bookingcal.fireMethod('changeView', 'agendaDay')
           this.goToDate(this.$route.params.date)
-          this.$router.push('/booking')
-        }else{
-          this.$router.push('/booking')
         }
       },
       events() {
diff --git a/frontend/src/exams/edit-exam-form-modal.vue b/frontend/src/exams/edit-exam-form-modal.vue
index 42da5a25e..cb4c501b1 100644
--- a/frontend/src/exams/edit-exam-form-modal.vue
+++ b/frontend/src/exams/edit-exam-form-modal.vue
@@ -1,87 +1,56 @@
-<template v-if="showExamEditModalVisible">
-  <div id ="examBackground" class="edit-exam-modal-background">
-    <div id="examModal" v-bind:class="{ 'edit-exam-modal': !editExamSuccess || !editExamFailure,
-                                        'edit-exam-modal-content-message': editExamSuccess,
-                                        'edit- exam-modal-content-message': editExamFailure }">
-      <div class="edit-exam-modal-content">
-        <div class="modal_header" v-if="!editExamSuccess && !editExamFailure">
-          <div>
-            <b-container style="font-size:1.1rem; border:1px solid lightgrey; border-radius: 10px" class="mb-2 pb-3" fluid>
-              <b-row>
-                <b-col>
-                  <h3>Edit Exam Information Form</h3>
-                </b-col>
-              </b-row>
-              <b-row class="my-1">
-                <b-col sm="4"><label>Event ID:</label></b-col>
-                <b-col sm="6"><b-form-input id="eventIDInput" type="text" v-model=fields.event_id></b-form-input></b-col>
-              </b-row>
-              <b-row class="my-1">
-                <b-col sm="4"><label>Exam Name:</label></b-col>
-                <b-col sm="6"><b-form-input id="examNameInput" type="text" v-model=fields.exam_name></b-form-input></b-col>
-              </b-row>
-              <b-row class="my-1">
-                <b-col sm="4"><label>Exam Methods:</label></b-col>
-                <b-col sm="6">
+<template>
+  <b-modal v-model="modal"
+           :no-close-on-backdrop="true"
+           hide-ok
+           hide-header
+           hide-cancel
+           @hidden="ok"
+           @ok="submit"
+           size="md">
+      <b-container style="font-size:1.1rem; border:1px solid lightgrey; border-radius: 10px" class="mb-2 pb-3" fluid>
+          <b-row>
+              <b-col>
+                <h3>Edit Exam Information Form</h3>
+              </b-col>
+          </b-row>
+          <b-row class="my-1">
+              <b-col sm="4"><label>Event ID:</label></b-col>
+              <b-col sm="6"><b-form-input id="eventIDInput" type="text" v-model=fields.event_id></b-form-input></b-col>
+          </b-row>
+          <b-row class="my-1">
+              <b-col sm="4"><label>Exam Name:</label></b-col>
+              <b-col sm="6"><b-form-input id="examNameInput" type="text" v-model=fields.exam_name></b-form-input></b-col>
+          </b-row>
+          <b-row class="my-1">
+              <b-col sm="4"><label>Exam Methods:</label></b-col>
+              <b-col sm="6">
                   <select class="form-control" name="examMethod" v-model=selectedMethod>
-                    <option v-for="examMethod in examMethodOptions" :value="examMethod.value">{{ examMethod.value }}</option>
+                      <option v-for="examMethod in examMethodOptions" :value="examMethod.value">{{ examMethod.value }}</option>
                   </select>
-                </b-col>
-              </b-row>
-              <b-row class="my-1">
-                <b-col sm="4"><label>Expiry Date:</label></b-col>
-                <b-col sm="6"><b-form-input id="expiryDate" type="date" v-model=expiryDate></b-form-input></b-col>
-              </b-row>
-              <b-row class="my-1">
-                <b-col sm="4"><label>Exam Received:</label></b-col>
-                <b-col sm="6">
+              </b-col>
+          </b-row>
+          <b-row class="my-1">
+              <b-col sm="4"><label>Expiry Date:</label></b-col>
+              <b-col sm="6"><b-form-input id="expiryDate" type="date" v-model=expiryDate></b-form-input></b-col>
+          </b-row>
+          <b-row class="my-1">
+              <b-col sm="4"><label>Exam Received:</label></b-col>
+              <b-col sm="6">
                   <select class="form-control" name="examReceived" v-model=selectedReceived>
-                    <option v-for="received in examReceivedOptions" :value="received.value">{{ received.value }}</option>
+                      <option v-for="received in examReceivedOptions" :value="received.value">{{ received.value }}</option>
                   </select>
-                </b-col>
-              </b-row>
-              <b-row class="my-1">
-                <b-col sm="4"><label>Student Name:</label></b-col>
-                <b-col sm="6"><b-form-input id="studentName" type="text" v-model=fields.examinee_name></b-form-input></b-col>
-              </b-row>
-              <b-row class="my-1">
-                <b-col sm="4"><label>Notes:</label></b-col>
-                <b-col sm="6"><b-form-input id="examNotes" type="text" v-model="fields.notes"></b-form-input></b-col>
-              </b-row>
-            </b-container>
-          </div>
-        </div>
-        <div>
-          <div class="" v-if="editExamSuccess">
-            <b-row>
-              <b-col>
-                <h1 style="color:green">Success!</h1>
-                <p style="color:green"><b>Changes have been submitted!</b></p>
-                <b-button @click="ok" class="btn btn-success btn-secondary">Ok</b-button>
-              </b-col>
-            </b-row>
-          </div>
-        </div>
-        <div>
-          <div v-if="editExamFailure">
-            <b-row>
-              <b-col>
-                <h2 style="color:red">Error!</h2>
-                <p style="color:red"><b>Your changes were not submitted.</b></p>
-                <b-button @click="ok" class="btn btn-warning btn-secondary">Ok</b-button>
               </b-col>
-            </b-row>
-          </div>
-        </div>
-        <div class="button-flex-end">
-          <div v-if="!editExamSuccess && !editExamFailure">
-            <b-button @click="cancel" class="mt-3 ml-3 mr-3">Cancel</b-button>
-            <b-button @click="submit" class="btn-primary mt-3 ml-3 mr-3">Submit</b-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+          </b-row>
+          <b-row class="my-1">
+              <b-col sm="4"><label>Student Name:</label></b-col>
+              <b-col sm="6"><b-form-input id="studentName" type="text" v-model=fields.examinee_name></b-form-input></b-col>
+              </b-row>
+          <b-row class="my-1">
+              <b-col sm="4"><label>Notes:</label></b-col>
+              <b-col sm="6"><b-form-input id="examNotes" type="text" v-model="fields.notes"></b-form-input></b-col>
+          </b-row>
+      </b-container>
+  </b-modal>
 </template>
 
 <script>
@@ -108,32 +77,29 @@
                 expiryDate:'',
                 selectedReceived: '',
                 examReceivedOptions: [
-                  { id: 0, value: 'No' },
-                  { id: 1, value: 'Yes' }
+                    { id: 0, value: 'No' },
+                    { id: 1, value: 'Yes' }
                 ],
                 noBooking: true
             }
         },
-        computed: {
-            ...mapState({
-                showExamEditModalVisible: state => state.showEditExamModalVisible,
-                fields: state => state.editExams,
-                selectedExam: state => state.selectedExam,
-                selectedBooking: state => state.selectedBooking,
-                editExamSuccess: state => state.editExamSuccess,
-                editExamFailure: state => state.editExamFailure
-            }),
-        },
         methods: {
             ...mapActions([
                 'putExamInfo',
                 'putBookingInfo',
                 'getExams',
-                'getBookings' ]),
+                'getBookings'
+            ]),
             ...mapMutations([
                 'toggleEditExamModalVisible',
                 'setEditExamSuccess',
-                'setEditExamFailure' ]),
+                'setEditExamFailure'
+            ]),
+            ok() {
+                this.toggleEditExamModalVisible(false);
+                this.setEditExamSuccess(false);
+                this.setEditExamFailure(false);
+            },
             cancel() {
                 this.toggleEditExamModalVisible(false);
                 this.selectedMethod = '';
@@ -141,13 +107,14 @@
                 this.selectedReceived = '';
             },
             submit() {
+                this.setEditExamSuccess(false)
+                this.setEditExamFailure(false)
                 this.selectedExam.exam_id = this.fields.exam_id;
                 if (this.selectedReceived === 'No') {
                     this.selectedReceived = 0;
                 }else {
                     this.selectedReceived = 1;
                 }
-                console.log("method: ", this.selectedMethod);
                 let submit_exam = {
                     exam_id: this.selectedExam.exam_id,
                     event_id: this.fields.event_id,
@@ -163,13 +130,29 @@
                     this.setEditExamFailure(false)
                 }
                 this.getExams()
+                console.log(this.editExamSuccess)
+
             },
-            ok() {
-                this.toggleEditExamModalVisible(false);
-                this.setEditExamSuccess(false);
-                this.setEditExamFailure(false);
+        },
+        computed: {
+            ...mapState({
+                showEditExamModalVisible: state => state.showEditExamModalVisible,
+                fields: state => state.editExams,
+                selectedExam: state => state.selectedExam,
+                selectedBooking: state => state.selectedBooking,
+                editExamSuccess: state => state.editExamSuccess,
+                editExamFailure: state => state.editExamFailure
+            }),
+            modal: {
+              get() {
+                  return this.showEditExamModalVisible
+              },
+              set(e) {
+                  this.toggleEditExamModalVisible(e)
+              }
             }
         },
+
     }
 </script>
 
diff --git a/frontend/src/exams/exam-inventory-table.vue b/frontend/src/exams/exam-inventory-table.vue
index 45d7fc8e9..9e4646526 100644
--- a/frontend/src/exams/exam-inventory-table.vue
+++ b/frontend/src/exams/exam-inventory-table.vue
@@ -51,10 +51,12 @@
   import EditExamModal from './edit-exam-form-modal'
   import ReturnExamModal from './return-exam-form-modal'
   import moment from 'moment'
+  import SuccessExamAlert from './success-exam-alert'
+  import FailureExamAlert from './failure-exam-alert'
 
   export default {
     name: "ExamInventoryTable",
-    components: { EditExamModal, ReturnExamModal },
+    components: { EditExamModal, ReturnExamModal, SuccessExamAlert, FailureExamAlert },
     props: ['mode'],
     data() {
       return {
@@ -111,7 +113,7 @@
           this.toggleSchedulingIndicator(true)
         }
       },
-      editInfo(item, index) {
+      editInfo(item) {
         this.toggleEditExamModalVisible(true)
         this.setEditExamInfo(item)
       },
@@ -133,8 +135,16 @@
       this.getExams()
     },
     computed: {
-      ...mapGetters(['role_code', 'exam_inventory', 'calendar_events']),
-      ...mapState(['user', 'exams', 'showExamInventoryModal', 'bookings', 'showEditExamModalVisible', 'showReturnExamModalVisible', 'calendarSetup' ]),
+      ...mapGetters([ 'role_code',
+                      'exam_inventory',
+                      'calendar_events']),
+      ...mapState([ 'user',
+                    'exams',
+                    'showExamInventoryModal',
+                    'bookings',
+                    'showEditExamModalVisible',
+                    'showReturnExamModalVisible',
+                    'calendarSetup' ]),
       selectedExams() {
         if (this.showExamInventoryModal) {
           return this.exam_inventory
@@ -151,6 +161,7 @@
           return returnFields
         }
       }
+
     }
   }
 </script>
diff --git a/frontend/src/exams/failure-exam-alert.vue b/frontend/src/exams/failure-exam-alert.vue
new file mode 100644
index 000000000..6e89ff451
--- /dev/null
+++ b/frontend/src/exams/failure-exam-alert.vue
@@ -0,0 +1,41 @@
+/*Copyright 2015 Province of British Columbia
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.*/
+
+<template>
+  <div>
+    <b-alert
+      variant="danger"
+      dismissible
+      :show="editExamFailure"
+       style="h-align: center; font-size:1rem; border-radius: 0px;">
+      {{ examEditFailureMessage }}
+    </b-alert>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex'
+
+export default {
+  name: 'FailureExamAlert',
+
+  computed: {
+    ...mapState([ 'examEditFailureMessage', 'editExamFailure' ])
+  },
+
+  methods: {
+    ...mapMutations([])
+  }
+}
+</script>
diff --git a/frontend/src/exams/return-exam-form-modal.vue b/frontend/src/exams/return-exam-form-modal.vue
index 07f0391b1..9937db7ce 100644
--- a/frontend/src/exams/return-exam-form-modal.vue
+++ b/frontend/src/exams/return-exam-form-modal.vue
@@ -1,71 +1,47 @@
-<template v-if="showExamEditModalVisible">
-  <div id ="examBackground" class="edit-exam-modal-background">
-    <div id="examModal" v-bind:class="{'return-exam-modal': !editExamSuccess && !editExamFailure,
-                                       'exam-modal-content-message': editExamSuccess,
-                                       'exam-modal-content-message-failure': editExamFailure }">
-      <div v-bind:class="{ 'edit-exam-modal-content': !editExamSuccess, 'exam-modal-content-message': editExamSuccess }">
-        <div class="modal_header" v-if="!editExamSuccess && !editExamFailure">
-          <div>
-            <b-container style="font-size:1.1rem; border:1px solid lightgrey; border-radius: 10px" class="mb-2 pb-3" fluid>
-              <b-row>
-                <b-col>
+<template >
+  <b-modal v-model="modal"
+           :no-close-on-backdrop="true"
+           hide-ok
+           hide-header
+           hide-cancel
+           @hidden="ok"
+           @ok="submit"
+           size="md">
+      <b-container style="font-size:1.1rem; border:1px solid lightgrey; border-radius: 10px" class="mb-2 pb-3" fluid>
+          <b-row>
+              <b-col>
                   <h3>Return Exam Form</h3>
-                </b-col>
-              </b-row>
-              <b-row class="my-1">
-                <b-col sm="4"><label>Exam Returned: </label></b-col>
-                <b-col sm="7">
+              </b-col>
+          </b-row>
+          <b-row class="my-1">
+              <b-col sm="4"><label>Exam Returned: </label></b-col>
+              <b-col sm="7">
                   <select class="form-control" name="examReturned" v-model=selectedReturned>
-                    <option v-for="returned in examReturnedOptions" :value="returned.value">{{ returned.value }}</option>
+                      <option v-for="returned in examReturnedOptions" :value="returned.value">{{ returned.value }}</option>
                   </select>
-                </b-col>
-              </b-row>
-              <b-row>
-                <b-col sm="4"><label>Tracking Number: </label></b-col>
-                <b-col sm="7"><b-form-input id="trackingNumber" type="text" v-model=fields.exam_returned_tracking_number></b-form-input></b-col>
-              </b-row>
-            </b-container>
-          </div>
-        </div>
-        <div>
-          <div v-if="editExamSuccess">
-            <b-row>
-              <b-col>
-                <h1 style="color:green">Success!</h1>
-                <p style="color:green"><b>Changes have been submitted!</b></p>
-                <b-button @click="ok" class="btn btn-success btn-secondary">Ok</b-button>
               </b-col>
-            </b-row>
-          </div>
-        </div>
-        <div>
-          <div v-if="editExamFailure">
-            <b-row>
-              <b-col>
-                <h1 style="color:red">Error During Submission</h1>
-                <p style="color:red"><b>Your changes were not submitted. Please contact and Administrator.</b></p>
-                <b-button @click="ok" class="btn btn-warning btn-secondary">Ok</b-button>
-              </b-col>
-            </b-row>
-          </div>
-        </div>
-        <div class="button-flex-end">
-          <div v-if="!editExamSuccess && !editExamFailure">
-            <b-button @click="cancel" class="mt-3 ml-3 mr-3">Cancel</b-button>
-            <b-button @click="submit" class="btn-primary mt-3 ml-3 mr-3">Submit</b-button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
+          </b-row>
+          <b-row>
+              <b-col sm="4"><label>Tracking Number: </label></b-col>
+              <b-col sm="7"><b-form-input id="trackingNumber" type="text" v-model=fields.exam_returned_tracking_number></b-form-input></b-col>
+          </b-row>
+      </b-container>
+  </b-modal>
 </template>
 
-
 <script>
-    import { mapActions, mapMutations, mapState } from 'vuex'
+    import { mapMutations, mapState, mapActions } from 'vuex'
     export default {
         name: "ReturnExamModal",
-        data() {
+        mounted() {
+            this.selectedExam.exam_id = this.fields.exam_id;
+            if(this.fields.exam_returned_ind === 0) {
+                  this.selectedReturned = 'No';
+            }else if (this.fields.exam_returned_ind === 1) {
+                  this.selectedReturned = 'Yes';
+            }
+        },
+        data () {
             return {
                 selectedReturned: '',
                 examReturnedOptions: [
@@ -74,26 +50,28 @@
                 ],
             }
         },
-        computed: {
-            ...mapState({
-                showReturnExamModalVisible: state => state.showReturnExamModalVisible,
-                fields: state => state.returnExams,
-                selectedExam: state => state.selectedExam,
-                editExamSuccess: state => state.editExamSuccess,
-                editExamFailure: state => state.editExamFailure,
-            }),
-        },
         methods: {
-            ...mapActions([ 'getExams',
-                            'putExamInfo' ]),
-            ...mapMutations([ 'toggleReturnExamModalVisible',
-                              'setEditExamSuccess',
-                              'setEditExamFailure' ]),
+            ...mapActions([
+              'getExams',
+              'putExamInfo'
+            ]),
+            ...mapMutations([
+                'toggleReturnExamModalVisible',
+                'setEditExamSuccess',
+                'setEditExamFailure'
+            ]),
+            ok() {
+                this.toggleReturnExamModalVisible(false);
+                this.setEditExamSuccess(false);
+                this.setEditExamFailure(false);
+            },
             cancel() {
                 this.toggleReturnExamModalVisible(false);
                 this.selectedReturned = '';
             },
             submit() {
+                this.setEditExamSuccess(false)
+                this.setEditExamFailure(false)
                 this.selectedExam.exam_id = this.fields.exam_id;
                 if(this.selectedReturned === 'No'){
                     this.selectedReturned = 0;
@@ -107,24 +85,26 @@
                 };
                 this.putExamInfo(return_exam);
                 this.getExams();
+                console.log(this.editExamSuccess)
             },
-            ok() {
-                this.toggleReturnExamModalVisible(false);
-                this.setEditExamSuccess(false);
-                this.setEditExamFailure(false);
-            }
         },
-        mounted() {
-            this.selectedExam.exam_id = this.fields.exam_id;
-            if(this.fields.exam_returned_ind === 0) {
-                  this.selectedReturned = 'No';
-            }else if (this.fields.exam_returned_ind === 1) {
-                  this.selectedReturned = 'Yes';
+        computed: {
+            ...mapState({
+                showReturnExamModalVisible: state => state.showReturnExamModalVisible,
+                fields: state => state.returnExams,
+                selectedExam: state => state.selectedExam,
+                editExamSuccess: state => state.editExamSuccess,
+                editExamFailure: state => state.editExamFailure,
+            }),
+            modal: {
+              get() {
+                  return this.showReturnExamModalVisible
+              },
+              set(e) {
+                  this.toggleReturnExamModalVisible(e)
+              }
             }
         },
+
     }
 </script>
-
-<style scoped>
-
-</style>
diff --git a/frontend/src/exams/success-exam-alert.vue b/frontend/src/exams/success-exam-alert.vue
new file mode 100644
index 000000000..dc10cc2f1
--- /dev/null
+++ b/frontend/src/exams/success-exam-alert.vue
@@ -0,0 +1,45 @@
+/*Copyright 2015 Province of British Columbia
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+   http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.*/
+
+<template>
+  <div>
+    <b-alert
+      variant="success"
+      dismissible
+      :show="editExamSuccess"
+       style="h-align: center; font-size:1rem; border-radius: 0px;">
+      {{ examEditSuccessMessage }}
+    </b-alert>
+  </div>
+</template>
+
+<script>
+import { mapMutations, mapState } from 'vuex'
+
+export default {
+  name: 'SuccessExamAlert',
+
+  computed: {
+    ...mapState([ 'examEditSuccessMessage', 'examSuccessDismiss', 'editExamSuccess' ])
+  },
+
+  methods: {
+    ...mapMutations(['examSuccessCountDown', 'setEditExamSuccess']),
+
+    onDismissedExam() {
+      this.examSuccessCountDown(5)
+    }
+  }
+}
+</script>
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index eb3a67bcb..51a35e768 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -178,7 +178,10 @@ export const store = new Vuex.Store({
     editExams: [],
     editExamSuccess: false,
     examAlertMessage: '',
+    examEditSuccessMessage: '',
+    examEditFailureMessage: '',
     examDismissCount: 0,
+    examSuccessDismiss : 0,
     examMethods: [
       {text: 'paper', value: 'paper', id: 'exam_method'},
       {text: 'online', value: 'online', id: 'exam_method'}
@@ -1422,9 +1425,11 @@ export const store = new Vuex.Store({
         Axios(context).put(url, payload).then( resp =>{
           resolve(resp)
           context.commit('setEditExamSuccess', true)
+          context.commit('setExamEditSuccessMessage', 'Success! Exam changes were committed.')
         })
           .catch(error => {
             context.commit('setEditExamFailure', true)
+            context.commit('setExamEditFailureMessage', 'There was a problem submitting changes to your exam.')
             reject(error)
           })
       })
@@ -1922,6 +1927,14 @@ export const store = new Vuex.Store({
       state.examDismissCount = 999
     },
 
+    setExamEditSuccessMessage(state, payload) {
+      state.examEditSuccessMessage = payload
+    },
+
+    setExamEditFailureMessage(state, payload) {
+      state.examEditFailureMessage = payload
+    },
+
     setModalAlert(state, payload) {
       state.alertMessage = payload
     },
@@ -1966,6 +1979,10 @@ export const store = new Vuex.Store({
       state.examDismissCount = payload
     },
 
+    examSuccessCountDown(state, payload) {
+      state.examSuccessDismiss = payload
+    },
+
     toggleInvitedStatus: (state, payload) => state.citizenInvited = payload,
 
     toggleBegunStatus: (state, payload) => state.serviceBegun = payload,