perf: Add Escape / Enter keybinds to RSS modals (#797)

VueTorrent · May 3, 2023 · b276004 · b276004
1 parent 82310c8
commit b276004
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 24 deletions.
diff --git a/src/components/Modals/RenameModal.vue b/src/components/Modals/RenameModal.vue
@@ -17,8 +17,6 @@
       </v-card-text>
       <v-divider />
       <v-card-actions class="justify-end">
-        <v-btn v-if="enableUrlDecode" class="info white--text elevation-0 px-4" @click="urlDecode"> URL DECODE </v-btn>
-        <v-spacer />
         <v-btn class="accent white--text elevation-0 px-4" @click="rename">
           {{ $t('save') }}
         </v-btn>
@@ -30,13 +28,15 @@
   </v-dialog>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters } from 'vuex'
 import Modal from '@/mixins/Modal'
 import { mdiFile } from '@mdi/js'
 import { FullScreenModal } from '@/mixins'
 import qbit from '@/services/qbit'
-export default {
+import {defineComponent} from "vue";
+
+export default defineComponent({
   name: 'RenameModal',
   mixins: [Modal, FullScreenModal],
   props: {
@@ -45,6 +45,7 @@ export default {
   data() {
     return {
       name: '',
+
       mdiFile
     }
   },
@@ -59,38 +60,28 @@ export default {
   },
   created() {
     this.name = this.torrent.name
-    this.isUrl()
   },
   beforeDestroy() {
     document.removeEventListener('keydown', this.handleKeyboardShortcut)
   },
   methods: {
     urlDecode() {
       this.name = decodeURIComponent(this.name)
-      this.isUrl()
-    },
-    isUrl() {
-      this.enableUrlDecode = false
-      if (this.name.indexOf(' ') === -1) {
-        const exp = /[+%]/
-        if (exp.test(this.name)) this.enableUrlDecode = true
-      }
     },
     async rename() {
       await qbit.setTorrentName(this.hash, this.name)
       this.close()
     },
     close() {
       this.dialog = false
-      //this.$store.commit('DELETE_MODAL', this.guid)
     },
-    handleKeyboardShortcut(e) {
+    handleKeyboardShortcut(e: KeyboardEvent) {
       if (e.key === 'Escape') {
         this.close()
-      } else if (e.keyCode === 13) {
+      } else if (e.key === 'Enter') {
         this.rename()
       }
     }
   }
-}
+})
 </script>
diff --git a/src/components/Modals/Rss/FeedForm.vue b/src/components/Modals/Rss/FeedForm.vue
@@ -32,13 +32,13 @@
   </v-dialog>
 </template>
 
-<script>
+<script lang="ts">
 import qbit from '@/services/qbit'
 import { Modal } from '@/mixins'
 import { mdiCancel, mdiTagPlus, mdiPencil } from '@mdi/js'
-import Vue from 'vue'
+import Vue, {defineComponent} from 'vue'
 
-export default {
+export default defineComponent({
   name: 'FeedForm',
   mixins: [Modal],
   props: {
@@ -60,6 +60,12 @@ export default {
       this.feed = { ...this.initialFeed }
     }
   },
+  mounted() {
+    document.addEventListener('keydown', this.handleKeyboardShortcut)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardShortcut)
+  },
   methods: {
     create() {
       qbit.createFeed(this.feed)
@@ -73,9 +79,15 @@ export default {
       qbit.editFeed(this.initialFeed.name, this.feed.name)
       Vue.$toast.success(this.$t('toast.feedSaved'))
       this.cancel()
+    },
+    handleKeyboardShortcut(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        this.cancel()
+      } else if (e.key === 'Enter') {
+        if (this.hasInitialFeed) this.edit()
+        else this.create()
+      }
     }
   }
-}
+})
 </script>
-
-<style></style>
diff --git a/src/components/Modals/Rss/MatchingArticles.vue b/src/components/Modals/Rss/MatchingArticles.vue
@@ -45,6 +45,8 @@ export default defineComponent({
     }
   },
   async mounted() {
+    document.addEventListener('keydown', this.handleKeyboardShortcut)
+
     if (this.ruleName === undefined) {
       this.close()
       return
@@ -63,9 +65,17 @@ export default defineComponent({
       }
     }
   },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardShortcut)
+  },
   methods: {
     close() {
       this.dialog = false
+    },
+    handleKeyboardShortcut(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        this.close()
+      }
     }
   }
 })

diff --git a/src/components/Modals/Rss/RuleForm.vue b/src/components/Modals/Rss/RuleForm.vue
@@ -150,13 +150,18 @@ export default defineComponent({
       this.rule = { ...this.initialRule }
     }
   },
+  mounted() {
+    document.addEventListener('keydown', this.handleKeyboardShortcut)
+  },
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.handleKeyboardShortcut)
+  },
   methods: {
     async setRule() {
       if (this.hasInitialRule && this.initialRule.name !== this.rule.name) {
         await qbit.renameRule(this.initialRule.name, this.rule.name)
       }
       await qbit.setRule(this.rule)
-      this.$toast.success(this.$t('toast.ruleSaved'))
       this.cancel()
     },
     cancel() {
@@ -165,6 +170,13 @@ export default defineComponent({
     },
     close() {
       this.dialog = false
+    },
+    handleKeyboardShortcut(e: KeyboardEvent) {
+      if (e.key === 'Escape') {
+        this.cancel()
+      } else if (e.key === 'Enter') {
+        this.setRule()
+      }
     }
   }
 })