Laravel Vapor - Fix issues reported by Josephine 20241030

resources/assets/vue/components/bookings/forms/SupplierPlaceOrderFormComponent.vue

@@ -47,7 +47,7 @@
             </div>
             <div class="row" v-if="paymentTotal > 0">
                 <div class="col">
-                    <button class="btn btn-xs btn-success b-rad-none p-t-5 p-b-5 all-caps fs-10 btn-block" @click="submitForm()">Create Order</button>
+                    <button class="btn btn-xs btn-success b-rad-none p-t-5 p-b-5 all-caps fs-10 btn-block" :disabled="isCreating" @click="submitForm()">Create Order <span v-if="isCreating" class="spinner"></span></button>
                     <button class="btn btn-xs btn-complete b-rad-none p-t-5 p-b-5 all-caps fs-10 w-100" @click="generateMockWhiteForm()">Create Mock Up White Form</button>
                 </div>
             </div>
@@ -100,6 +100,7 @@
         },
         data(){
             return {
+                isCreating: false,
                 parameters: {
                     rate: 0
                 }
@@ -130,7 +131,7 @@
         },
         methods: {
             submitForm(){
-
+                this.isCreating = true;
                 this.parameters = {
                     payments: this.payments,
                     rate: this.parameters.rate
@@ -144,6 +145,7 @@
                     payments: [],
                     rate: 0
                 };
+                this.isCreating = false;
             },
             generateMockWhiteForm() {
                 let paymentIds = this.payments.map(function(payment) {
@@ -168,8 +170,34 @@
                 else{
                     window.open(url, '_blank');
                 }
-            }
+            },
+            errorHandler(error) {
+                this.isCreating = false;
+            },
         },
         mixins: [FormHandler]
     }
 </script>
+<style scoped>
+    .spinner {
+        border: 2px solid rgba(0, 0, 0, 0.1);
+        border-left-color: #000;
+        border-radius: 50%;
+        width: 20px;
+        height: 20px;
+        animation: spin 1s linear infinite;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+
+    @keyframes spin {
+        0% {
+            transform: translate(-50%, -50%) rotate(0deg);
+        }
+        100% {
+            transform: translate(-50%, -50%) rotate(360deg);
+        }
+    }
+</style>