traxxx-web/components/stashes/menu.vue

<script setup>
import { computed, ref } from 'vue';

import Checkbox from '#/components/form/checkbox.vue';

const props = defineProps({
	stashes: {
		type: Array,
		default: () => [],
	},
	itemStashes: {
		type: Array,
		default: () => [],
	},
	domain: {
		type: String,
		default: 'scenes',
	},
});

const emit = defineEmits(['stash', 'unstash', 'create']);

const sortings = ['used', 'name', 'size', 'created'];
const sorting = ref(localStorage.getItem('stashMenuSorting') || 'used');

const domainKey = {
	actors: 'stashedActors',
	scenes: 'stashedScenes',
	movies: 'stashedMovies',
}[props.domain];

const sortedStashes = computed(() => props.stashes
	.toSorted((stashA, stashB) => {
		return stashA.createdAt - stashB.createdAt;
	})
	.toSorted((stashA, stashB) => {
		if (sorting.value === 'used') {
			return stashB.lastStashAt - stashA.lastStashAt;
		}

		if (sorting.value === 'name') {
			return stashA.name.localeCompare(stashB.name);
		}

		if (sorting.value === 'size') {
			return stashB[domainKey] - stashA[domainKey];
		}

		if (sorting.value === 'created') {
			return stashA.createdAt - stashB.createdAt;
		}

		return 0;
	}));
	/*
	.toSorted((stashA, stashB) => {
		return stashB.isPrimary - stashA.isPrimary;
	}));
	 */

function toggleSorting() {
	sorting.value = sortings[(sortings.indexOf(sorting.value) + 1) % sortings.length];
	localStorage.setItem('stashMenuSorting', sorting.value);
}
</script>

<template>
	<div class="stash-menu noselect">
		<ul class="stash-list nolist noselect">
			<li
				v-for="userStash in sortedStashes"
				: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>

		<div class="menu-actions">
			<div
				v-close-popper
				class="menu-item menu-stash menu-create"
				@click="emit('create')"
			>
				<Icon icon="plus3" />
				New
			</div>

			<Icon
				v-if="sorting === 'used'"
				v-tooltip="'By last stash'"
				icon="sort-heart"
				class="menu-sort"
				@click="toggleSorting"
			/>

			<Icon
				v-if="sorting === 'name'"
				v-tooltip="'By name'"
				icon="sort-alpha-asc"
				class="menu-sort"
				@click="toggleSorting"
			/>

			<Icon
				v-if="sorting === 'size'"
				v-tooltip="`By total stashed ${domain}`"
				icon="sort-amount-desc"
				class="menu-sort"
				@click="toggleSorting"
			/>

			<Icon
				v-if="sorting === 'created'"
				v-tooltip="'By stash age'"
				icon="sort-time-asc"
				class="menu-sort"
				@click="toggleSorting"
			/>
		</div>
	</div>
</template>

<style scoped>
.stash-menu {
	display: flex;
	flex-direction: column;
	max-height: inherit;
	overflow: hidden;
}

.stash-list {
	overflow-y: auto;
	min-height: 0; /* lets this flex child actually shrink and scroll instead of pushing the container taller */
}

.menu-item {
	display: flex;

	.icon {
		fill: var(--shadow-weak-10);
		padding: 0 .55rem 0 .2rem;
		transform: translateY(-1px);
	}
}

.menu-stash {
	display: flex;
	width: 100%;
	align-items: center;
	padding: .5rem;
	box-sizing: border-box;

	&:hover {
		cursor: pointer;
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}

	.check-container {
		margin-right: .5rem;
	}
}

.menu-actions {
	flex-shrink: 0;
	display: flex;
	border-top: solid 1px var(--glass-weak-40);
}

.menu-sort {
	padding: .75rem 1rem;
	fill: var(--glass);
	border-left: solid 1px var(--glass-weak-40);

	&:hover {
		fill: var(--primary);
		cursor: pointer;
	}
}
</style>