From 0498a722b1dda2e9f17699a9277f5187e0bf41ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 14 Sep 2023 12:51:30 +0000
Subject: [PATCH] BulmaDrawer remove prop `state`

---
 ui/src/components/admin/CalendarAssistant.vue | 19 ++++-----------
 ui/src/components/admin/ConfigView.vue        | 19 ++++-----------
 ui/src/components/admin/DoorMapEditor.vue     | 23 +++++++------------
 ui/src/components/bulma/Drawer.vue            | 19 +++++++++------
 4 files changed, 30 insertions(+), 50 deletions(-)

diff --git a/ui/src/components/admin/CalendarAssistant.vue b/ui/src/components/admin/CalendarAssistant.vue
index 2a210e1..f5baaff 100644
--- a/ui/src/components/admin/CalendarAssistant.vue
+++ b/ui/src/components/admin/CalendarAssistant.vue
@@ -1,12 +1,7 @@
 <template>
   <MultiModal ref="multi_modal" />
 
-  <BulmaDrawer
-    header="Kalender-Assistent"
-    :state="drawer_state"
-    @open="on_open"
-    refreshable
-  >
+  <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
     <div class="card-content">
       <div class="content">
         <h4>Zuordnung Buchstaben</h4>
@@ -53,7 +48,7 @@ import { Options, Vue } from "vue-class-component";
 
 import MultiModal from "../MultiModal.vue";
 import BulmaButton from "../bulma/Button.vue";
