<template> <div v-if="user" class="bookmarks" > <VDropdown v-if="showSecondary"> <Icon icon="folder-heart" class="heart noselect" :class="{ favorited: itemStashes.some((itemStash) => !itemStash.isPrimary) }" /> <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> </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)" /> <Icon v-else :icon="pageStash.isPrimary ? 'heart8' : 'folder-heart'" class="heart noselect" @click.native.stop="stashItem(pageStash)" /> </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)" /> <Icon v-else icon="heart8" class="heart noselect" @click.native.stop="stashItem(user.primaryStash)" /> </template> </div> </template> <script setup> import { ref, 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'; const props = defineProps({ domain: { type: String, default: 'scenes', }, item: { type: Object, default: null, }, showSecondary: { type: Boolean, default: true, }, }); const emit = defineEmits(['stashed', 'unstashed']); const { user, pageProps } = inject('pageContext'); const pageStash = pageProps.stash; const itemStashes = ref(props.item.stashes); const done = ref(true); const feedbackCutoff = 20; const itemKeys = { scenes: 'sceneId', actors: 'actorId', movies: 'movieId', }; async function stashItem(stash) { if (!done.value) { return; } const stashState = itemStashes.value; done.value = false; itemStashes.value = itemStashes.value.concat(stash); try { await post(`/stashes/${stash.id}/${props.domain}`, { [itemKeys[props.domain]]: props.item.id }, { successFeedback: `"${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" stashed to ${stash.name}`, errorFeedback: `Failed to stash "${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" to ${stash.name}`, }); emit('stashed', stash); } catch (error) { itemStashes.value = stashState; } done.value = true; } async function unstashItem(stash) { if (!done.value) { return; } const stashState = itemStashes.value; done.value = false; itemStashes.value = itemStashes.value.filter((itemStash) => itemStash.id !== stash.id); try { await del(`/stashes/${stash.id}/${props.domain}/${props.item.id}`, { undoFeedback: `"${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" unstashed from ${stash.name}`, errorFeedback: `Failed to unstash "${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" from ${stash.name}`, }); emit('unstashed', stash); } catch (error) { itemStashes.value = stashState; } done.value = true; } </script> <style scoped> .bookmarks { display: flex; .icon { width: 1.5rem; height: 1.5rem; padding: .5rem .5rem; fill: var(--glass); } &.light .icon { fill: var(--highlight); } &.tiled { position: absolute; top: 0; right: 0; .icon { fill: var(--highlight-strong-20); filter: drop-shadow(0 0 3px var(--shadow-strong-10)); } } .icon.heart:hover, .icon.heart.favorited { cursor: pointer; 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>