From e1b7d8b86c5b3030a7c1e3d7874cd710327eb308 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Fri, 28 Jul 2023 18:49:16 +0200
Subject: [PATCH] Possibility to rename subscription groups

---
 src/components/SubscriptionsPage.vue | 27 +++++++++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/SubscriptionsPage.vue b/src/components/SubscriptionsPage.vue
index 081fc6f8..9430cee1 100644
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -21,7 +21,7 @@
             :key="group.groupName"
             class="btn mx-1 w-max"
             :class="{ selected: selectedGroup === group }"
-            @click="selectedGroup = group"
+            @click="selectGroup(group)"
         >
             <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
             <div v-if="group.groupName != '' && selectedGroup == group">
@@ -66,7 +66,10 @@
     </ModalComponent>
 
     <ModalComponent v-if="showEditGroupModal" @close="showEditGroupModal = false">
-        <h2>{{ selectedGroup.groupName }}</h2>
+        <div class="flex justify-between mt-3 mb-5">
+            <input v-model="editedGroupName" type="text" class="input" />
+            <button v-t="'actions.okay'" class="btn" :placeholder="$t('actions.group_name')" @click="editGroupName()" />
+        </div>
         <div class="flex flex-col mt-3 mb-2 overflow-y-scroll h-70">
             <div v-for="subscription in subscriptions" :key="subscription.name">
                 <div class="flex justify-between mr-3">
@@ -100,6 +103,7 @@ export default {
             showCreateGroupModal: false,
             showEditGroupModal: false,
             newGroupName: "",
+            editedGroupName: "",
         };
     },
     computed: {
@@ -182,6 +186,10 @@ export default {
             });
             this.download(json, "subscriptions.json", "application/json");
         },
+        selectGroup(group) {
+            this.selectedGroup = group;
+            this.editedGroupName = group.groupName;
+        },
         createGroup() {
             if (!this.newGroupName || this.channelGroups.some(group => group.groupName == this.newGroupName)) return;
 
@@ -196,6 +204,21 @@ export default {
 
             this.showCreateGroupModal = false;
         },
+        editGroupName() {
+            const oldGroupName = this.selectedGroup.groupName;
+            const newGroupName = this.editedGroupName;
+
+            // the group mustn't yet exist and the name can't be empty
+            if (!newGroupName || newGroupName == oldGroupName) return;
+            if (this.channelGroups.some(group => group.groupName == newGroupName)) return;
+
+            // create a new group with the same info and delete the old one
+            this.selectedGroup.groupName = newGroupName;
+            this.createOrUpdateChannelGroup(this.selectedGroup);
+            this.deleteChannelGroup(oldGroupName);
+
+            this.showEditGroupModal = false;
+        },
         deleteGroup(group) {
             this.deleteChannelGroup(group.groupName);
             this.channelGroups = this.channelGroups.filter(g => g != group);