saving actions now blocks any other action to prevent race condition and unclear ux

Author: grossmannmartin

assets/js/admin/components/OrderItems.js

@@ -17,6 +17,7 @@ export default class OrderItems {
         this.$form = this.$card.closest('form');
         this.$liveComponent = this.$card.closest('[data-controller~="live"]');
         this.liveComponentPromise = null;
+        this.pendingAction = false;
 
         if (this.$liveComponent.length === 0) {
             return;
@@ -68,42 +69,39 @@ export default class OrderItems {
             element.dataset.orderItemsProductPickerInitialized = '1';
             // eslint-disable-next-line no-new
             new ProductPicker($(element), async productId => {
-                const component = await this.getLiveComponent();
-                await component.action('addProduct', { productId: Number(productId) });
-                FormChangeInfo.showInfo();
+                if (await this.runLiveAction('addProduct', { productId: Number(productId) })) {
+                    FormChangeInfo.showInfo();
+                }
             });
         });
     }
 
     async addItem(event) {
         event.preventDefault();
 
-        const component = await this.getLiveComponent();
-
-        await component.action('addItem');
-        FormChangeInfo.showInfo();
+        if (await this.runLiveAction('addItem')) {
+            FormChangeInfo.showInfo();
+        }
     }
 
     async prefillTransport(event) {
-        const component = await this.getLiveComponent();
-
-        await component.action('prefillTransport', { transportId: Number($(event.currentTarget).val()) });
-        FormChangeInfo.showInfo();
+        if (await this.runLiveAction('prefillTransport', { transportId: Number($(event.currentTarget).val()) })) {
+            FormChangeInfo.showInfo();
+        }
     }
 
     async prefillPayment(event) {
-        const component = await this.getLiveComponent();
-
-        await component.action('prefillPayment', { paymentId: Number($(event.currentTarget).val()) });
-        FormChangeInfo.showInfo();
+        if (await this.runLiveAction('prefillPayment', { paymentId: Number($(event.currentTarget).val()) })) {
+            FormChangeInfo.showInfo();
+        }
     }
 
     onRemoveItemClick(event) {
         event.preventDefault();
 
         const $removeButton = $(event.currentTarget);
 
-        if ($removeButton.hasClass('link-disabled')) {
+        if (this.pendingAction || $removeButton.hasClass('link-disabled') || $removeButton.hasClass('disabled')) {
             return;
         }
 
@@ -114,14 +112,37 @@ export default class OrderItems {
                 itemName: itemName,
             }),
             continueEvent: async () => {
-                const component = await this.getLiveComponent();
+                if (
+                    !(await this.runLiveAction('removeItem', {
+                        itemIndex: $removeButton.data('order-item-index').toString(),
+                    }))
+                ) {
+                    return;
+                }
 
-                await component.action('removeItem', { itemIndex: $removeButton.data('order-item-index').toString() });
                 FormChangeInfo.showInfo();
             },
         });
     }
 
+    async runLiveAction(actionName, actionArgs = {}) {
+        if (this.pendingAction) {
+            return false;
+        }
+
+        this.pendingAction = true;
+
+        try {
+            const component = await this.getLiveComponent();
+
+            await component.action(actionName, actionArgs);
+
+            return true;
+        } finally {
+            this.pendingAction = false;
+        }
+    }
+
     getLiveComponent() {
         if (this.liveComponentPromise === null) {
             this.liveComponentPromise = getComponent(this.$liveComponent[0]);