Subscription groups

src/components/SubscriptionsPage.vue

@@ -15,12 +15,32 @@
     </div>
     <br />
     <hr />
+    <div class="w-full flex flex-wrap">
+        <button
+            v-for="group in channelGroups"
+            class="btn mx-1 w-max"
+            :class="{ selected: selectedGroup === group }"
+            :key="group.groupName"
+            @click="selectedGroup = group"
+        >
+            <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
+            <div v-if="group.groupName != '' && selectedGroup == group">
+                <font-awesome-icon class="mx-2" icon="edit" @click="showEditGroupModal = true" />
+                <font-awesome-icon class="mx-2" icon="circle-minus" @click="deleteGroup(group)" />
+            </div>
+        </button>
+        <button class="btn mx-1">
+            <font-awesome-icon icon="circle-plus" @click="showCreateGroupModal = true" />
+        </button>
+    </div>
+    <br />
+    <hr />
     <!-- Subscriptions card list -->
     <div class="xl:grid xl:grid-cols-5 <md:flex-wrap">
         <!-- channel info card -->
         <div
             class="col m-2 p-1 border rounded-lg border-gray-500"
-            v-for="subscription in subscriptions"
+            v-for="subscription in filteredSubscriptions"
             :key="subscription.url"
         >
             <router-link :to="subscription.url" class="flex p-2 font-bold text-4x4">
@@ -36,13 +56,48 @@
         </div>
     </div>
     <br />
+
+    <ModalComponent v-if="showCreateGroupModal" @close="showCreateGroupModal = !showCreateGroupModal">
+        <h2 v-t="'actions.create_group'" />
+        <div class="flex flex-col">
+            <input class="input my-4" type="text" v-model="newGroupName" :placeholder="$t('actions.group_name')" />
+            <button class="ml-auto btn w-max" v-t="'actions.create_group'" @click="createGroup()" />
+        </div>
+    </ModalComponent>
+
+    <ModalComponent v-if="showEditGroupModal" @close="showEditGroupModal = false">
+        <h2>{{ selectedGroup.groupName }}</h2>
+        <div class="flex flex-col mt-3 mb-2">
+            <div v-for="subscription in subscriptions" :key="subscription.name">
+                <div class="flex justify-between">
+                    <span>{{ subscription.name }}</span>
+                    <DefaultValueCheckbox
+                        :default-value="selectedGroup.channels.includes(subscription.url.substr(-11))"
+                        :callback="() => checkedChange(subscription)"
+                    />
+                </div>
+                <hr />
+            </div>
+        </div>
+    </ModalComponent>
 </template>
 
 <script>
+import DefaultValueCheckbox from "./DefaultValueCheckbox.vue";
+import ModalComponent from "./ModalComponent.vue";
+
 export default {
     data() {
         return {
             subscriptions: [],
+            selectedGroup: {
+                groupName: "",
+                channels: [],
+            },
+            channelGroups: [],
+            showCreateGroupModal: false,
+            showEditGroupModal: false,
+            newGroupName: "",
         };
     },
     mounted() {
@@ -50,6 +105,21 @@ export default {
             this.subscriptions = json;
             this.subscriptions.forEach(subscription => (subscription.subscribed = true));
         });
+
+        this.channelGroups = this.channelGroups.concat(this.selectedGroup);
+
+        if (!window.db) return;
+        const cursor = this.getChannelGroupsCursor();
+        cursor.onsuccess = e => {
+            const cursor = e.target.result;
+            if (cursor) {
+                const group = cursor.value;
+                this.channelGroups = this.channelGroups.concat({
+                    groupName: group.groupName,
+                    channels: JSON.parse(group.channels),
+                });
+            }
+        };
     },
     activated() {
         document.title = "Subscriptions - Piped";
@@ -88,7 +158,6 @@ export default {
         },
         exportHandler() {
             const subscriptions = [];
-
             this.subscriptions.forEach(subscription => {
                 subscriptions.push({
                     url: "https://www.youtube.com" + subscription.url,
@@ -96,15 +165,53 @@ export default {
                     service_id: 0,
                 });
             });
-
             const json = JSON.stringify({
                 app_version: "",
                 app_version_int: 0,
                 subscriptions: subscriptions,
             });
-
             this.download(json, "subscriptions.json", "application/json");
         },
+        createGroup() {
+            if (!this.newGroupName || this.channelGroups.some(group => group.groupName == this.newGroupName)) return;
+
+            const newGroup = {
+                groupName: this.newGroupName,
+                channels: [],
+            };
+            this.channelGroups = this.channelGroups.concat(newGroup);
+            this.createOrUpdateChannelGroup(newGroup);
+
+            this.newGroupName = "";
+
+            this.showCreateGroupModal = false;
+        },
+        deleteGroup(group) {
+            this.deleteChannelGroup(group.groupName);
+            this.channelGroups = this.channelGroups.filter(g => g != group);
+            this.selectedGroup = this.channelGroups[0];
+        },
+        checkedChange(subscription) {
+            const channelId = subscription.url.substr(-11);
+            this.selectedGroup.channels = this.selectedGroup.channels.includes(channelId)
+                ? this.selectedGroup.channels.filter(channel => channel != channelId)
+                : this.selectedGroup.channels.concat(channelId);
+            this.createOrUpdateChannelGroup(this.selectedGroup);
+        },
     },
+    computed: {
+        filteredSubscriptions(_this) {
+            return _this.selectedGroup.groupName == ""
+                ? _this.subscriptions
+                : _this.subscriptions.filter(channel => _this.selectedGroup.channels.includes(channel.url.substr(-11)));
+        },
+    },
+    components: { ModalComponent, DefaultValueCheckbox },
 };
 </script>
+
+<style>
+.selected {
+    border: 0.1rem outset red;
+}
+</style>