🔧 ui: BulmaDrawer state machine rework

ui/src/components/admin/AdminView.vue

@@ -2,7 +2,7 @@
   <ConfigView />
   <CalendarAssistant />
   <DoorMapEditor />
-  <BulmaDrawer header="Vorschau" @open="(ready) => ready()">
+  <BulmaDrawer header="Vorschau">
     <UserView />
   </BulmaDrawer>
 </template>

ui/src/components/admin/CalendarAssistant.vue

@@ -1,7 +1,7 @@
 <template>
   <MultiModal @handle="on_modal_handle" />
 
-  <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
+  <BulmaDrawer header="Kalender-Assistent" :opening="on_open" refreshable>
     <div class="card-content">
       <div class="content">
         <p>Hervorgehobenen Tagen wurde kein Buchstabe zugewiesen.</p>
@@ -63,8 +63,7 @@ function on_modal_handle(handle: HMultiModal) {
   modal = handle;
 }
 
-async function on_open(ready: () => void, fail: () => void) {
+async function on_open() {
-  try {
   const [day_parts, day_image_names] = await Promise.all([
     API.request<NumStrDict>("admin/day_parts"),
     API.request<NumStrDict>("admin/day_image_names"),
@@ -85,11 +84,6 @@ async function on_open(ready: () => void, fail: () => void) {
     _ensure_day_in_data(day);
     day_data.value[day].image_name = image_name;
   });
-
-    ready();
-  } catch {
-    fail();
-  }
 }
 
 async function door_click(day: number) {

ui/src/components/admin/ConfigView.vue

@@ -1,5 +1,5 @@
 <template>
-  <BulmaDrawer header="Konfiguration" @open="on_open" refreshable>
+  <BulmaDrawer header="Konfiguration" :opening="on_open" refreshable>
     <div class="card-content">
       <div class="columns">
         <div class="column is-one-third">
@@ -247,24 +247,16 @@ function fmt_puzzle_date(name: keyof AdminConfigModel["puzzle"]): string {
   return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
 }
 
-async function on_open(ready: () => void, fail: () => void) {
+async function on_open() {
-  try {
+  const [store_update, new_admin_config_model, new_doors] = await Promise.all([
-    const [store_update, new_admin_config_model, new_doors] = await Promise.all(
-      [
     store.update(),
     API.request<AdminConfigModel>("admin/config_model"),
     API.request<DoorSaved[]>("admin/doors"),
-      ],
+  ]);
-    );
 
   void store_update;
   admin_config_model.value = new_admin_config_model;
   doors.value = new_doors;
-
-    ready();
-  } catch {
-    fail();
-  }
 }
 
 async function load_dav_credentials() {

ui/src/components/admin/DoorMapEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <BulmaDrawer header="Türchen bearbeiten" @open="on_open">
+  <BulmaDrawer header="Türchen bearbeiten" :opening="load_doors">
     <nav class="level is-mobile mb-0" style="overflow-x: auto">
       <BulmaButton
         :disabled="current_step === 0"
@@ -128,15 +128,6 @@ async function save_doors() {
   }
 }
 
-async function on_open(ready: () => void, fail: () => void) {
-  try {
-    load_doors();
-    ready();
-  } catch {
-    fail();
-  }
-}
-
 async function on_download() {
   if (confirm("Aktuelle Änderungen verwerfen und Status vom Server laden?")) {
     loading_doors.value = true;

ui/src/components/bulma/Drawer.vue

@@ -4,11 +4,11 @@
     <header class="card-header is-unselectable" style="cursor: pointer">
       <p class="card-header-title" @click="toggle">{{ header }}</p>
 
-      <p v-if="refreshable" class="card-header-icon px-0">
+      <p v-if="refreshable && is_open" class="card-header-icon px-0">
-        <BulmaButton class="is-small is-primary" @click="refresh">
+        <BulmaButton class="is-small is-primary" @click="load">
           <FontAwesomeIcon
             :icon="['fas', 'arrows-rotate']"
-            :spin="is_open && state === 'loading'"
+            :spin="state === 'loading'"
           />
         </BulmaButton>
       </p>
@@ -27,7 +27,7 @@
         <progress class="progress is-primary" />
       </div>
       <div
-        v-else-if="state === 'failed'"
+        v-else-if="state === 'err'"
         class="card-content has-text-danger has-text-centered"
       >
         <span class="icon is-large">
@@ -40,43 +40,40 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 import BulmaButton from "./Button.vue";
 
-withDefaults(
+const props = withDefaults(
   defineProps<{
     header: string;
+    opening?: () => Promise<void>;
     refreshable?: boolean;
   }>(),
-  { refreshable: false },
+  { opening: async () => {}, refreshable: false },
 );
 
-const emit = defineEmits<{
+const state = ref<"closed" | "loading" | "ok" | "err">("closed");
-  (event: "open", ready: () => void, fail: () => void): void;
+const is_open = computed(() => state.value !== "closed");
-}>();
-
-const is_open = ref(false);
-const state = ref<"loading" | "ready" | "failed">("loading");
-
-function toggle() {
-  is_open.value = !is_open.value;
 
+async function toggle() {
   if (is_open.value) {
+    state.value = "closed";
+  } else {
+    await load();
+  }
+}
+
+async function load() {
   state.value = "loading";
 
-    emit(
+  try {
-      "open",
+    await props.opening();
-      () => (state.value = "ready"),
+    state.value = "ok";
-      () => (state.value = "failed"),
+  } catch {
-    );
+    state.value = "err";
   }
 }
-
-function refresh() {
-  is_open.value = false;
-  toggle();
-}
 </script>
 
 <style scoped>