Added stash creation. Added dialog framework.
This commit is contained in:
@@ -1,87 +1,168 @@
|
||||
<template>
|
||||
<div class="profile">
|
||||
<div class="profile-header">
|
||||
<img
|
||||
v-if="profile.avatar"
|
||||
:src="profile.avatar"
|
||||
class="avatar"
|
||||
>
|
||||
<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">{{ profile.username }}</h2>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<h2 class="username ellipsis">{{ profile.username }}</h2>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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, patch } from '#/src/api.js';
|
||||
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;
|
||||
@@ -96,8 +177,8 @@ async function setStashPublic(stash, isPublic) {
|
||||
events.emit('feedback', {
|
||||
type: isPublic ? 'success' : 'remove',
|
||||
message: isPublic
|
||||
? `Stash '${stash.name}' is public`
|
||||
: `Stash '${stash.name}' is private`,
|
||||
? `Stash '${stash.name}' set to public`
|
||||
: `Stash '${stash.name}' set to private`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
@@ -113,12 +194,31 @@ async function setStashPublic(stash, isPublic) {
|
||||
</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 {
|
||||
@@ -126,6 +226,17 @@ async function setStashPublic(stash, isPublic) {
|
||||
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;
|
||||
@@ -133,15 +244,33 @@ async function setStashPublic(stash, isPublic) {
|
||||
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: 1rem;
|
||||
padding: 0 .5rem 1rem .5rem;
|
||||
}
|
||||
|
||||
.stash {
|
||||
width: 100%;
|
||||
border-radius: .25rem;
|
||||
background: var(--background);
|
||||
box-shadow: 0 0 3px var(--shadow-weak-30);
|
||||
|
||||
@@ -210,4 +339,46 @@ async function setStashPublic(stash, isPublic) {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
||||
|
||||
Reference in New Issue
Block a user