Use product lookup component for "resolve pending product" tool

tailbone/templates/custorders/create.mako

@@ -532,8 +532,9 @@
                             Product
                           </p>
                           <tailbone-product-lookup ref="productLookup"
-                                                   :selected-product="selectedProduct"
-                                                   @selected="productLookupSelected">
+                                                   :product="selectedProduct"
+                                                   @selected="productLookupSelected"
+                                                   autocomplete-url="${url(f'{route_prefix}.product_autocomplete')}">
                           </tailbone-product-lookup>
                         </b-field>
 

tailbone/templates/products/lookup.mako

@@ -6,9 +6,9 @@
 
       <b-field grouped>
 
-        <b-field :expanded="!selectedProduct">
+        <b-field :expanded="!product">
           <b-autocomplete ref="productAutocomplete"
-                          v-if="!selectedProduct"
+                          v-if="!product"
                           v-model="autocompleteValue"
                           placeholder="Enter UPC or brand, description etc."
                           :data="autocompleteOptions"
@@ -18,25 +18,25 @@
                           @select="autocompleteSelected"
                           style="width: 100%;">
           </b-autocomplete>
-          <b-button v-if="selectedProduct"
+          <b-button v-if="product"
                     @click="clearSelection(true)">
-            {{ selectedProduct.full_description }}
+            {{ product.full_description }}
           </b-button>
         </b-field>
 
         <b-button type="is-primary"
-                  v-if="!selectedProduct"
+                  v-if="!product"
                   @click="lookupInit()"
                   icon-pack="fas"
                   icon-left="search">
           Full Lookup
         </b-button>
 
-        <b-button v-if="selectedProduct"
+        <b-button v-if="product"
                   type="is-primary"
                   tag="a" target="_blank"
-                  :href="selectedProduct.url"
-                  :disabled="!selectedProduct.url"
+                  :href="product.url"
+                  :disabled="!product.url"
                   icon-pack="fas"
                   icon-left="external-link-alt">
           View Product
@@ -209,9 +209,13 @@
     const TailboneProductLookup = {
         template: '#tailbone-product-lookup-template',
         props: {
-            selectedProduct: {
+            product: {
                 type: Object,
             },
+            autocompleteUrl: {
+                type: String,
+                default: '${url('products.autocomplete')}',
+            },
         },
         data() {
             return {
@@ -238,7 +242,7 @@
         methods: {
 
             focus() {
-                if (!this.selectedProduct) {
+                if (!this.product) {
                     this.$refs.productAutocomplete.focus()
                 }
             },
@@ -269,8 +273,7 @@
                 }
 
                 // and perform the search
-                let url = '${url(f'{route_prefix}.product_autocomplete')}'
-                this.$http.get(url + '?term=' + encodeURIComponent(entry))
+                this.$http.get(this.autocompleteUrl + '?term=' + encodeURIComponent(entry))
                     .then(({ data }) => {
                         this.autocompleteOptions = data
                     }).catch((error) => {
@@ -283,6 +286,8 @@
                 this.$emit('selected', {
                     uuid: option.value,
                     full_description: option.label,
+                    url: option.url,
+                    image_url: option.image_url,
                 })
             },
 

tailbone/templates/products/pending/view.mako

@@ -1,5 +1,11 @@
 ## -*- coding: utf-8; -*-
 <%inherit file="/master/view.mako" />
+<%namespace name="product_lookup" file="/products/lookup.mako" />
+
+<%def name="render_this_page_template()">
+  ${parent.render_this_page_template()}
+  ${product_lookup.tailbone_product_lookup_template()}
+</%def>
 
 <%def name="object_helpers()">
   ${parent.object_helpers()}
@@ -43,12 +49,13 @@
               <span>${instance.full_description}</span>
             </b-field>
             <b-field label="Actual Product" expanded>
-              <tailbone-autocomplete name="product_uuid"
-                                     v-model="resolveProductUUID"
-                                     ref="resolveProductAutocomplete"
-                                     service-url="${url('products.autocomplete')}">
-              </tailbone-autocomplete>
+              <tailbone-product-lookup ref="productLookup"
+                                       autocomplete-url="${url('products.autocomplete_special', key='with_key')}"
+                                       :product="actualProduct"
+                                       @selected="productSelected">
+              </tailbone-product-lookup>
             </b-field>
+            ${h.hidden('product_uuid', **{':value': 'resolveProductUUID'})}
           </section>
 
           <footer class="modal-card-foot">
@@ -91,7 +98,7 @@
         this.resolveProductUUID = null
         this.resolveProductShowDialog = true
         this.$nextTick(() => {
-            this.$refs.resolveProductAutocomplete.focus()
+            this.$refs.productLookup.focus()
         })
     }
 
@@ -100,8 +107,20 @@
         this.$refs.resolveProductForm.submit()
     }
 
+    ThisPageData.actualProduct = null
+
+    ThisPage.methods.productSelected = function(product) {
+       this.actualProduct = product
+       this.resolveProductUUID = product ? product.uuid : null
+    }
+
   </script>
 </%def>
 
+<%def name="make_this_page_component()">
+  ${parent.make_this_page_component()}
+  ${product_lookup.tailbone_product_lookup_component()}
+</%def>
+
 
 ${parent.body()}