boiii
/
traxxx
forked from DebaucheryLibrarian/traxxx
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added stash menu to release page, returning stashes from stash API to avoid reloading or local interpolation.

This commit is contained in:
DebaucheryLibrarian 2021-03-21 03:23:58 +01:00
parent de5d104e1e
commit 348aa91832
18 changed files with 309 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
assets/components/releases/release.vue
View File

@ -51,19 +51,52 @@
/>
</h2>
<span>
<Tooltip class="stash-trigger">
<Icon
v-show="me && stashed"
v-show="me"
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"
@click="() => unstashScene()"
/>
<Icon
v-show="me && !stashed"
v-show="me && !favorited"
:class="{ stashing }"
icon="heart8"
class="stash unstashed noselect"
@click="stashScene"
@click="() => stashScene()"
/>
</span>
</div>
<div class="row associations">
@ -230,6 +263,7 @@
<script>
import Details from './details.vue';
import Banner from './banner.vue';
import StashMenu from '../stashes/menu.vue';
import Album from '../album/album.vue';
import Tags from './tags.vue';
import Chapters from './chapters.vue';
@ -250,41 +284,44 @@ async function fetchRelease(scroll = true) {
this.$refs.content.scrollTop = 0;
}
this.stashed = this.release.isStashed;
this.stashedBy = this.release.stashes;
this.stashing = false;
}
async function stashScene() {
this.stashed = true;
try {
this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
async function stashScene(stash) {
this.stashing = true;
this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'stashMovie' : 'stashScene', {
sceneId: this.release.id,
movieId: this.release.id,
stashId: this.$store.getters.favorites.id,
stashId: stash?.id || this.$store.getters.favorites.id,
});
} catch (error) {
this.stashed = false;
}
this.stashing = false;
}
async function unstashScene() {
this.stashed = false;
try {
this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
async function unstashScene(stash) {
this.stashing = true;
this.stashedBy = await this.$store.dispatch(this.$route.name === 'movie' ? 'unstashMovie' : 'unstashScene', {
sceneId: this.release.id,
movieId: this.release.id,
stashId: this.$store.getters.favorites.id,
stashId: stash?.id || this.$store.getters.favorites.id,
});
} catch (error) {
this.stashed = true;
}
this.stashing = false;
}
function me() {
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() {
return (this.release.poster && this.getBgPath(this.release.poster, 'thumbnail'))
|| (this.release.covers.length > 0 && this.getBgPath(this.release.covers[0], 'thumbnail'));
@ -304,17 +341,19 @@ export default {
components: {
Actor,
Album,
Details,
Banner,
Scroll,
Releases,
Chapters,
Details,
Releases,
Scroll,
StashMenu,
Tags,
},
data() {
return {
release: null,
stashed: false,
stashedBy: [],
stashing: false,
};
},
computed: {
@ -322,6 +361,8 @@ export default {
bannerBackground,
me,
showAlbum,
favorited,
stashed,
},
watch: {
$route: fetchRelease,
@ -408,7 +449,7 @@ export default {
.stash.icon {
width: 1.5rem;
height: 1.5rem;
padding: 0 1rem;
padding: 0 .75rem;
fill: var(--shadow);
&.stashed {
@ -421,6 +462,10 @@ export default {
}
}
.stash-trigger {
display: inline-block;
}
.album-toggle {
height: fit-content;
display: inline-flex;

74
assets/components/stashes/menu.vue Normal file
View File

@ -0,0 +1,74 @@
<template>
<ul class="menu nolist">
<li
v-for="stash in stashes"
:key="`stash-${stash.id}`"
class="menu-item"
>
<label class="menu-stash noselect">
<Checkbox
:checked="stashedByIds.has(stash.id)"
class="menu-check"
@change="(checked) => checked ? $emit('stash', stash) : $emit('unstash', stash)"
/>{{ stash.name }}
</label>
</li>
</ul>
</template>
<script>
import Checkbox from '../form/checkbox.vue';
function stashes() {
return this.$store.state.auth.user?.stashes || [];
}
export default {
components: {
Checkbox,
},
props: {
item: {
type: Object,
default: null,
},
stashedBy: {
type: Array,
default: () => [],
},
},
emits: ['stash', 'unstash'],
data() {
const stashedByIds = new Set(this.stashedBy.map(stash => stash.id));
return {
stashedByIds,
};
},
computed: {
stashes,
},
};
</script>
<style lang="scss" scoped>
.menu-item {
display: block;
}
.menu-stash {
display: flex;
align-items: center;
padding: .5rem 1rem .5rem .5rem;
&:hover {
color: var(--primary);
cursor: pointer;
}
}
.menu-check {
display: inline-block;
margin: 0 .75rem 0 0;
}
</style>

2
assets/components/stashes/stash.vue
View File

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

2
assets/components/users/stash.vue
View File

@ -33,7 +33,7 @@
</label>
<Icon
v-if="isMe && stash.deletable"
v-if="isMe && !stash.primary"
icon="bin"
class="stash-remove"
@click.native="showRemoveStash = true"

45
assets/components/users/user.vue
View File

@ -11,9 +11,17 @@
v-if="user.stashes?.length > 0"
class="section"
>
<h3 class="heading">Stashes</h3>
<div class="section-header">
<h3 class="section-heading">Stashes</h3>
<ul class="stashes nolist">
<Icon
icon="plus3"
class="header-add"
@click="showAddStash = true"
/>
</div>
<ul class="section-body stashes nolist">
<li
v-for="stash in user.stashes"
:key="stash.id"
@ -94,11 +102,13 @@ export default {
@import 'breakpoints';
.header {
padding: .5rem 1rem;
display: flex;
justify-content: space-between;
background: var(--profile);
}
.username {
padding: .5rem 1rem;
margin: 0;
font-size: 1.5rem;
color: var(--text-light);
@ -108,7 +118,7 @@ export default {
}
.section {
padding: 1rem;
padding: 1rem 0;
margin: 0 0 1rem 0;
}
@ -119,8 +129,33 @@ export default {
grid-gap: 1rem;
}
.heading {
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 0 1rem 0;
}
.section-body {
padding: 0 1rem;
}
.section-heading {
color: var(--primary);
padding: 0 1rem;
margin: 0;
font-size: 1.25rem;
}
.header-add {
height: auto;
padding: .5rem 1rem;
fill: var(--shadow);
&:hover {
fill: var(--primary);
cursor: pointer;
}
}
.stashes-stash {

2
assets/css/_theme.scss
View File

@ -26,12 +26,14 @@ $breakpoint4: 1500px;
--darken-censor: rgba(0, 0, 0, .95);
--darken-weak: rgba(0, 0, 0, .2);
--darken-hint: rgba(0, 0, 0, .1);
--darken-touch: rgba(0, 0, 0, .05);
--lighten: rgba(255, 255, 255, .5);
--lighten-strong: rgba(255, 255, 255, .7);
--lighten-extreme: rgba(255, 255, 255, .9);
--lighten-weak: rgba(255, 255, 255, .2);
--lighten-hint: rgba(255, 255, 255, .05);
--lighten-touch: rgba(255, 255, 255, .03);
--logo-shadow: drop-shadow(1px 0 0 $shadow-weak) drop-shadow(-1px 0 0 $shadow-weak) drop-shadow(0 1px 0 $shadow-weak) drop-shadow(0 -1px 0 $shadow-weak);
--logo-highlight: drop-shadow(0 0 1px $highlight);

6
assets/js/api.js
View File

@ -66,6 +66,12 @@ async function del(endpoint) {
credentials: 'same-origin',
});
const contentTypes = res.headers.get('content-type');
if (res.ok && contentTypes?.includes('application/json')) {
return res.json();
}
if (res.ok) {
return true;
}

7
assets/js/curate.js
View File

@ -56,6 +56,10 @@ function curateActor(actor, release) {
curatedActor.aliasFor = curateActor(curatedActor.aliasFor);
}
if (actor.stashes) {
curatedActor.stashes = actor.stashes.filter(Boolean).map(stash => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
}
curatedActor.stashes = actor.stashes?.map(stash => stash.stash || stash) || [];
return curatedActor;
@ -80,6 +84,7 @@ function curateRelease(release) {
if (release.directors) curatedRelease.directors = release.directors.filter(Boolean).map(director => curateActor(director.director || director, curatedRelease));
if (release.movieTags && release.movieTags.length > 0) curatedRelease.tags = release.movieTags.filter(Boolean).map(({ tag }) => tag);
if (release.movieActors && release.movieActors.length > 0) curatedRelease.actors = release.movieActors.filter(Boolean).map(({ actor }) => curateActor(actor, curatedRelease));
if (release.stashes) curatedRelease.stashes = release.stashes.filter(Boolean).map(stash => curateStash(stash.stash || stash)); // eslint-disable-line no-use-before-define
if (release.productionLocation) {
curatedRelease.productionLocation = {
@ -155,7 +160,7 @@ function curateUser(user) {
const curatedUser = user;
if (user.stashes) {
curatedUser.stashes = user.stashes.map(stash => curateStash(stash));
curatedUser.stashes = user.stashes.map(stash => curateStash(stash.stash || stash));
}
return curatedUser;

8
assets/js/fragments.js
View File

@ -228,7 +228,8 @@ const releaseFields = `
url
}
isNew
isStashed
isFavorited
isStashed(includeFavorites: false)
stashes: stashesScenesBySceneId(
filter: {
stash: {
@ -242,6 +243,7 @@ const releaseFields = `
id
name
slug
primary
}
}
`;
@ -368,7 +370,8 @@ const releaseFragment = `
}
}
}
isStashed
isFavorited
isStashed(includeFavorites: false)
stashes: stashesScenesBySceneId(
filter: {
stash: {
@ -382,6 +385,7 @@ const releaseFragment = `
id
name
slug
primary
}
}
}

22
assets/js/stashes/actions.js
View File

@ -21,7 +21,7 @@ function initStashesActions(store, _router) {
name
slug
public
deletable
primary
user {
id
username
@ -69,15 +69,11 @@ function initStashesActions(store, _router) {
}
async function createStash(context, stash) {
const newStash = await post('/stashes', stash);
return newStash;
return post('/stashes', stash);
}
async function updateStash(context, { stashId, stash }) {
const newStash = await patch(`/stashes/${stashId}`, stash);
return newStash;
return patch(`/stashes/${stashId}`, stash);
}
async function removeStash(context, stashId) {
@ -85,27 +81,27 @@ function initStashesActions(store, _router) {
}
async function stashActor(context, { actorId, stashId }) {
await post(`/stashes/${stashId}/actors`, { actorId });
return post(`/stashes/${stashId}/actors`, { actorId });
}
async function unstashActor(context, { actorId, stashId }) {
await del(`/stashes/${stashId}/actors/${actorId}`);
return del(`/stashes/${stashId}/actors/${actorId}`);
}
async function stashScene(context, { sceneId, stashId }) {
await post(`/stashes/${stashId}/scenes`, { sceneId });
return post(`/stashes/${stashId}/scenes`, { sceneId });
}
async function unstashScene(context, { sceneId, stashId }) {
await del(`/stashes/${stashId}/scenes/${sceneId}`);
return del(`/stashes/${stashId}/scenes/${sceneId}`);
}
async function stashMovie(context, { movieId, stashId }) {
await post(`/stashes/${stashId}/movies`, { movieId });
return post(`/stashes/${stashId}/movies`, { movieId });
}
async function unstashMovie(context, { movieId, stashId }) {
await del(`/stashes/${stashId}/movies/${movieId}`);
return del(`/stashes/${stashId}/movies/${movieId}`);
}
return {

2
assets/js/users/actions.js
View File

@ -19,7 +19,7 @@ function initUsersActions(store, _router) {
name
slug
public
deletable
primary
actors: stashesActors {
comment
actor {

4
migrations/20190325001339_releases.js
View File

@ -1067,9 +1067,9 @@ exports.up = knex => Promise.resolve()
.notNullable()
.defaultTo(false);
table.boolean('deletable')
table.boolean('primary')
.notNullable()
.defaultTo(true);
.defaultTo(false);
table.datetime('created_at')
.notNullable()

2
src/auth.js
View File

@ -80,7 +80,7 @@ async function signup(credentials) {
name: 'Favorites',
slug: 'favorites',
public: false,
deletable: false,
primary: true,
});
return fetchUser(userId);

27
src/stashes.js
View File

@ -13,6 +13,7 @@ function curateStash(stash) {
id: stash.id,
name: stash.name,
slug: stash.slug,
primary: stash.primary,
};
return curatedStash;
@ -48,6 +49,18 @@ async function fetchStash(stashId, sessionUser) {
return curateStash(stash);
}
async function fetchStashes(domain, itemId, sessionUser) {
const stashes = await knex(`stashes_${domain}s`)
.select('stashes.*')
.where({
[`${domain}_id`]: itemId,
user_id: sessionUser.id,
})
.leftJoin('stashes', 'stashes.id', `stashes_${domain}s.stash_id`);
return stashes.map(stash => curateStash(stash));
}
async function createStash(newStash, sessionUser) {
if (!sessionUser) {
throw new HttpError('You are not authenthicated', 401);
@ -89,7 +102,7 @@ async function removeStash(stashId, sessionUser) {
.where({
id: stashId,
user_id: sessionUser.id,
deletable: true,
primary: false,
})
.delete();
@ -106,6 +119,8 @@ async function stashActor(actorId, stashId, sessionUser) {
stash_id: stash.id,
actor_id: actorId,
});
return fetchStashes('actor', actorId, sessionUser);
}
async function stashScene(sceneId, stashId, sessionUser) {
@ -116,6 +131,8 @@ async function stashScene(sceneId, stashId, sessionUser) {
stash_id: stash.id,
scene_id: sceneId,
});
return fetchStashes('scene', sceneId, sessionUser);
}
async function stashMovie(movieId, stashId, sessionUser) {
@ -126,6 +143,8 @@ async function stashMovie(movieId, stashId, sessionUser) {
stash_id: stash.id,
movie_id: movieId,
});
return fetchStashes('movie', movieId, sessionUser);
}
async function unstashActor(actorId, stashId, sessionUser) {
@ -138,6 +157,8 @@ async function unstashActor(actorId, stashId, sessionUser) {
.where('stashes_actors.stash_id', knex.raw('deletable.stash_id'))
.where('stashes.user_id', sessionUser.id))
.delete();
return fetchStashes('actor', actorId, sessionUser);
}
async function unstashScene(sceneId, stashId, sessionUser) {
@ -150,6 +171,8 @@ async function unstashScene(sceneId, stashId, sessionUser) {
.where('stashes_scenes.stash_id', knex.raw('deletable.stash_id'))
.where('stashes.user_id', sessionUser.id))
.delete();
return fetchStashes('scene', sceneId, sessionUser);
}
async function unstashMovie(movieId, stashId, sessionUser) {
@ -162,6 +185,8 @@ async function unstashMovie(movieId, stashId, sessionUser) {
.where('stashes_movies.stash_id', knex.raw('deletable.stash_id'))
.where('stashes.user_id', sessionUser.id))
.delete();
return fetchStashes('movie', movieId, sessionUser);
}
module.exports = {

2
src/web/auth.js
View File

@ -22,7 +22,7 @@ async function logoutApi(req, res) {
async function fetchMeApi(req, res) {
if (req.session.user) {
req.session.user = await fetchUser(req.session.user.id, req.session.user);
req.session.user = await fetchUser(req.session.user.id, false, req.session.user);
res.send(req.session.user);
return;

26
src/web/plugins/actors.js
View File

@ -12,23 +12,35 @@ const schemaExtender = makeExtendSchemaPlugin(_build => ({
}
extend type Actor {
isStashed: Boolean @requires(columns: ["stashesActors"])
isFavorited: Boolean @requires(columns: ["stashesActors"])
isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesActors"])
ageFromBirth: Int @requires(columns: ["dateOfBirth"])
ageAtDeath: Int @requires(columns: ["dateOfBirth", "dateOfDeath"])
height(units:Units): String @requires(columns: ["height"])
weight(units:Units): String @requires(columns: ["weight"])
penisLength(units:Units): String @requires(columns: ["penis_length"])
penisGirth(units:Units): String @requires(columns: ["penis_girth"])
height(units: Units): String @requires(columns: ["height"])
weight(units: Units): String @requires(columns: ["weight"])
penisLength(units: Units): String @requires(columns: ["penis_length"])
penisGirth(units: Units): String @requires(columns: ["penis_girth"])
}
`,
resolvers: {
Actor: {
isStashed(parent) {
if (!parent['@stashes']) {
isFavorited(parent) {
if (!parent['@stashes'] || typeof parent['@stashes'][0]['@stash'].primary === 'undefined') {
return null;
}
return parent['@stashes'].some(({ '@stash': stash }) => stash.primary);
},
isStashed(parent, args) {
if (!parent['@stashes'] || typeof parent['@stashes'][0]['@stash'].primary === 'undefined') {
return null;
}
if (args.includeFavorites) {
return parent['@stashes'].length > 0;
}
return parent['@stashes'].some(({ '@stash': stash }) => !stash.primary);
},
ageFromBirth(parent, _args, _context, _info) {
if (!parent.dateOfBirth) return null;

18
src/web/plugins/releases.js
View File

@ -5,17 +5,29 @@ const { makeExtendSchemaPlugin, gql } = require('graphile-utils');
const schemaExtender = makeExtendSchemaPlugin(_build => ({
typeDefs: gql`
extend type Release {
isStashed: Boolean @requires(columns: ["stashesScenesBySceneId"])
isFavorited: Boolean @requires(columns: ["stashesScenesBySceneId"])
isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesScenesBySceneId"])
}
`,
resolvers: {
Release: {
isStashed(parent) {
if (!parent['@stashes']) {
isFavorited(parent) {
if (!parent['@stashes'] || typeof parent['@stashes'][0]['@stash'].primary === 'undefined') {
return null;
}
return parent['@stashes'].some(({ '@stash': stash }) => stash.primary);
},
isStashed(parent, args) {
if (!parent['@stashes'] || typeof parent['@stashes'][0]['@stash'].primary === 'undefined') {
return null;
}
if (args.includeFavorites) {
return parent['@stashes'].length > 0;
}
return parent['@stashes'].some(({ '@stash': stash }) => !stash.primary);
},
},
},

24
src/web/stashes.js
View File

@ -31,39 +31,39 @@ async function removeStashApi(req, res) {
}
async function stashActorApi(req, res) {
await stashActor(req.body.actorId, req.params.stashId, req.session.user);
const stashes = await stashActor(req.body.actorId, req.params.stashId, req.session.user);
res.status(201).send();
res.send(stashes);
}
async function stashSceneApi(req, res) {
await stashScene(req.body.sceneId, req.params.stashId, req.session.user);
const stashes = await stashScene(req.body.sceneId, req.params.stashId, req.session.user);
res.status(201).send();
res.send(stashes);
}
async function stashMovieApi(req, res) {
await stashMovie(req.body.movieId, req.params.stashId, req.session.user);
const stashes = await stashMovie(req.body.movieId, req.params.stashId, req.session.user);
res.status(201).send();
res.send(stashes);
}
async function unstashActorApi(req, res) {
await unstashActor(req.params.actorId, req.params.stashId, req.session.user);
const stashes = await unstashActor(req.params.actorId, req.params.stashId, req.session.user);
res.status(204).send();
res.send(stashes);
}
async function unstashSceneApi(req, res) {
await unstashScene(req.params.sceneId, req.params.stashId, req.session.user);
const stashes = await unstashScene(req.params.sceneId, req.params.stashId, req.session.user);
res.status(204).send();
res.send(stashes);
}
async function unstashMovieApi(req, res) {
await unstashMovie(req.params.movieId, req.params.stashId, req.session.user);
const stashes = await unstashMovie(req.params.movieId, req.params.stashId, req.session.user);
res.status(204).send();
res.send(stashes);
}
module.exports = {