Separated full heart button into component.

This commit is contained in:
DebaucheryLibrarian 2021-03-21 03:46:59 +01:00
parent 348aa91832
commit 9ff70e5578
4 changed files with 109 additions and 96 deletions

View File

@ -3,6 +3,7 @@
v-if="release" v-if="release"
ref="content" ref="content"
class="content" class="content"
@scroll="events.emit('scroll', $event)"
> >
<Scroll <Scroll
v-slot="slotProps" v-slot="slotProps"
@ -51,52 +52,11 @@
/> />
</h2> </h2>
<span> <StashButton
<Tooltip class="stash-trigger"> :stashed-by="stashedBy"
<Icon @stash="(stash) => stashScene(stash)"
v-show="me" @unstash="(stash) => unstashScene(stash)"
icon="menu" />
class="stash noselect"
:class="{ stashed, stashing }"
/>
<template v-slot:tooltip>
<StashMenu
v-if="$route.name === 'scene'"
:item="release"
:stashed-by="stashedBy"
:class="{ stashing }"
@stash="(stashId) => stashScene(stashId)"
@unstash="(stashId) => unstashScene(stashId)"
/>
<StashMenu
v-if="$route.name === 'movie'"
:item="release"
:stashed-by="stashedBy"
:class="{ stashing }"
@stash="(stashId) => stashScene(stashId)"
@unstash="(stashId) => unstashScene(stashId)"
/>
</template>
</Tooltip>
<Icon
v-show="me && favorited"
:class="{ stashing }"
icon="heart7"
class="stash stashed noselect"
@click="() => unstashScene()"
/>
<Icon
v-show="me && !favorited"
:class="{ stashing }"
icon="heart8"
class="stash unstashed noselect"
@click="() => stashScene()"
/>
</span>
</div> </div>
<div class="row associations"> <div class="row associations">
@ -263,7 +223,7 @@
<script> <script>
import Details from './details.vue'; import Details from './details.vue';
import Banner from './banner.vue'; import Banner from './banner.vue';
import StashMenu from '../stashes/menu.vue'; import StashButton from '../stashes/button.vue';
import Album from '../album/album.vue'; import Album from '../album/album.vue';
import Tags from './tags.vue'; import Tags from './tags.vue';
import Chapters from './chapters.vue'; import Chapters from './chapters.vue';
@ -285,43 +245,28 @@ async function fetchRelease(scroll = true) {
} }
this.stashedBy = this.release.stashes; this.stashedBy = this.release.stashes;
this.stashing = false;
} }
async function stashScene(stash) { async function stashScene(stashId) {
this.stashing = true;
this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', { this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
sceneId: this.release.id, sceneId: this.release.id,
movieId: this.release.id, movieId: this.release.id,
stashId: stash?.id || this.$store.getters.favorites.id, stashId,
}); });
this.stashing = false;
} }
async function unstashScene(stash) { async function unstashScene(stashId) {
this.stashing = true;
this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', { this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
sceneId: this.release.id, sceneId: this.release.id,
movieId: this.release.id, movieId: this.release.id,
stashId: stash?.id || this.$store.getters.favorites.id, stashId,
}); });
this.stashing = false;
} }
function me() { function me() {
return this.$store.state.auth.user; return this.$store.state.auth.user;
} }
function favorited() {
return this.stashedBy.some(stash => stash.primary);
}
function stashed() {
return this.stashedBy.some(stash => !stash.primary);
}
function bannerBackground() { function bannerBackground() {
return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail')) return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail'))
|| (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail')); || (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail'));
@ -346,14 +291,13 @@ export default {
Details, Details,
Releases, Releases,
Scroll, Scroll,
StashMenu, StashButton,
Tags, Tags,
}, },
data() { data() {
return { return {
release: null, release: null,
stashedBy: [], stashedBy: [],
stashing: false,
}; };
}, },
computed: { computed: {
@ -361,8 +305,6 @@ export default {
bannerBackground, bannerBackground,
me, me,
showAlbum, showAlbum,
favorited,
stashed,
}, },
watch: { watch: {
$route: fetchRelease, $route: fetchRelease,
@ -446,26 +388,6 @@ export default {
color: var(--shadow); color: var(--shadow);
} }
.stash.icon {
width: 1.5rem;
height: 1.5rem;
padding: 0 .75rem;
fill: var(--shadow);
&.stashed {
fill: var(--primary);
}
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
.stash-trigger {
display: inline-block;
}
.album-toggle { .album-toggle {
height: fit-content; height: fit-content;
display: inline-flex; display: inline-flex;

View File

@ -0,0 +1,95 @@
<template>
<span>
<Tooltip class="stash-trigger">
<Icon
v-show="me"
icon="menu"
class="stash noselect"
:class="{ stashed }"
/>
<template v-slot:tooltip>
<StashMenu
:stashed-by="stashedBy"
@stash="(stashId) => $emit('stash', stashId)"
@unstash="(stashId) => $emit('unstash', stashId)"
/>
</template>
</Tooltip>
<Icon
v-show="me && favorited"
icon="heart7"
class="stash stashed noselect"
@click.native="() => $emit('unstash', favorites.id)"
/>
<Icon
v-show="me && !favorited"
icon="heart8"
class="stash unstashed noselect"
@click.native="() => $emit('stash', favorites.id)"
/>
</span>
</template>
<script>
import StashMenu from './menu.vue';
function favorited() {
return this.stashedBy.some(stash => stash.primary);
}
function stashed() {
return this.stashedBy.some(stash => !stash.primary);
}
function favorites() {
return this.$store.getters.favorites;
}
function me() {
return this.$store.state.auth.user;
}
export default {
components: {
StashMenu,
},
props: {
stashedBy: {
type: Array,
default: () => [],
},
},
emits: ['stash', 'unstash'],
computed: {
me,
favorites,
favorited,
stashed,
},
};
</script>
<style lang="scss" scoped>
.stash.icon {
width: 1.5rem;
height: 1.5rem;
padding: 0 .75rem;
fill: var(--shadow);
&.stashed {
fill: var(--primary);
}
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
.stash-trigger {
display: inline-block;
}
</style>

View File

@ -9,7 +9,7 @@
<Checkbox <Checkbox
:checked="stashedByIds.has(stash.id)" :checked="stashedByIds.has(stash.id)"
class="menu-check" class="menu-check"
@change="(checked) => checked ? $emit('stash', stash) : $emit('unstash', stash)" @change="(checked) => checked ? $emit('stash', stash.id) : $emit('unstash', stash.id)"
/>{{ stash.name }} />{{ stash.name }}
</label> </label>
</li> </li>
@ -28,10 +28,6 @@ export default {
Checkbox, Checkbox,
}, },
props: { props: {
item: {
type: Object,
default: null,
},
stashedBy: { stashedBy: {
type: Array, type: Array,
default: () => [], default: () => [],

View File

@ -26,7 +26,7 @@ function curateUser(user) {
async function fetchUser(userId, raw) { async function fetchUser(userId, raw) {
const user = await knex('users') const user = await knex('users')
.select(knex.raw('users.*, users_roles.abilities as role_abilities, COALESCE(json_agg(stashes) FILTER (WHERE stashes.id IS NOT NULL), \'[]\') as stashes')) .select(knex.raw('users.*, users_roles.abilities as role_abilities, COALESCE(json_agg(stashes ORDER BY stashes.created_at) FILTER (WHERE stashes.id IS NOT NULL), \'[]\') as stashes'))
.modify((builder) => { .modify((builder) => {
if (typeof userId === 'number') { if (typeof userId === 'number') {
builder.where('users.id', userId); builder.where('users.id', userId);