feat: option to create group in add to group modal

2025-10-30 20:21:58 +00:00 · 2023-12-19 16:44:16 +01:00
parent ff7cc2dd3f
commit 8b4949349e
8 changed files with 93 additions and 46 deletions
--- a/renovate.json
+++ b/renovate.json
@@ -9,24 +9,16 @@
            "groupName": "unocss"
        },
        {
-            "matchPackagePrefixes": [
-                "linkify"
-            ],
+            "matchPackagePrefixes": ["linkify"],
            "groupName": "linkify"
        },
        {
-            "matchPackagePrefixes": [
-                "@vitejs/"
-            ],
-            "matchPackageNames": [
-                "vite"
-            ],
+            "matchPackagePrefixes": ["@vitejs/"],
+            "matchPackageNames": ["vite"],
            "groupName": "vite"
        },
        {
-            "matchPackagePrefixes": [
-                "@iconify-json/"
-            ],
+            "matchPackagePrefixes": ["@iconify-json/"],
            "groupName": "iconify",
            "automerge": true
        }
--- a/src/components/AddToGroupModal.vue
+++ b/src/components/AddToGroupModal.vue
@@ -1,27 +1,38 @@
 <template>
    <ModalComponent @close="$emit('close')">
-        <div class="h-[80vh] overflow-y-scroll pr-4">
-            <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 class="min-w-[50vw] flex flex-col">
+            <div class="h-[70vh] overflow-y-scroll pr-4">
+                <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>
-                <hr class="h-1 w-full" />
            </div>
+            <button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="showCreateGroupModal = true" />
        </div>
    </ModalComponent>
+
+    <CreateGroupModal
+        v-if="showCreateGroupModal"
+        :on-create-group="onCreateGroup"
+        @close="showCreateGroupModal = false"
+    />
 </template>
 <script>
 import ModalComponent from "./ModalComponent.vue";
