Tweak default product view

src/components/products/ByjoveProduct.vue

@@ -1,20 +1,27 @@
 <template>
   <byjove-model-crud model-name="Product"
+                     :label-renderer="renderLabel"
                      :allow-edit="allowEdit"
                      :mode="mode"
                      @refresh="record => { product = record }">
 
     <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
 
-      <b-field label="Item ID">
-        <b-input v-if="mode == 'creating' || mode == 'editing'"
-                 v-model="product.item_id">
-        </b-input>
-        <span v-if="mode == 'viewing' || mode == 'deleting'">
-          {{ product.item_id }}
-        </span>
+      <div style="display: flex; flex-direction: column;">
+
+        <b-field label="Brand">
+          {{ product.brand_name }}
         </b-field>
 
+        <b-field label="Description">
+          {{ product.description }}
+        </b-field>
+
+        <b-field label="Size">
+          {{ product.size }}
+        </b-field>
+      </div>
+
       <img :src="product.image_url" />
     </div>
 
@@ -42,7 +49,7 @@
       <div class="card-content">
         <div class="content">
 
-          <b-field label="Preferred Vendor">
+          <b-field label="Preferred">
             {{ product.vendor_name }} @ {{ product.default_unit_cost_display }}
           </b-field>
 
@@ -86,5 +93,10 @@ export default {
             product: {},
         }
     },
+    methods: {
+        renderLabel(product) {
+            return product.product_key
+        },
+    },
 }
 </script>