From eacd1da482e4ac252e8805cdb1fe3023fa1e2b54 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sun, 28 Dec 2025 01:10:28 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A7=20ui:=20BulmaDrawer=20state=20mach?=
 =?UTF-8?q?ine=20rework?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/components/admin/AdminView.vue         |  2 +-
 ui/src/components/admin/CalendarAssistant.vue | 44 +++++++----------
 ui/src/components/admin/ConfigView.vue        | 28 ++++-------
 ui/src/components/admin/DoorMapEditor.vue     | 11 +----
 ui/src/components/bulma/Drawer.vue            | 49 +++++++++----------
 5 files changed, 54 insertions(+), 80 deletions(-)

diff --git a/ui/src/components/admin/AdminView.vue b/ui/src/components/admin/AdminView.vue
index a675799..234c33b 100644
--- a/ui/src/components/admin/AdminView.vue
+++ b/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>
diff --git a/ui/src/components/admin/CalendarAssistant.vue b/ui/src/components/admin/CalendarAssistant.vue
index f29901e..83acea4 100644
--- a/ui/src/components/admin/CalendarAssistant.vue
+++ b/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,33 +63,27 @@ function on_modal_handle(handle: HMultiModal) {
   modal = handle;
 }
 
-async function on_open(ready: () => void, fail: () => void) {
-  try {
-    const [day_parts, day_image_names] = await Promise.all([
-      API.request<NumStrDict>("admin/day_parts"),
-      API.request<NumStrDict>("admin/day_image_names"),
-    ]);
+async function on_open() {
+  const [day_parts, day_image_names] = await Promise.all([
+    API.request<NumStrDict>("admin/day_parts"),
+    API.request<NumStrDict>("admin/day_image_names"),
+  ]);
 
-    const _ensure_day_in_data = (day: number) => {
-      if (!(day in day_data.value)) {
-        day_data.value[day] = { part: "", image_name: "" };
-      }
-    };
+  const _ensure_day_in_data = (day: number) => {
+    if (!(day in day_data.value)) {
+      day_data.value[day] = { part: "", image_name: "" };
+    }
+  };
 
-    objForEach(day_parts, (day, part) => {
-      _ensure_day_in_data(day);
-      day_data.value[day].part = part;
-    });
+  objForEach(day_parts, (day, part) => {
+    _ensure_day_in_data(day);
+    day_data.value[day].part = part;
+  });
 
-    objForEach(day_image_names, (day, image_name) => {
-      _ensure_day_in_data(day);
-      day_data.value[day].image_name = image_name;
-    });
-
-    ready();
-  } catch {
-    fail();
-  }
+  objForEach(day_image_names, (day, image_name) => {
+    _ensure_day_in_data(day);
+    day_data.value[day].image_name = image_name;
+  });
 }
 
 async function door_click(day: number) {
diff --git a/ui/src/components/admin/ConfigView.vue b/ui/src/components/admin/ConfigView.vue
index aa4db97..d3163f6 100644
--- a/ui/src/components/admin/ConfigView.vue
+++ b/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) {
-  try {
-    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"),
-      ],
-    );
+async function on_open() {
+  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();
-  }
+  void store_update;
+  admin_config_model.value = new_admin_config_model;
+  doors.value = new_doors;
 }
 
 async function load_dav_credentials() {
diff --git a/ui/src/components/admin/DoorMapEditor.vue b/ui/src/components/admin/DoorMapEditor.vue
index 9fb0e41..af3b4dc 100644
--- a/ui/src/components/admin/DoorMapEditor.vue
+++ b/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;
diff --git a/ui/src/components/bulma/Drawer.vue b/ui/src/components/bulma/Drawer.vue
index 7d2e586..b10d817 100644
--- a/ui/src/components/bulma/Drawer.vue
+++ b/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">
-        <BulmaButton class="is-small is-primary" @click="refresh">
+      <p v-if="refreshable && is_open" class="card-header-icon px-0">
+        <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,42 +40,39 @@
 </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<{
-  (event: "open", ready: () => void, fail: () => void): void;
-}>();
-
-const is_open = ref(false);
-const state = ref<"loading" | "ready" | "failed">("loading");
-
-function toggle() {
-  is_open.value = !is_open.value;
+const state = ref<"closed" | "loading" | "ok" | "err">("closed");
+const is_open = computed(() => state.value !== "closed");
 
+async function toggle() {
   if (is_open.value) {
-    state.value = "loading";
-
-    emit(
-      "open",
-      () => (state.value = "ready"),
-      () => (state.value = "failed"),
-    );
+    state.value = "closed";
+  } else {
+    await load();
   }
 }
 
-function refresh() {
-  is_open.value = false;
-  toggle();
+async function load() {
+  state.value = "loading";
+
+  try {
+    await props.opening();
+    state.value = "ok";
+  } catch {
+    state.value = "err";
+  }
 }
 </script>