mirror of
https://github.com/TeamPiped/Piped.git
synced 2024-11-23 05:57:21 +00:00
Merge pull request #2950 from Bnyro/add-to-group-modal
feat: add to channel group modal on channel page
This commit is contained in:
commit
615f1e64d7
54
src/components/AddToGroupModal.vue
Normal file
54
src/components/AddToGroupModal.vue
Normal 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>
|
@ -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() {
|
||||||
|
@ -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);
|
||||||
|
@ -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) {
|
||||||
|
@ -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}",
|
||||||
|
21
src/main.js
21
src/main.js
@ -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");
|
||||||
|
Loading…
Reference in New Issue
Block a user