Tweak how/when Edit and Delete buttons are shown for model-crud

esp. with regard to "row" views

src/components/model-crud/ByjoveModelCrud.vue

@@ -16,7 +16,7 @@
             {{ renderHeaderLabel(record) }}
         </li>
         <li v-if="mode == 'editing' || mode == 'deleting'">
-          <router-link :to="getModelPathPrefix() + '/' + record.uuid">{{ renderHeaderLabel(record) }}</router-link>
+          <router-link :to="getRowPathPrefix() + '/' + record.uuid">{{ renderHeaderLabel(record) }}</router-link>
         </li>
         <li v-if="mode == 'editing'">
           &nbsp; Edit
@@ -29,19 +29,13 @@
 
     <slot></slot>
 
-    <b-button v-if="allowEdit && mode == 'viewing' && hasModelPerm('edit')"
-              type="is-primary"
-              tag="router-link"
-              :to="getModelPathPrefix() + '/' + record.uuid + '/edit'">
-      Edit This
-    </b-button>
-
     <div v-if="showButtons"
          class="buttons">
       <b-button type="is-primary"
+                icon-left="save"
                 :disabled="saveDisabled"
                 @click="save()">
-        Save
+        Save Data
       </b-button>
       <b-button v-if="mode == 'creating'"
                 tag="router-link"
@@ -50,11 +44,32 @@
       </b-button>
       <b-button v-if="mode == 'editing'"
                 tag="router-link"
-                :to="getModelPathPrefix() + '/' + record.uuid">
+                :to="getViewURL()">
         Cancel
       </b-button>
     </div>
 
+    <div v-if="shouldAllowEdit() || shouldAllowDelete()" class="buttons">
+
+      <br /><br />
+
+      <b-button v-if="shouldAllowEdit()"
+                type="is-primary"
+                icon-left="edit"
+                tag="router-link"
+                :to="getEditURL()">
+        Edit This
+      </b-button>
+
+      <b-button v-if="shouldAllowDelete()"
+                type="is-danger"
+                icon-left="trash"
+                tag="router-link"
+                :to="getDeleteURL()">
+        Delete This
+      </b-button>
+    </div>
+
     <slot name="quick-entry"></slot>
 
     <div v-if="hasRows && mode == 'viewing'">
@@ -133,6 +148,10 @@ export default {
             type: Boolean,
             default: true,
         },
+        allowDelete: {
+            type: Boolean,
+            default: false,
+        },
         hideButtons: {
             type: Boolean,
             default: false,
@@ -271,6 +290,27 @@ export default {
             return '/' + this.getModelSlug() + '/rows'
         },
 
+        getViewURL() {
+            if (this.isRow) {
+                return `${this.getRowPathPrefix()}/${this.record.uuid}`
+            }
+            return `${this.getModelPathPrefix()}/${this.record.uuid}`
+        },
+
+        getEditURL() {
+            if (this.isRow) {
+                return `${this.getRowPathPrefix()}/${this.record.uuid}/edit`
+            }
+            return `${this.getModelPathPrefix()}/${this.record.uuid}/edit`
+        },
+
+        getDeleteURL() {
+            if (this.isRow) {
+                return `${this.getRowPathPrefix()}/${this.record.uuid}/delete`
+            }
+            return `${this.getModelPathPrefix()}/${this.record.uuid}/delete`
+        },
+
         getApiIndexUrl() {
             if (this.apiIndexUrl) {
                 return this.apiIndexUrl
@@ -412,6 +452,32 @@ export default {
             this.fetchRows(this.record.uuid)
         },
 
+        shouldAllowEdit() {
+            if (!this.allowEdit) {
+                return false
+            }
+            if (this.mode != 'viewing') {
+                return false
+            }
+            if (!this.hasModelPerm('edit')) {
+                return false
+            }
+            return true
+        },
+
+        shouldAllowDelete() {
+            if (!this.allowDelete) {
+                return false
+            }
+            if (this.mode == 'creating' || this.mode == 'deleting') {
+                return false
+            }
+            if (!this.hasModelPerm('delete')) {
+                return false
+            }
+            return true
+        },
+
         save() {
             let url = this.getApiIndexUrl()
             if (this.mode != 'creating') {