From 3275db0a378940935370f79c98f2c572dece0d4b Mon Sep 17 00:00:00 2001
From: Khusroo hayat <khusroo.hayat@gmail.com>
Date: Tue, 7 May 2024 06:57:32 +0500
Subject: [PATCH] show confirmation modal before deleting subscription group

---
 src/components/SubscriptionsPage.vue | 15 ++++++++++++---
 src/locales/en.json                  |  3 ++-
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index a4690a6a..795e3528 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -53,9 +53,16 @@
             <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>
+            <ConfirmModal
+                v-if="groupToDelete == group.groupName"
+                :message="$t('actions.delete_group_confirm')"
+                @close="groupToDelete = null"
+                @confirm="deleteGroup(group)"
+            />
         </button>
+
         <button class="btn mx-1" @click="showCreateGroupModal = true">
             <i class="i-fa6-solid:circle-plus" />
         </button>
@@ -118,9 +125,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 +140,7 @@ export default {
             showCreateGroupModal: false,
             showEditGroupModal: false,
             editedGroupName: "",
+            groupToDelete: null,
         };
     },
     computed: {
@@ -153,7 +162,6 @@ export default {
         });
 
         this.channelGroups.push(this.selectedGroup);
-
         if (!window.db) return;
 
         this.loadChannelGroups();
@@ -235,6 +243,7 @@ export default {
             this.deleteChannelGroup(group.groupName);
             this.channelGroups = this.channelGroups.filter(g => g != 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