Expand the "product lookup" component to include autocomplete
This commit is contained in:
Lance Edgar
parent
441a6e5e0c
commit
a812181466
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -2,8 +2,49 @@
|
|||
|
||||
<%def name="tailbone_product_lookup_template()">
|
||||
<script type="text/x-template" id="tailbone-product-lookup-template">
|
||||
<div>
|
||||
<b-modal :active.sync="showingDialog">
|
||||
<div style="width: 100%;">
|
||||
|
||||
<b-field grouped>
|
||||
|
||||
<b-field :expanded="!selectedProduct">
|
||||
<b-autocomplete ref="productAutocomplete"
|
||||
v-if="!selectedProduct"
|
||||
v-model="autocompleteValue"
|
||||
placeholder="Enter UPC or brand, description etc."
|
||||
:data="autocompleteOptions"
|
||||
field="value"
|
||||
:custom-formatter="option => option.label"
|
||||
@typing="getAutocompleteOptions"
|
||||
@select="autocompleteSelected"
|
||||
style="width: 100%;">
|
||||
</b-autocomplete>
|
||||
<b-button v-if="selectedProduct"
|
||||
@click="clearSelection(true)">
|
||||
{{ selectedProduct.full_description }}
|
||||
</b-button>
|
||||
</b-field>
|
||||
|
||||
<b-button type="is-primary"
|
||||
v-if="!selectedProduct"
|
||||
@click="lookupInit()"
|
||||
icon-pack="fas"
|
||||
icon-left="search">
|
||||
Full Lookup
|
||||
</b-button>
|
||||
|
||||
<b-button v-if="selectedProduct"
|
||||
type="is-primary"
|
||||
tag="a" target="_blank"
|
||||
:href="selectedProduct.url"
|
||||
:disabled="!selectedProduct.url"
|
||||
icon-pack="fas"
|
||||
icon-left="external-link-alt">
|
||||
View Product
|
||||
</b-button>
|
||||
|
||||
</b-field>
|
||||
|
||||
<b-modal :active.sync="lookupShowDialog">
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
|
||||
|
|
@ -157,6 +198,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
|
||||
</div>
|
||||
</script>
|
||||
</%def>
|
||||
|
|
@ -166,9 +208,17 @@
|
|||
|
||||
const TailboneProductLookup = {
|
||||
template: '#tailbone-product-lookup-template',
|
||||
props: {
|
||||
selectedProduct: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showingDialog: false,
|
||||
autocompleteValue: '',
|
||||
autocompleteOptions: [],
|
||||
|
||||
lookupShowDialog: false,
|
||||
|
||||
searchTerm: null,
|
||||
searchTermLastUsed: null,
|
||||
|
|
@ -187,23 +237,67 @@
|
|||
},
|
||||
methods: {
|
||||
|
||||
showDialog(term) {
|
||||
focus() {
|
||||
if (!this.selectedProduct) {
|
||||
this.$refs.productAutocomplete.focus()
|
||||
}
|
||||
},
|
||||
|
||||
clearSelection(focus) {
|
||||
|
||||
// clear data
|
||||
this.autocompleteValue = ''
|
||||
this.$emit('selected', null)
|
||||
|
||||
// maybe set focus to our (autocomplete) component
|
||||
if (focus) {
|
||||
this.$nextTick(() => {
|
||||
this.focus()
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
getAutocompleteOptions: debounce(function (entry) {
|
||||
|
||||
// since the `@typing` event from buefy component does not
|
||||
// "self-regulate" in any way, we a) use `debounce` above,
|
||||
// but also b) skip the search unless we have at least 3
|
||||
// characters of input from user
|
||||
if (entry.length < 3) {
|
||||
this.data = []
|
||||
return
|
||||
}
|
||||
|
||||
// and perform the search
|
||||
let url = '${url(f'{route_prefix}.product_autocomplete')}'
|
||||
this.$http.get(url + '?term=' + encodeURIComponent(entry))
|
||||
.then(({ data }) => {
|
||||
this.autocompleteOptions = data
|
||||
}).catch((error) => {
|
||||
this.autocompleteOptions = []
|
||||
throw error
|
||||
})
|
||||
}),
|
||||
|
||||
autocompleteSelected(option) {
|
||||
this.$emit('selected', {
|
||||
uuid: option.value,
|
||||
full_description: option.label,
|
||||
})
|
||||
},
|
||||
|
||||
lookupInit() {
|
||||
this.searchResultSelected = null
|
||||
this.lookupShowDialog = true
|
||||
|
||||
if (term !== undefined) {
|
||||
this.searchTerm = term
|
||||
// perform search if invoked with new term
|
||||
if (term != this.searchTermLastUsed) {
|
||||
this.$nextTick(() => {
|
||||
|
||||
this.searchTerm = this.autocompleteValue
|
||||
if (this.searchTerm != this.searchTermLastUsed) {
|
||||
this.searchTermLastUsed = null
|
||||
this.performSearch()
|
||||
}
|
||||
} else {
|
||||
this.searchTerm = this.searchTermLastUsed
|
||||
}
|
||||
|
||||
this.showingDialog = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.searchTermInput.focus()
|
||||
})
|
||||
},
|
||||
|
|
@ -214,17 +308,6 @@
|
|||
}
|
||||
},
|
||||
|
||||
cancelDialog() {
|
||||
this.searchResultSelected = null
|
||||
this.showingDialog = false
|
||||
this.$emit('canceled')
|
||||
},
|
||||
|
||||
selectResult() {
|
||||
this.showingDialog = false
|
||||
this.$emit('selected', this.searchResultSelected)
|
||||
},
|
||||
|
||||
performSearch() {
|
||||
if (this.searchResultsLoading) {
|
||||
return
|
||||
|
|
@ -255,6 +338,16 @@
|
|||
this.searchResultsLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
selectResult() {
|
||||
this.lookupShowDialog = false
|
||||
this.$emit('selected', this.searchResultSelected)
|
||||
},
|
||||
|
||||
cancelDialog() {
|
||||
this.searchResultSelected = null
|
||||
this.lookupShowDialog = false
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue