Add UPC quick lookup for View Product page

and fix expand/collapse icons

src/components/model-crud/ByjoveModelCrud.vue

@@ -321,6 +321,11 @@ export default {
 
     methods: {
 
+        clear() {
+            this.record = {}
+            this.$emit('refresh', this.record)
+        },
+
         getModelSlug() {
             if (this.modelSlug) {
                 return this.modelSlug

src/components/products/ByjoveProduct.vue

@@ -1,9 +1,14 @@
 <template>
-  <byjove-model-crud model-name="Product"
+  <div>
+
+  <byjove-model-crud ref="modelCrud"
+                     model-name="Product"
                      :label-renderer="renderLabel"
                      :allow-edit="allowEdit"
                      :mode="mode"
-                     @refresh="record => { product = record }">
+                     @refresh="record => { product = record }"
+                     v-show="!scannerSubmitting"
+                     class="block">
 
     <div style="display: flex; justify-content: space-between; margin-bottom: 0.5rem;">
 
@@ -40,7 +45,7 @@
           </p>
           <a class="card-header-icon">
             <b-icon pack="fas"
-                    :icon="props.open ? 'angle-down' : 'angle-up'">
+                    :icon="props.open ? 'angle-up' : 'angle-down'">
             </b-icon>
           </a>
         </div>
@@ -85,7 +90,7 @@
           </p>
           <a class="card-header-icon">
             <b-icon pack="fas"
-                    :icon="props.open ? 'angle-down' : 'angle-up'">
+                    :icon="props.open ? 'angle-up' : 'angle-down'">
             </b-icon>
           </a>
         </div>
@@ -125,10 +130,17 @@
     <slot name="extra-panels" :product="product"></slot>
 
   </byjove-model-crud>
+
+    <byjove-scanner-input ref="scannerInput"
+                          class="block"
+                          @submit="scannerSubmit">
+    </byjove-scanner-input>
+  </div>
 </template>
 
 <script>
 import ByjoveModelCrud from '../model-crud'
+import ByjoveScannerInput from '../scanner-input'
 
 export default {
     name: 'Product',
@@ -141,16 +153,44 @@ export default {
     },
     components: {
         ByjoveModelCrud,
+        ByjoveScannerInput,
     },
     data: function() {
         return {
             product: {},
+            scannerSubmitting: false,
         }
     },
     methods: {
         renderLabel(product) {
             return product.product_key
         },
+
+        scannerSubmit(entry) {
+            this.scannerSubmitting = true
+            let url = '/api/products/quick-lookup'
+            let params = {entry: entry}
+            this.$http.get(url, {params: params}).then(response => {
+                if (response.data.error) {
+                    this.$buefy.toast.open({
+                        message: response.data.error,
+                        type: 'is-danger',
+                    })
+                } else {
+                    this.$refs.scannerInput.clear()
+                    this.$refs.modelCrud.clear()
+                    this.$router.push(`/products/${response.data.product.uuid}`)
+                }
+                this.scannerSubmitting = false
+            }, response => {
+                this.$buefy.toast.open({
+                    message: "Unknown error!",
+                    type: 'is-danger',
+                })
+                this.scannerSubmitting = false
+            })
+        },
+
     },
 }
 </script>

src/components/scanner-input/ByjoveScannerInput.vue

@@ -25,6 +25,10 @@ export default {
 
     methods: {
 
+        clear() {
+            this.quickEntry = ''
+        },
+
         globalKey(event) {
             if (event.target.tagName == 'BODY') {