From 597f01b545879b76ff464f739a26cc60fd172112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 14 Sep 2023 14:20:21 +0000
Subject: [PATCH] cleanup some $refs

---
 ui/src/components/Calendar.vue                | 19 ++++++++++++-------
 ui/src/components/LoginModal.vue              |  2 +-
 ui/src/components/MultiModal.vue              |  9 ++++++++-
 ui/src/components/admin/CalendarAssistant.vue | 16 +++++++++-------
 ui/src/components/editor/PreviewDoor.vue      |  2 +-
 5 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/ui/src/components/Calendar.vue b/ui/src/components/Calendar.vue
index aaa65b9..2cfd669 100644
--- a/ui/src/components/Calendar.vue
+++ b/ui/src/components/Calendar.vue
@@ -1,5 +1,5 @@
 <template>
-  <MultiModal ref="multi_modal" />
+  <MultiModal @handle="modal_handle" />
 
   <figure>
     <div class="image is-unselectable">
@@ -46,11 +46,13 @@ import ThouCanvas from "./calendar/ThouCanvas.vue";
 export default class extends Vue {
   public readonly doors!: Door[];
   private readonly idle_caption = "Finde die Türchen auf dem Adventskalender!";
+
+  private multi_modal?: MultiModal;
   public figure_caption = this.idle_caption;
 
-  declare $refs: {
-    multi_modal: MultiModal;
-  };
+  public modal_handle(modal: MultiModal) {
+    this.multi_modal = modal;
+  }
 
   public door_hover(day: number) {
     this.figure_caption = this.$advent22.name_door(day);
@@ -61,16 +63,19 @@ export default class extends Vue {
   }
 
   public door_click() {
-    this.$refs.multi_modal.show_progress();
+    if (this.multi_modal === undefined) return;
+    this.multi_modal.show_progress();
   }
 
   public door_success(day: number, image_src: string) {
-    this.$refs.multi_modal.show_image(image_src, this.$advent22.name_door(day));
+    if (this.multi_modal === undefined) return;
+    this.multi_modal.show_image(image_src, this.$advent22.name_door(day));
   }
 
   public door_failure(msg: string) {
-    this.$refs.multi_modal.set_active(false);
     alert(msg);
+    if (this.multi_modal === undefined) return;
+    this.multi_modal.set_active(false);
   }
 }
 </script>
diff --git a/ui/src/components/LoginModal.vue b/ui/src/components/LoginModal.vue
index b9b014e..c336d50 100644
--- a/ui/src/components/LoginModal.vue
+++ b/ui/src/components/LoginModal.vue
@@ -66,7 +66,7 @@ export default class extends Vue {
   public password = "";
 
   declare $refs: {
-    username_input: HTMLInputElement | null | undefined;
+    username_input: HTMLInputElement | unknown;
   };
 
   private on_keydown(e: KeyboardEvent) {
diff --git a/ui/src/components/MultiModal.vue b/ui/src/components/MultiModal.vue
index d0c1239..ed68e49 100644
--- a/ui/src/components/MultiModal.vue
+++ b/ui/src/components/MultiModal.vue
@@ -21,8 +21,11 @@
 </template>
 
 <script lang="ts">
-import { Vue } from "vue-class-component";
+import { Options, Vue } from "vue-class-component";
 
+@Options({
+  emits: ["handle"],
+})
 export default class extends Vue {
   public active = false;
   public progress = false;
@@ -33,6 +36,10 @@ export default class extends Vue {
     if (e.key == "Escape") this.set_active(false);
   }
 
+  public created(): void {
+    this.$emit("handle", this);
+  }
+
   public mounted(): void {
     window.addEventListener("keydown", this.on_keydown);
   }
diff --git a/ui/src/components/admin/CalendarAssistant.vue b/ui/src/components/admin/CalendarAssistant.vue
index e91bfeb..91328f6 100644
--- a/ui/src/components/admin/CalendarAssistant.vue
+++ b/ui/src/components/admin/CalendarAssistant.vue
@@ -1,5 +1,5 @@
 <template>
-  <MultiModal ref="multi_modal" />
+  <MultiModal @handle="modal_handle" />
 
   <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
     <div class="card-content">
@@ -60,10 +60,11 @@ import BulmaDrawer from "../bulma/Drawer.vue";
 export default class extends Vue {
   public day_parts: DayStrModel[] = [];
   public day_image_names: DayStrModel[] = [];
+  private multi_modal?: MultiModal;
 
-  declare $refs: {
-    multi_modal: MultiModal;
-  };
+  public modal_handle(modal: MultiModal) {
+    this.multi_modal = modal;
+  }
 
   public on_open(ready: () => void, fail: () => void): void {
     Promise.all([
@@ -80,14 +81,15 @@ export default class extends Vue {
   }
 
   public door_click(day: number) {
-    this.$refs.multi_modal.show_progress();
+    if (this.multi_modal === undefined) return;
+    this.multi_modal.show_progress();
 
     this.$advent22
       .api_get_blob(`user/image_${day}`)
       .then((data) =>
-        this.$refs.multi_modal.show_image(data, this.$advent22.name_door(day)),
+        this.multi_modal!.show_image(data, this.$advent22.name_door(day)),
       )
-      .catch(() => this.$refs.multi_modal.set_active(false));
+      .catch(() => this.multi_modal!.set_active(false));
   }
 }
 </script>
diff --git a/ui/src/components/editor/PreviewDoor.vue b/ui/src/components/editor/PreviewDoor.vue
index 3208dae..8cef1db 100644
--- a/ui/src/components/editor/PreviewDoor.vue
+++ b/ui/src/components/editor/PreviewDoor.vue
@@ -53,7 +53,7 @@ export default class extends Vue {
   private refreshKey = 0;
 
   declare $refs: {
-    day_input: HTMLInputElement | null | undefined;
+    day_input: HTMLInputElement | unknown;
   };
 
   private refresh() {