refactor keydown

david-loe · Nov 21, 2024 · 295bc72 · 295bc72
1 parent 7f3984b
commit 295bc72
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 39 deletions.
diff --git 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
@@ -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
@@ -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: {