From f6cb6842ebd556068412f568802253d70883e6ff Mon Sep 17 00:00:00 2001
From: Khusroo Hayat <khusroo.hayat@gmail.com>
Date: Wed, 8 May 2024 19:56:24 +0500
Subject: [PATCH] feat: show confirmation modal before deleting subscription
 group (#3596)

---
 src/components/SubscriptionsPage.vue | 20 ++++++++++++++------
 src/locales/en.json                  |  3 ++-
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index a4690a6a..0fdce6bf 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -53,9 +53,15 @@
             <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
             <div v-if="group.groupName != '' && selectedGroup == group">
                 <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>
         </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">
             <i class="i-fa6-solid:circle-plus" />
         </button>
@@ -118,9 +124,10 @@
 <script>
 import ModalComponent from "./ModalComponent.vue";
 import CreateGroupModal from "./CreateGroupModal.vue";
+import ConfirmModal from "./ConfirmModal.vue";
 
 export default {
-    components: { ModalComponent, CreateGroupModal },
+    components: { ModalComponent, CreateGroupModal, ConfirmModal },
     data() {
         return {
             subscriptions: [],
@@ -132,6 +139,7 @@ export default {
             showCreateGroupModal: false,
             showEditGroupModal: false,
             editedGroupName: "",
+            groupToDelete: null,
         };
     },
     computed: {
@@ -153,7 +161,6 @@ export default {
         });
 
         this.channelGroups.push(this.selectedGroup);
-
         if (!window.db) return;
 
         this.loadChannelGroups();
@@ -232,9 +239,10 @@ export default {
             this.showEditGroupModal = false;
         },
         deleteGroup(group) {
-            this.deleteChannelGroup(group.groupName);
-            this.channelGroups = this.channelGroups.filter(g => g != group);
-            this.selectedGroup = this.channelGroups[0];
+            this.deleteChannelGroup(group);
+            this.channelGroups = this.channelGroups.filter(g => g.groupName != group);
+            this.selectedGroup = this.channelGroups[0] || {};
+            this.groupToDelete = null;
         },
         checkedChange(subscription) {
             const channelId = subscription.url.substr(-24);
diff --git a/src/locales/en.json b/src/locales/en.json
index b1e6ee06..3a0ad493 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -101,6 +101,7 @@
         "delete_playlist": "Delete Playlist",
         "select_playlist": "Select a Playlist",
         "delete_playlist_confirm": "Delete this playlist?",
+        "delete_group_confirm": "Delete this group?",
         "please_select_playlist": "Please select a playlist",
         "delete_account": "Delete Account",
         "logout": "Logout from this device",
@@ -226,4 +227,4 @@
         "register_note": "Register an account for this Piped instance. This will allow you to sync your subscriptions and playlists with your account, so they're stored on the server side. You can use all features without an account, but all data will be stored in your browser's local cache. Please make sure you do NOT use an email address as your username and choose a secure password that you do not use elsewhere.",
         "login_note": "Log in with an account created on this instance."
     }
-}
+}
\ No newline at end of file