Added secondary stash menu to stash heart.
This commit is contained in:
parent
8cada40311
commit
dbc6ee0c6c
|
@ -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>
|
||||||
|
|
|
@ -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 {
|
.page {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -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,
|
||||||
},
|
},
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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],
|
||||||
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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
2
static
|
@ -1 +1 @@
|
||||||
Subproject commit 39f91b96b2bfa176a02d10c9051dd1d2f9c62b64
|
Subproject commit af96f9b932db799ec8d067d4a5c9379f8363d2b0
|
Loading…
Reference in New Issue