BulmaDrawer: enum DrawerState

ui/src/components/admin/CalendarAssistant.vue

@@ -3,8 +3,7 @@
 
   <BulmaDrawer
     header="Kalender-Assistent"
-    :ready="is_loaded"
+    :state="drawer_state"
-    :failed="is_failed"
     @open="on_open"
     refreshable
   >
@@ -54,7 +53,7 @@ import { Options, Vue } from "vue-class-component";
 
 import MultiModal from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
-import BulmaDrawer from "../bulma/Drawer.vue";
+import BulmaDrawer, { DrawerState } from "../bulma/Drawer.vue";
 
 @Options({
   components: {
@@ -64,8 +63,7 @@ import BulmaDrawer from "../bulma/Drawer.vue";
   },
 })
 export default class extends Vue {
-  public is_loaded = false;
+  public drawer_state = DrawerState.Loading;
-  public is_failed = false;
 
   public day_parts: DayStrModel[] = [];
   public day_image_names: DayStrModel[] = [];
@@ -75,8 +73,7 @@ export default class extends Vue {
   };
 
   public on_open(): void {
-    this.is_loaded = false;
+    this.drawer_state = DrawerState.Loading;
-    this.is_failed = false;
 
     Promise.all([
       this.$advent22.api_get<DayStrModel[]>("admin/day_parts"),
@@ -85,9 +82,10 @@ export default class extends Vue {
       .then(([day_parts, day_image_names]) => {
         this.day_parts = day_parts;
         this.day_image_names = day_image_names;
-        this.is_loaded = true;
+
+        this.drawer_state = DrawerState.Ready;
       })
-      .catch(() => (this.is_failed = true));
+      .catch(() => (this.drawer_state = DrawerState.Failed));
   }
 
   public door_click(day: number) {

ui/src/components/admin/ConfigView.vue

@@ -1,8 +1,7 @@
 <template>
   <BulmaDrawer
     header="Konfiguration"
-    :ready="is_loaded"
+    :state="drawer_state"
-    :failed="is_failed"
     @open="on_open"
     refreshable
   >
@@ -129,7 +128,7 @@
 import { ConfigModel, DayStrModel, DoorsSaved } from "@/lib/api";
 import { Options, Vue } from "vue-class-component";
 
-import BulmaDrawer from "../bulma/Drawer.vue";
+import BulmaDrawer, { DrawerState } from "../bulma/Drawer.vue";
 import BulmaSecret from "../bulma/Secret.vue";
 
 interface Credentials {
@@ -144,8 +143,7 @@ interface Credentials {
   },
 })
 export default class extends Vue {
-  public is_loaded = false;
+  public drawer_state = DrawerState.Loading;
-  public is_failed = true;
 
   public config_model: ConfigModel = {
     puzzle: {
@@ -177,8 +175,7 @@ export default class extends Vue {
   public ui_credentials: Credentials = { username: "", password: "" };
 
   public on_open(): void {
-    this.is_loaded = false;
+    this.drawer_state = DrawerState.Loading;
-    this.is_failed = false;
 
     Promise.all([
       this.$advent22.api_get<ConfigModel>("admin/config_model"),
@@ -190,9 +187,9 @@ export default class extends Vue {
         this.day_parts = day_parts;
         this.num_user_doors = user_doors.length;
 
-        this.is_loaded = true;
+        this.drawer_state = DrawerState.Ready;
       })
-      .catch(() => (this.is_failed = true));
+      .catch(() => (this.drawer_state = DrawerState.Failed));
   }
 
   public load_dav_credentials(): void {

ui/src/components/admin/DoorMapEditor.vue

@@ -1,8 +1,7 @@
 <template>
   <BulmaDrawer
     header="Türchen bearbeiten"
-    :ready="is_loaded"
+    :state="drawer_state"
-    :failed="is_failed"
     @open="on_open"
   >
     <div class="is-flex is-align-items-center is-justify-content-space-between">
@@ -60,7 +59,7 @@ import { Options, Vue } from "vue-class-component";
 import Calendar from "../Calendar.vue";
 import BulmaBreadcrumbs, { Step } from "../bulma/Breadcrumbs.vue";
 import BulmaButton from "../bulma/Button.vue";
-import BulmaDrawer from "../bulma/Drawer.vue";
+import BulmaDrawer, { DrawerState } from "../bulma/Drawer.vue";
 import DoorChooser from "../editor/DoorChooser.vue";
 import DoorPlacer from "../editor/DoorPlacer.vue";
 
@@ -75,8 +74,7 @@ import DoorPlacer from "../editor/DoorPlacer.vue";
   },
 })
 export default class extends Vue {
-  public is_loaded = false;
+  public drawer_state = DrawerState.Loading;
-  public is_failed = false;
 
   public readonly steps: Step[] = [
     { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
@@ -100,7 +98,7 @@ export default class extends Vue {
             this.doors.push(Door.load(value));
           }
 
-          this.is_loaded = true;
+          this.drawer_state = DrawerState.Ready;
           resolve(data);
         })
         .catch((error) => {
@@ -129,10 +127,9 @@ export default class extends Vue {
   }
 
   public on_open(): void {
-    this.is_loaded = false;
+    this.drawer_state = DrawerState.Loading;
-    this.is_failed = false;
 
-    this.load_doors().catch(() => (this.is_failed = true));
+    this.load_doors().catch(() => (this.drawer_state = DrawerState.Failed));
   }
 
   public on_download() {

ui/src/components/bulma/Drawer.vue

@@ -7,7 +7,7 @@
         <button class="tag button icon is-info" @click="refresh">
           <font-awesome-icon
             icon="fa-solid fa-arrows-rotate"
-            :spin="is_open && !ready && !failed"
+            :spin="is_open && loading"
           />
         </button>
       </p>
@@ -22,14 +22,17 @@
     </header>
 
     <template v-if="is_open">
-      <div v-if="failed" class="card-content has-text-danger has-text-centered">
+      <div v-if="loading" class="card-content">
+        <progress class="progress is-info" max="100" />
+      </div>
+      <div
+        v-else-if="failed"
+        class="card-content has-text-danger has-text-centered"
+      >
         <span class="icon is-large">
           <font-awesome-icon icon="fa-solid fa-ban" size="3x" />
         </span>
       </div>
-      <div v-else-if="!ready" class="card-content">
-        <progress class="progress is-info" max="100" />
-      </div>
       <slot v-else name="default" />
     </template>
   </div>
@@ -38,17 +41,19 @@
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 
+export enum DrawerState {
+  Loading,
+  Ready,
+  Failed,
+}
+
 @Options({
   props: {
     header: {
       type: String,
       default: "",
     },
-    ready: Boolean,
+    state: DrawerState,
-    failed: {
-      type: Boolean,
-      default: false,
-    },
     refreshable: {
       type: Boolean,
       default: false,
@@ -58,8 +63,7 @@ import { Options, Vue } from "vue-class-component";
 })
 export default class extends Vue {
   public header!: string;
-  public ready!: boolean;
+  public state!: DrawerState;
-  public failed!: boolean;
   public refreshable!: boolean;
 
   public is_open = false;
@@ -73,6 +77,14 @@ export default class extends Vue {
     this.is_open = false;
     this.toggle();
   }
+
+  public get loading(): boolean {
+    return this.state === DrawerState.Loading;
+  }
+
+  public get failed(): boolean {
+    return this.state === DrawerState.Failed;
+  }
 }
 </script>