Misc. improvements for "delete" support in model-crud

src/components/model-crud/ByjoveModelCrud.vue

@@ -36,18 +36,18 @@
 
     <div v-if="showButtons"
          class="buttons">
-      <b-button type="is-primary"
-                :icon-left="saveButtonIcon"
+      <b-button :type="getSaveButtonType()"
+                :icon-left="getSaveButtonIcon()"
                 :disabled="saveDisabled"
                 @click="save()">
-        {{ saveButtonText }}
+        {{ getSaveButtonText() }}
       </b-button>
       <b-button v-if="mode == 'creating'"
                 tag="router-link"
                 :to="getModelPathPrefix() + '/'">
         Cancel
       </b-button>
-      <b-button v-if="mode == 'editing'"
+      <b-button v-if="mode == 'editing' || mode == 'deleting'"
                 tag="router-link"
                 :to="getViewURL()">
         Cancel
@@ -188,11 +188,11 @@ export default {
         },
         saveButtonText: {
             type: String,
-            default: "Save Data",
+            default: null,
         },
         saveButtonIcon: {
             type: String,
-            default: 'save',
+            default: null,
         },
     },
     data: function() {
@@ -214,6 +214,9 @@ export default {
             if (this.mode == 'editing') {
                 return true
             }
+            if (this.mode == 'deleting') {
+                return true
+            }
             return false
         },
     },
@@ -226,7 +229,6 @@ export default {
                 this.$buefy.toast.open({
                     message: "You do not have permission to access that page.",
                     type: 'is-danger',
-                    position: 'is-bottom',
                 })
                 this.$router.push(this.getModelPathPrefix() + '/')
             }
@@ -261,7 +263,6 @@ export default {
         //     this.$buefy.toast.open({
         //         message: "You do not have permission to access that page.",
         //         type: 'is-danger',
-        //         position: 'is-bottom',
         //     })
         //     this.$router.push(this.getModelPathPrefix() + '/')
         //     return
@@ -324,6 +325,10 @@ export default {
             return '/' + this.getModelSlug() + '/rows'
         },
 
+        getIndexURL() {
+            return `${this.getModelPathPrefix()}/`
+        },
+
         getViewURL() {
             if (this.isRow) {
                 return `${this.getRowPathPrefix()}/${this.record.uuid}`
@@ -372,6 +377,7 @@ export default {
             return this.getModelSlug()
         },
 
+        // TODO: should use this.$hasPerm()
         hasPerm(perm) {
 
             // if user is root then assume permission
@@ -418,6 +424,36 @@ export default {
             return row._str
         },
 
+        getSaveButtonIcon() {
+            if (this.saveButtonIcon) {
+                return this.saveButtonIcon
+            }
+            if (this.mode == 'deleting') {
+                return 'trash'
+            }
+            return 'save'
+        },
+
+        getSaveButtonText() {
+            if (this.saveButtonText) {
+                return this.saveButtonText
+            }
+            if (this.mode == 'deleting') {
+                return "Delete This Forever!"
+            }
+            if (this.mode == 'creating') {
+                return `Create ${this.getModelTitle()}`
+            }
+            return "Save Data"
+        },
+
+        getSaveButtonType() {
+            if (this.mode == 'deleting') {
+                return 'is-danger'
+            }
+            return 'is-primary'
+        },
+
         fetch(uuid) {
             this.$http.get(this.getApiObjectUrl() + uuid).then(response => {
                 this.record = response.data.data
@@ -430,14 +466,12 @@ export default {
                     this.$buefy.toast.open({
                         message: "You do not have permission to access that page.",
                         type: 'is-danger',
-                        position: 'is-bottom',
                     })
                     this.$router.push(this.getModelPathPrefix() + '/')
                 } else {
                     this.$buefy.toast.open({
                         message: "Failed to fetch page data!",
                         type: 'is-danger',
-                        position: 'is-bottom',
                     })
                 }
             })
@@ -505,7 +539,7 @@ export default {
             if (!this.allowDelete) {
                 return false
             }
-            if (this.mode == 'creating' || this.mode == 'deleting') {
+            if (this.mode != 'viewing') {
                 return false
             }
             if (!this.hasModelPerm('delete')) {
@@ -515,12 +549,43 @@ export default {
         },
 
         save() {
-            let url = this.getApiIndexUrl()
-            if (this.mode != 'creating') {
+            if (this.mode == 'deleting') {
+                this.confirmDelete()
+                return
+            }
+
+            let url
+            if (this.mode == 'creating') {
+                url = this.getApiIndexUrl()
+            } else {
                 url = this.getApiObjectUrl() + this.record.uuid
             }
             this.$emit('save', url)
         },
+
+        confirmDelete() {
+            this.$buefy.dialog.confirm({
+                title: "Delete Work Order",
+                message: "Are you sure you wish to delete this Work Order?",
+                hasIcon: true,
+                type: 'is-danger',
+                confirmText: "Delete Work Order",
+                cancelText: "Whoops, nevermind",
+                onConfirm: this.deleteObject,
+            })
+        },
+
+        deleteObject() {
+            let url = this.getApiObjectUrl() + this.record.uuid
+            this.$http.delete(url).then(response => {
+                this.$router.push(this.getIndexURL())
+            }, response => {
+                this.$buefy.toast.open({
+                    message: "Failed to delete the record!",
+                    type: 'is-danger',
+                })
+            })
+        },
     },
 }
 </script>