[5.x] Add submitting state for confirmation modal to better visualise…

… a running action (#10699)

Co-authored-by: Jason Varga <[email protected]>

resources/js/components/assets/Browser/CreateFolder.vue

@@ -3,6 +3,7 @@
     <confirmation-modal
         name="folder-editor"
         :title="modalTitle"
+        :busy="submitting"
         @cancel="cancel"
         @confirm="submit"
     >
@@ -42,6 +43,7 @@ export default {
             buttonText: __('Create'),
             directory: this.initialDirectory,
             errors: {},
+            submitting: false,
         }
     },
 
@@ -59,11 +61,15 @@ export default {
                 title: this.title
             };
 
+            this.submitting = true;
+
             this.$axios.post(url, payload).then(response => {
                 this.$toast.success(__('Folder created'));
                 this.$emit('created', response.data);
             }).catch(e => {
                 this.handleErrors(e);
+            }).finally(() => {
+                this.submitting = false;
             });
         },
 
@@ -81,7 +87,6 @@ export default {
     },
 
     created() {
-        this.$keys.bindGlobal('enter', this.submit)
         this.$keys.bindGlobal('esc', this.cancel)
     },
 

resources/js/components/blueprints/BlueprintResetter.vue

@@ -5,6 +5,7 @@
         :bodyText="modalBody"
         :buttonText="__('Reset')"
         :danger="true"
+        :busy="submitting"
         @confirm="confirmed"
         @cancel="cancel"
     >
@@ -36,6 +37,7 @@ export default {
         return {
             resetting: false,
             redirectFromServer: null,
+            submitting: false,
         }
     },
 
@@ -69,13 +71,16 @@ export default {
         },
 
         confirmed() {
+            this.submitting = true;
+
             this.$axios.delete(this.resetUrl)
                 .then(response => {
                     this.redirectFromServer = data_get(response, 'data.redirect');
                     this.success();
                 })
                 .catch(() => {
                     this.$toast.error(__('Something went wrong'));
+                    this.submitting = false;
                 });
         },
 
@@ -92,6 +97,7 @@ export default {
 
             this.$toast.success(__('Reset'));
             this.$emit('reset');
+            this.submitting = false;
         },
 
         cancel() {

resources/js/components/data-list/Action.vue

@@ -8,6 +8,7 @@
             :title="action.title"
             :danger="action.dangerous"
             :buttonText="runButtonText"
+            :busy="running"
             @confirm="confirm"
             @cancel="reset"
         >
@@ -71,6 +72,7 @@ export default {
             confirming: false,
             fieldset: {tabs:[{fields:this.action.fields}]},
             values: this.action.values,
+            running: false,
         }
     },
 
@@ -113,18 +115,23 @@ export default {
     },
 
     methods: {
+        onDone() {
+            this.running = false;
+        },
 
         select() {
             if (this.action.confirm) {
                 this.confirming = true;
                 return;
             }
 
-            this.$emit('selected', this.action, this.values);
+            this.running = true;
+            this.$emit('selected', this.action, this.values, this.onDone);
         },
 
         confirm() {
-            this.$emit('selected', this.action, this.values);
+            this.running = true;
+            this.$emit('selected', this.action, this.values, this.onDone);
         },
 
         reset() {

resources/js/components/data-list/Actions.js

@@ -30,8 +30,7 @@ export default {
     },
 
     methods: {
-
-        run(action, values) {
+        run(action, values, done) {
             this.$emit('started');
 
             this.errors = {};
@@ -43,11 +42,17 @@ export default {
                 values
             };
 
-            this.$axios.post(this.url, payload, { responseType: 'blob' }).then(response => {
-                response.headers['content-disposition']
-                    ? this.handleFileDownload(response) // Pass blob response for downloads
-                    : this.handleActionSuccess(response); // Otherwise handle as normal, converting from JSON
-            }).catch(error => this.handleActionError(error.response));
+            this.$axios
+                .post(this.url, payload, { responseType: 'blob' })
+                .then((response) => {
+                    response.headers['content-disposition']
+                        ? this.handleFileDownload(response) // Pass blob response for downloads
+                        : this.handleActionSuccess(response); // Otherwise handle as normal, converting from JSON
+                })
+                .catch((error) => this.handleActionError(error.response))
+                .finally(() => {
+                    if (done) done()
+                });
         },
 
         handleActionSuccess(response) {

resources/js/components/modals/ConfirmationModal.vue

@@ -4,17 +4,20 @@
             <header v-if="title" class="text-lg font-semibold px-5 py-3 bg-gray-200 dark:bg-dark-550 rounded-t-lg flex items-center justify-between border-b dark:border-dark-900">
                 {{ __(title) }}
             </header>
-            <div class="flex-1 px-5 py-6 text-gray dark:text-dark-150">
+            <div class="relative flex-1 px-5 py-6 text-gray dark:text-dark-150">
                 <slot name="body">
                     <p v-if="bodyText" v-text="bodyText" />
                     <slot v-else>
                         <p>{{ __('Are you sure?') }}</p>
                     </slot>
                 </slot>
+                <div v-if="busy" class="bg-white dark:bg-dark-700 bg-opacity-75 select-none pointer-events-none absolute inset-0 flex items-center justify-center">
+                    <loading-graphic text="" />
+                </div>
             </div>
             <div class="px-5 py-3 bg-gray-200 dark:bg-dark-550 rounded-b-lg border-t dark:border-dark-900 flex items-center justify-end text-sm">
-                <button type="button" class="btn-flat" @click.prevent="$emit('cancel')" v-text="__(cancelText)" v-if="cancellable" />
-                <button class="rtl:mr-4 ltr:ml-4" :class="buttonClass" :disabled="disabled" v-text="__(buttonText)" />
+                <button type="button" class="btn-flat" @click.prevent="$emit('cancel')" v-text="__(cancelText)" v-if="cancellable" :disabled="busy" />
+                <button class="rtl:mr-4 ltr:ml-4" :class="buttonClass" :disabled="disabled || busy" v-text="__(buttonText)" />
             </div>
         </form>
     </modal>
@@ -48,13 +51,16 @@ export default {
         disabled: {
             type: Boolean,
             default: false,
+        },
+        busy: {
+            type: Boolean,
+            default: false,
         }
     },
 
     data() {
         return {
             escBinding: null,
-            enterBinding: null,
         }
     },
 
@@ -66,18 +72,22 @@ export default {
 
     methods: {
         dismiss() {
+            if (this.busy) return;
+
             this.$emit('cancel')
         },
         submit() {
-            this.$emit('confirm')
+            if (this.busy) return;
+
+            this.$emit('confirm');
         }
     },
 
     created() {
         this.escBinding = this.$keys.bind('esc', this.dismiss)
     },
 
-     beforeDestroy() {
+    beforeDestroy() {
         this.escBinding.destroy()
     },
 }