From 0bf2ce0b9eeabf008741a285de57ab28d14ca45f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Tue, 12 Sep 2023 15:10:54 +0000
Subject: [PATCH] ConfigView loading flow

---
 ui/src/components/ConfigView.vue   | 19 ++++++++++++++++---
 ui/src/components/bulma/Drawer.vue | 20 +++++++++++++++++---
 2 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/ui/src/components/ConfigView.vue b/ui/src/components/ConfigView.vue
index 60221f7..7d091bd 100644
--- a/ui/src/components/ConfigView.vue
+++ b/ui/src/components/ConfigView.vue
@@ -1,5 +1,10 @@
 <template>
-  <BulmaDrawer header="Konfiguration">
+  <BulmaDrawer
+    header="Konfiguration"
+    :ready="config_loaded"
+    @open="on_open"
+    @close="on_close"
+  >
     <div class="card-content">
       <div class="columns">
         <div class="column is-one-third">
@@ -173,6 +178,7 @@ interface ConfigModel {
   },
 })
 export default class extends Vue {
+  public config_loaded = false;
   public admin_config_model: ConfigModel = {
     puzzle: {
       solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
@@ -198,12 +204,19 @@ export default class extends Vue {
     },
   };
 
-  public mounted(): void {
+  public on_open(): void {
     this.$advent22
       .api_get<ConfigModel>("admin/config_model")
-      .then((data) => (this.admin_config_model = data))
+      .then((data) => {
+        this.admin_config_model = data;
+        this.config_loaded = true;
+      })
       .catch(console.log);
   }
+
+  public on_close(): void {
+    this.config_loaded = false;
+  }
 }
 </script>
 
diff --git a/ui/src/components/bulma/Drawer.vue b/ui/src/components/bulma/Drawer.vue
index fa33b86..1294ce3 100644
--- a/ui/src/components/bulma/Drawer.vue
+++ b/ui/src/components/bulma/Drawer.vue
@@ -2,7 +2,7 @@
   <div class="card">
     <header
       class="card-header has-background-grey-lighter is-unselectable"
-      @click="is_open = !is_open"
+      @click="toggle"
     >
       <p class="card-header-title">{{ header }}</p>
       <button class="card-header-icon">
@@ -14,7 +14,12 @@
       </button>
     </header>
 
-    <slot v-if="is_open" name="default" />
+    <template v-if="is_open">
+      <slot v-if="ready" name="default" />
+      <div v-else class="card-content">
+        <progress class="progress is-primary" max="100" />
+      </div>
+    </template>
   </div>
 </template>
 
@@ -28,11 +33,20 @@ import { Options, Vue } from "vue-class-component";
       required: false,
       default: "",
     },
+    ready: Boolean,
   },
+  emits: ["open", "close"],
 })
 export default class extends Vue {
-  public is_open = false;
   public header!: string;
+  public ready!: boolean;
+
+  public is_open = false;
+
+  public toggle() {
+    this.is_open = !this.is_open;
+    this.$emit(this.is_open ? "open" : "close");
+  }
 }
 </script>