refreshable Drawer

ui/src/components/ConfigView.vue

@@ -1,9 +1,9 @@
 <template>
   <BulmaDrawer
     header="Konfiguration"
-    :ready="config_loaded"
+    :ready="is_loaded"
     @open="on_open"
-    @close="on_close"
+    refreshable
   >
     <div class="card-content">
       <div class="columns">
@@ -178,7 +178,7 @@ interface ConfigModel {
   },
 })
 export default class extends Vue {
-  public config_loaded = false;
+  public is_loaded = false;
   public admin_config_model: ConfigModel = {
     puzzle: {
       solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
@@ -205,18 +205,16 @@ export default class extends Vue {
   };
 
   public on_open(): void {
+    this.is_loaded = false;
+
     this.$advent22
       .api_get<ConfigModel>("admin/config_model")
       .then((data) => {
         this.admin_config_model = data;
-        this.config_loaded = true;
+        this.is_loaded = true;
       })
       .catch(console.log);
   }
-
-  public on_close(): void {
-    this.config_loaded = false;
-  }
 }
 </script>
 

ui/src/components/bulma/Drawer.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="card">
-    <header
-      class="card-header has-background-grey-lighter is-unselectable"
-      @click="toggle"
-    >
-      <p class="card-header-title">{{ header }}</p>
-      <button class="card-header-icon">
+    <header class="card-header has-background-grey-lighter is-unselectable">
+      <p class="card-header-title" @click="toggle">{{ header }}</p>
+      <button v-if="refreshable" class="card-header-icon pr-0" @click="refresh">
+        <span class="tag button is-info icon">
+          <font-awesome-icon icon="fa-solid fa-arrows-rotate" />
+        </span>
+      </button>
+      <button class="card-header-icon" @click="toggle">
         <span class="icon">
           <font-awesome-icon
             :icon="'fa-solid fa-angle-' + (is_open ? 'down' : 'right')"
@@ -17,7 +19,7 @@
     <template v-if="is_open">
       <slot v-if="ready" name="default" />
       <div v-else class="card-content">
-        <progress class="progress is-primary" max="100" />
+        <progress class="progress is-info" max="100" />
       </div>
     </template>
   </div>
@@ -34,18 +36,29 @@ import { Options, Vue } from "vue-class-component";
       default: "",
     },
     ready: Boolean,
+    refreshable: {
+      type: Boolean,
+      required: false,
+      default: false,
     },
-  emits: ["open", "close"],
+  },
+  emits: ["open"],
 })
 export default class extends Vue {
   public header!: string;
   public ready!: boolean;
+  public refreshable!: boolean;
 
   public is_open = false;
 
   public toggle() {
     this.is_open = !this.is_open;
-    this.$emit(this.is_open ? "open" : "close");
+    this.refresh();
+  }
+
+  public refresh() {
+    if (!this.is_open) return;
+    this.$emit("open");
   }
 }
 </script>