Expand the "product lookup" component to include autocomplete
This commit is contained in:
Lance Edgar
parent
441a6e5e0c
commit
a812181466
2 changed files with 155 additions and 73 deletions
|
|
@ -531,33 +531,10 @@
|
|||
<p class="label control">
|
||||
Product
|
||||
</p>
|
||||
<b-field :expanded="!productUUID">
|
||||
<tailbone-autocomplete ref="productAutocomplete"
|
||||
v-model="productUUID"
|
||||
placeholder="Enter UPC or brand, description etc."
|
||||
:assigned-label="productDisplay"
|
||||
serviceUrl="${url('{}.product_autocomplete'.format(route_prefix))}"
|
||||
@input="productChanged">
|
||||
</tailbone-autocomplete>
|
||||
</b-field>
|
||||
|
||||
<b-button type="is-primary"
|
||||
v-if="!productUUID"
|
||||
@click="productFullLookup()"
|
||||
icon-pack="fas"
|
||||
icon-left="search">
|
||||
Full Lookup
|
||||
</b-button>
|
||||
|
||||
<b-button v-if="productUUID"
|
||||
type="is-primary"
|
||||
tag="a" target="_blank"
|
||||
:href="productURL"
|
||||
:disabled="!productURL"
|
||||
icon-pack="fas"
|
||||
icon-left="external-link-alt">
|
||||
View Product
|
||||
</b-button>
|
||||
<tailbone-product-lookup ref="productLookup"
|
||||
:selected-product="selectedProduct"
|
||||
@selected="productLookupSelected">
|
||||
</tailbone-product-lookup>
|
||||
</b-field>
|
||||
|
||||
<div v-if="productUUID">
|
||||
|
|
@ -565,7 +542,6 @@
|
|||
<div class="is-pulled-right has-text-centered">
|
||||
<img :src="productImageURL"
|
||||
style="max-height: 150px; max-width: 150px; "/>
|
||||
## <p>{{ productKey }}</p>
|
||||
</div>
|
||||
|
||||
<b-field grouped>
|
||||
|
|
@ -957,11 +933,6 @@
|
|||
</b-modal>
|
||||
% endif
|
||||
|
||||
<tailbone-product-lookup ref="productLookup"
|
||||
@canceled="productLookupCanceled"
|
||||
@selected="productLookupSelected">
|
||||
</tailbone-product-lookup>
|
||||
|
||||
% if allow_past_item_reorder:
|
||||
<b-modal :active.sync="pastItemsShowDialog">
|
||||
<div class="card">
|
||||
|
|
@ -1258,6 +1229,7 @@
|
|||
pastItemsSelected: null,
|
||||
% endif
|
||||
productIsKnown: true,
|
||||
selectedProduct: null,
|
||||
productUUID: null,
|
||||
productDisplay: null,
|
||||
productKey: null,
|
||||
|
|
@ -1544,6 +1516,18 @@
|
|||
this.$refs.contactAutocomplete.clearSelection()
|
||||
}
|
||||
},
|
||||
|
||||
productIsKnown(newval, oldval) {
|
||||
// TODO: seems like this should be better somehow?
|
||||
// e.g. maybe we should not be clearing *everything*
|
||||
// in case user accidentally clicks, and then clicks
|
||||
// "is known" again? and if we *should* clear all,
|
||||
// why does that require 2 steps?
|
||||
if (!newval) {
|
||||
this.selectedProduct = null
|
||||
this.clearProduct()
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
|
@ -1894,20 +1878,12 @@
|
|||
}
|
||||
},
|
||||
|
||||
productFullLookup() {
|
||||
this.showingItemDialog = false
|
||||
let term = this.$refs.productAutocomplete.getUserInput()
|
||||
this.$refs.productLookup.showDialog(term)
|
||||
},
|
||||
|
||||
productLookupCanceled() {
|
||||
this.showingItemDialog = true
|
||||
},
|
||||
|
||||
productLookupSelected(selected) {
|
||||
// TODO: this still is a hack somehow, am sure of it.
|
||||
// need to clean this up at some point
|
||||
this.selectedProduct = selected
|
||||
this.clearProduct()
|
||||
this.productChanged(selected.uuid)
|
||||
this.showingItemDialog = true
|
||||
this.productChanged(selected)
|
||||
},
|
||||
|
||||
copyPendingProductAttrs(from, to) {
|
||||
|
|
@ -1930,6 +1906,7 @@
|
|||
this.customerPanelOpen = false
|
||||
this.editingItem = null
|
||||
this.productIsKnown = true
|
||||
this.selectedProduct = null
|
||||
this.productUUID = null
|
||||
this.productDisplay = null
|
||||
this.productKey = null
|
||||
|
|
@ -1962,7 +1939,7 @@
|
|||
this.itemDialogTabIndex = 0
|
||||
this.showingItemDialog = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.productAutocomplete.focus()
|
||||
this.$refs.productLookup.focus()
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -2027,6 +2004,16 @@
|
|||
this.productIsKnown = !!row.product_uuid
|
||||
this.productUUID = row.product_uuid
|
||||
|
||||
if (row.product_uuid) {
|
||||
this.selectedProduct = {
|
||||
uuid: row.product_uuid,
|
||||
full_description: row.product_full_description,
|
||||
url: row.product_url,
|
||||
}
|
||||
} else {
|
||||
this.selectedProduct = null
|
||||
}
|
||||
|
||||
// nb. must construct new object before updating data
|
||||
// (otherwise vue does not notice the changes?)
|
||||
let pending = {}
|
||||
|
|
@ -2131,11 +2118,11 @@
|
|||
}
|
||||
},
|
||||
|
||||
productChanged(uuid) {
|
||||
if (uuid) {
|
||||
productChanged(product) {
|
||||
if (product) {
|
||||
let params = {
|
||||
action: 'get_product_info',
|
||||
uuid: uuid,
|
||||
uuid: product.uuid,
|
||||
}
|
||||
// nb. it is possible for the handler to "swap"
|
||||
// the product selection, i.e. user chooses a "per
|
||||
|
|
@ -2144,6 +2131,8 @@
|
|||
// received above is the correct one, but just use
|
||||
// whatever came back from handler
|
||||
this.submitBatchData(params, response => {
|
||||
this.selectedProduct = response.data
|
||||
|
||||
this.productUUID = response.data.uuid
|
||||
this.productKey = response.data.key
|
||||
this.productDisplay = response.data.full_description
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue