Add support for "Create Row" button when viewing parent CRUD object

plus misc. other tweaks, for polish

src/components/model-crud/ByjoveModelCrud.vue

@@ -42,14 +42,8 @@
                 @click="save()">
         {{ getSaveButtonText() }}
       </b-button>
-      <b-button v-if="mode == 'creating'"
+      <b-button tag="router-link"
-                tag="router-link"
+                :to="getCancelURL()">
-                :to="getModelPathPrefix() + '/'">
-        Cancel
-      </b-button>
-      <b-button v-if="mode == 'editing' || mode == 'deleting'"
-                tag="router-link"
-                :to="getViewURL()">
         Cancel
       </b-button>
     </div>
@@ -63,7 +57,7 @@
                 icon-left="edit"
                 tag="router-link"
                 :to="getEditURL()">
-        Edit This
+        Edit this {{ getModelTitle() }}
       </b-button>
 
       <b-button v-if="shouldAllowDelete() && !quickDelete"
@@ -71,20 +65,44 @@
                 icon-left="trash"
                 tag="router-link"
                 :to="getDeleteURL()">
-        Delete This
+        Delete this {{ getModelTitle() }}
       </b-button>
       <b-button v-if="shouldAllowDelete() && quickDelete"
                 type="is-danger"
                 icon-left="trash"
                 @click="$emit('delete')">
-        Delete This
+        Delete this {{ getModelTitle() }}
       </b-button>
     </div>
 
     <slot name="quick-entry"></slot>
 
     <div v-if="hasRows && mode == 'viewing'">
-      <h2 v-if="rowsTitle">{{ rowsTitle }}</h2>
+      <br />
+
+      <div v-if="rowsTitle && shouldAllowCreateRow()"
+           style="display: flex;">
+        <h2 style="flex-grow: 1;">{{ rowsTitle }}</h2>
+        <b-button type="is-primary"
+                  tag="router-link"
+                  :to="getCreateRowButtonUrl()"
+                  icon-left="plus">
+          {{ createRowButtonText }}
+        </b-button>
+      </div>
+
+      <h2 v-if="rowsTitle && !shouldAllowCreateRow()">
+        {{ rowsTitle }}
+      </h2>
+
+      <b-button v-if="shouldAllowCreateRow() && !rowsTitle"
+                type="is-primary"
+                tag="router-link"
+                :to="getCreateRowButtonUrl()"
+                icon-left="plus">
+        {{ createRowButtonText }}
+      </b-button>
+
       <slot name="row-filters"></slot>
       <b-menu>
         <b-menu-list>
@@ -137,6 +155,18 @@ export default {
             type: String,
             default: null,
         },
+        allowCreateRow: {
+            type: Boolean,
+            default: false,
+        },
+        createRowButtonText: {
+            type: String,
+            default: "Create New Row",
+        },
+        createRowButtonUrl: {
+            type: String,
+            default: null,
+        },
         rowsPaginated: {
             type: Boolean,
             default: true,
@@ -194,6 +224,10 @@ export default {
             type: String,
             default: null,
         },
+        cancelUrl: {
+            type: String,
+            default: null,
+        },
     },
     data: function() {
         return {
@@ -548,6 +582,16 @@ export default {
             return true
         },
 
+        getCancelURL() {
+            if (this.cancelUrl) {
+                return this.cancelUrl
+            }
+            if (this.mode == 'creating') {
+                return this.getIndexURL()
+            }
+            return this.getViewURL()
+        },
+
         save() {
             if (this.mode == 'deleting') {
                 this.confirmDelete()
@@ -586,6 +630,26 @@ export default {
                 })
             })
         },
+
+        shouldAllowCreateRow() {
+            if (!this.allowCreateRow) {
+                return false
+            }
+            if (this.mode != 'viewing') {
+                return false
+            }
+            if (!this.hasModelPerm('create_row')) {
+                return false
+            }
+            return true
+        },
+
+        getCreateRowButtonUrl() {
+            if (this.createRowButtonUrl) {
+                return this.createRowButtonUrl
+            }
+            return this.getApiRowsUrl()
+        },
     },
 }
 </script>

src/components/model-index/ByjoveModelIndex.vue

@@ -12,7 +12,8 @@
       <b-button class="new-object"
                 type="is-primary"
                 tag="router-link"
-                :to="getModelPathPrefix() + '/new'">
+                :to="getModelPathPrefix() + '/new'"
+                icon-left="plus">
         New {{ getModelTitle() }}
       </b-button>
     </div>