-import BulmaDrawer, { DrawerState } from "../bulma/Drawer.vue";
+import BulmaDrawer from "../bulma/Drawer.vue";
 
 @Options({
   components: {
@@ -63,8 +58,6 @@ import BulmaDrawer, { DrawerState } from "../bulma/Drawer.vue";
   },
 })
 export default class extends Vue {
-  public drawer_state = DrawerState.Loading;
-
   public day_parts: DayStrModel[] = [];
   public day_image_names: DayStrModel[] = [];
 
@@ -72,9 +65,7 @@ export default class extends Vue {
     multi_modal: MultiModal;
   };
 
-  public on_open(): void {
-    this.drawer_state = DrawerState.Loading;
-
+  public on_open(ready: () => void, fail: () => void): void {
     Promise.all([
       this.$advent22.api_get<DayStrModel[]>("admin/day_parts"),
       this.$advent22.api_get<DayStrModel[]>("admin/day_image_names"),
@@ -83,9 +74,9 @@ export default class extends Vue {
         this.day_parts = day_parts;
         this.day_image_names = day_image_names;
 
-        this.drawer_state = DrawerState.Ready;
+        ready();
       })
-      .catch(() => (this.drawer_state = DrawerState.Failed));
+      .catch(fail);
   }
 
   public door_click(day: number) {
diff --git a/ui/src/components/admin/ConfigView.vue b/ui/src/components/admin/ConfigView.vue
index 2beb907..b0db1fa 100644
--- a/ui/src/components/admin/ConfigView.vue
+++ b/ui/src/components/admin/ConfigView.vue
@@ -1,10 +1,5 @@
 <template>
-  <BulmaDrawer
-    header="Konfiguration"
-    :state="drawer_state"
-    @open="on_open"
-    refreshable
-  >
+  <BulmaDrawer header="Konfiguration" @open="on_open" refreshable>
     <div class="card-content">
       <div class="columns">
         <div class="column is-one-third">
@@ -128,7 +123,7 @@
 import { ConfigModel, DayStrModel, DoorsSaved } from "@/lib/api";
 import { Options, Vue } from "vue-class-component";
 
-import BulmaDrawer, { DrawerState } from "../bulma/Drawer.vue";
+import BulmaDrawer from "../bulma/Drawer.vue";
 import BulmaSecret from "../bulma/Secret.vue";
 
 interface Credentials {
@@ -143,8 +138,6 @@ interface Credentials {
   },
 })
 export default class extends Vue {
-  public drawer_state = DrawerState.Loading;
-
   public config_model: ConfigModel = {
     puzzle: {
       title: "Advent22",
@@ -174,9 +167,7 @@ export default class extends Vue {
   public dav_credentials: Credentials = { username: "", password: "" };
   public ui_credentials: Credentials = { username: "", password: "" };
 
-  public on_open(): void {
-    this.drawer_state = DrawerState.Loading;
-
+  public on_open(ready: () => void, fail: () => void): void {
     Promise.all([
       this.$advent22.api_get<ConfigModel>("admin/config_model"),
       this.$advent22.api_get<DayStrModel[]>("admin/day_parts"),
@@ -187,9 +178,9 @@ export default class extends Vue {
         this.day_parts = day_parts;
         this.num_user_doors = user_doors.length;
 
-        this.drawer_state = DrawerState.Ready;
+        ready();
       })
-      .catch(() => (this.drawer_state = DrawerState.Failed));
+      .catch(fail);
   }
 
   public load_dav_credentials(): void {
diff --git a/ui/src/components/admin/DoorMapEditor.vue b/ui/src/components/admin/DoorMapEditor.vue
index 46fa90e..0b42690 100644
--- a/ui/src/components/admin/DoorMapEditor.vue
+++ b/ui/src/components/admin/DoorMapEditor.vue
@@ -1,9 +1,5 @@
 <template>
-  <BulmaDrawer
-    header="Türchen bearbeiten"
-    :state="drawer_state"
-    @open="on_open"
-  >
+  <BulmaDrawer header="Türchen bearbeiten" @open="on_open">
     <div class="is-flex is-align-items-center is-justify-content-space-between">
       <BulmaButton
         :disabled="current_step === 0"
@@ -59,7 +55,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, { DrawerState } from "../bulma/Drawer.vue";
+import BulmaDrawer from "../bulma/Drawer.vue";
 import DoorChooser from "../editor/DoorChooser.vue";
 import DoorPlacer from "../editor/DoorPlacer.vue";
 
@@ -74,8 +70,6 @@ import DoorPlacer from "../editor/DoorPlacer.vue";
   },
 })
 export default class extends Vue {
-  public drawer_state = DrawerState.Loading;
-
   public readonly steps: Step[] = [
     { label: "Platzieren", icon: "fa-solid fa-crosshairs" },
     { label: "Ordnen", icon: "fa-solid fa-list-ol" },
@@ -87,8 +81,8 @@ export default class extends Vue {
   public loading_doors = false;
   public saving_doors = false;
 
-  private load_doors(): Promise<DoorsSaved> {
-    return new Promise<DoorsSaved>((resolve, reject) => {
+  private load_doors(): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
       this.$advent22
         .api_get<DoorsSaved>("admin/doors")
         .then((data) => {
@@ -98,8 +92,7 @@ export default class extends Vue {
             this.doors.push(Door.load(value));
           }
 
-          this.drawer_state = DrawerState.Ready;
-          resolve(data);
+          resolve();
         })
         .catch((error) => {
           alert(this.$advent22.format_user_error(error));
@@ -126,10 +119,10 @@ export default class extends Vue {
     });
   }
 
-  public on_open(): void {
-    this.drawer_state = DrawerState.Loading;
+  public on_open(ready: () => void, fail: () => void): void {
+    console.log(ready, fail);
 
-    this.load_doors().catch(() => (this.drawer_state = DrawerState.Failed));
+    this.load_doors().then(ready).catch(fail);
   }
 
   public on_download() {
diff --git a/ui/src/components/bulma/Drawer.vue b/ui/src/components/bulma/Drawer.vue
index eeca594..cb37a59 100644
--- a/ui/src/components/bulma/Drawer.vue
+++ b/ui/src/components/bulma/Drawer.vue
@@ -49,11 +49,7 @@ export enum DrawerState {
 
 @Options({
   props: {
-    header: {
-      type: String,
-      default: "",
-    },
-    state: DrawerState,
+    header: String,
     refreshable: {
       type: Boolean,
       default: false,
@@ -63,14 +59,23 @@ export enum DrawerState {
 })
 export default class extends Vue {
   public header!: string;
-  public state!: DrawerState;
   public refreshable!: boolean;
 
   public is_open = false;
+  public state = DrawerState.Loading;
 
   public toggle() {
     this.is_open = !this.is_open;
-    if (this.is_open) this.$emit("open");
+
+    if (this.is_open) {
+      this.state = DrawerState.Loading;
+
+      this.$emit(
+        "open",
+        () => (this.state = DrawerState.Ready),
+        () => (this.state = DrawerState.Failed),
+      );
+    }
   }
 
   public refresh() {