TeamPiped-mirror/Piped
1
0
Fork 0
mirror of https://github.com/TeamPiped/Piped.git synced 2024-08-14 23:57:27 +00:00
Code Issues Projects Releases Packages Wiki Activity

Possibility to rename subscription groups

Browse source
This commit is contained in:
Bnyro 2023-07-28 18:49:16 +02:00
parent c0d60c7f8e
commit e1b7d8b86c
1 changed files with 25 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/SubscriptionsPage.vue
View file

@ -21,7 +21,7 @@
:key="group.groupName" :key="group.groupName"
class="btn mx-1 w-max" class="btn mx-1 w-max"
:class="{ selected: selectedGroup === group }" :class="{ selected: selectedGroup === group }"
@click="selectedGroup = group" @click="selectGroup(group)"
> >
<span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" /> <span v-text="group.groupName !== '' ? group.groupName : $t('video.all')" />
<div v-if="group.groupName != '' && selectedGroup == group"> <div v-if="group.groupName != '' && selectedGroup == group">
@ -66,7 +66,10 @@
</ModalComponent> </ModalComponent>
<ModalComponent v-if="showEditGroupModal" @close="showEditGroupModal = false"> <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 class="flex flex-col mt-3 mb-2 overflow-y-scroll h-70">
<div v-for="subscription in subscriptions" :key="subscription.name"> <div v-for="subscription in subscriptions" :key="subscription.name">
<div class="flex justify-between mr-3"> <div class="flex justify-between mr-3">
@ -100,6 +103,7 @@ export default {
showCreateGroupModal: false, showCreateGroupModal: false,
showEditGroupModal: false, showEditGroupModal: false,
newGroupName: "", newGroupName: "",
editedGroupName: "",
}; };
}, },
computed: { computed: {
@ -182,6 +186,10 @@ export default {
}); });
this.download(json, "subscriptions.json", "application/json"); this.download(json, "subscriptions.json", "application/json");
}, },
selectGroup(group) {
this.selectedGroup = group;
this.editedGroupName = group.groupName;
},
createGroup() { createGroup() {
if (!this.newGroupName || this.channelGroups.some(group => group.groupName == this.newGroupName)) return; if (!this.newGroupName || this.channelGroups.some(group => group.groupName == this.newGroupName)) return;
@ -196,6 +204,21 @@ export default {
this.showCreateGroupModal = false; 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) { deleteGroup(group) {
this.deleteChannelGroup(group.groupName); this.deleteChannelGroup(group.groupName);
this.channelGroups = this.channelGroups.filter(g => g != group); this.channelGroups = this.channelGroups.filter(g => g != group);