traxxx-web/components/stashes/heart.vue

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

		<Icon
			v-if="itemStashes.some((itemStash) => itemStash.id === currentStash.id)"
			:icon="currentStash.isPrimary ? 'heart7' : 'folder-heart'"
			class="heart favorited noselect"
			@click.native.stop="unstashItem(currentStash)"
		/>

		<Icon
			v-else
			:icon="currentStash.isPrimary ? 'heart8' : 'folder-heart'"
			class="heart noselect"
			@click.native.stop="stashItem(currentStash)"
		/>
	</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 currentStash = pageProps.stash || user.primaryStash;

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(--shadow);
	}

	&.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>