Merge pull request #2950 from Bnyro/add-to-group-modal

feat: add to channel group modal on channel page

src/components/AddToGroupModal.vue

@@ -0,0 +1,54 @@
+<template>
+    <ModalComponent @close="$emit('close')">
+        <span v-t="'actions.add_to_group'" class="mb-3 inline-block w-max text-2xl" />
+        <div v-for="(group, index) in channelGroups" :key="group.groupName" class="px-1">
+            <div class="flex items-center justify-between">
+                <span>{{ group.groupName }}</span>
+                <input
+                    type="checkbox"
+                    :checked="group.channels.includes(channelId)"
+                    @change="onCheckedChange(index, group)"
+                />
+            </div>
+            <hr class="h-1 w-full" />
+        </div>
+    </ModalComponent>
+</template>
+<script>
+import ModalComponent from "./ModalComponent.vue";
+
+export default {
+    components: {
+        ModalComponent,
+    },
+    props: {
+        channelId: {
+            type: String,
+            required: true,
+        },
+    },
+    emits: ["close"],
+    data() {
+        return {
+            channelGroups: [],
+        };
+    },
+    mounted() {
+        this.loadChannelGroups();
+    },
+    methods: {
+        async loadChannelGroups() {
+            const groups = await this.getChannelGroups();
+            this.channelGroups.push(...groups);
+        },
+        onCheckedChange(index, group) {
+            if (group.channels.includes(this.channelId)) {
+                group.channels.splice(index, 1);
+            } else {
+                group.channels.push(this.channelId);
+            }
+            this.createOrUpdateChannelGroup(group);
+        },
+    },
+};
+</script>

src/components/ChannelPage.vue

@@ -27,6 +27,13 @@
                     @click="subscribeHandler"
                 ></button>
 
+                <button
+                    v-if="subscribed"
+                    v-t="'actions.add_to_group'"
+                    class="btn"
+                    @click="showGroupModal = true"
+                ></button>
+
                 <!-- RSS Feed button -->
                 <a
                     v-if="channel.id"
@@ -70,6 +77,8 @@
                 hide-channel
             />
         </div>
+
+        <AddToGroupModal v-if="showGroupModal" :channel-id="channel.id.substr(-11)" @close="showGroupModal = false" />
     </LoadingIndicatorPage>
 </template>
 
@@ -79,6 +88,7 @@ import ContentItem from "./ContentItem.vue";
 import WatchOnButton from "./WatchOnButton.vue";
 import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import CollapsableText from "./CollapsableText.vue";
+import AddToGroupModal from "./AddToGroupModal.vue";
 
 export default {
     components: {
@@ -87,6 +97,7 @@ export default {
         WatchOnButton,
         LoadingIndicatorPage,
         CollapsableText,
+        AddToGroupModal,
     },
     data() {
         return {
@@ -95,6 +106,7 @@ export default {
             tabs: [],
             selectedTab: 0,
             contentItems: [],
+            showGroupModal: false,
         };
     },
     mounted() {

src/components/FeedPage.vue

@@ -99,18 +99,7 @@ export default {
 
         if (!window.db) return;
 
-        const cursor = this.getChannelGroupsCursor();
+        this.loadChannelGroups();
-        cursor.onsuccess = e => {
-            const cursor = e.target.result;
-            if (cursor) {
-                const group = cursor.value;
-                this.channelGroups.push({
-                    groupName: group.groupName,
-                    channels: JSON.parse(group.channels),
-                });
-                cursor.continue();
-            }
-        };
     },
     activated() {
         document.title = this.$t("titles.feed") + " - Piped";
@@ -135,6 +124,10 @@ export default {
                 });
             }
         },
+        async loadChannelGroups() {
+            const groups = await this.getChannelGroups();
+            this.channelGroups.push(...groups);
+        },
         loadMoreVideos() {
             if (!this.videosStore) return;
             this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);

src/components/SubscriptionsPage.vue

@@ -143,18 +143,8 @@ export default {
         this.channelGroups.push(this.selectedGroup);
 
         if (!window.db) return;
-        const cursor = this.getChannelGroupsCursor();
+
-        cursor.onsuccess = e => {
+        this.loadChannelGroups();
-            const cursor = e.target.result;
-            if (cursor) {
-                const group = cursor.value;
-                this.channelGroups.push({
-                    groupName: group.groupName,
-                    channels: JSON.parse(group.channels),
-                });
-                cursor.continue();
-            }
-        };
     },
     activated() {
         document.title = "Subscriptions - Piped";
@@ -173,6 +163,10 @@ export default {
                 });
             }
         },
+        async loadChannelGroups() {
+            const groups = await this.getChannelGroups();
+            this.channelGroups.push(...groups);
+        },
         handleButton(subscription) {
             const channelId = subscription.url.split("/")[2];
             if (this.authenticated) {

src/locales/en.json

@@ -147,7 +147,8 @@
         "show_search_suggestions": "Show search suggestions",
         "delete_automatically": "Delete automatically after",
         "generate_qrcode": "Generate QR Code",
-        "download_frame": "Download frame"
+        "download_frame": "Download frame",
+        "add_to_group": "Add to group"
     },
     "comment": {
         "pinned_by": "Pinned by {author}",

src/main.js

@@ -247,11 +247,26 @@ const mixin = {
             elem.click();
             elem.remove();
         },
-        getChannelGroupsCursor() {
+        async getChannelGroups() {
-            if (!window.db) return;
+            return new Promise(resolve => {
+                let channelGroups = [];
                 var tx = window.db.transaction("channel_groups", "readonly");
                 var store = tx.objectStore("channel_groups");
-            return store.index("groupName").openCursor();
+                const cursor = store.index("groupName").openCursor();
+                cursor.onsuccess = e => {
+                    const cursor = e.target.result;
+                    if (cursor) {
+                        const group = cursor.value;
+                        channelGroups.push({
+                            groupName: group.groupName,
+                            channels: JSON.parse(group.channels),
+                        });
+                        cursor.continue();
+                    } else {
+                        resolve(channelGroups);
+                    }
+                };
+            });
         },
         createOrUpdateChannelGroup(group) {
             var tx = window.db.transaction("channel_groups", "readwrite");