DebaucheryLibrarian/traxxx-web
1
1
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Added stash menu with remove and rename.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-03-27 00:06:03 +01:00
parent e4638324f7
commit c018f54a12
22 changed files with 620 additions and 623 deletions
Download Patch File Download Diff File Expand all files Collapse all files

199
pages/users/@username/+Page.vue
View File

@@ -12,7 +12,7 @@
<h2 class="username ellipsis">{{ profile.username }}</h2>
</div>
<span class="age"><Icon icon="cake" />{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
<span class="age">{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
</div>
<section class="profile-section">
@@ -41,8 +41,9 @@
<input
ref="stashNameInput"
v-model="stashName"
class="input"
maxlength="24"
placeholder="Stash name"
class="input"
>
<button
@@ -56,53 +57,11 @@
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>
<StashTile
:stash="stash"
:profile="profile"
@reload="reloadProfile"
/>
</li>
</ul>
</section>
@@ -114,14 +73,13 @@
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 { get, post } from '#/src/api.js';
import StashTile from '#/components/stashes/tile.vue';
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);
@@ -129,8 +87,8 @@ 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 reloadProfile() {
profile.value = await get(`/users/${profile.value.id}`);
}
async function createStash() {
@@ -140,56 +98,19 @@ async function createStash() {
done.value = false;
try {
await post('/stashes', {
name: stashName.value,
public: false,
});
await post('/stashes', {
name: stashName.value,
public: false,
}, {
successFeedback: `Created stash '${stashName.value}'`,
errorFeedback: `Failed to create stash '${stashName.value}'`,
appendErrorMessage: true,
}).finally(() => { done.value = true; });
profile.value = await get(`/users/${profile.value.id}`);
showStashDialog.value = false;
showStashDialog.value = false;
stashName.value = null;
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;
await reloadProfile();
}
</script>
@@ -229,8 +150,10 @@ async function setStashPublic(stash, isPublic) {
.age {
display: flex;
flex-shrink: 0;
font-size: .9rem;
.icon {
width: .9rem;
fill: var(--highlight-strong-20);
margin-right: .75rem;
transform: translateY(-1px);
@@ -268,78 +191,6 @@ async function setStashPublic(stash, isPublic) {
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;