traxxx/assets/components/stashes/stash.vue

301 lines
5.5 KiB
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>