Added secondary stash button, centralized bookmark (heart) component.

2024-03-27 02:28:21 +01:00
parent c018f54a12
commit b1e336381c
15 changed files with 426 additions and 552 deletions
--- a/components/stashes/heart.vue
+++ b/components/stashes/heart.vue
@@ -0,0 +1,186 @@
+<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.isPrimary)"
+			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)"
+		/>
+	</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 } = inject('pageContext');
+
+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>