feat: show confirmation modal before deleting subscription group (#3596)

This commit is contained in:
Khusroo Hayat 2024-05-08 19:56:24 +05:00 committed by GitHub
parent 0552875cab
commit f6cb6842eb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 7 deletions

View file

@ -53,9 +53,15 @@
<span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" /> <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
<div v-if="group.groupName != '' && selectedGroup == group"> <div v-if="group.groupName != '' && selectedGroup == group">
<i class="i-fa6-solid:pen mx-2" @click="showEditGroupModal = true" /> <i class="i-fa6-solid:pen mx-2" @click="showEditGroupModal = true" />
<i class="i-fa6-solid:circle-minus mx-2" @click="deleteGroup(group)" /> <i class="i-fa6-solid:circle-minus mx-2" @click="groupToDelete = group.groupName" />
</div> </div>
</button> </button>
<ConfirmModal
v-if="groupToDelete != null"
:message="$t('actions.delete_group_confirm')"
@close="groupToDelete = null"
@confirm="deleteGroup(groupToDelete)"
/>
<button class="btn mx-1" @click="showCreateGroupModal = true"> <button class="btn mx-1" @click="showCreateGroupModal = true">
<i class="i-fa6-solid:circle-plus" /> <i class="i-fa6-solid:circle-plus" />
</button> </button>
@ -118,9 +124,10 @@
<script> <script>
import ModalComponent from "./ModalComponent.vue"; import ModalComponent from "./ModalComponent.vue";
import CreateGroupModal from "./CreateGroupModal.vue"; import CreateGroupModal from "./CreateGroupModal.vue";
import ConfirmModal from "./ConfirmModal.vue";
export default { export default {
components: { ModalComponent, CreateGroupModal }, components: { ModalComponent, CreateGroupModal, ConfirmModal },
data() { data() {
return { return {
subscriptions: [], subscriptions: [],
@ -132,6 +139,7 @@ export default {
showCreateGroupModal: false, showCreateGroupModal: false,
showEditGroupModal: false, showEditGroupModal: false,
editedGroupName: "", editedGroupName: "",
groupToDelete: null,
}; };
}, },
computed: { computed: {
@ -153,7 +161,6 @@ export default {
}); });
this.channelGroups.push(this.selectedGroup); this.channelGroups.push(this.selectedGroup);
if (!window.db) return; if (!window.db) return;
this.loadChannelGroups(); this.loadChannelGroups();
@ -232,9 +239,10 @@ export default {
this.showEditGroupModal = false; this.showEditGroupModal = false;
}, },
deleteGroup(group) { deleteGroup(group) {
this.deleteChannelGroup(group.groupName); this.deleteChannelGroup(group);
this.channelGroups = this.channelGroups.filter(g => g != group); this.channelGroups = this.channelGroups.filter(g => g.groupName != group);
this.selectedGroup = this.channelGroups[0]; this.selectedGroup = this.channelGroups[0] || {};
this.groupToDelete = null;
}, },
checkedChange(subscription) { checkedChange(subscription) {
const channelId = subscription.url.substr(-24); const channelId = subscription.url.substr(-24);

View file

@ -101,6 +101,7 @@
"delete_playlist": "Delete Playlist", "delete_playlist": "Delete Playlist",
"select_playlist": "Select a Playlist", "select_playlist": "Select a Playlist",
"delete_playlist_confirm": "Delete this playlist?", "delete_playlist_confirm": "Delete this playlist?",
"delete_group_confirm": "Delete this group?",
"please_select_playlist": "Please select a playlist", "please_select_playlist": "Please select a playlist",
"delete_account": "Delete Account", "delete_account": "Delete Account",
"logout": "Logout from this device", "logout": "Logout from this device",