Added secondary stash menu to stash heart.

This commit is contained in:
DebaucheryLibrarian 2024-07-07 21:01:44 +02:00
parent 8cada40311
commit dbc6ee0c6c
9 changed files with 171 additions and 72 deletions

View File

@ -3,37 +3,42 @@
v-if="user" v-if="user"
class="bookmarks" class="bookmarks"
> >
<VDropdown v-if="showSecondary"> <VDropdown
v-if="showSecondary || (hasSecondaryStash && pageStash?.user.id !== user.id)"
:shown="showStashes"
@hide="showStashes = false"
>
<Icon <Icon
icon="folder-heart" icon="folder-heart"
class="heart noselect" class="heart noselect"
:class="{ favorited: itemStashes.some((itemStash) => !itemStash.isPrimary) }" :class="{ favorited: itemStashes.some((itemStash) => !itemStash.isPrimary) }"
@contextmenu.prevent="showStashes = true"
/> />
<template #popper> <template #popper>
<ul class="stash-menu nolist"> <StashMenu
<li :user="user"
v-for="userStash in user.stashes" :item-stashes="itemStashes"
:key="`stash-${userStash.id}`" @stash="(stash) => stashItem(stash)"
class="menu-item" @unstash="(stash) => unstashItem(stash)"
> />
<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>
</template> </template>
</VDropdown> </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"> <template v-if="pageStash?.user.id === user.id">
<Icon <Icon
v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)" v-if="itemStashes.some((itemStash) => itemStash.id === pageStash.id)"
:icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'" :icon="pageStash.isPrimary ? 'heart7' : 'folder-heart'"
class="heart favorited noselect" class="heart favorited noselect"
@click.native.stop="unstashItem(pageStash)" @click.native.stop="unstashItem(pageStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/> />
<Icon <Icon
@ -41,6 +46,7 @@
:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'" :icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
class="heart noselect" class="heart noselect"
@click.native.stop="stashItem(pageStash)" @click.native.stop="stashItem(pageStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/> />
</template> </template>
@ -50,6 +56,7 @@
icon="heart7" icon="heart7"
class="heart favorited noselect" class="heart favorited noselect"
@click.native.stop="unstashItem(user.primaryStash)" @click.native.stop="unstashItem(user.primaryStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/> />
<Icon <Icon
@ -57,19 +64,30 @@
icon="heart8" icon="heart8"
class="heart noselect" class="heart noselect"
@click.native.stop="stashItem(user.primaryStash)" @click.native.stop="stashItem(user.primaryStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/> />
</template> </template>
<template #popper>
<StashMenu
:user="user"
:item-stashes="itemStashes"
@stash="(stash) => stashItem(stash)"
@unstash="(stash) => unstashItem(stash)"
/>
</template>
</VDropdown>
</div> </div>
</template> </template>
<script setup> <script setup>
import { ref, inject } from 'vue'; import { ref, computed, inject } from 'vue';
import { post, del } from '#/src/api.js'; import { post, del } from '#/src/api.js';
import ellipsis from '#/utils/ellipsis.js'; import ellipsis from '#/utils/ellipsis.js';
import Icon from '#/components/icon/icon.vue'; import Icon from '#/components/icon/icon.vue';
import Checkbox from '#/components/form/checkbox.vue'; import StashMenu from '#/components/stashes/menu.vue';
const props = defineProps({ const props = defineProps({
domain: { domain: {
@ -92,8 +110,10 @@ const { user, pageProps } = inject('pageContext');
const pageStash = pageProps.stash; const pageStash = pageProps.stash;
const itemStashes = ref(props.item.stashes); const itemStashes = ref(props.item.stashes);
const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !itemStash.isPrimary));
const done = ref(true); const done = ref(true);
const showStashes = ref(false);
const feedbackCutoff = 20; const feedbackCutoff = 20;
const itemKeys = { const itemKeys = {
@ -149,6 +169,19 @@ async function unstashItem(stash) {
done.value = true; done.value = true;
} }
function toggleShowStashes(state) {
if (props.showSecondary) {
return;
}
if (state) {
showStashes.value = state;
return;
}
showStashes.value = !showStashes.value;
}
</script> </script>
<style scoped> <style scoped>
@ -183,23 +216,4 @@ async function unstashItem(stash) {
fill: var(--primary); 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> </style>

View File

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

View File

@ -32,5 +32,6 @@ const { abortReason } = pageContext;
.page { .page {
display: flex; display: flex;
justify-content: center; justify-content: center;
flex-grow: 1;
} }
</style> </style>

View File

@ -44,7 +44,6 @@ export async function onBeforeRender(pageContext) {
}, },
{ {
entityIds: [entity.id, entity.parent?.id].filter(Boolean), entityIds: [entity.id, entity.parent?.id].filter(Boolean),
parentEntityId: entity.parent?.id,
minRatio: 1.5, minRatio: 1.5,
allowRandomFallback: false, allowRandomFallback: false,
}, },

View File

@ -259,6 +259,15 @@
</div> </div>
</div> </div>
<div
v-if="campaigns?.scene"
class="section"
>
<Campaign
:campaign="campaigns.scene"
/>
</div>
<div class="section details"> <div class="section details">
<div class="detail"> <div class="detail">
<h3 class="heading">Added</h3> <h3 class="heading">Added</h3>
@ -318,10 +327,11 @@ import MovieTile from '#/components/movies/tile.vue';
import SerieTile from '#/components/series/tile.vue'; import SerieTile from '#/components/series/tile.vue';
import Player from '#/components/video/player.vue'; import Player from '#/components/video/player.vue';
import Heart from '#/components/stashes/heart.vue'; import Heart from '#/components/stashes/heart.vue';
import Campaign from '#/components/campaigns/campaign.vue';
import summaryTemplate from '#/assets/summary.yaml'; import summaryTemplate from '#/assets/summary.yaml';
const { pageProps } = inject('pageContext'); const { pageProps, campaigns } = inject('pageContext');
const { scene } = pageProps; const { scene } = pageProps;
const playing = ref(false); const playing = ref(false);

View File

@ -1,4 +1,6 @@
import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
import { fetchScenesById } from '#/src/scenes.js'; import { fetchScenesById } from '#/src/scenes.js';
import { getRandomCampaigns } from '#/src/campaigns.js';
function getTitle(scene) { function getTitle(scene) {
if (scene.title) { if (scene.title) {
@ -20,12 +22,27 @@ export async function onBeforeRender(pageContext) {
actorStashes: true, 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 { return {
pageContext: { pageContext: {
title: getTitle(scene), title: getTitle(scene),
pageProps: { pageProps: {
scene, scene,
}, },
campaigns: {
scene: campaigns[0],
},
}, },
}; };
} }

View File

@ -9,16 +9,14 @@ const schema = buildSchema(`
${scenesSchema} ${scenesSchema}
`); `);
const rootValue = {
scenes: fetchScenesGraphql,
};
export async function graphqlApi(req, res) { export async function graphqlApi(req, res) {
const data = await graphql({ const data = await graphql({
schema, schema,
source: req.body.query, source: req.body.query,
variableValues: req.body.variables, variableValues: req.body.variables,
rootValue, rootValue: {
scenes: async (query) => fetchScenesGraphql(query, req),
},
}); });
console.log(data); console.log(data);

View File

@ -76,16 +76,21 @@ export const scenesSchema = `
export async function fetchScenesGraphql(query, req) { export async function fetchScenesGraphql(query, req) {
const { const {
scenes, scenes,
/*
aggActors, aggActors,
aggTags, aggTags,
aggChannels, aggChannels,
limit, limit,
total, total,
*/
} = await fetchScenes({}, { } = await fetchScenes({}, {
page: 1, page: 1,
limit: 30, limit: 30,
}, req.user); }, req.user);
return scenes;
/*
return { return {
scenes, scenes,
aggActors, aggActors,
@ -94,4 +99,5 @@ export async function fetchScenesGraphql(query, req) {
limit, limit,
total, total,
}; };
*/
} }

2
static

@ -1 +1 @@
Subproject commit 39f91b96b2bfa176a02d10c9051dd1d2f9c62b64 Subproject commit af96f9b932db799ec8d067d4a5c9379f8363d2b0