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

feat: add to channel group modal on channel page
This commit is contained in:
Bnyro 2023-09-17 16:19:07 +02:00 committed by GitHub
commit 615f1e64d7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 99 additions and 30 deletions

View File

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

View File

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

View File

@ -99,18 +99,7 @@ export default {
if (!window.db) return; 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() { activated() {
document.title = this.$t("titles.feed") + " - Piped"; 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() { loadMoreVideos() {
if (!this.videosStore) return; if (!this.videosStore) return;
this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length); this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);

View File

@ -143,18 +143,8 @@ export default {
this.channelGroups.push(this.selectedGroup); this.channelGroups.push(this.selectedGroup);
if (!window.db) return; 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() { activated() {
document.title = "Subscriptions - Piped"; document.title = "Subscriptions - Piped";
@ -173,6 +163,10 @@ export default {
}); });
} }
}, },
async loadChannelGroups() {
const groups = await this.getChannelGroups();
this.channelGroups.push(...groups);
},
handleButton(subscription) { handleButton(subscription) {
const channelId = subscription.url.split("/")[2]; const channelId = subscription.url.split("/")[2];
if (this.authenticated) { if (this.authenticated) {

View File

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

View File

@ -247,11 +247,26 @@ const mixin = {
elem.click(); elem.click();
elem.remove(); elem.remove();
}, },
getChannelGroupsCursor() { async getChannelGroups() {
if (!window.db) return; return new Promise(resolve => {
let channelGroups = [];
var tx = window.db.transaction("channel_groups", "readonly"); var tx = window.db.transaction("channel_groups", "readonly");
var store = tx.objectStore("channel_groups"); 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) { createOrUpdateChannelGroup(group) {
var tx = window.db.transaction("channel_groups", "readwrite"); var tx = window.db.transaction("channel_groups", "readwrite");