Separated user page stash component.
This commit is contained in:
DebaucheryLibrarian
@@ -24,8 +24,6 @@
|
||||
<script>
|
||||
async function unstashActor(actorId, stashId) {
|
||||
await this.$store.dispatch('unstashActor', { actorId, stashId });
|
||||
|
||||
this.$emit('unstash');
|
||||
}
|
||||
|
||||
export default {
|
||||
|
||||
169
assets/components/users/stash.vue
Normal file
169
assets/components/users/stash.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div class="stash">
|
||||
<div class="stash-section stash-header">
|
||||
<router-link
|
||||
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
|
||||
class="stash-link nolink"
|
||||
>
|
||||
<h4 class="stash-name">{{ stash.name }}</h4>
|
||||
</router-link>
|
||||
|
||||
<label
|
||||
v-if="isMe"
|
||||
v-tooltip="'Public'"
|
||||
:class="{ public: stash.public }"
|
||||
class="stash-public"
|
||||
>
|
||||
<Icon
|
||||
v-show="stash.public"
|
||||
icon="eye"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="!stash.public"
|
||||
icon="eye-blocked"
|
||||
/>
|
||||
|
||||
<Toggle
|
||||
:checked="stash.public"
|
||||
@change="checked => publishStash(stash, checked)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="stash.scenes?.length > 0"
|
||||
class="stash-section stash-scenes nolist"
|
||||
>
|
||||
<li
|
||||
v-for="{ scene } in stash.scenes"
|
||||
:key="scene.id"
|
||||
class="stash-scene"
|
||||
>
|
||||
<ScenePreview
|
||||
:scene="scene"
|
||||
:stash="stash"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul
|
||||
v-if="stash.actors?.length > 0"
|
||||
class="stash-section stash-actors nolist"
|
||||
>
|
||||
<li
|
||||
v-for="{ actor } in stash.actors"
|
||||
:key="actor.id"
|
||||
class="stash-actor"
|
||||
>
|
||||
<ActorPreview
|
||||
:actor="actor"
|
||||
:stash="stash"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActorPreview from './actor-preview.vue';
|
||||
import ScenePreview from './scene-preview.vue';
|
||||
import Toggle from '../form/toggle.vue';
|
||||
|
||||
async function publishStash(stash, isPublic) {
|
||||
await this.$store.dispatch('updateStash', {
|
||||
stashId: stash.id,
|
||||
stash: { public: isPublic },
|
||||
});
|
||||
|
||||
this.$emit('publish', isPublic);
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ActorPreview,
|
||||
ScenePreview,
|
||||
Toggle,
|
||||
},
|
||||
props: {
|
||||
stash: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
isMe: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
emits: ['publish'],
|
||||
methods: {
|
||||
publishStash,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.stash-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
}
|
||||
|
||||
.stash-header {
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.stash-link {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.stash-public {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow-strong);
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stash-name {
|
||||
padding: .5rem;
|
||||
margin: 0;
|
||||
color: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.stash-actors,
|
||||
.stash-scenes {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
grid-gap: .5rem;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stash-scenes {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.stash-actor,
|
||||
.stash-scene {
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -19,70 +19,11 @@
|
||||
:key="stash.id"
|
||||
class="stash"
|
||||
>
|
||||
<div class="stash-section stash-header">
|
||||
<router-link
|
||||
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
|
||||
class="stash-link nolink"
|
||||
>
|
||||
<h4 class="stash-name">{{ stash.name }}</h4>
|
||||
</router-link>
|
||||
|
||||
<label
|
||||
v-if="isMe"
|
||||
v-tooltip="'Public'"
|
||||
:class="{ public: stash.public }"
|
||||
class="stash-public"
|
||||
>
|
||||
<Icon
|
||||
v-show="stash.public"
|
||||
icon="eye"
|
||||
/>
|
||||
|
||||
<Icon
|
||||
v-show="!stash.public"
|
||||
icon="eye-blocked"
|
||||
/>
|
||||
|
||||
<Toggle
|
||||
:checked="stash.public"
|
||||
@change="checked => publishStash(stash, checked)"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<ul
|
||||
v-if="stash.scenes?.length > 0"
|
||||
class="stash-section stash-scenes nolist"
|
||||
>
|
||||
<li
|
||||
v-for="{ scene } in stash.scenes"
|
||||
:key="scene.id"
|
||||
class="stash-scene"
|
||||
>
|
||||
<ScenePreview
|
||||
:scene="scene"
|
||||
:stash="stash"
|
||||
@unstash="fetchUser"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<ul
|
||||
v-if="stash.actors?.length > 0"
|
||||
class="stash-section stash-actors nolist"
|
||||
>
|
||||
<li
|
||||
v-for="{ actor } in stash.actors"
|
||||
:key="actor.id"
|
||||
class="stash-actor"
|
||||
>
|
||||
<ActorPreview
|
||||
:actor="actor"
|
||||
:stash="stash"
|
||||
@unstash="fetchUser"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
<Stash
|
||||
:stash="stash"
|
||||
:is-me="isMe"
|
||||
@publish="() => fetchUser()"
|
||||
/>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
@@ -90,9 +31,7 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ActorPreview from './actor-preview.vue';
|
||||
import ScenePreview from './scene-preview.vue';
|
||||
import Toggle from '../form/toggle.vue';
|
||||
import Stash from './stash.vue';
|
||||
|
||||
async function fetchUser() {
|
||||
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
|
||||
@@ -101,24 +40,13 @@ async function fetchUser() {
|
||||
this.pageTitle = this.user?.username;
|
||||
}
|
||||
|
||||
async function publishStash(stash, isPublic) {
|
||||
await this.$store.dispatch('updateStash', {
|
||||
stashId: stash.id,
|
||||
stash: { public: isPublic },
|
||||
});
|
||||
|
||||
this.fetchUser();
|
||||
}
|
||||
|
||||
async function mounted() {
|
||||
await this.fetchUser();
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ActorPreview,
|
||||
ScenePreview,
|
||||
Toggle,
|
||||
Stash,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
@@ -132,7 +60,6 @@ export default {
|
||||
mounted,
|
||||
methods: {
|
||||
fetchUser,
|
||||
publishStash,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
@@ -172,69 +99,6 @@ export default {
|
||||
box-shadow: 0 0 3px var(--shadow-weak);
|
||||
}
|
||||
|
||||
.stash-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
|
||||
&:not(:last-child) {
|
||||
border-bottom: solid 1px var(--shadow-hint);
|
||||
}
|
||||
}
|
||||
|
||||
.stash-header {
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.stash-link {
|
||||
flex-grow: 1;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.stash-public {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: .5rem;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
fill: var(--shadow-strong);
|
||||
margin: 0 .5rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.stash-name {
|
||||
padding: .5rem;
|
||||
margin: 0;
|
||||
color: var(--shadow-strong);
|
||||
}
|
||||
|
||||
.stash-actors,
|
||||
.stash-scenes {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
grid-gap: .5rem;
|
||||
scroll-behavior: smooth;
|
||||
scrollbar-width: none;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.stash-scenes {
|
||||
height: 8rem;
|
||||
}
|
||||
|
||||
.stash-actor,
|
||||
.stash-scene {
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
@media(max-width: $breakpoint-kilo) {
|
||||
.stashes {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
@@ -67,6 +67,12 @@ function initStashesActions(store, _router) {
|
||||
return curateStash(stash);
|
||||
}
|
||||
|
||||
async function createStash(context, stash) {
|
||||
const newStash = await post('/stashes', stash);
|
||||
|
||||
return newStash;
|
||||
}
|
||||
|
||||
async function updateStash(context, { stashId, stash }) {
|
||||
const newStash = await patch(`/stashes/${stashId}`, stash);
|
||||
|
||||
@@ -98,6 +104,7 @@ function initStashesActions(store, _router) {
|
||||
}
|
||||
|
||||
return {
|
||||
createStash,
|
||||
fetchStash,
|
||||
stashActor,
|
||||
stashScene,
|
||||
|
||||
Reference in New Issue
Block a user