Fix the "new custorder" page for butterball
reasonably confident this one is complete, and didn't break buefy theme..
This commit is contained in:
Lance Edgar
parent
3dc8deef67
commit
58f9588261
4 changed files with 559 additions and 347 deletions
File diff suppressed because it is too large
Load diff
|
|
@ -3,21 +3,26 @@
|
|||
<%def name="tailbone_product_lookup_template()">
|
||||
<script type="text/x-template" id="tailbone-product-lookup-template">
|
||||
<div style="width: 100%;">
|
||||
<div style="display: flex; gap: 0.5rem;">
|
||||
|
||||
<b-field grouped>
|
||||
|
||||
<b-field :expanded="!product">
|
||||
<b-autocomplete ref="productAutocomplete"
|
||||
v-if="!product"
|
||||
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-field :style="{'flex-grow': product ? '0' : '1'}">
|
||||
<${b}-autocomplete v-if="!product"
|
||||
ref="productAutocomplete"
|
||||
v-model="autocompleteValue"
|
||||
expanded
|
||||
placeholder="Enter UPC or brand, description etc."
|
||||
:data="autocompleteOptions"
|
||||
% if request.use_oruga:
|
||||
@input="getAutocompleteOptions"
|
||||
:formatter="option => option.label"
|
||||
% else:
|
||||
@typing="getAutocompleteOptions"
|
||||
:custom-formatter="option => option.label"
|
||||
field="value"
|
||||
% endif
|
||||
@select="autocompleteSelected"
|
||||
style="width: 100%;">
|
||||
</${b}-autocomplete>
|
||||
<b-button v-if="product"
|
||||
@click="clearSelection(true)">
|
||||
{{ product.full_description }}
|
||||
|
|
@ -42,7 +47,7 @@
|
|||
View Product
|
||||
</b-button>
|
||||
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
<b-modal :active.sync="lookupShowDialog">
|
||||
<div class="card">
|
||||
|
|
@ -88,68 +93,72 @@
|
|||
|
||||
</b-field>
|
||||
|
||||
<b-table :data="searchResults"
|
||||
narrowed
|
||||
icon-pack="fas"
|
||||
:loading="searchResultsLoading"
|
||||
:selected.sync="searchResultSelected">
|
||||
<${b}-table :data="searchResults"
|
||||
narrowed
|
||||
% if request.use_oruga:
|
||||
v-model:selected="searchResultSelected"
|
||||
% else:
|
||||
:selected.sync="searchResultSelected"
|
||||
icon-pack="fas"
|
||||
% endif
|
||||
:loading="searchResultsLoading">
|
||||
|
||||
<b-table-column label="${request.rattail_config.product_key_title()}"
|
||||
<${b}-table-column label="${request.rattail_config.product_key_title()}"
|
||||
field="product_key"
|
||||
v-slot="props">
|
||||
{{ props.row.product_key }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Brand"
|
||||
<${b}-table-column label="Brand"
|
||||
field="brand_name"
|
||||
v-slot="props">
|
||||
{{ props.row.brand_name }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Description"
|
||||
<${b}-table-column label="Description"
|
||||
field="description"
|
||||
v-slot="props">
|
||||
<span :class="{organic: props.row.organic}">
|
||||
{{ props.row.description }}
|
||||
{{ props.row.size }}
|
||||
</span>
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Unit Price"
|
||||
<${b}-table-column label="Unit Price"
|
||||
field="unit_price"
|
||||
v-slot="props">
|
||||
{{ props.row.unit_price_display }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Sale Price"
|
||||
<${b}-table-column label="Sale Price"
|
||||
field="sale_price"
|
||||
v-slot="props">
|
||||
<span class="has-background-warning">
|
||||
{{ props.row.sale_price_display }}
|
||||
</span>
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Sale Ends"
|
||||
<${b}-table-column label="Sale Ends"
|
||||
field="sale_ends"
|
||||
v-slot="props">
|
||||
<span class="has-background-warning">
|
||||
{{ props.row.sale_ends_display }}
|
||||
</span>
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Department"
|
||||
<${b}-table-column label="Department"
|
||||
field="department_name"
|
||||
v-slot="props">
|
||||
{{ props.row.department_name }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Vendor"
|
||||
<${b}-table-column label="Vendor"
|
||||
field="vendor_name"
|
||||
v-slot="props">
|
||||
{{ props.row.vendor_name }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Actions"
|
||||
<${b}-table-column label="Actions"
|
||||
v-slot="props">
|
||||
<a :href="props.row.url"
|
||||
target="_blank"
|
||||
|
|
@ -157,7 +166,7 @@
|
|||
<i class="fas fa-external-link-alt"></i>
|
||||
View
|
||||
</a>
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<template #empty>
|
||||
<div class="content has-text-grey has-text-centered">
|
||||
|
|
@ -171,7 +180,7 @@
|
|||
<p>Nothing here.</p>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</${b}-table>
|
||||
|
||||
<br />
|
||||
<div class="level">
|
||||
|
|
@ -263,7 +272,12 @@
|
|||
}
|
||||
},
|
||||
|
||||
## TODO: add debounce for oruga?
|
||||
% if request.use_oruga:
|
||||
getAutocompleteOptions(entry) {
|
||||
% else:
|
||||
getAutocompleteOptions: debounce(function (entry) {
|
||||
% endif
|
||||
|
||||
// since the `@typing` event from buefy component does not
|
||||
// "self-regulate" in any way, we a) use `debounce` above,
|
||||
|
|
@ -282,7 +296,11 @@
|
|||
this.autocompleteOptions = []
|
||||
throw error
|
||||
})
|
||||
% if request.use_oruga:
|
||||
},
|
||||
% else:
|
||||
}),
|
||||
% endif
|
||||
|
||||
autocompleteSelected(option) {
|
||||
this.$emit('selected', {
|
||||
|
|
@ -359,6 +377,7 @@
|
|||
}
|
||||
|
||||
Vue.component('tailbone-product-lookup', TailboneProductLookup)
|
||||
<% request.register_component('tailbone-product-lookup', 'TailboneProductLookup') %>
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
${self.make_b_loading_component()}
|
||||
${self.make_b_modal_component()}
|
||||
${self.make_b_notification_component()}
|
||||
${self.make_b_radio_component()}
|
||||
${self.make_b_select_component()}
|
||||
${self.make_b_steps_component()}
|
||||
${self.make_b_step_item_component()}
|
||||
|
|
@ -468,6 +469,41 @@
|
|||
<% request.register_component('b-notification', 'BNotification') %>
|
||||
</%def>
|
||||
|
||||
<%def name="make_b_radio_component()">
|
||||
<script type="text/x-template" id="b-radio-template">
|
||||
<o-radio v-model="orugaValue"
|
||||
@update:model-value="orugaValueUpdated"
|
||||
:native-value="nativeValue">
|
||||
<slot />
|
||||
</o-radio>
|
||||
</script>
|
||||
<script>
|
||||
const BRadio = {
|
||||
template: '#b-radio-template',
|
||||
props: {
|
||||
modelValue: null,
|
||||
nativeValue: null,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
orugaValue: this.modelValue,
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
modelValue(to, from) {
|
||||
this.orugaValue = to
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
orugaValueUpdated(value) {
|
||||
this.$emit('update:modelValue', value)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<% request.register_component('b-radio', 'BRadio') %>
|
||||
</%def>
|
||||
|
||||
<%def name="make_b_select_component()">
|
||||
<script type="text/x-template" id="b-select-template">
|
||||
<o-select :name="name"
|
||||
|
|
|
|||
|
|
@ -112,7 +112,7 @@
|
|||
@select="optionSelected"
|
||||
keep-first
|
||||
open-on-focus
|
||||
expanded
|
||||
:expanded="expanded"
|
||||
:clearable="clearable"
|
||||
:clear-on-select="clearOnSelect">
|
||||
<template #default="{ option }">
|
||||
|
|
@ -325,6 +325,7 @@
|
|||
// the selection is cleared we want user to start over
|
||||
// anyway
|
||||
this.orugaValue = null
|
||||
this.fetchedData = []
|
||||
|
||||
// here is where we alert callers to the new value
|
||||
if (option) {
|
||||
|
|
@ -366,6 +367,12 @@
|
|||
}
|
||||
},
|
||||
|
||||
// nb. this used to be relevant but now is here only for sake
|
||||
// of backward-compatibility (for callers)
|
||||
getDisplayText() {
|
||||
return this.internalLabel
|
||||
},
|
||||
|
||||
// set focus to this component, which will just set focus
|
||||
// to the oruga autocomplete component
|
||||
focus() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue