rattail/tailbone
2
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Clean up the product selection UI for new custorder

Browse source 
still needs some work but this is much better, more like the customer
selection now w/ "multi-faceted" autocomplete
This commit is contained in:
Lance Edgar 2021-10-19 18:14:50 -05:00
parent 8b044dbb22
commit 8d16a5f110
2 changed files with 98 additions and 105 deletions
Download patch file Download diff file Expand all files Collapse all files

116
tailbone/templates/custorders/create.mako
View file

@ -504,41 +504,22 @@
style="padding-left: 5rem;">
<b-field grouped>
<b-field label="Description" horizontal expanded>
<tailbone-autocomplete
ref="productDescriptionAutocomplete"
v-model="productUUID"
:assigned-value="productUUID"
:assigned-label="productDisplay"
serviceUrl="${product_autocomplete_url}"
@input="productChanged">
<p class="label control">
Product
</p>
<b-field :expanded="!productUUID">
<tailbone-autocomplete ref="productAutocomplete"
v-model="productUUID"
placeholder="Enter UPC or brand, description etc."
:initial-label="productDisplay"
serviceUrl="${url('{}.product_autocomplete'.format(route_prefix))}"
@input="productChanged">
</tailbone-autocomplete>
</b-field>
</b-field>
<b-field grouped>
<b-field label="UPC" horizontal expanded>
<b-input v-if="!productUUID"
v-model="productUPC"
ref="productUPCInput"
@keydown.native="productUPCKeyDown">
</b-input>
<b-button v-if="!productUUID"
type="is-primary"
icon-pack="fas"
icon-left="search"
@click="fetchProductByUPC()">
Fetch
</b-button>
<b-button v-if="productUUID"
@click="clearProduct(true)">
{{ productUPC }} (click to change)
</b-button>
</b-field>
<b-button v-if="productUUID"
type="is-primary"
tag="a" target="_blank"
:href="'${request.route_url('products')}/' + productUUID"
:href="productURL"
icon-pack="fas"
icon-left="external-link-alt">
View Product
@ -546,18 +527,26 @@
</b-field>
<div v-if="productUUID">
<b-field grouped
v-if="productUUID">
<div class="is-pulled-right has-text-centered">
<img :src="productImageURL"
style="height: 150px; width: 150px; "/>
<p>{{ productKey }}</p>
</div>
<b-field grouped>
<b-field label="Unit Price">
<span :class="productPriceNeedsConfirmation ? 'has-background-warning' : ''">
$4.20 / EA
{{ productUnitPriceDisplay }}
</span>
</b-field>
<b-field label="Last Changed">
<span>2021-01-01</span>
</b-field>
<!-- <b-field label="Last Changed"> -->
<!-- <span>2021-01-01</span> -->
<!-- </b-field> -->
</b-field>
<b-checkbox v-model="productPriceNeedsConfirmation"
type="is-warning"
size="is-small">
This price is questionable and should be confirmed
by someone before order proceeds.
@ -759,6 +748,10 @@
productUUID: null,
productDisplay: null,
productUPC: null,
productKey: null,
productUnitPriceDisplay: null,
productURL: null,
productImageURL: null,
productQuantity: null,
defaultUnitChoices: defaultUnitChoices,
productUnitChoices: defaultUnitChoices,
@ -1292,13 +1285,15 @@
this.productUUID = null
this.productDisplay = null
this.productUPC = null
this.productKey = null
this.productUnitPriceDisplay = null
this.productQuantity = 1
this.productUnitChoices = this.defaultUnitChoices
this.productUOM = this.defaultUOM
this.productPriceNeedsConfirmation = false
this.showingItemDialog = true
this.$nextTick(() => {
this.$refs.productDescriptionAutocomplete.focus()
this.$refs.productAutocomplete.focus()
})
},
@ -1309,6 +1304,10 @@
this.productUUID = row.product_uuid
this.productDisplay = row.product_full_description
this.productUPC = row.product_upc_pretty || row.product_upc
this.productKey = row.product_key
this.productURL = row.product_url
this.productUnitPriceDisplay = row.unit_price_display
this.productImageURL = row.product_image_url
this.productQuantity = row.order_quantity
this.productUnitChoices = row.order_uom_choices
this.productUOM = row.order_uom
@ -1340,17 +1339,16 @@
})
},
clearProduct(autofocus) {
clearProduct() {
this.productUUID = null
this.productDisplay = null
this.productUPC = null
this.productKey = null
this.productUnitPriceDisplay = null
this.productURL = null
this.productImageURL = null
this.productUnitChoices = this.defaultUnitChoices
this.productPriceNeedsConfirmation = false
if (autofocus) {
this.$nextTick(() => {
this.$refs.productUPCInput.focus()
})
}
},
setProductUnitChoices(choices) {
@ -1368,34 +1366,6 @@
}
},
fetchProductByUPC() {
let params = {
action: 'find_product_by_upc',
upc: this.productUPC,
}
this.submitBatchData(params, response => {
if (response.data.error) {
this.$buefy.toast.open({
message: "Fetch failed: " + response.data.error,
type: 'is-warning',
duration: 2000, // 2 seconds
})
} else {
this.productUUID = response.data.uuid
this.productUPC = response.data.upc_pretty
this.productDisplay = response.data.full_description
this.setProductUnitChoices(response.data.uom_choices)
this.productPriceNeedsConfirmation = false
}
})
},
productUPCKeyDown(event) {
if (event.which == 13) { // Enter
this.fetchProductByUPC()
}
},
productChanged(uuid) {
if (uuid) {
this.productUUID = uuid
@ -1405,7 +1375,11 @@
}
this.submitBatchData(params, response => {
this.productUPC = response.data.upc_pretty
this.productKey = response.data.key
this.productDisplay = response.data.full_description
this.productUnitPriceDisplay = response.data.unit_price_display
this.productURL = response.data.url
this.productImageURL = response.data.image_url
this.setProductUnitChoices(response.data.uom_choices)
this.productPriceNeedsConfirmation = false
})