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;
overflow-y: auto;
overflow-x: hidden;
box-shadow: 0 0 3px var(--shadow-weak);
z-index: 1;
}

View File

@ -16,6 +16,7 @@
font-size: .8rem;
font-weight: bold;
text-align: center;
box-shadow: inset -3px 0 3px var(--shadow-hint);
}
.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 {
display: block;
font-weight: bold;
color: var(--shadow-strong);
color: var(--darken-strong);
font-size: .9rem;
padding: .75rem 1rem;
border-bottom: solid 1px var(--shadow-hint);
border-bottom: solid 1px var(--darken-hint);
text-align: center;
text-decoration: none;
}

View File

@ -19,13 +19,37 @@
: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 stash-section"
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"
@ -68,12 +92,24 @@
<script>
import ActorPreview from './actor-preview.vue';
import ScenePreview from './scene-preview.vue';
import Toggle from '../form/toggle.vue';
async function fetchUser() {
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;
}
async function publishStash(stash, isPublic) {
await this.$store.dispatch('updateStash', {
stashId: stash.id,
stash: { public: isPublic },
});
this.fetchUser();
}
async function mounted() {
await this.fetchUser();
}
@ -82,18 +118,21 @@ export default {
components: {
ActorPreview,
ScenePreview,
Toggle,
},
data() {
return {
user: this.$route.params.username === this.$store.state.auth.user?.username
? this.$store.state.auth.user
: null,
isMe: false,
pageTitle: null,
};
},
mounted,
methods: {
fetchUser,
publishStash,
},
};
</script>
@ -133,17 +172,9 @@ export default {
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 {
display: flex;
align-items: center;
padding: .5rem;
&: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-scenes {
display: flex;

View File

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

View File

@ -25,9 +25,9 @@ async function get(endpoint, query = {}) {
throw new Error(errorMsg);
}
async function post(endpoint, data) {
async function post(endpoint, data, method = 'POST') {
const res = await fetch(`${config.api.url}${endpoint}`, {
method: 'POST',
method,
mode: 'cors',
headers: {
'Content-Type': 'application/json',
@ -51,6 +51,14 @@ async function post(endpoint, data) {
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) {
const res = await fetch(`${config.api.url}${endpoint}`, {
method: 'DELETE',
@ -97,4 +105,6 @@ export {
post,
del,
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 { curateStash } from '../curate';
@ -61,6 +67,12 @@ function initStashesActions(store, _router) {
return curateStash(stash);
}
async function updateStash(context, { stashId, stash }) {
const newStash = await patch(`/stashes/${stashId}`, stash);
return newStash;
}
async function stashActor(context, { actorId, stashId }) {
await post(`/stashes/${stashId}/actors`, { actorId });
}
@ -93,6 +105,7 @@ function initStashesActions(store, _router) {
unstashActor,
unstashScene,
unstashMovie,
updateStash,
};
}

View File

@ -29,11 +29,31 @@ async function fetchStash(stashId, sessionUser) {
})
.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) {
throw new HttpError('You are not authorized to modify this stash', 403);
}
return stash;
return curateStash(stash);
}
async function stashActor(actorId, stashId, sessionUser) {
@ -110,4 +130,5 @@ module.exports = {
unstashScene,
unstashActor,
unstashMovie,
updateStash,
};

View File

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

View File

@ -7,8 +7,15 @@ const {
unstashActor,
unstashScene,
unstashMovie,
updateStash,
} = 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) {
await stashActor(req.body.actorId, req.params.stashId, req.session.user);
@ -52,4 +59,5 @@ module.exports = {
unstashActor: unstashActorApi,
unstashScene: unstashSceneApi,
unstashMovie: unstashMovieApi,
updateStash: updateStashApi,
};