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

Fix the "new custorder" page for butterball

Browse source 
reasonably confident this one is complete, and didn't break buefy theme..
This commit is contained in:
Lance Edgar 2024-06-02 19:56:42 -05:00
parent 3dc8deef67
commit 58f9588261
4 changed files with 559 additions and 347 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

File diff suppressed because it is too large Load diff

97
tailbone/templates/products/lookup.mako
View file

@ -3,21 +3,26 @@
<%def name="tailbone_product_lookup_template()"> <%def name="tailbone_product_lookup_template()">
<script type="text/x-template" id="tailbone-product-lookup-template"> <script type="text/x-template" id="tailbone-product-lookup-template">
<div style="width: 100%;"> <div style="width: 100%;">
<div style="display: flex; gap: 0.5rem;">
<b-field grouped> <b-field :style="{'flex-grow': product ? '0' : '1'}">
<${b}-autocomplete v-if="!product"
<b-field :expanded="!product"> ref="productAutocomplete"
<b-autocomplete ref="productAutocomplete" v-model="autocompleteValue"
v-if="!product" expanded
v-model="autocompleteValue" placeholder="Enter UPC or brand, description etc."
placeholder="Enter UPC or brand, description etc." :data="autocompleteOptions"
:data="autocompleteOptions" % if request.use_oruga:
field="value" @input="getAutocompleteOptions"
:custom-formatter="option => option.label" :formatter="option => option.label"
@typing="getAutocompleteOptions" % else:
@select="autocompleteSelected" @typing="getAutocompleteOptions"
style="width: 100%;"> :custom-formatter="option => option.label"
</b-autocomplete> field="value"
% endif
@select="autocompleteSelected"
style="width: 100%;">
</${b}-autocomplete>
<b-button v-if="product" <b-button v-if="product"
@click="clearSelection(true)"> @click="clearSelection(true)">
{{ product.full_description }} {{ product.full_description }}
@ -42,7 +47,7 @@
View Product View Product
</b-button> </b-button>
</b-field> </div>
<b-modal :active.sync="lookupShowDialog"> <b-modal :active.sync="lookupShowDialog">
<div class="card"> <div class="card">
@ -88,68 +93,72 @@
</b-field> </b-field>
<b-table :data="searchResults" <${b}-table :data="searchResults"
narrowed narrowed
icon-pack="fas" % if request.use_oruga:
:loading="searchResultsLoading" v-model:selected="searchResultSelected"
:selected.sync="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" field="product_key"
v-slot="props"> v-slot="props">
{{ props.row.product_key }} {{ props.row.product_key }}
</b-table-column> </${b}-table-column>
<b-table-column label="Brand" <${b}-table-column label="Brand"
field="brand_name" field="brand_name"
v-slot="props"> v-slot="props">
{{ props.row.brand_name }} {{ props.row.brand_name }}
</b-table-column> </${b}-table-column>
<b-table-column label="Description" <${b}-table-column label="Description"
field="description" field="description"
v-slot="props"> v-slot="props">
<span :class="{organic: props.row.organic}"> <span :class="{organic: props.row.organic}">
{{ props.row.description }} {{ props.row.description }}
{{ props.row.size }} {{ props.row.size }}
</span> </span>
</b-table-column> </${b}-table-column>
<b-table-column label="Unit Price" <${b}-table-column label="Unit Price"
field="unit_price" field="unit_price"
v-slot="props"> v-slot="props">
{{ props.row.unit_price_display }} {{ 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" field="sale_price"
v-slot="props"> v-slot="props">
<span class="has-background-warning"> <span class="has-background-warning">
{{ props.row.sale_price_display }} {{ props.row.sale_price_display }}
</span> </span>
</b-table-column> </${b}-table-column>
<b-table-column label="Sale Ends" <${b}-table-column label="Sale Ends"
field="sale_ends" field="sale_ends"
v-slot="props"> v-slot="props">
<span class="has-background-warning"> <span class="has-background-warning">
{{ props.row.sale_ends_display }} {{ props.row.sale_ends_display }}
</span> </span>
</b-table-column> </${b}-table-column>
<b-table-column label="Department" <${b}-table-column label="Department"
field="department_name" field="department_name"
v-slot="props"> v-slot="props">
{{ props.row.department_name }} {{ props.row.department_name }}
</b-table-column> </${b}-table-column>
<b-table-column label="Vendor" <${b}-table-column label="Vendor"
field="vendor_name" field="vendor_name"
v-slot="props"> v-slot="props">
{{ props.row.vendor_name }} {{ props.row.vendor_name }}
</b-table-column> </${b}-table-column>
<b-table-column label="Actions" <${b}-table-column label="Actions"
v-slot="props"> v-slot="props">
<a :href="props.row.url" <a :href="props.row.url"
target="_blank" target="_blank"
@ -157,7 +166,7 @@
<i class="fas fa-external-link-alt"></i> <i class="fas fa-external-link-alt"></i>
View View
</a> </a>
</b-table-column> </${b}-table-column>
<template #empty> <template #empty>
<div class="content has-text-grey has-text-centered"> <div class="content has-text-grey has-text-centered">
@ -171,7 +180,7 @@
<p>Nothing here.</p> <p>Nothing here.</p>
</div> </div>
</template> </template>
</b-table> </${b}-table>
<br /> <br />
<div class="level"> <div class="level">
@ -263,7 +272,12 @@
} }
}, },
## TODO: add debounce for oruga?
% if request.use_oruga:
getAutocompleteOptions(entry) {
% else:
getAutocompleteOptions: debounce(function (entry) { getAutocompleteOptions: debounce(function (entry) {
% endif
// since the `@typing` event from buefy component does not // since the `@typing` event from buefy component does not
// "self-regulate" in any way, we a) use `debounce` above, // "self-regulate" in any way, we a) use `debounce` above,
@ -282,7 +296,11 @@
this.autocompleteOptions = [] this.autocompleteOptions = []
throw error throw error
}) })
% if request.use_oruga:
},
% else:
}), }),
% endif
autocompleteSelected(option) { autocompleteSelected(option) {
this.$emit('selected', { this.$emit('selected', {
@ -359,6 +377,7 @@
} }
Vue.component('tailbone-product-lookup', TailboneProductLookup) Vue.component('tailbone-product-lookup', TailboneProductLookup)
<% request.register_component('tailbone-product-lookup', 'TailboneProductLookup') %>
</script> </script>
</%def> </%def>

36
tailbone/templates/themes/butterball/buefy-components.mako
View file

@ -13,6 +13,7 @@
${self.make_b_loading_component()} ${self.make_b_loading_component()}
${self.make_b_modal_component()} ${self.make_b_modal_component()}
${self.make_b_notification_component()} ${self.make_b_notification_component()}
${self.make_b_radio_component()}
${self.make_b_select_component()} ${self.make_b_select_component()}
${self.make_b_steps_component()} ${self.make_b_steps_component()}
${self.make_b_step_item_component()} ${self.make_b_step_item_component()}
@ -468,6 +469,41 @@
<% request.register_component('b-notification', 'BNotification') %> <% request.register_component('b-notification', 'BNotification') %>
</%def> </%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()"> <%def name="make_b_select_component()">
<script type="text/x-template" id="b-select-template"> <script type="text/x-template" id="b-select-template">
<o-select :name="name" <o-select :name="name"

9
tailbone/templates/themes/butterball/field-components.mako
View file

@ -112,7 +112,7 @@
@select="optionSelected" @select="optionSelected"
keep-first keep-first
open-on-focus open-on-focus
expanded :expanded="expanded"
:clearable="clearable" :clearable="clearable"
:clear-on-select="clearOnSelect"> :clear-on-select="clearOnSelect">
<template #default="{ option }"> <template #default="{ option }">
@ -325,6 +325,7 @@
// the selection is cleared we want user to start over // the selection is cleared we want user to start over
// anyway // anyway
this.orugaValue = null this.orugaValue = null
this.fetchedData = []
// here is where we alert callers to the new value // here is where we alert callers to the new value
if (option) { 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 // set focus to this component, which will just set focus
// to the oruga autocomplete component // to the oruga autocomplete component
focus() { focus() {