385 lines
6.9 KiB
Vue
385 lines
6.9 KiB
Vue
<template>
|
|
<div class="page">
|
|
<div class="profile">
|
|
<div class="profile-header">
|
|
<div class="user">
|
|
<img
|
|
v-if="profile.avatar"
|
|
:src="profile.avatar"
|
|
class="avatar"
|
|
>
|
|
|
|
<h2 class="username ellipsis">{{ profile.username }}</h2>
|
|
</div>
|
|
|
|
<span class="age"><Icon icon="cake" />{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
|
|
</div>
|
|
|
|
<section class="profile-section">
|
|
<div class="section-header">
|
|
<h3 class="heading">Stashes</h3>
|
|
|
|
<button
|
|
class="button"
|
|
@click="showStashDialog = true"
|
|
>
|
|
<Icon icon="plus3" />
|
|
<span class="button-label">New stash</span>
|
|
</button>
|
|
</div>
|
|
|
|
<Dialog
|
|
v-if="showStashDialog"
|
|
title="New stash"
|
|
@close="showStashDialog = false"
|
|
@open="stashNameInput?.focus()"
|
|
>
|
|
<form
|
|
class="dialog-body"
|
|
@submit.prevent="createStash"
|
|
>
|
|
<input
|
|
ref="stashNameInput"
|
|
v-model="stashName"
|
|
class="input"
|
|
placeholder="Stash name"
|
|
>
|
|
|
|
<button
|
|
class="button button-submit"
|
|
>Create stash</button>
|
|
</form>
|
|
</Dialog>
|
|
|
|
<ul class="stashes nolist">
|
|
<li
|
|
v-for="stash in profile.stashes"
|
|
:key="`stash-${stash.id}`"
|
|
>
|
|
<div class="stash">
|
|
<div class="stash-header">
|
|
<a
|
|
:href="`/stash/${profile.username}/${stash.slug}`"
|
|
class="stash-name ellipsis nolink"
|
|
>
|
|
<span class="ellipsis">{{ stash.name }}</span>
|
|
|
|
<Icon
|
|
v-if="stash.primary"
|
|
icon="heart7"
|
|
class="primary"
|
|
/>
|
|
</a>
|
|
|
|
<Icon
|
|
v-if="profile.id === user?.id && stash.public"
|
|
icon="eye"
|
|
class="public noselect"
|
|
@click="setStashPublic(stash, false)"
|
|
/>
|
|
|
|
<Icon
|
|
v-else-if="profile.id === user?.id"
|
|
icon="eye-blocked"
|
|
class="public noselect"
|
|
@click="setStashPublic(stash, true)"
|
|
/>
|
|
</div>
|
|
|
|
<div class="stash-counts">
|
|
<a
|
|
:href="`/stash/${profile.username}/${stash.slug}/scenes`"
|
|
class="stash-count nolink"
|
|
><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</a>
|
|
|
|
<a
|
|
:href="`/stash/${profile.username}/${stash.slug}/actors`"
|
|
class="stash-count nolink"
|
|
><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</a>
|
|
|
|
<a
|
|
:href="`/stash/${profile.username}/${stash.slug}/movies`"
|
|
class="stash-count nolink"
|
|
><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, inject } from 'vue';
|
|
import { formatDistanceStrict } from 'date-fns';
|
|
|
|
import { get, post, patch } from '#/src/api.js';
|
|
import events from '#/src/events.js';
|
|
|
|
import Dialog from '#/components/dialog/dialog.vue';
|
|
|
|
const pageContext = inject('pageContext');
|
|
const profile = ref(pageContext.pageProps.profile);
|
|
const user = pageContext.user;
|
|
|
|
const stashName = ref(null);
|
|
const stashNameInput = ref(null);
|
|
|
|
const done = ref(true);
|
|
const showStashDialog = ref(false);
|
|
|
|
function abbreviateNumber(number) {
|
|
return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
|
|
}
|
|
|
|
async function createStash() {
|
|
if (done.value === false) {
|
|
return;
|
|
}
|
|
|
|
done.value = false;
|
|
|
|
try {
|
|
await post('/stashes', {
|
|
name: stashName.value,
|
|
public: false,
|
|
});
|
|
|
|
profile.value = await get(`/users/${profile.value.id}`);
|
|
showStashDialog.value = false;
|
|
|
|
events.emit('feedback', {
|
|
type: 'success',
|
|
message: `Created stash '${stashName.value}'`,
|
|
});
|
|
} catch (error) {
|
|
events.emit('feedback', {
|
|
type: 'error',
|
|
message: `Failed to create stash '${stashName.value}': ${error.message}`,
|
|
});
|
|
}
|
|
|
|
done.value = true;
|
|
}
|
|
|
|
async function setStashPublic(stash, isPublic) {
|
|
if (done.value === false) {
|
|
return;
|
|
}
|
|
|
|
try {
|
|
done.value = false;
|
|
|
|
await patch(`/stashes/${stash.id}`, { public: isPublic });
|
|
profile.value = await get(`/users/${profile.value.id}`);
|
|
|
|
events.emit('feedback', {
|
|
type: isPublic ? 'success' : 'remove',
|
|
message: isPublic
|
|
? `Stash '${stash.name}' set to public`
|
|
: `Stash '${stash.name}' set to private`,
|
|
});
|
|
} catch (error) {
|
|
console.error(error);
|
|
|
|
events.emit('feedback', {
|
|
type: 'error',
|
|
message: 'Failed to update stash',
|
|
});
|
|
}
|
|
|
|
done.value = true;
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.page {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
justify-content: center;
|
|
background: var(--background-base-10);
|
|
}
|
|
|
|
.profile {
|
|
width: 1200px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.profile-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: .5rem 1rem;
|
|
color: var(--highlight-strong-30);
|
|
background: var(--grey-dark-40);
|
|
border-radius: 0 0 .5rem .5rem;
|
|
}
|
|
|
|
.user {
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.username {
|
|
margin: 0;
|
|
font-size: 1.25rem;
|
|
}
|
|
|
|
.age {
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
|
|
.icon {
|
|
fill: var(--highlight-strong-20);
|
|
margin-right: .75rem;
|
|
transform: translateY(-1px);
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
border-radius: .25rem;
|
|
margin-right: 1rem;
|
|
}
|
|
|
|
.section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: .5rem .5rem .5rem .5rem;
|
|
|
|
.button {
|
|
margin-left: 1rem;
|
|
}
|
|
}
|
|
|
|
.heading {
|
|
margin: 0;
|
|
font-size: 1.1rem;
|
|
color: var(--primary);
|
|
}
|
|
|
|
.stashes {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
|
|
gap: 1rem;
|
|
padding: 0 .5rem 1rem .5rem;
|
|
}
|
|
|
|
.stash {
|
|
width: 100%;
|
|
border-radius: .25rem;
|
|
background: var(--background);
|
|
box-shadow: 0 0 3px var(--shadow-weak-30);
|
|
|
|
&:hover {
|
|
box-shadow: 0 0 3px var(--shadow-weak-20);
|
|
}
|
|
}
|
|
|
|
.stash-header {
|
|
display: flex;
|
|
align-items: stretch;
|
|
border-bottom: solid 1px var(--shadow-weak-30);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.icon.public {
|
|
display: flex;
|
|
height: auto;
|
|
padding: 0 .75rem;
|
|
fill: var(--shadow);
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
fill: var(--shadow-strong-30);
|
|
}
|
|
}
|
|
|
|
.stash-name {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
padding: .5rem;
|
|
overflow: hidden;
|
|
|
|
.icon {
|
|
margin-left: .75rem;
|
|
}
|
|
|
|
.icon.primary {
|
|
fill: var(--primary);
|
|
transform: translateY(1px);
|
|
}
|
|
}
|
|
|
|
.stash-counts {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.stash-count {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: .5rem;
|
|
flex-grow: 1;
|
|
font-size: .9rem;
|
|
|
|
.icon {
|
|
margin-right: .5rem;
|
|
fill: var(--shadow);
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--primary);
|
|
|
|
.icon {
|
|
fill: var(--primary);
|
|
}
|
|
}
|
|
}
|
|
|
|
.dialog-body {
|
|
padding: 1rem;
|
|
|
|
.input {
|
|
margin-bottom: .5rem;
|
|
}
|
|
}
|
|
|
|
@media(--compact) {
|
|
.profile-header {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.section-header {
|
|
padding: .5rem 1rem .5rem 1rem;
|
|
}
|
|
|
|
.stashes {
|
|
padding: 0 1rem 1rem 1rem;
|
|
}
|
|
}
|
|
|
|
@media(--small-30) {
|
|
.section-header {
|
|
padding: .5rem .5rem .5rem .5rem;
|
|
}
|
|
|
|
.stashes {
|
|
padding: 0 .5rem 1rem .5rem;
|
|
}
|
|
|
|
.age .icon {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media(--small-50) {
|
|
.age {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|