feat: option to create group in add to group modal

This commit is contained in:
Bnyro 2023-12-19 16:44:16 +01:00
parent ff7cc2dd3f
commit 8b4949349e
8 changed files with 93 additions and 46 deletions

View File

@ -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
}

View File

@ -1,6 +1,7 @@
<template>
<ModalComponent @close="$emit('close')">
<div class="h-[80vh] overflow-y-scroll pr-4">
<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">
@ -14,14 +15,24 @@
<hr class="h-1 w-full" />
</div>
</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>

View File

@ -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"
/>

View File

@ -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>

View File

@ -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") }}]

View File

@ -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>

View File

@ -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() {

View File

@ -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)} `" />