168 lines
2.9 KiB
Vue
168 lines
2.9 KiB
Vue
<template>
|
|
<div
|
|
v-if="stash"
|
|
class="stash content"
|
|
>
|
|
<div class="stash-header">
|
|
<h2 class="stash-name">{{ stash.name }}</h2>
|
|
|
|
<span class="header-section">
|
|
<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>
|
|
|
|
<router-link
|
|
v-if="stash.user"
|
|
:to="{ name: 'user', params: { username: stash.user.username } }"
|
|
class="header-item stash-username nolink"
|
|
><Icon icon="user3" />{{ stash.user.username }}</router-link>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="content-inner">
|
|
<Releases
|
|
v-if="stash.scenes?.length > 0"
|
|
:releases="stash.scenes.map(item => item.scene)"
|
|
class="stash-section stash-scenes"
|
|
@stash="fetchStash"
|
|
/>
|
|
|
|
<ul
|
|
v-if="stash.actors?.length > 0"
|
|
class="stash-section stash-actors nolist"
|
|
>
|
|
<li
|
|
v-for="item in stash.actors"
|
|
:key="item.id"
|
|
><Actor :actor="item.actor" /></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Actor from '../actors/tile.vue';
|
|
import Releases from '../releases/releases.vue';
|
|
import Toggle from '../form/toggle.vue';
|
|
|
|
async function fetchStash() {
|
|
this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
|
|
this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
|
|
}
|
|
|
|
async function publishStash(isPublic) {
|
|
await this.$store.dispatch('updateStash', {
|
|
stashId: this.stash.id,
|
|
stash: { public: isPublic },
|
|
});
|
|
|
|
this.fetchStash();
|
|
}
|
|
|
|
async function mounted() {
|
|
this.fetchStash();
|
|
}
|
|
|
|
export default {
|
|
components: {
|
|
Actor,
|
|
Releases,
|
|
Toggle,
|
|
},
|
|
data() {
|
|
return {
|
|
stash: null,
|
|
isMine: false,
|
|
};
|
|
},
|
|
mounted,
|
|
methods: {
|
|
fetchStash,
|
|
publishStash,
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.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;
|
|
}
|
|
|
|
.header-item:not(:last-child) {
|
|
margin: 0 1rem 0 0;
|
|
}
|
|
|
|
.stash-public {
|
|
cursor: pointer;
|
|
|
|
.icon {
|
|
margin: 0 .75rem 0 0;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.stash-name,
|
|
.stash-username {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: .5rem 1rem;
|
|
margin: 0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.stash-section:not(:last-child) {
|
|
border-bottom: solid 1px var(--shadow-hint);
|
|
}
|
|
|
|
.stash-actors {
|
|
display: grid;
|
|
grid-gap: .5rem;
|
|
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
|
|
flex-grow: 1;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.stash-scenes {
|
|
flex-grow: 0;
|
|
|
|
.tiles {
|
|
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
|
|
}
|
|
}
|
|
</style>
|