fix: add loading overlay for expensive calls in orders/create

This commit is contained in:
Lance Edgar 2025-01-15 14:55:27 -06:00
parent e7a5f6c09e
commit 13d576295e

View file

@ -81,6 +81,7 @@
</template> </template>
<div class="panel-block"> <div class="panel-block">
<b-loading v-model="customerLoading" :is-full-page="false" />
<div style="width: 100%;"> <div style="width: 100%;">
<div style="display: flex; flex-direction: row;"> <div style="display: flex; flex-direction: row;">
@ -143,7 +144,7 @@
icon-pack="fas" icon-pack="fas"
icon-left="redo" icon-left="redo"
:disabled="refreshingCustomer"> :disabled="refreshingCustomer">
{{ refreshingCustomer ? "Refreshing" : "Refresh" }} {{ refreshingCustomer ? "Working, please wait..." : "Refresh" }}
</b-button> </b-button>
</div> </div>
</b-field> </b-field>
@ -348,6 +349,7 @@
> >
<div class="card"> <div class="card">
<div class="card-content"> <div class="card-content">
<b-loading v-model="editItemLoading" :is-full-page="false" />
<${b}-tabs :animated="false" <${b}-tabs :animated="false"
% if request.use_oruga: % if request.use_oruga:
@ -829,6 +831,7 @@
batchTotalPriceDisplay: ${json.dumps(normalized_batch['total_price_display'])|n}, batchTotalPriceDisplay: ${json.dumps(normalized_batch['total_price_display'])|n},
customerPanelOpen: false, customerPanelOpen: false,
customerLoading: false,
customerIsKnown: ${json.dumps(customer_is_known)|n}, customerIsKnown: ${json.dumps(customer_is_known)|n},
customerID: ${json.dumps(customer_id)|n}, customerID: ${json.dumps(customer_id)|n},
customerName: ${json.dumps(customer_name)|n}, customerName: ${json.dumps(customer_name)|n},
@ -853,6 +856,7 @@
editItemRow: null, editItemRow: null,
editItemShowDialog: false, editItemShowDialog: false,
editItemLoading: false,
itemDialogSaving: false, itemDialogSaving: false,
% if request.use_oruga: % if request.use_oruga:
itemDialogTab: 'product', itemDialogTab: 'product',
@ -1132,6 +1136,7 @@
}, },
customerChanged(customerID, callback) { customerChanged(customerID, callback) {
this.customerLoading = true
const params = {} const params = {}
if (customerID) { if (customerID) {
@ -1149,7 +1154,9 @@
if (callback) { if (callback) {
callback() callback()
} }
this.customerLoading = false
}, response => { }, response => {
this.customerLoading = false
this.$buefy.toast.open({ this.$buefy.toast.open({
message: "Update failed: " + (response.data.error || "(unknown error)"), message: "Update failed: " + (response.data.error || "(unknown error)"),
type: 'is-danger', type: 'is-danger',
@ -1159,9 +1166,9 @@
}, },
refreshCustomer() { refreshCustomer() {
this.refreshingContact = true this.refreshingCustomer = true
this.customerChanged(this.customerID, () => { this.customerChanged(this.customerID, () => {
this.refreshingContact = false this.refreshingCustomer = false
this.$buefy.toast.open({ this.$buefy.toast.open({
message: "Customer info has been refreshed.", message: "Customer info has been refreshed.",
type: 'is-success', type: 'is-success',
@ -1321,6 +1328,7 @@
productChanged(productID) { productChanged(productID) {
if (productID) { if (productID) {
this.editItemLoading = true
const params = { const params = {
action: 'get_product_info', action: 'get_product_info',
product_id: productID, product_id: productID,
@ -1364,8 +1372,11 @@
this.refreshProductDescription += 1 this.refreshProductDescription += 1
this.refreshTotalPrice += 1 this.refreshTotalPrice += 1
this.editItemLoading = false
}, response => { }, response => {
this.clearProduct() this.clearProduct()
this.editItemLoading = false
}) })
} else { } else {
this.clearProduct() this.clearProduct()
@ -1514,6 +1525,7 @@
itemDialogAttemptSave() { itemDialogAttemptSave() {
this.itemDialogSaving = true this.itemDialogSaving = true
this.editItemLoading = true
const params = { const params = {
order_qty: this.productQuantity, order_qty: this.productQuantity,
@ -1551,9 +1563,11 @@
this.batchTotalPriceDisplay = response.data.batch.total_price_display this.batchTotalPriceDisplay = response.data.batch.total_price_display
this.itemDialogSaving = false this.itemDialogSaving = false
this.editItemLoading = false
this.editItemShowDialog = false this.editItemShowDialog = false
}, response => { }, response => {
this.itemDialogSaving = false this.itemDialogSaving = false
this.editItemLoading = false
}) })
}, },