Added public visibility toggle to user page stashes.

This commit is contained in:
DebaucheryLibrarian 2021-03-20 02:03:30 +01:00
parent 011f10fba8
commit 4bc6ff846d
11 changed files with 240 additions and 24 deletions

View File

@ -150,7 +150,6 @@ export default {
flex-grow: 1; flex-grow: 1;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
box-shadow: 0 0 3px var(--shadow-weak);
z-index: 1; z-index: 1;
} }

View File

@ -16,6 +16,7 @@
font-size: .8rem; font-size: .8rem;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
box-shadow: inset -3px 0 3px var(--shadow-hint);
} }
.segment { .segment {

View File

@ -0,0 +1,102 @@
<template>
<label class="toggle-container noselect">
<input
:id="`toggle-${id}`"
:checked="checked"
:true-value="trueValue"
:false-value="falseValue"
:disabled="disabled"
type="checkbox"
class="toggle-input"
@change="$emit('change', $event.target.checked)"
>
<label
:for="`toggle-${id}`"
class="toggle"
/>
</label>
</template>
<script>
export default {
props: {
checked: {
type: Boolean,
default: false,
},
trueValue: {
type: null,
default: true,
},
falseValue: {
type: null,
default: false,
},
disabled: {
type: Boolean,
default: false,
},
},
emits: ['change'],
data() {
return {
id: Math.floor(new Date().getTime() * Math.random()),
};
},
};
</script>
<style lang="scss" scoped>
@import 'breakpoints';
.toggle-container {
display: inline-block;
cursor: pointer;
}
.toggle {
width: 2rem;
height: .9rem;
display: flex;
align-items: center;
position: relative;
background: var(--shadow-hint);
border-radius: 1rem;
cursor: pointer;
&::after {
content: '';
background-color: var(--background-light);
width: 1rem;
height: 1rem;
display: inline-block;
position: absolute;
left: 0;
border-radius: 50%;
box-shadow: 0 0 2px var(--darken-strong);
transition: background-color .2s ease, left .2s ease;
}
}
.toggle-input {
display: none;
&:checked + .toggle {
background: var(--primary-faded);
&::after {
background: var(--primary);
left: calc(100% - 1rem);
}
}
&[disabled] + .toggle {
background: var(--shadow-weak);
&::after {
background: var(--shadow);
}
}
}
</style>

View File

@ -164,10 +164,10 @@ export default {
.menu-username { .menu-username {
display: block; display: block;
font-weight: bold; font-weight: bold;
color: var(--shadow-strong); color: var(--darken-strong);
font-size: .9rem; font-size: .9rem;
padding: .75rem 1rem; padding: .75rem 1rem;
border-bottom: solid 1px var(--shadow-hint); border-bottom: solid 1px var(--darken-hint);
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
} }

View File

@ -19,13 +19,37 @@
:key="stash.id" :key="stash.id"
class="stash" class="stash"
> >
<div class="stash-section stash-header">
<router-link <router-link
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }" :to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
class="stash-link stash-section" class="stash-link nolink"
> >
<h4 class="stash-name">{{ stash.name }}</h4> <h4 class="stash-name">{{ stash.name }}</h4>
</router-link> </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 <ul
v-if="stash.scenes?.length > 0" v-if="stash.scenes?.length > 0"
class="stash-section stash-scenes nolist" class="stash-section stash-scenes nolist"
@ -68,12 +92,24 @@
<script> <script>
import ActorPreview from './actor-preview.vue'; import ActorPreview from './actor-preview.vue';
import ScenePreview from './scene-preview.vue'; import ScenePreview from './scene-preview.vue';
import Toggle from '../form/toggle.vue';
async function fetchUser() { async function fetchUser() {
this.user = await this.$store.dispatch('fetchUser', this.$route.params.username); this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
this.isMe = this.user.id === this.$store.state.auth.user?.id;
this.pageTitle = this.user?.username; 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() { async function mounted() {
await this.fetchUser(); await this.fetchUser();
} }
@ -82,18 +118,21 @@ export default {
components: { components: {
ActorPreview, ActorPreview,
ScenePreview, ScenePreview,
Toggle,
}, },
data() { data() {
return { return {
user: this.$route.params.username === this.$store.state.auth.user?.username user: this.$route.params.username === this.$store.state.auth.user?.username
? this.$store.state.auth.user ? this.$store.state.auth.user
: null, : null,
isMe: false,
pageTitle: null, pageTitle: null,
}; };
}, },
mounted, mounted,
methods: { methods: {
fetchUser, fetchUser,
publishStash,
}, },
}; };
</script> </script>
@ -133,17 +172,9 @@ export default {
box-shadow: 0 0 3px var(--shadow-weak); box-shadow: 0 0 3px var(--shadow-weak);
} }
.stash-link.stash-section {
display: block;
text-decoration: none;
}
.stash-name {
color: var(--shadow-strong);
margin: 0;
}
.stash-section { .stash-section {
display: flex;
align-items: center;
padding: .5rem; padding: .5rem;
&:not(:last-child) { &:not(:last-child) {
@ -151,6 +182,34 @@ export default {
} }
} }
.stash-header {
justify-content: space-between;
padding: 0;
}
.stash-link.stash-section {
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 {
color: var(--shadow-strong);
padding: .5rem;
margin: 0;
}
.stash-actors, .stash-actors,
.stash-scenes { .stash-scenes {
display: flex; display: flex;

View File

@ -92,7 +92,7 @@ $breakpoint4: 1500px;
--background-dim: #181818; --background-dim: #181818;
--background-soft: #111; --background-soft: #111;
--profile: #222; --profile: #000;
--tile: #2a2a2a; --tile: #2a2a2a;
--link: #dd6688; --link: #dd6688;

View File

@ -25,9 +25,9 @@ async function get(endpoint, query = {}) {
throw new Error(errorMsg); throw new Error(errorMsg);
} }
async function post(endpoint, data) { async function post(endpoint, data, method = 'POST') {
const res = await fetch(`${config.api.url}${endpoint}`, { const res = await fetch(`${config.api.url}${endpoint}`, {
method: 'POST', method,
mode: 'cors', mode: 'cors',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@ -51,6 +51,14 @@ async function post(endpoint, data) {
throw new Error(errorMsg); throw new Error(errorMsg);
} }
async function patch(endpoint, data) {
return post(endpoint, data, 'PATCH');
}
async function put(endpoint, data) {
return post(endpoint, data, 'PUT');
}
async function del(endpoint) { async function del(endpoint) {
const res = await fetch(`${config.api.url}${endpoint}`, { const res = await fetch(`${config.api.url}${endpoint}`, {
method: 'DELETE', method: 'DELETE',
@ -97,4 +105,6 @@ export {
post, post,
del, del,
graphql, graphql,
patch,
put,
}; };

View File

@ -1,4 +1,10 @@
import { graphql, post, del } from '../api'; import {
graphql,
post,
del,
patch,
} from '../api';
import { releaseFields } from '../fragments'; import { releaseFields } from '../fragments';
import { curateStash } from '../curate'; import { curateStash } from '../curate';
@ -61,6 +67,12 @@ function initStashesActions(store, _router) {
return curateStash(stash); return curateStash(stash);
} }
async function updateStash(context, { stashId, stash }) {
const newStash = await patch(`/stashes/${stashId}`, stash);
return newStash;
}
async function stashActor(context, { actorId, stashId }) { async function stashActor(context, { actorId, stashId }) {
await post(`/stashes/${stashId}/actors`, { actorId }); await post(`/stashes/${stashId}/actors`, { actorId });
} }
@ -93,6 +105,7 @@ function initStashesActions(store, _router) {
unstashActor, unstashActor,
unstashScene, unstashScene,
unstashMovie, unstashMovie,
updateStash,
}; };
} }

View File

@ -29,11 +29,31 @@ async function fetchStash(stashId, sessionUser) {
}) })
.first(); .first();
if (!stash) {
throw new HttpError('You are not authorized to access this stash', 403);
}
return curateStash(stash);
}
async function updateStash(stashId, newStash, sessionUser) {
if (!sessionUser) {
throw new HttpError('You are not authenthicated', 401);
}
const stash = await knex('stashes')
.where({
id: stashId,
user_id: sessionUser.id,
})
.update(newStash)
.returning('*');
if (!stash) { if (!stash) {
throw new HttpError('You are not authorized to modify this stash', 403); throw new HttpError('You are not authorized to modify this stash', 403);
} }
return stash; return curateStash(stash);
} }
async function stashActor(actorId, stashId, sessionUser) { async function stashActor(actorId, stashId, sessionUser) {
@ -110,4 +130,5 @@ module.exports = {
unstashScene, unstashScene,
unstashActor, unstashActor,
unstashMovie, unstashMovie,
updateStash,
}; };

View File

@ -50,6 +50,7 @@ const {
unstashActor, unstashActor,
unstashScene, unstashScene,
unstashMovie, unstashMovie,
updateStash,
} = require('./stashes'); } = require('./stashes');
async function initServer() { async function initServer() {
@ -83,6 +84,8 @@ async function initServer() {
router.post('/api/users', signup); router.post('/api/users', signup);
router.patch('/api/stashes/:stashId', updateStash);
router.post('/api/stashes/:stashId/actors', stashActor); router.post('/api/stashes/:stashId/actors', stashActor);
router.post('/api/stashes/:stashId/scenes', stashScene); router.post('/api/stashes/:stashId/scenes', stashScene);
router.post('/api/stashes/:stashId/movies', stashMovie); router.post('/api/stashes/:stashId/movies', stashMovie);

View File

@ -7,8 +7,15 @@ const {
unstashActor, unstashActor,
unstashScene, unstashScene,
unstashMovie, unstashMovie,
updateStash,
} = require('../stashes'); } = require('../stashes');
async function updateStashApi(req, res) {
const stash = await updateStash(req.params.stashId, req.body, req.session.user);
res.send(stash);
}
async function stashActorApi(req, res) { async function stashActorApi(req, res) {
await stashActor(req.body.actorId, req.params.stashId, req.session.user); await stashActor(req.body.actorId, req.params.stashId, req.session.user);
@ -52,4 +59,5 @@ module.exports = {
unstashActor: unstashActorApi, unstashActor: unstashActorApi,
unstashScene: unstashSceneApi, unstashScene: unstashSceneApi,
unstashMovie: unstashMovieApi, unstashMovie: unstashMovieApi,
updateStash: updateStashApi,
}; };