fix(dashboard): Not able to delete torrent in certain cases (#975)

src/components/Modals/ChangeLocationModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" scrollable :width="dialogWidth" :fullscreen="isPhone">
+  <v-dialog v-model="dialog" scrollable :width="dialogWidth" :fullscreen="isPhone" @input="close">
     <v-card>
       <v-card-title class="pa-0">
         <v-toolbar-title class="ma-4 primarytext--text">
@@ -37,17 +37,18 @@
   </v-dialog>
 </template>
 
-<script>
-import { mapGetters } from 'vuex'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mapGetters, mapState } from 'vuex'
 import { mdiClose, mdiFile, mdiFolder } from '@mdi/js'
 import { FullScreenModal, Modal } from '@/mixins'
 import qbit from '@/services/qbit'
 
-export default {
+export default defineComponent({
   name: 'ChangeLocationModal',
   mixins: [Modal, FullScreenModal],
   props: {
-    hashes: Array
+    hashes: Array<string>
   },
   data() {
     return {
@@ -58,6 +59,7 @@ export default {
     }
   },
   computed: {
+    ...mapState(['selectMode']),
     ...mapGetters(['getTorrent', 'getSettings']),
     dialogWidth() {
       return this.phoneLayout ? '100%' : '750px'
@@ -79,8 +81,10 @@ export default {
     },
     close() {
       this.dialog = false
-      //this.$store.commit('DELETE_MODAL', this.guid)
+      if (!this.selectMode) {
+        this.$store.commit('RESET_SELECTED')
+      }
     }
   }
-}
+})
 </script>

src/components/Modals/ConfirmDeleteModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-dialog v-model="dialog" scrollable content-class="rounded-form" max-width="600px">
+  <v-dialog v-model="dialog" scrollable content-class="rounded-form" max-width="600px" @input="close">
     <v-card class="pa-2">
       <v-card-title class="pa-0">
         <v-toolbar-title class="mx-4 mt-2">
@@ -30,34 +30,45 @@
   </v-dialog>
 </template>
 
-<script>
-import { mapState, mapGetters } from 'vuex'
-import Modal from '@/mixins/Modal'
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { mapGetters, mapState } from 'vuex'
 import qbit from '@/services/qbit'
-export default {
+import {FullScreenModal, Modal} from '@/mixins'
+import {Torrent} from '@/models'
+import WebUISettings from '@/types/vuetorrent/WebUISettings'
+
+export default defineComponent({
   name: 'ConfirmDeleteModal',
-  mixins: [Modal],
+  props: {
+    hashes: Array<string>
+  },
+  mixins: [Modal, FullScreenModal],
   computed: {
-    ...mapState(['selected_torrents']),
+    ...mapState(['selectMode']),
     ...mapGetters(['getTorrents', 'getWebuiSettings']),
-    torrents() {
-      return this.getTorrents().filter(t => this.selected_torrents.includes(t.hash))
+    selection(): string[] {
+      return this.hashes ?? []
     },
-    settings() {
+    torrents(): Torrent[] {
+      return (this.getTorrents() as Torrent[]).filter(t => this.selection.includes(t.hash))
+    },
+    settings(): WebUISettings {
       return this.getWebuiSettings()
     }
   },
-  beforeDestroy() {
-    this.$store.state.selected_torrents = []
-  },
   methods: {
     close() {
       this.dialog = false
+      if (!this.selectMode) {
+        this.$store.commit('RESET_SELECTED')
+      }
     },
     async deleteTorrent() {
-      await qbit.deleteTorrents(this.selected_torrents, this.settings.deleteWithFiles)
+      await qbit.deleteTorrents(this.selection, this.settings.deleteWithFiles)
+      this.$store.commit('RESET_SELECTED')
       this.close()
     }
   }
-}
+})
 </script>

src/components/Modals/RenameTorrentModal.vue

@@ -7,6 +7,7 @@
     :fullscreen="phoneLayout"
     @keydown.enter.prevent="rename"
     @keydown.esc.prevent="close"
+    @input="close"
   >
     <v-card>
       <v-card-title class="pa-0">
@@ -37,7 +38,7 @@
 </template>
 
 <script lang="ts">
-import { mapGetters } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import Modal from '@/mixins/Modal'
 import { mdiFile } from '@mdi/js'
 import { FullScreenModal } from '@/mixins'
@@ -53,11 +54,11 @@ export default defineComponent({
   data() {
     return {
       name: '',
-
       mdiFile
     }
   },
   computed: {
+    ...mapState(['selectMode']),
     ...mapGetters(['getTorrent']),
     torrent() {
       return this.getTorrent(this.hash)
@@ -74,11 +75,14 @@ export default defineComponent({
   },
   methods: {
     async rename() {
-      await qbit.setTorrentName(this.hash, this.name)
+      await qbit.setTorrentName(this.hash as string, this.name)
       this.close()
     },
     close() {
       this.dialog = false
+      if (!this.selectMode) {
+        this.$store.commit('RESET_SELECTED')
+      }
     }
   }
 })

src/components/Navbar/TopActions.vue

@@ -138,7 +138,7 @@ export default {
     removeTorrents() {
       if (!this.selected_torrents.length) return
 
-      return this.createModal('ConfirmDeleteModal')
+      return this.createModal('ConfirmDeleteModal', { hashes: this.selected_torrents })
     },
     goToSearch() {
       if (this.$route.name !== 'search') this.$router.push({ name: 'search' })

src/components/Torrent/TorrentRightClickMenu.vue

@@ -394,7 +394,7 @@ export default {
       await qbit.pauseTorrents(this.hashes)
     },
     location() {
-      this.createModal('ChangeLocationModal', { hashes: this.multiple ? this.selected_torrents : [this.hash] })
+      this.createModal('ChangeLocationModal', { hashes: this.hashes })
     },
     rename() {
       this.createModal('RenameTorrentModal', { hash: this.hash })
@@ -403,9 +403,7 @@ export default {
       await qbit.reannounceTorrents(this.hashes)
     },
     removeTorrent() {
-      this.$store.state.selected_torrents = this.hashes
-
-      return this.createModal('ConfirmDeleteModal')
+      return this.createModal('ConfirmDeleteModal', { hashes: this.hashes })
     },
     async recheck() {
       await qbit.recheckTorrents(this.hashes)

src/views/Dashboard.vue

@@ -243,7 +243,7 @@ export default {
   },
   computed: {
     ...mapState(['selected_torrents', 'dashboard', 'sort_options']),
-    ...mapGetters(['getTorrents', 'getTorrentCountString', 'getWebuiSettings']),
+    ...mapGetters(['getModals', 'getTorrents', 'getTorrentCountString', 'getWebuiSettings']),
     torrents() {
       let torrents
       if (!this.hasSearchFilter) torrents = this.getTorrents()
@@ -402,7 +402,7 @@ export default {
       })
     },
     hideTorrentRightClickMenu(e) {
-      if (!this.selectMode) {
+      if (!this.selectMode && this.getModals().length === 0) {
         this.resetSelected()
       }
 
@@ -411,7 +411,7 @@ export default {
       })
     },
     detectDragEnter() {
-      if (this.selected_torrents.length === 0 && this.$store.state.modals.length < 1) {
+      if (this.selected_torrents.length === 0 && this.getModals().length < 1) {
         this.createModal('AddModal', { openSuddenly: true })
       }
 
@@ -447,7 +447,7 @@ export default {
       return (this.$store.state.selected_torrents = hashes)
     },
     handleKeyboardShortcut(e) {
-      if (this.$store.state.modals.length > 0) {
+      if (this.getModals().length > 0) {
         //e.preventDefault()
 
         return null
@@ -482,7 +482,7 @@ export default {
         // no torrents select to delete
         if (!this.selected_torrents.length) return
 
-        return this.createModal('ConfirmDeleteModal')
+        return this.createModal('ConfirmDeleteModal', { hashes: this.hashes })
       }
 
       // 'Search' => Search view