+import CreateGroupModal from "./CreateGroupModal.vue";

 export default {
    components: {
        ModalComponent,
+        CreateGroupModal,
    },
    props: {
        channelId: {
@@ -32,6 +43,7 @@ export default {
    emits: ["close"],
    data() {
        return {
+            showCreateGroupModal: false,
            channelGroups: [],
        };
    },
@@ -51,6 +63,18 @@ export default {
            }
            this.createOrUpdateChannelGroup(group);
        },
+        onCreateGroup(newGroupName) {
+            if (!newGroupName || this.channelGroups.some(group => group.groupName == newGroupName)) return;
+
+            const newGroup = {
+                groupName: newGroupName,
+                channels: [],
+            };
+            this.channelGroups.push(newGroup);
+            this.createOrUpdateChannelGroup(newGroup);
+
+            this.showCreateGroupModal = false;
+        },
    },
 };
 </script>
--- a/src/components/ChannelPage.vue
+++ b/src/components/ChannelPage.vue
@@ -3,8 +3,8 @@

    <LoadingIndicatorPage :show-content="channel != null && !channel.error">
        <img
-            loading="lazy"
            v-if="channel.bannerUrl"
+            loading="lazy"
            :src="channel.bannerUrl"
            class="h-30 w-full object-cover py-1.5 md:h-50"
        />
--- a/src/components/ChaptersBar.vue
+++ b/src/components/ChaptersBar.vue
@@ -16,7 +16,7 @@
                <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
                <div class="m-2 flex flex-col">
                    <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
-                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                    <span class="text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
                </div>
            </div>
        </div>
@@ -42,7 +42,7 @@
                <img class="shrink-0" :src="chapter.image" :alt="chapter.title" />
                <div class="m-2 flex flex-col">
                    <span class="text-sm" :title="chapter.title" v-text="chapter.title" />
-                    <span class="text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                    <span class="text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
                </div>
            </div>
        </div>
@@ -59,7 +59,7 @@
            <img :src="chapter.image" :alt="chapter.title" />
            <div class="m-1 flex">
                <span class="text-truncate text-sm" :title="chapter.title" v-text="chapter.title" />
-                <span class="px-1 text-sm font-bold text-blue-500" v-text="timeFormat(chapter.start)" />
+                <span class="px-1 text-sm text-blue-500 font-bold" v-text="timeFormat(chapter.start)" />
            </div>
        </div>
    </div>
--- a/src/components/CollapsableText.vue
+++ b/src/components/CollapsableText.vue
@@ -7,7 +7,7 @@
        <span v-if="text.length > visibleLimit && !showFullText">...</span>
        <button
            v-if="text.length > visibleLimit"
-            class="block whitespace-normal font-semibold text-neutral-500 hover:underline"
+            class="block whitespace-normal text-neutral-500 font-semibold hover:underline"
            @click="showFullText = !showFullText"
        >
            [{{ showFullText ? $t("actions.show_less") : $t("actions.show_more") }}]
--- a/src/components/CreateGroupModal.vue
+++ b/src/components/CreateGroupModal.vue
@@ -0,0 +1,35 @@
+<template>
+    <ModalComponent @close="$emit('close')">
+        <h2 v-t="'actions.create_group'" />
+        <div class="flex flex-col">
+            <input v-model="groupName" class="input my-4" type="text" :placeholder="$t('actions.group_name')" />
+            <button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="createGroup()" />
+        </div>
+    </ModalComponent>
+</template>
+
+<script>
+import ModalComponent from "./ModalComponent.vue";
+
+export default {
+    components: { ModalComponent },
+    props: {
+        onCreateGroup: {
+            required: true,
+            type: Function,
+        },
+    },
+    emits: ["close"],
+    data() {
+        return {
+            groupName: "",
+        };
+    },
+    methods: {
+        createGroup() {
+            this.onCreateGroup(this.groupName);
+            this.$emit("close");
+        },
+    },
+};
+</script>
--- a/src/components/SubscriptionsPage.vue
+++ b/src/components/SubscriptionsPage.vue
@@ -10,7 +10,7 @@
            <!-- export to json -->
            <button v-t="'actions.export_to_json'" class="btn" @click="exportHandler" />
        </div>
-        <div class="flex gap-1 flex-wrap m-1">
+        <div class="m-1 flex flex-wrap gap-1">
            <!-- import channel groups to json-->
            <div>
                <label
@@ -35,7 +35,7 @@
                v-text="`${$t('actions.export_to_json')} (${$t('titles.channel_groups')})`"
            />
        </div>
-        <div class="flex gap-1 self-center">
+        <div class="flex self-center gap-1">
            <!-- subscriptions count, only shown if there are any  -->
            <i18n-t v-if="subscriptions.length > 0" keypath="subscriptions.subscribed_channels_count">{{
                subscriptions.length
@@ -86,13 +86,11 @@
    </div>
    <br />

-    <ModalComponent v-if="showCreateGroupModal" @close="showCreateGroupModal = !showCreateGroupModal">
-        <h2 v-t="'actions.create_group'" />
-        <div class="flex flex-col">
-            <input v-model="newGroupName" class="input my-4" type="text" :placeholder="$t('actions.group_name')" />
-            <button v-t="'actions.create_group'" class="btn ml-auto w-max" @click="createGroup()" />
-        </div>
-    </ModalComponent>
+    <CreateGroupModal
+        v-if="showCreateGroupModal"
+        :on-create-group="createGroup"
+        @close="showCreateGroupModal = false"
+    />

    <ModalComponent v-if="showEditGroupModal" @close="showEditGroupModal = false">
        <div class="mb-5 mt-3 flex justify-between">
@@ -121,9 +119,10 @@

 <script>
 import ModalComponent from "./ModalComponent.vue";
+import CreateGroupModal from "./CreateGroupModal.vue";

 export default {
-    components: { ModalComponent },
+    components: { ModalComponent, CreateGroupModal },
    data() {
        return {
            subscriptions: [],
@@ -134,7 +133,6 @@ export default {
            channelGroups: [],
            showCreateGroupModal: false,
            showEditGroupModal: false,
-            newGroupName: "",
            editedGroupName: "",
        };
    },
@@ -216,18 +214,16 @@ export default {
            this.selectedGroup = group;
            this.editedGroupName = group.groupName;
        },
-        createGroup() {
-            if (!this.newGroupName || this.channelGroups.some(group => group.groupName == this.newGroupName)) return;
+        createGroup(newGroupName) {
+            if (!newGroupName || this.channelGroups.some(group => group.groupName == newGroupName)) return;

            const newGroup = {
-                groupName: this.newGroupName,
+                groupName: newGroupName,
                channels: [],
            };
            this.channelGroups.push(newGroup);
            this.createOrUpdateChannelGroup(newGroup);

-            this.newGroupName = "";
-
            this.showCreateGroupModal = false;
        },
        editGroupName() {
--- a/src/components/VideoItem.vue
+++ b/src/components/VideoItem.vue
@@ -61,8 +61,8 @@
        <div class="flex">
            <router-link :to="item.uploaderUrl">
                <img
-                    loading="lazy"
                    v-if="item.uploaderAvatar"
+                    loading="lazy"
                    :src="item.uploaderAvatar"
                    class="mr-0.5 mt-0.5 h-32px w-32px rounded-full"
                    width="68"
@@ -81,7 +81,7 @@
                    <font-awesome-icon v-if="item.uploaderVerified" class="ml-1.5" icon="check" />
                </router-link>

-                <div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs font-normal text-gray-300">
+                <div v-if="item.views >= 0 || item.uploadedDate" class="mt-1 text-xs text-gray-300 font-normal">
                    <span v-if="item.views >= 0">
                        <font-awesome-icon icon="eye" />
                        <span class="pl-1" v-text="`${numberFormat(item.views)} •`" />