Added secondary stash menu to stash heart.
This commit is contained in:
parent
8cada40311
commit
dbc6ee0c6c
|
@ -3,37 +3,42 @@
|
|||
v-if="user"
|
||||
class="bookmarks"
|
||||
>
|
||||
<VDropdown v-if="showSecondary">
|
||||
<VDropdown
|
||||
v-if="showSecondary || (hasSecondaryStash && pageStash?.user.id !== user.id)"
|
||||
:shown="showStashes"
|
||||
@hide="showStashes = false"
|
||||
>
|
||||
<Icon
|
||||
icon="folder-heart"
|
||||
class="heart noselect"
|
||||
:class="{ favorited: itemStashes.some((itemStash) => !itemStash.isPrimary) }"
|
||||
@contextmenu.prevent="showStashes = true"
|
||||
/>
|
||||
|
||||
<template #popper>
|
||||
<ul class="stash-menu nolist">
|
||||
<li
|
||||
v-for="userStash in user.stashes"
|
||||
:key="`stash-${userStash.id}`"
|
||||
class="menu-item"
|
||||
>
|
||||
<label class="menu-stash">
|
||||
<Checkbox
|
||||
:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
|
||||
@change="(checked) => checked ? stashItem(userStash) : unstashItem(userStash)"
|
||||
/>{{ userStash.name }}
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
<StashMenu
|
||||
:user="user"
|
||||
:item-stashes="itemStashes"
|
||||
@stash="(stash) => stashItem(stash)"
|
||||
@unstash="(stash) => unstashItem(stash)"
|
||||
/>
|
||||
</template>
|
||||
</VDropdown>
|
||||
|
||||
<VDropdown
|
||||
v-if="showSecondary || !hasSecondaryStash || pageStash?.user.id === user.id"
|
||||
:triggers="[]"
|
||||
:shown="showStashes"
|
||||
:disabled="showSecondary"
|
||||
@hide="showStashes = false"
|
||||
>
|
||||
<template v-if="pageStash?.user.id === user.id">
|
||||
<Icon
|
||||
v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)"
|
||||
:icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'"
|
||||
class="heart favorited noselect"
|
||||
@click.native.stop="unstashItem(pageStash)"
|
||||
@contextmenu.prevent="toggleShowStashes(true)"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
|
@ -41,6 +46,7 @@
|
|||
:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
|
||||
class="heart noselect"
|
||||
@click.native.stop="stashItem(pageStash)"
|
||||
@contextmenu.prevent="toggleShowStashes(true)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
|
@ -50,6 +56,7 @@
|
|||
icon="heart7"
|
||||
class="heart favorited noselect"
|
||||
@click.native.stop="unstashItem(user.primaryStash)"
|
||||
@contextmenu.prevent="toggleShowStashes(true)"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
|
@ -57,19 +64,30 @@
|
|||
icon="heart8"
|
||||
class="heart noselect"
|
||||
@click.native.stop="stashItem(user.primaryStash)"
|
||||
@contextmenu.prevent="toggleShowStashes(true)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #popper>
|
||||
<StashMenu
|
||||
:user="user"
|
||||
:item-stashes="itemStashes"
|
||||
@stash="(stash) => stashItem(stash)"
|
||||
@unstash="(stash) => unstashItem(stash)"
|
||||
/>
|
||||
</template>
|
||||
</VDropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, inject } from 'vue';
|
||||
import { ref, computed, inject } from 'vue';
|
||||
|
||||
import { post, del } from '#/src/api.js';
|
||||
import ellipsis from '#/utils/ellipsis.js';
|
||||
|
||||
import Icon from '#/components/icon/icon.vue';
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
import StashMenu from '#/components/stashes/menu.vue';
|
||||
|
||||
const props = defineProps({
|
||||
domain: {
|
||||
|
@ -92,8 +110,10 @@ const { user, pageProps } = inject('pageContext');
|
|||
const pageStash = pageProps.stash;
|
||||
|
||||
const itemStashes = ref(props.item.stashes);
|
||||
const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !itemStash.isPrimary));
|
||||
|
||||
const done = ref(true);
|
||||
const showStashes = ref(false);
|
||||
const feedbackCutoff = 20;
|
||||
|
||||
const itemKeys = {
|
||||
|
@ -149,6 +169,19 @@ async function unstashItem(stash) {
|
|||
|
||||
done.value = true;
|
||||
}
|
||||
|
||||
function toggleShowStashes(state) {
|
||||
if (props.showSecondary) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (state) {
|
||||
showStashes.value = state;
|
||||
return;
|
||||
}
|
||||
|
||||
showStashes.value = !showStashes.value;
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
@ -183,23 +216,4 @@ async function unstashItem(stash) {
|
|||
fill: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-stash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.check-container {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -0,0 +1,54 @@
|
|||
<template>
|
||||
<ul class="stash-menu nolist noselect">
|
||||
<li
|
||||
v-for="userStash in user.stashes"
|
||||
:key="`stash-${userStash.id}`"
|
||||
class="menu-item"
|
||||
>
|
||||
<label class="menu-stash">
|
||||
<Checkbox
|
||||
:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
|
||||
@change="(checked) => checked ? emit('stash', userStash) : emit('unstash', userStash)"
|
||||
/>{{ userStash.name }}
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Checkbox from '#/components/form/checkbox.vue';
|
||||
|
||||
defineProps({
|
||||
user: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
itemStashes: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['stash', 'unstash']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.menu-item {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-stash {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.check-container {
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -32,5 +32,6 @@ const { abortReason } = pageContext;
|
|||
.page {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -44,7 +44,6 @@ export async function onBeforeRender(pageContext) {
|
|||
},
|
||||
{
|
||||
entityIds: [entity.id, entity.parent?.id].filter(Boolean),
|
||||
parentEntityId: entity.parent?.id,
|
||||
minRatio: 1.5,
|
||||
allowRandomFallback: false,
|
||||
},
|
||||
|
|
|
@ -259,6 +259,15 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="campaigns?.scene"
|
||||
class="section"
|
||||
>
|
||||
<Campaign
|
||||
:campaign="campaigns.scene"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="section details">
|
||||
<div class="detail">
|
||||
<h3 class="heading">Added</h3>
|
||||
|
@ -318,10 +327,11 @@ import MovieTile from '#/components/movies/tile.vue';
|
|||
import SerieTile from '#/components/series/tile.vue';
|
||||
import Player from '#/components/video/player.vue';
|
||||
import Heart from '#/components/stashes/heart.vue';
|
||||
import Campaign from '#/components/campaigns/campaign.vue';
|
||||
|
||||
import summaryTemplate from '#/assets/summary.yaml';
|
||||
|
||||
const { pageProps } = inject('pageContext');
|
||||
const { pageProps, campaigns } = inject('pageContext');
|
||||
const { scene } = pageProps;
|
||||
|
||||
const playing = ref(false);
|
||||
|
|
|
@ -1,4 +1,6 @@
|
|||
import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
|
||||
import { fetchScenesById } from '#/src/scenes.js';
|
||||
import { getRandomCampaigns } from '#/src/campaigns.js';
|
||||
|
||||
function getTitle(scene) {
|
||||
if (scene.title) {
|
||||
|
@ -20,12 +22,27 @@ export async function onBeforeRender(pageContext) {
|
|||
actorStashes: true,
|
||||
});
|
||||
|
||||
const campaigns = await getRandomCampaigns([
|
||||
{
|
||||
minRatio: 1.5,
|
||||
entityIds: [scene.channel.id, scene.network?.id].filter(Boolean),
|
||||
allowRandomFallback: false,
|
||||
},
|
||||
], { tagFilter: pageContext.tagFilter });
|
||||
|
||||
if (!scene) {
|
||||
throw render(404, `Cannot find scene '${pageContext.routeParams.sceneId}'.`);
|
||||
}
|
||||
|
||||
return {
|
||||
pageContext: {
|
||||
title: getTitle(scene),
|
||||
pageProps: {
|
||||
scene,
|
||||
},
|
||||
campaigns: {
|
||||
scene: campaigns[0],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
|
|
@ -9,16 +9,14 @@ const schema = buildSchema(`
|
|||
${scenesSchema}
|
||||
`);
|
||||
|
||||
const rootValue = {
|
||||
scenes: fetchScenesGraphql,
|
||||
};
|
||||
|
||||
export async function graphqlApi(req, res) {
|
||||
const data = await graphql({
|
||||
schema,
|
||||
source: req.body.query,
|
||||
variableValues: req.body.variables,
|
||||
rootValue,
|
||||
rootValue: {
|
||||
scenes: async (query) => fetchScenesGraphql(query, req),
|
||||
},
|
||||
});
|
||||
|
||||
console.log(data);
|
||||
|
|
|
@ -76,16 +76,21 @@ export const scenesSchema = `
|
|||
export async function fetchScenesGraphql(query, req) {
|
||||
const {
|
||||
scenes,
|
||||
/*
|
||||
aggActors,
|
||||
aggTags,
|
||||
aggChannels,
|
||||
limit,
|
||||
total,
|
||||
*/
|
||||
} = await fetchScenes({}, {
|
||||
page: 1,
|
||||
limit: 30,
|
||||
}, req.user);
|
||||
|
||||
return scenes;
|
||||
|
||||
/*
|
||||
return {
|
||||
scenes,
|
||||
aggActors,
|
||||
|
@ -94,4 +99,5 @@ export async function fetchScenesGraphql(query, req) {
|
|||
limit,
|
||||
total,
|
||||
};
|
||||
*/
|
||||
}
|
||||
|
|
2
static
2
static
|
@ -1 +1 @@
|
|||
Subproject commit 39f91b96b2bfa176a02d10c9051dd1d2f9c62b64
|
||||
Subproject commit af96f9b932db799ec8d067d4a5c9379f8363d2b0
|
Loading…
Reference in New Issue