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
|
|
@ -56,12 +56,19 @@
|
|||
|
||||
${self.order_form_buttons()}
|
||||
|
||||
<b-collapse class="panel" :class="customerPanelType"
|
||||
:open.sync="customerPanelOpen">
|
||||
<${b}-collapse class="panel"
|
||||
:class="customerPanelType"
|
||||
% if request.use_oruga:
|
||||
v-model:open="customerPanelOpen"
|
||||
% else:
|
||||
:open.sync="customerPanelOpen"
|
||||
% endif
|
||||
>
|
||||
|
||||
<template #trigger="props">
|
||||
<div class="panel-heading"
|
||||
role="button">
|
||||
role="button"
|
||||
style="cursor: pointer;">
|
||||
|
||||
## TODO: for some reason buefy will "reuse" the icon
|
||||
## element in such a way that its display does not
|
||||
|
|
@ -89,11 +96,33 @@
|
|||
|
||||
<div style="display: flex; flex-direction: row;">
|
||||
<div style="flex-grow: 1; margin-right: 1rem;">
|
||||
% if request.use_oruga:
|
||||
## TODO: for some reason o-notification variant is not
|
||||
## being updated properly, so for now the workaround is
|
||||
## to maintain a separate component for each variant
|
||||
## i tried to reproduce the problem in a simple page
|
||||
## but was unable; this is really a hack but it works..
|
||||
<o-notification v-if="customerStatusType == null"
|
||||
:closable="false">
|
||||
{{ customerStatusText }}
|
||||
</o-notification>
|
||||
<o-notification v-if="customerStatusType == 'is-warning'"
|
||||
variant="warning"
|
||||
:closable="false">
|
||||
{{ customerStatusText }}
|
||||
</o-notification>
|
||||
<o-notification v-if="customerStatusType == 'is-danger'"
|
||||
variant="danger"
|
||||
:closable="false">
|
||||
{{ customerStatusText }}
|
||||
</o-notification>
|
||||
% else:
|
||||
<b-notification :type="customerStatusType"
|
||||
position="is-bottom-right"
|
||||
:closable="false">
|
||||
{{ customerStatusText }}
|
||||
</b-notification>
|
||||
% endif
|
||||
</div>
|
||||
<!-- <div class="buttons"> -->
|
||||
<!-- <b-button @click="startOverCustomer()" -->
|
||||
|
|
@ -117,23 +146,28 @@
|
|||
|
||||
<div :style="{'flex-grow': contactNotes.length ? 0 : 1}">
|
||||
|
||||
<b-field label="Customer" grouped>
|
||||
<b-field style="margin-left: 1rem;"
|
||||
:expanded="!contactUUID">
|
||||
<b-field label="Customer">
|
||||
<div style="display: flex; gap: 1rem; width: 100%;">
|
||||
<tailbone-autocomplete ref="contactAutocomplete"
|
||||
v-model="contactUUID"
|
||||
:style="{'flex-grow': contactUUID ? '0' : '1'}"
|
||||
expanded
|
||||
placeholder="Enter name or phone number"
|
||||
:initial-label="contactDisplay"
|
||||
% if new_order_requires_customer:
|
||||
serviceUrl="${url('{}.customer_autocomplete'.format(route_prefix))}"
|
||||
% else:
|
||||
serviceUrl="${url('{}.person_autocomplete'.format(route_prefix))}"
|
||||
% endif
|
||||
@input="contactChanged">
|
||||
% if request.use_oruga:
|
||||
:assigned-label="contactDisplay"
|
||||
@update:model-value="contactChanged"
|
||||
% else:
|
||||
:initial-label="contactDisplay"
|
||||
@input="contactChanged"
|
||||
% endif
|
||||
>
|
||||
</tailbone-autocomplete>
|
||||
</b-field>
|
||||
<div v-if="contactUUID">
|
||||
<b-button v-if="contactProfileURL"
|
||||
<b-button v-if="contactUUID && contactProfileURL"
|
||||
type="is-primary"
|
||||
tag="a" target="_blank"
|
||||
:href="contactProfileURL"
|
||||
|
|
@ -141,8 +175,8 @@
|
|||
icon-left="external-link-alt">
|
||||
View Profile
|
||||
</b-button>
|
||||
|
||||
<b-button @click="refreshContact"
|
||||
<b-button v-if="contactUUID"
|
||||
@click="refreshContact"
|
||||
icon-pack="fas"
|
||||
icon-left="redo"
|
||||
:disabled="refreshingContact">
|
||||
|
|
@ -186,8 +220,13 @@
|
|||
Edit
|
||||
</b-button>
|
||||
|
||||
<b-modal has-modal-card
|
||||
:active.sync="editPhoneNumberShowDialog">
|
||||
<${b}-modal has-modal-card
|
||||
% if request.use_oruga:
|
||||
v-model:active="editPhoneNumberShowDialog"
|
||||
% else:
|
||||
:active.sync="editPhoneNumberShowDialog"
|
||||
% endif
|
||||
>
|
||||
<div class="modal-card">
|
||||
|
||||
<header class="modal-card-head">
|
||||
|
|
@ -241,7 +280,7 @@
|
|||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</${b}-modal>
|
||||
|
||||
</div>
|
||||
% endif
|
||||
|
|
@ -279,8 +318,13 @@
|
|||
icon-left="edit">
|
||||
Edit
|
||||
</b-button>
|
||||
<b-modal has-modal-card
|
||||
:active.sync="editEmailAddressShowDialog">
|
||||
<${b}-modal has-modal-card
|
||||
% if request.use_oruga:
|
||||
v-model:active.sync="editEmailAddressShowDialog"
|
||||
% else:
|
||||
:active.sync="editEmailAddressShowDialog"
|
||||
% endif
|
||||
>
|
||||
<div class="modal-card">
|
||||
|
||||
<header class="modal-card-head">
|
||||
|
|
@ -334,7 +378,7 @@
|
|||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</${b}-modal>
|
||||
</div>
|
||||
% endif
|
||||
</div>
|
||||
|
|
@ -409,8 +453,13 @@
|
|||
</b-notification>
|
||||
</div>
|
||||
|
||||
<b-modal has-modal-card
|
||||
:active.sync="editNewCustomerShowDialog">
|
||||
<${b}-modal has-modal-card
|
||||
% if request.use_oruga:
|
||||
v-model:active="editNewCustomerShowDialog"
|
||||
% else:
|
||||
:active.sync="editNewCustomerShowDialog"
|
||||
% endif
|
||||
>
|
||||
<div class="modal-card">
|
||||
|
||||
<header class="modal-card-head">
|
||||
|
|
@ -452,20 +501,21 @@
|
|||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</${b}-modal>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div> <!-- panel-block -->
|
||||
</b-collapse>
|
||||
</${b}-collapse>
|
||||
|
||||
<b-collapse class="panel"
|
||||
<${b}-collapse class="panel"
|
||||
open>
|
||||
|
||||
<template #trigger="props">
|
||||
<div class="panel-heading"
|
||||
role="button">
|
||||
role="button"
|
||||
style="cursor: pointer;">
|
||||
|
||||
## TODO: for some reason buefy will "reuse" the icon
|
||||
## element in such a way that its display does not
|
||||
|
|
@ -507,15 +557,28 @@
|
|||
% endif
|
||||
</div>
|
||||
|
||||
<b-modal :active.sync="showingItemDialog">
|
||||
<${b}-modal
|
||||
% if request.use_oruga:
|
||||
v-model:active="showingItemDialog"
|
||||
% else:
|
||||
:active.sync="showingItemDialog"
|
||||
% endif
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
|
||||
<b-tabs type="is-boxed is-toggle"
|
||||
<${b}-tabs :animated="false"
|
||||
% if request.use_oruga:
|
||||
v-model="itemDialogTab"
|
||||
type="toggle"
|
||||
% else:
|
||||
v-model="itemDialogTabIndex"
|
||||
:animated="false">
|
||||
type="is-boxed is-toggle"
|
||||
% endif
|
||||
>
|
||||
|
||||
<b-tab-item label="Product">
|
||||
<${b}-tab-item label="Product"
|
||||
value="product">
|
||||
|
||||
<div class="field">
|
||||
<b-radio v-model="productIsKnown"
|
||||
|
|
@ -525,12 +588,10 @@
|
|||
</div>
|
||||
|
||||
<div v-show="productIsKnown"
|
||||
style="padding-left: 5rem;">
|
||||
style="padding-left: 3rem; display: flex; gap: 1rem;">
|
||||
|
||||
<b-field grouped>
|
||||
<p class="label control">
|
||||
Product
|
||||
</p>
|
||||
<div style="flex-grow: 1;">
|
||||
<b-field label="Product">
|
||||
<tailbone-product-lookup ref="productLookup"
|
||||
:product="selectedProduct"
|
||||
@selected="productLookupSelected"
|
||||
|
|
@ -540,11 +601,6 @@
|
|||
|
||||
<div v-if="productUUID">
|
||||
|
||||
<div class="is-pulled-right has-text-centered">
|
||||
<img :src="productImageURL"
|
||||
style="max-height: 150px; max-width: 150px; "/>
|
||||
</div>
|
||||
|
||||
<b-field grouped>
|
||||
<b-field :label="productKeyLabel">
|
||||
<span>{{ productKey }}</span>
|
||||
|
|
@ -602,6 +658,11 @@
|
|||
</b-checkbox>
|
||||
% endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<img v-if="productUUID"
|
||||
:src="productImageURL"
|
||||
style="max-height: 150px; max-width: 150px; "/>
|
||||
|
||||
</div>
|
||||
|
||||
|
|
@ -744,22 +805,23 @@
|
|||
|
||||
<b-field label="Notes">
|
||||
<b-input v-model="pendingProduct.notes"
|
||||
type="textarea">
|
||||
</b-input>
|
||||
type="textarea"
|
||||
expanded />
|
||||
</b-field>
|
||||
|
||||
</div>
|
||||
</b-tab-item>
|
||||
<b-tab-item label="Quantity">
|
||||
</${b}-tab-item>
|
||||
<${b}-tab-item label="Quantity"
|
||||
value="quantity">
|
||||
|
||||
<div class="is-pulled-right has-text-centered">
|
||||
<img :src="productImageURL"
|
||||
style="max-height: 150px; max-width: 150px; "/>
|
||||
</div>
|
||||
<div style="display: flex; gap: 1rem; white-space: nowrap;">
|
||||
|
||||
<div style="flex-grow: 1;">
|
||||
<b-field grouped>
|
||||
<b-field label="Product" horizontal>
|
||||
<span :class="productIsKnown ? null : 'has-text-success'">
|
||||
<span :class="productIsKnown ? null : 'has-text-success'"
|
||||
## nb. hack to force refresh for vue3
|
||||
:key="refreshProductDescription">
|
||||
{{ productIsKnown ? productDisplay : (pendingProduct.brand_name || '') + ' ' + (pendingProduct.description || '') + ' ' + (pendingProduct.size || '') }}
|
||||
</span>
|
||||
</b-field>
|
||||
|
|
@ -831,11 +893,13 @@
|
|||
|
||||
<b-field label="Quantity" horizontal>
|
||||
<numeric-input v-model="productQuantity"
|
||||
@input="refreshTotalPrice += 1"
|
||||
style="width: 5rem;">
|
||||
</numeric-input>
|
||||
</b-field>
|
||||
|
||||
<b-select v-model="productUOM">
|
||||
<b-select v-model="productUOM"
|
||||
@input="refreshTotalPrice += 1">
|
||||
<option v-for="choice in productUnitChoices"
|
||||
:key="choice.key"
|
||||
:value="choice.key"
|
||||
|
|
@ -845,12 +909,13 @@
|
|||
|
||||
</b-field>
|
||||
|
||||
<b-field grouped>
|
||||
<div style="display: flex; gap: 1rem;">
|
||||
% if allow_item_discounts:
|
||||
<b-field label="Discount" horizontal>
|
||||
<div class="level">
|
||||
<div class="level-item">
|
||||
<numeric-input v-model="productDiscountPercent"
|
||||
@input="refreshTotalPrice += 1"
|
||||
style="width: 5rem;"
|
||||
:disabled="!allowItemDiscount">
|
||||
</numeric-input>
|
||||
|
|
@ -861,15 +926,27 @@
|
|||
</div>
|
||||
</b-field>
|
||||
% endif
|
||||
<b-field label="Total Price" horizontal expanded>
|
||||
<b-field label="Total Price" horizontal expanded
|
||||
:key="refreshTotalPrice">
|
||||
<span :class="productSalePriceDisplay ? 'has-background-warning': null">
|
||||
{{ getItemTotalPriceDisplay() }}
|
||||
</span>
|
||||
</b-field>
|
||||
</b-field>
|
||||
</div>
|
||||
|
||||
</b-tab-item>
|
||||
</b-tabs>
|
||||
<!-- <b-field grouped> -->
|
||||
<!-- </b-field> -->
|
||||
</div>
|
||||
|
||||
<!-- <div class="is-pulled-right has-text-centered"> -->
|
||||
<img :src="productImageURL"
|
||||
style="max-height: 150px; max-width: 150px; "/>
|
||||
<!-- </div> -->
|
||||
|
||||
</div>
|
||||
|
||||
</${b}-tab-item>
|
||||
</${b}-tabs>
|
||||
|
||||
<div class="buttons">
|
||||
<b-button @click="showingItemDialog = false">
|
||||
|
|
@ -886,11 +963,16 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</${b}-modal>
|
||||
|
||||
% if unknown_product_confirm_price:
|
||||
<b-modal has-modal-card
|
||||
:active.sync="confirmPriceShowDialog">
|
||||
<${b}-modal has-modal-card
|
||||
% if request.use_oruga:
|
||||
v-model:active="confirmPriceShowDialog"
|
||||
% else:
|
||||
:active.sync="confirmPriceShowDialog"
|
||||
% endif
|
||||
>
|
||||
<div class="modal-card">
|
||||
|
||||
<header class="modal-card-head">
|
||||
|
|
@ -931,87 +1013,97 @@
|
|||
</b-button>
|
||||
</footer>
|
||||
</div>
|
||||
</b-modal>
|
||||
</${b}-modal>
|
||||
% endif
|
||||
|
||||
% if allow_past_item_reorder:
|
||||
<b-modal :active.sync="pastItemsShowDialog">
|
||||
<${b}-modal
|
||||
% if request.use_oruga:
|
||||
v-model:active="pastItemsShowDialog"
|
||||
% else:
|
||||
:active.sync="pastItemsShowDialog"
|
||||
% endif
|
||||
>
|
||||
<div class="card">
|
||||
<div class="card-content">
|
||||
|
||||
<b-table :data="pastItems"
|
||||
<${b}-table :data="pastItems"
|
||||
icon-pack="fas"
|
||||
:loading="pastItemsLoading"
|
||||
% if request.use_oruga:
|
||||
v-model:selected="pastItemsSelected"
|
||||
% else:
|
||||
:selected.sync="pastItemsSelected"
|
||||
% endif
|
||||
sortable
|
||||
paginated
|
||||
per-page="5"
|
||||
:debounce-search="1000">
|
||||
|
||||
<b-table-column :label="productKeyLabel"
|
||||
<${b}-table-column :label="productKeyLabel"
|
||||
field="key"
|
||||
v-slot="props"
|
||||
sortable>
|
||||
{{ props.row.key }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Brand"
|
||||
<${b}-table-column label="Brand"
|
||||
field="brand_name"
|
||||
v-slot="props"
|
||||
sortable
|
||||
searchable>
|
||||
{{ 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"
|
||||
sortable
|
||||
searchable>
|
||||
{{ props.row.description }}
|
||||
{{ props.row.size }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Unit Price"
|
||||
<${b}-table-column label="Unit Price"
|
||||
field="unit_price"
|
||||
v-slot="props"
|
||||
sortable>
|
||||
{{ 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"
|
||||
sortable>
|
||||
<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"
|
||||
sortable>
|
||||
<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"
|
||||
sortable
|
||||
searchable>
|
||||
{{ 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"
|
||||
sortable
|
||||
searchable>
|
||||
{{ props.row.vendor_name }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<template #empty>
|
||||
<div class="content has-text-grey has-text-centered">
|
||||
|
|
@ -1025,7 +1117,7 @@
|
|||
<p>Nothing here.</p>
|
||||
</div>
|
||||
</template>
|
||||
</b-table>
|
||||
</${b}-table>
|
||||
|
||||
<div class="buttons">
|
||||
<b-button @click="pastItemsShowDialog = false">
|
||||
|
|
@ -1042,44 +1134,44 @@
|
|||
|
||||
</div>
|
||||
</div>
|
||||
</b-modal>
|
||||
</${b}-modal>
|
||||
% endif
|
||||
|
||||
<b-table v-if="items.length"
|
||||
<${b}-table v-if="items.length"
|
||||
:data="items"
|
||||
:row-class="(row, i) => row.product_uuid ? null : 'has-text-success'">
|
||||
|
||||
<b-table-column :label="productKeyLabel"
|
||||
<${b}-table-column :label="productKeyLabel"
|
||||
v-slot="props">
|
||||
{{ props.row.product_key }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Brand"
|
||||
<${b}-table-column label="Brand"
|
||||
v-slot="props">
|
||||
{{ props.row.product_brand }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Description"
|
||||
<${b}-table-column label="Description"
|
||||
v-slot="props">
|
||||
{{ props.row.product_description }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Size"
|
||||
<${b}-table-column label="Size"
|
||||
v-slot="props">
|
||||
{{ props.row.product_size }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Department"
|
||||
<${b}-table-column label="Department"
|
||||
v-slot="props">
|
||||
{{ props.row.department_display }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Quantity"
|
||||
<${b}-table-column label="Quantity"
|
||||
v-slot="props">
|
||||
<span v-html="props.row.order_quantity_display"></span>
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Unit Price"
|
||||
<${b}-table-column label="Unit Price"
|
||||
v-slot="props">
|
||||
<span
|
||||
% if product_price_may_be_questionable:
|
||||
|
|
@ -1090,16 +1182,16 @@
|
|||
>
|
||||
{{ props.row.unit_price_display }}
|
||||
</span>
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
% if allow_item_discounts:
|
||||
<b-table-column label="Discount"
|
||||
<${b}-table-column label="Discount"
|
||||
v-slot="props">
|
||||
{{ props.row.discount_percent }}{{ props.row.discount_percent ? " %" : "" }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
% endif
|
||||
|
||||
<b-table-column label="Total"
|
||||
<${b}-table-column label="Total"
|
||||
v-slot="props">
|
||||
<span
|
||||
% if product_price_may_be_questionable:
|
||||
|
|
@ -1110,35 +1202,57 @@
|
|||
>
|
||||
{{ props.row.total_price_display }}
|
||||
</span>
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column label="Vendor"
|
||||
<${b}-table-column label="Vendor"
|
||||
v-slot="props">
|
||||
{{ props.row.vendor_display }}
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
<b-table-column field="actions"
|
||||
<${b}-table-column field="actions"
|
||||
label="Actions"
|
||||
v-slot="props">
|
||||
<a href="#" class="grid-action"
|
||||
<a href="#"
|
||||
% if not request.use_oruga:
|
||||
class="grid-action"
|
||||
% endif
|
||||
@click.prevent="showEditItemDialog(props.row)">
|
||||
% if request.use_oruga:
|
||||
<span class="icon-text">
|
||||
<o-icon icon="edit" />
|
||||
<span>Edit</span>
|
||||
</span>
|
||||
% else:
|
||||
<i class="fas fa-edit"></i>
|
||||
Edit
|
||||
% endif
|
||||
</a>
|
||||
|
||||
|
||||
<a href="#" class="grid-action has-text-danger"
|
||||
<a href="#"
|
||||
% if request.use_oruga:
|
||||
class="has-text-danger"
|
||||
% else:
|
||||
class="grid-action has-text-danger"
|
||||
% endif
|
||||
@click.prevent="deleteItem(props.index)">
|
||||
% if request.use_oruga:
|
||||
<span class="icon-text">
|
||||
<o-icon icon="trash" />
|
||||
<span>Delete</span>
|
||||
</span>
|
||||
% else:
|
||||
<i class="fas fa-trash"></i>
|
||||
Delete
|
||||
% endif
|
||||
</a>
|
||||
|
||||
</b-table-column>
|
||||
</${b}-table-column>
|
||||
|
||||
</b-table>
|
||||
</${b}-table>
|
||||
</div>
|
||||
</div>
|
||||
</b-collapse>
|
||||
</${b}-collapse>
|
||||
|
||||
${self.order_form_buttons()}
|
||||
|
||||
|
|
@ -1222,7 +1336,11 @@
|
|||
editingItem: null,
|
||||
showingItemDialog: false,
|
||||
itemDialogSaving: false,
|
||||
% if request.use_oruga:
|
||||
itemDialogTab: 'product',
|
||||
% else:
|
||||
itemDialogTabIndex: 0,
|
||||
% endif
|
||||
% if allow_past_item_reorder:
|
||||
pastItemsShowDialog: false,
|
||||
pastItemsLoading: false,
|
||||
|
|
@ -1271,6 +1389,10 @@
|
|||
confirmPriceShowDialog: false,
|
||||
% endif
|
||||
|
||||
// nb. hack to force refresh for vue3
|
||||
refreshProductDescription: 1,
|
||||
refreshTotalPrice: 1,
|
||||
|
||||
submittingOrder: false,
|
||||
}
|
||||
},
|
||||
|
|
@ -1632,22 +1754,21 @@
|
|||
uuid: this.contactUUID,
|
||||
}
|
||||
}
|
||||
let that = this
|
||||
this.submitBatchData(params, function(response) {
|
||||
this.submitBatchData(params, response => {
|
||||
% if new_order_requires_customer:
|
||||
that.contactUUID = response.data.customer_uuid
|
||||
this.contactUUID = response.data.customer_uuid
|
||||
% else:
|
||||
that.contactUUID = response.data.person_uuid
|
||||
this.contactUUID = response.data.person_uuid
|
||||
% endif
|
||||
that.contactDisplay = response.data.contact_display
|
||||
that.orderPhoneNumber = response.data.phone_number
|
||||
that.orderEmailAddress = response.data.email_address
|
||||
that.addOtherPhoneNumber = response.data.add_phone_number
|
||||
that.addOtherEmailAddress = response.data.add_email_address
|
||||
that.contactProfileURL = response.data.contact_profile_url
|
||||
that.contactPhones = response.data.contact_phones
|
||||
that.contactEmails = response.data.contact_emails
|
||||
that.contactNotes = response.data.contact_notes
|
||||
this.contactDisplay = response.data.contact_display
|
||||
this.orderPhoneNumber = response.data.phone_number
|
||||
this.orderEmailAddress = response.data.email_address
|
||||
this.addOtherPhoneNumber = response.data.add_phone_number
|
||||
this.addOtherEmailAddress = response.data.add_email_address
|
||||
this.contactProfileURL = response.data.contact_profile_url
|
||||
this.contactPhones = response.data.contact_phones
|
||||
this.contactEmails = response.data.contact_emails
|
||||
this.contactNotes = response.data.contact_notes
|
||||
if (callback) {
|
||||
callback()
|
||||
}
|
||||
|
|
@ -1937,7 +2058,11 @@
|
|||
this.productDiscountPercent = ${json.dumps(default_item_discount)|n}
|
||||
% endif
|
||||
|
||||
% if request.use_oruga:
|
||||
this.itemDialogTab = 'product'
|
||||
% else:
|
||||
this.itemDialogTabIndex = 0
|
||||
% endif
|
||||
this.showingItemDialog = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.productLookup.focus()
|
||||
|
|
@ -1993,7 +2118,15 @@
|
|||
this.productPriceNeedsConfirmation = false
|
||||
% endif
|
||||
|
||||
// nb. hack to force refresh for vue3
|
||||
this.refreshProductDescription += 1
|
||||
this.refreshTotalPrice += 1
|
||||
|
||||
% if request.use_oruga:
|
||||
this.itemDialogTab = 'quantity'
|
||||
% else:
|
||||
this.itemDialogTabIndex = 1
|
||||
% endif
|
||||
this.showingItemDialog = true
|
||||
},
|
||||
|
||||
|
|
@ -2050,7 +2183,15 @@
|
|||
this.productDiscountPercent = row.discount_percent
|
||||
% endif
|
||||
|
||||
// nb. hack to force refresh for vue3
|
||||
this.refreshProductDescription += 1
|
||||
this.refreshTotalPrice += 1
|
||||
|
||||
% if request.use_oruga:
|
||||
this.itemDialogTab = 'quantity'
|
||||
% else:
|
||||
this.itemDialogTabIndex = 1
|
||||
% endif
|
||||
this.showingItemDialog = true
|
||||
},
|
||||
|
||||
|
|
@ -2160,7 +2301,15 @@
|
|||
this.productPriceNeedsConfirmation = false
|
||||
% endif
|
||||
|
||||
% if request.use_oruga:
|
||||
this.itemDialogTab = 'quantity'
|
||||
% else:
|
||||
this.itemDialogTabIndex = 1
|
||||
% endif
|
||||
|
||||
// nb. hack to force refresh for vue3
|
||||
this.refreshProductDescription += 1
|
||||
this.refreshTotalPrice += 1
|
||||
|
||||
}, response => {
|
||||
this.clearProduct()
|
||||
|
|
@ -2250,6 +2399,7 @@
|
|||
}
|
||||
|
||||
Vue.component('customer-order-creator', CustomerOrderCreator)
|
||||
<% request.register_component('customer-order-creator', 'CustomerOrderCreator') %>
|
||||
|
||||
</script>
|
||||
</%def>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
<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"
|
||||
field="value"
|
||||
:custom-formatter="option => option.label"
|
||||
% 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}-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"
|
||||
<${b}-table :data="searchResults"
|
||||
narrowed
|
||||
% if request.use_oruga:
|
||||
v-model:selected="searchResultSelected"
|
||||
% else:
|
||||
:selected.sync="searchResultSelected"
|
||||
icon-pack="fas"
|
||||
:loading="searchResultsLoading"
|
||||
:selected.sync="searchResultSelected">
|
||||
% 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…
Reference in a new issue