DebaucheryLibrarian
/
traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

142
components/stashes/heart.vue
View File

@ -3,73 +3,91 @@
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>
<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)"
/>
<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
v-else
:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
class="heart noselect"
@click.native.stop="stashItem(pageStash)"
/>
</template>
<Icon
v-else
:icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'"
class="heart noselect"
@click.native.stop="stashItem(pageStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/>
</template>
<template v-else>
<Icon
v-if="itemStashes.some((itemStash) => itemStash.id === user.primaryStash.id)"
icon="heart7"
class="heart favorited noselect"
@click.native.stop="unstashItem(user.primaryStash)"
/>
<template v-else>
<Icon
v-if="itemStashes.some((itemStash) => itemStash.id === user.primaryStash.id)"
icon="heart7"
class="heart favorited noselect"
@click.native.stop="unstashItem(user.primaryStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/>
<Icon
v-else
icon="heart8"
class="heart noselect"
@click.native.stop="stashItem(user.primaryStash)"
/>
</template>
<Icon
v-else
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>

54
components/stashes/menu.vue Normal file
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>

1
pages/_error/+Page.vue
View File

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

1
pages/entities/@entitySlug/+onBeforeRender.js
View File

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

12
pages/scene/+Page.vue
View File

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

17
pages/scene/+onBeforeRender.js
View File

@ -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],
},
},
};
}

8
src/web/graphql.js
View File

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

6
src/web/scenes.js
View File

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

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