Added modal when deleting a book

frontend/src/components/Books.vue

@@ -73,6 +73,13 @@
         </div>
       </div>
     </div>
+    <modal
+      v-if="showModal"
+      @close="showModal = false"
+      v-on:submit="deleteBtnSuccess()">
+      <span slot="header">Delete this book</span>
+      <p slot="text">Are you sure you want to delete this book? This cannot be undone!</p>
+    </modal>
   </div>
 </template>
 
@@ -108,7 +115,8 @@ export default {
       paginate: ['books'],
       error: '',
       success: '',
-      allStatus: []
+      allStatus: [],
+      showModal: false
     }
   },
   created () {
@@ -203,18 +211,25 @@ export default {
     gridBtnClicked (opt, gridObject) {
       opt.action(gridObject)
     },
+    deleteBtnSuccess () { // Event helper function
+      this.$emit('delete-submit')
+    },
     deleteBook (obj) {
-      HTTP.delete('books/' + obj.ID.content)
-        .then(response => {
-          console.log(response)
-          if (response.status === 200 && response.data.Message === 'success') {
-            this.success = 'The book was deleted successfully.'
-            this.loadBooks()
-          }
-        })
-        .catch(e => {
-          this.error = e
-        })
+      this.showModal = true
+      this.$on('delete-submit', function () {
+        HTTP.delete('books/' + obj.ID.content)
+          .then(response => {
+            console.log(response)
+            if (response.status === 200 && response.data.Message === 'success') {
+              this.success = 'The book was deleted successfully.'
+              this.loadBooks()
+            }
+          })
+          .catch(e => {
+            this.error = e
+          })
+        this.showModal = false
+      })
     },
     editBook (book) {
       router.push({ name: 'book-edit', params: { id: book.ID.content } })

frontend/src/components/Modal.vue

@@ -0,0 +1,81 @@
+<template>
+  <transition name="modal">
+    <div class="modal-mask">
+      <div class="modal-container">
+
+        <div class="ui basic modal" style="display: block;">
+          <div class="ui icon header">
+            <i class="archive icon"></i>
+            <slot name="header"></slot>
+          </div>
+          <div class="content">
+            <slot name="text"></slot>
+          </div>
+          <div class="actions">
+            <button class="ui red basic cancel inverted button" @click="$emit('close')">
+              <i class="remove icon"></i>
+              Cancel
+            </button>
+            <button class="ui green ok inverted button" v-on:click="$emit('submit')">
+              <i class="checkmark icon"></i>
+              Yes!
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+  export default {
+    name: 'modal',
+    props: {
+      header: ''
+    }
+  }
+</script>
+
+<style>
+  .modal-mask {
+    position: fixed;
+    z-index: 9998;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .8);
+    transition: opacity .15s ease;
+  }
+
+  .modal-container {
+    transition: all .15s ease;
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .modal-container .modal {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(0, -50%);
+    text-align: center;
+  }
+
+  /* Transitions */
+
+  .modal-enter {
+    opacity: 0;
+  }
+
+  .modal-leave-active {
+    opacity: 0;
+  }
+
+  .modal-enter .modal-container,
+  .modal-leave-active .modal-container {
+    -webkit-transform: scale(0.9);
+    transform: scale(0.9);
+  }
+</style>

frontend/src/main.js

@@ -10,6 +10,10 @@ import '../node_modules/semantic-ui-css/semantic.min.css'
 
 // Grid import
 import Grid from './components/Grid'
+
+// Modal import
+import Modal from './components/Modal'
+
 // Font-awesome icons import
 import 'vue-awesome/icons'
 import Icon from 'vue-awesome/components/Icon'
@@ -32,6 +36,9 @@ auth.checkAuth()
 // Register Grid component
 Vue.component('grid', Grid)
 
+// Register Grid component
+Vue.component('modal', Modal)
+
 // Paginate setup
 Vue.use(VuePaginate)