From 5f2c031793325d3337206ca51e950cc56ad55aec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Tue, 12 Sep 2023 22:35:57 +0000
Subject: [PATCH] BulmaButton "busy" animation

---
 ui/src/components/AdminButton.vue  | 10 +++++++---
 ui/src/components/bulma/Button.vue |  8 +++++++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/ui/src/components/AdminButton.vue b/ui/src/components/AdminButton.vue
index 5cef5f7..604c02c 100644
--- a/ui/src/components/AdminButton.vue
+++ b/ui/src/components/AdminButton.vue
@@ -9,6 +9,7 @@
     class="button is-light"
     @click.left="on_click"
     :icon="'fa-solid fa-toggle-' + (modelValue ? 'on' : 'off')"
+    :busy="is_busy"
     text="Admin"
   />
 </template>
@@ -33,6 +34,7 @@ export default class extends Vue {
   // true, iff Benutzer Admin ist
   public modelValue!: boolean;
   public modal_visible = false;
+  public is_busy = false;
 
   public on_click() {
     if (this.modelValue) {
@@ -41,6 +43,7 @@ export default class extends Vue {
       this.$emit("update:modelValue", false);
     } else {
       // show login modal
+      this.is_busy = true;
       this.modal_visible = true;
     }
   }
@@ -49,9 +52,10 @@ export default class extends Vue {
     this.modal_visible = false;
     this.$advent22.set_api_auth(username, password);
 
-    this.$advent22
-      .api_get<boolean>("admin/is_admin")
-      .then((is_admin) => this.$emit("update:modelValue", is_admin));
+    this.$advent22.api_get<boolean>("admin/is_admin").then((is_admin) => {
+      this.$emit("update:modelValue", is_admin);
+      this.is_busy = false;
+    });
   }
 }
 </script>
diff --git a/ui/src/components/bulma/Button.vue b/ui/src/components/bulma/Button.vue
index 2feb041..a0e96f8 100644
--- a/ui/src/components/bulma/Button.vue
+++ b/ui/src/components/bulma/Button.vue
@@ -1,7 +1,7 @@
 <template>
   <button class="button">
     <span v-if="icon !== undefined" class="icon">
-      <font-awesome-icon :icon="icon" />
+      <font-awesome-icon :icon="icon" :beat-fade="busy" />
     </span>
     <span v-if="text !== ''">{{ text }}</span>
   </button>
@@ -21,10 +21,16 @@ import { Options, Vue } from "vue-class-component";
       required: false,
       default: "",
     },
+    busy: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 })
 export default class extends Vue {
   public icon?: string;
   public text!: string;
+  public busy!: boolean;
 }
 </script>