Feature/added loader inside button (#20)

* Added feature loader inside button * update readme with new feature * Added dockblock and change setLoader method - default is true now * code refactor * code refactor * prod compiled * added yarn.lock on gitignore * fix loading feature * fix loading feature * prod compiled
pdmfc · Jan 13, 2021 · 0d5bf49 · 0d5bf49
1 parent 55ef109
commit 0d5bf49
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/dist/js/field.js b/dist/js/field.js
diff --git a/resources/js/components/IndexField.vue b/resources/js/components/IndexField.vue
@@ -6,7 +6,7 @@
       @click="openConfirmationModal"
       :disabled="disabled"
     >
-      <loading v-if="loading" :color="field.loadingColor" />
+      <loading v-if="showLoading" :color="field.loadingColor" />
       <span v-else>{{ buttonText }}</span>
     </button>
 
@@ -65,14 +65,15 @@ export default {
 
   data: () => ({
     working: false,
+    loading: false,
     confirmActionModalOpened: false,
   }),
   methods: {
     /**
      * Confirm with the user that they actually want to run the selected action.
      */
     openConfirmationModal() {
-      this.working = true;
+      this.loading = true;
       this.confirmActionModalOpened = true;
     },
 
@@ -82,14 +83,15 @@ export default {
     closeConfirmationModal() {
       this.confirmActionModalOpened = false;
       this.errors = new Errors();
-      this.working = false;
+      this.loading = false;
     },
 
     /**
      * Execute the selected action.
      */
     executeAction() {
       this.working = true;
+      this.loading = true;
 
       if (this.selectedResources.length == 0) {
         alert(this.__("Please select a resource to perform this action on."));
@@ -106,9 +108,11 @@ export default {
           this.confirmActionModalOpened = false;
           this.handleActionResponse(response.data);
           this.working = false;
+          this.loading = false;
         })
         .catch((error) => {
           this.working = false;
+          this.loading = false;
 
           if (error.response.status == 422) {
             this.errors = new Errors(error.response.data.errors);
@@ -198,12 +202,12 @@ export default {
       return this.field.hidden || false;
     },
 
-    loading() {
-      return (this.field.showLoadingAnimation || false) && this.working;
+    showLoading() {
+      return (this.field.showLoadingAnimation || false) && this.loading;
     },
 
     disabled() {
-      return this.field.readonly || this.working;
+      return this.field.readonly || ((this.field.showLoadingAnimation || false) && this.loading);
     },
   },
 };

diff --git a/src/ActionButton.php b/src/ActionButton.php
@@ -59,10 +59,15 @@ public function hide($callback)
     /**
      * Enable loading animation. 
      *
+     * @param $callback
      */
-    public function showLoadingAnimation()
+    public function showLoadingAnimation($callback = true)
     {
-        return $this->withMeta(['showLoadingAnimation' => true]);
+        return $this->withMeta(
+            [
+                'showLoadingAnimation' => is_callable($callback) ? $callback() : $callback
+            ]
+        );
     }
 
     /**