traxxx/assets/components/stashes/stash.vue

<template>
	<div
		v-if="stash"
		class="stash content"
	>
		<div class="stash-header">
			<h2
				:title="stash.name"
				class="stash-name"
			>{{ stash.name }}</h2>

			<span class="header-section">
				<RouterLink
					v-if="stash.user"
					:to="{ name: 'user', params: { username: stash.user.username } }"
					class="header-item stash-username nolink"
				><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></RouterLink>

				<label
					v-if="isMine"
					v-tooltip="'Public'"
					:class="{ public: stash.public }"
					class="header-item stash-public"
				>
					<Icon
						v-show="stash.public"
						icon="eye"
					/>

					<Icon
						v-show="!stash.public"
						icon="eye-blocked"
					/>

					<Toggle
						:checked="stash.public"
						class="light"
						@change="checked => publishStash(checked)"
					/>
				</label>

				<Icon
					v-if="isMine && !stash.primary"
					icon="bin"
					class="stash-remove"
					@click.native="showRemoveStash = true"
				/>

				<RemoveStash
					v-if="showRemoveStash"
					:stash="stash"
					@close="removeStash"
				/>
			</span>
		</div>

		<div class="content-inner">
			<FilterBar :ranges="['scenes', 'actors', 'movies']" />

			<Releases
				v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0"
				:releases="stash.scenes.map(item => item.scene)"
				:stash="stash"
				class="stash-section stash-scenes"
				@stash="fetchStash"
			/>

			<ul
				v-if="$route.params.range === 'actors'"
				class="stash-section stash-actors nolist"
			>
				<li
					v-for="item in stash.actors"
					:key="item.id"
				><Actor
					:actor="item.actor"
					:stash="stash"
					@stash="fetchStash"
				/></li>
			</ul>

			<div
				v-if="$route.params.range === 'movies'"
				class="stash-movies"
			>
				<Movie
					v-for="item in stash.movies"
					:key="`movie-${item.id}`"
					:movie="item.movie"
					:stash="stash"
					@stash="fetchStash"
				/>
			</div>

			<Pagination
				:items-total="totalCount"
				:items-per-page="limit"
				class="pagination-bottom"
			/>

			<Footer />
		</div>
	</div>
</template>

<script>
import Actor from '../actors/tile.vue';
import Releases from '../releases/releases.vue';
import Movie from '../releases/movie-tile.vue';
import RemoveStash from './remove.vue';
import Toggle from '../form/toggle.vue';
import FilterBar from '../filters/filter-bar.vue';
import Pagination from '../pagination/pagination.vue';

async function fetchStash() {
	this.stash = await this.$store.dispatch('fetchStash', {
		stashId: this.$route.params.stashId,
		section: this.$route.params.range,
		pageNumber: this.$route.params.pageNumber || 1,
		limit: this.limit,
	});

	this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;

	if (this.$route.params.range === 'scenes') {
		this.totalCount = this.stash.sceneTotal;
	}

	if (this.$route.params.range === 'actors') {
		this.totalCount = this.stash.actorTotal;
	}

	if (this.$route.params.range === 'movies') {
		this.totalCount = this.stash.movieTotal;
	}

	this.pageTitle = this.stash.name;
}

async function publishStash(isPublic) {
	await this.$store.dispatch('updateStash', {
		stashId: this.stash.id,
		stash: { public: isPublic },
	});

	this.fetchStash();
}

async function removeStash(removed) {
	this.showRemoveStash = false;

	if (removed && this.stash.user) {
		this.$router.replace({ name: 'user', params: { username: this.stash.user.username } });
		return;
	}

	if (removed) {
		this.$router.replace({ name: 'home' });
	}
}

async function mounted() {
	await this.fetchStash();
}

export default {
	components: {
		Actor,
		Movie,
		Releases,
		RemoveStash,
		Pagination,
		FilterBar,
		Toggle,
	},
	data() {
		return {
			stash: null,
			limit: Number(this.$route.query.limit) || 20,
			pageTitle: null,
			showRemoveStash: false,
			isMine: false,
			totalCount: 0,
		};
	},
	watch: {
		$route: fetchStash,
	},
	mounted,
	methods: {
		fetchStash,
		publishStash,
		removeStash,
	},
};
</script>

<style lang="scss" scoped>
@import 'breakpoints';

.stash-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--profile);
	color: var(--text-light);

	.icon {
		fill: var(--text-light);
		margin: -.1rem .5rem 0 0;
	}
}

.header-section,
.header-item {
	height: 100%;
	display: flex;
	align-items: center;
}

.stash-name,
.stash-username {
	box-sizing: border-box;
	padding: .5rem 1rem;
	font-weight: bold;
}

.stash-username {
	display: inline-flex;
	align-items: center;
	margin: 0 .5rem 0 0;
}

.stash-name {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0;
}

.stash-public {
	cursor: pointer;
	margin: 0 .5rem 0 0;

	.icon {
		margin: 0 .75rem 0 0;
		cursor: pointer;
	}
}

.stash-remove.icon {
	height: 100%;
	padding: 0 1rem;
	fill: var(--lighten-strong);

	&:hover {
		fill: var(--text-light);
		cursor: pointer;
	}
}

.stash-actors {
    display: grid;
    grid-gap: .5rem;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
	grid-template-rows: min-content;
	flex-grow: 1;
	padding: 1rem;
	border-top: solid 1px var(--shadow-hint);
}

.stash-movies {
	display: grid;
	flex-grow: 1;
	grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
	grid-template-rows: min-content;
	grid-gap: 1rem;
	padding: 1rem;
	border-top: solid 1px var(--shadow-hint);
}

.stash-scenes .tiles {
	grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
	grid-template-rows: min-content;
}

@media(max-width: $breakpoint-small) {
	.stash-name {
		font-size: 1.25rem;
	}

	.username-name {
		display: none;
	}

	.stash-username {
		margin: 0;
	}
}
</style>