traxxx-web/components/stashes/heart.vue

239 lines
5.4 KiB
Vue
Raw Normal View History

<template>
<div
v-if="user"
class="bookmarks"
>
<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>
<StashMenu
2024-08-26 04:15:22 +00:00
:stashes="stashes"
:item-stashes="itemStashes"
@stash="(stash) => stashItem(stash)"
@unstash="(stash) => unstashItem(stash)"
@create="showStashDialog = true"
/>
</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
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
2024-08-26 04:15:22 +00:00
v-if="itemStashes.some((itemStash) => itemStash.id === primaryStash.id)"
icon="heart7"
class="heart favorited noselect"
2024-08-26 04:15:22 +00:00
@click.native.stop="unstashItem(primaryStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/>
<Icon
v-else
icon="heart8"
class="heart noselect"
2024-08-26 04:15:22 +00:00
@click.native.stop="stashItem(primaryStash)"
@contextmenu.prevent="toggleShowStashes(true)"
/>
</template>
<template #popper>
<StashMenu
2024-08-26 04:15:22 +00:00
:stashes="stashes"
:item-stashes="itemStashes"
@stash="(stash) => stashItem(stash)"
@unstash="(stash) => unstashItem(stash)"
@create="showStashDialog = true"
/>
</template>
</VDropdown>
<StashDialog
v-if="showStashDialog"
2024-08-22 23:35:39 +00:00
@created="(newStash) => { showStashDialog = false; reloadStashes(newStash); }"
@close="showStashDialog = false;"
/>
</div>
</template>
<script setup>
import { ref, computed, inject } from 'vue';
import { get, post, del } from '#/src/api.js';
import ellipsis from '#/utils/ellipsis.js';
import Icon from '#/components/icon/icon.vue';
import StashMenu from '#/components/stashes/menu.vue';
import StashDialog from '#/components/stashes/create.vue';
const props = defineProps({
domain: {
type: String,
default: 'scenes',
},
item: {
type: Object,
default: null,
},
showSecondary: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['stashed', 'unstashed']);
2024-08-22 23:35:39 +00:00
const pageContext = inject('pageContext');
const pageStash = pageContext.pageProps.stash;
2024-08-26 04:15:22 +00:00
const user = pageContext.user;
2024-08-26 04:15:22 +00:00
const stashes = ref(pageContext.assets?.stashes);
const primaryStash = pageContext.assets?.primaryStash;
const itemStashes = ref(props.item.stashes);
const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !itemStash.isPrimary));
const done = ref(true);
const showStashes = ref(false);
const showStashDialog = ref(false);
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;
}
function toggleShowStashes(state) {
if (props.showSecondary) {
return;
}
if (state) {
showStashes.value = state;
return;
}
showStashes.value = !showStashes.value;
}
2024-08-22 23:35:39 +00:00
async function reloadStashes(newStash) {
2024-08-26 04:15:22 +00:00
stashes.value = await get(`/users/${user.id}/stashes`);
2024-08-22 23:35:39 +00:00
await stashItem(newStash);
}
</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);
}
}
</style>