From 295bc729cdf24bcddb1d2ee82f39c36a601764b8 Mon Sep 17 00:00:00 2001
From: david-loe <56305409+david-loe@users.noreply.github.com>
Date: Thu, 21 Nov 2024 10:05:42 +0100
Subject: [PATCH] refactor keydown

---
 .../elements/ConnectionSettingsForm.vue       | 20 +++++++------------
 .../settings/elements/DisplaySettingsForm.vue | 19 ++++++------------
 .../settings/elements/SettingsForm.vue        | 19 ++++++------------
 3 files changed, 19 insertions(+), 39 deletions(-)

diff --git a/frontend/src/components/settings/elements/ConnectionSettingsForm.vue b/frontend/src/components/settings/elements/ConnectionSettingsForm.vue
index 557cc45..85aaf41 100644
--- a/frontend/src/components/settings/elements/ConnectionSettingsForm.vue
+++ b/frontend/src/components/settings/elements/ConnectionSettingsForm.vue
@@ -1,5 +1,10 @@
 <template>
-  <Vueform :schema="schema" ref="form$" :endpoint="false" @submit="(form$: any) => postConnectionSettings(form$.data)"></Vueform>
+  <Vueform
+    :schema="schema"
+    ref="form$"
+    :endpoint="false"
+    @submit="(form$: any) => postConnectionSettings(form$.data)"
+    @keydown.ctrl.s.prevent="() => postConnectionSettings(($refs.form$ as any).data)"></Vueform>
 </template>
 
 <script lang="ts">
@@ -30,21 +35,10 @@ export default defineComponent({
         this.connectionSettings = result.ok
         ;(this.$refs.form$ as any).load(this.connectionSettings)
       }
-    },
-    ctrlS(event: KeyboardEvent) {
-      if (event.ctrlKey && event.key === 's') {
-        event.preventDefault()
-        if (!event.repeat && this.$refs.form$) {
-          this.postConnectionSettings((this.$refs.form$ as any).data)
-        }
-      }
     }
   },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.ctrlS)
-  },
+
   async mounted() {
-    document.addEventListener('keydown', this.ctrlS)
     await this.$root.load()
     this.schema = Object.assign({}, (await this.$root.getter<any>('admin/connectionSettings/form')).ok?.data, {
       buttons: {
diff --git a/frontend/src/components/settings/elements/DisplaySettingsForm.vue b/frontend/src/components/settings/elements/DisplaySettingsForm.vue
index 30eb7b3..0015e9e 100644
--- a/frontend/src/components/settings/elements/DisplaySettingsForm.vue
+++ b/frontend/src/components/settings/elements/DisplaySettingsForm.vue
@@ -1,5 +1,10 @@
 <template>
-  <Vueform :schema="schema" ref="form$" :endpoint="false" @submit="(form$: any) => postDisplaySettings(form$.data)"></Vueform>
+  <Vueform
+    :schema="schema"
+    ref="form$"
+    :endpoint="false"
+    @submit="(form$: any) => postDisplaySettings(form$.data)"
+    @keydown.ctrl.s.prevent="() => postDisplaySettings(($refs.form$ as any).data)"></Vueform>
 </template>
 
 <script lang="ts">
@@ -21,21 +26,9 @@ export default defineComponent({
         this.displaySettings = result.ok
         ;(this.$refs.form$ as any).load(this.displaySettings)
       }
-    },
-    ctrlS(event: KeyboardEvent) {
-      if (event.ctrlKey && event.key === 's') {
-        event.preventDefault()
-        if (!event.repeat && this.$refs.form$) {
-          this.postDisplaySettings((this.$refs.form$ as any).data)
-        }
-      }
     }
   },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.ctrlS)
-  },
   async mounted() {
-    document.addEventListener('keydown', this.ctrlS)
     await this.$root.load()
     this.schema = Object.assign({}, (await this.$root.getter<any>('admin/displaySettings/form')).ok?.data, {
       buttons: {
diff --git a/frontend/src/components/settings/elements/SettingsForm.vue b/frontend/src/components/settings/elements/SettingsForm.vue
index 1a0688f..85544e8 100644
--- a/frontend/src/components/settings/elements/SettingsForm.vue
+++ b/frontend/src/components/settings/elements/SettingsForm.vue
@@ -1,5 +1,10 @@
 <template>
-  <Vueform :schema="schema" ref="form$" :endpoint="false" @submit="(form$: any) => postSettings(form$.data)"></Vueform>
+  <Vueform
+    :schema="schema"
+    ref="form$"
+    :endpoint="false"
+    @submit="(form$: any) => postSettings(form$.data)"
+    @keydown.ctrl.s.prevent="() => postSettings(($refs.form$ as any).data)"></Vueform>
 </template>
 
 <script lang="ts">
@@ -20,21 +25,9 @@ export default defineComponent({
         this.$root.settings = result.ok
         ;(this.$refs.form$ as any).load(this.$root.settings)
       }
-    },
-    ctrlS(event: KeyboardEvent) {
-      if (event.ctrlKey && event.key === 's') {
-        event.preventDefault()
-        if (!event.repeat && this.$refs.form$) {
-          this.postSettings((this.$refs.form$ as any).data)
-        }
-      }
     }
   },
-  beforeDestroy() {
-    document.removeEventListener('keydown', this.ctrlS)
-  },
   async mounted() {
-    document.addEventListener('keydown', this.ctrlS)
     await this.$root.load()
     this.schema = Object.assign({}, (await this.$root.getter<any>('admin/settings/form')).ok?.data, {
       buttons: {