Skip to content

Commit

Permalink
feat: use confirmation modal when deleting from context menu #191
Browse files Browse the repository at this point in the history
  • Loading branch information
@WDaan
WDaan committed Apr 4, 2021
1 parent dfd10be commit 53c548b
Show file tree
Hide file tree
Showing 3 changed files with 13 additions and 24 deletions.
1 change: 1 addition & 0 deletions src/components/Modals/ConfirmDeleteModal.vue
View file
Expand Up @@ -64,6 +64,7 @@ export default {
},
methods: {
close() {
this.$store.state.selected_torrents = []
this.$store.commit('DELETE_MODAL', this.guid)
},
deleteWithoutFiles() {
Expand Down
8 changes: 4 additions & 4 deletions src/components/Modals/TorrentDetailModal/Tabs/Peers.vue
View file
Expand Up @@ -95,10 +95,13 @@ export default {
},
created() {
this.getTorrentPeers()
this.refreshTimer = setInterval(function(){
this.refreshTimer = setInterval(function () {
this.getTorrentPeers()
}.bind(this), 2000)
},
beforeDestroy() {
clearTimeout(this.refreshTimer)
},
methods: {
codeToFlag(val) {
return codeToFlag(val)
Expand All @@ -116,9 +119,6 @@ export default {
this.peersObj = data.peers
}
},
beforeDestroy() {
clearTimeout(this.refreshTimer)
}
}
</script>
Expand Down
28 changes: 8 additions & 20 deletions src/components/Torrent/TorrentRightClickMenu.vue
View file
Expand Up @@ -29,7 +29,7 @@
</v-list-item>

<v-divider />
<v-list-item link @click="deleteWithoutFiles">
<v-list-item link @click="removeTorrent">
<v-icon color="red">
{{ mdiDelete }}
</v-icon>
Expand All @@ -40,17 +40,6 @@
Delete
</v-list-item-title>
</v-list-item>
<v-list-item link @click="deleteWithFiles">
<v-icon color="red">
{{ mdiDeleteForever }}
</v-icon>
<v-list-item-title
class="ml-2 red--text"
style="font-size: 1em;"
>
Delete with files
</v-list-item-title>
</v-list-item>
<v-divider />
<v-menu
open-on-hover
Expand Down Expand Up @@ -241,7 +230,7 @@ import qbit from '@/services/qbit'
import { General, TorrentSelect } from '@/mixins'
import {
mdiBullhorn, mdiPlaylistCheck, mdiArrowUp, mdiArrowDown, mdiPriorityLow,
mdiInformation, mdiDeleteForever, mdiRenameBox, mdiFolder, mdiDelete,
mdiInformation, mdiRenameBox, mdiFolder, mdiDelete,
mdiPlay, mdiPause, mdiSelect, mdiPriorityHigh, mdiChevronRight,
mdiFastForward, mdiShape, mdiHeadCog, mdiCheckboxMarked, mdiCheckboxBlankOutline,
mdiSpeedometerSlow, mdiChevronUp, mdiChevronDown
Expand All @@ -261,7 +250,7 @@ export default {
{ name: 'bottom', icon: mdiPriorityLow, action: 'bottomPrio' }
],
mdiDelete, mdiPlay, mdiPause, mdiSelect, mdiFastForward,
mdiFolder, mdiRenameBox, mdiDeleteForever, mdiInformation,
mdiFolder, mdiRenameBox, mdiInformation,
mdiPlaylistCheck, mdiPriorityHigh, mdiBullhorn, mdiChevronRight,
mdiShape, mdiHeadCog, mdiCheckboxMarked, mdiCheckboxBlankOutline,
mdiSpeedometerSlow, mdiChevronUp, mdiChevronDown
Expand All @@ -284,7 +273,7 @@ export default {
return [this.torrent.hash]
},
multiple() {
return this.selected_torrents.length
return this.selected_torrents.length > 1
}
},
methods: {
Expand All @@ -303,11 +292,10 @@ export default {
reannounce() {
qbit.reannounceTorrents(this.hashes)
},
deleteWithoutFiles() {
qbit.deleteTorrents(this.hashes, false)
},
deleteWithFiles() {
qbit.deleteTorrents(this.hashes, true)
removeTorrent() {
this.$store.state.selected_torrents = this.hashes
return this.createModal('ConfirmDeleteModal')
},
recheck() {
qbit.recheckTorrents(this.hashes)
Expand Down

7 comments on commit 53c548b

@m4ximuel
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.$store.state.selectMode = true
need this

@WDaan
Copy link
Collaborator Author

@WDaan WDaan commented on 53c548b Apr 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why? You don't want to trigger select-mode when trying to delete 1 torrent?

@m4ximuel
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this.$store.state.selectMode = true
need this

There is some kind of UI bug where a list is selected but not displayed.
The best way is to return the selected list to its previous state when the 'ConfirmDeleteModal' modal is closed. However, there are many variables and it gets complicated.

@m4ximuel
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or, when creating 'ComfirmDeleteModal', pass the hash value, and if there is a prop value in the 'ComfirmDeleteModal' modal, can make it work based on the prop value.

@WDaan
Copy link
Collaborator Author

@WDaan WDaan commented on 53c548b Apr 4, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Those modals have been a pain since the start 😭

Idealy I would like to refactor them to make them 'promise-based'. So I can instantiate them like a function (with props) en wait for it's response. That way the behavior is way more predictable throughout the app. Sadly, I still haven't found a nice way to do this yet.

@m4ximuel
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel better about the current way it goes smoothly without waiting for a response.
nah I didn't see the code 'this.$store.state.selected_torrents = []'
Forget about my initial opinion. It seems to be the perfect way in terms of user feedback.

@m4ximuel
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since the user's request is completed by'ComfirmDeleteModal', I think positive to clearing all selected lists.

Please sign in to comment.