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

Added secondary stash button, centralized bookmark (heart) component.

Browse Source
This commit is contained in:
DebaucheryLibrarian
2024-03-27 02:28:21 +01:00
parent c018f54a12
commit b1e336381c
15 changed files with 426 additions and 552 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
components/actors/tile.vue
View File

@@ -28,18 +28,13 @@
>
</Link>
<Icon
v-show="favorited"
icon="heart7"
class="heart favorited"
@click.native.stop="unstash"
/>
<Icon
v-show="!favorited && user"
icon="heart8"
class="heart"
@click.native.stop="stash"
<Heart
domain="actors"
:item="actor"
:show-secondary="false"
class="light tiled"
@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
/>
</div>
@@ -79,9 +74,8 @@
import { ref, inject } from 'vue';
import { formatDate } from '#/utils/format.js';
import { post, del } from '#/src/api.js';
import events from '#/src/events.js';
import Heart from '#/components/stashes/heart.vue';
import Gender from './gender.vue';
const props = defineProps({
@@ -95,49 +89,7 @@ const pageContext = inject('pageContext');
const { user } = pageContext;
const pageStash = pageContext.pageProps.stash;
// console.log(props.actor);
const favorited = ref(props.actor.stashes?.some((sceneStash) => sceneStash.isPrimary) || false);
async function stash() {
try {
favorited.value = true;
await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: props.actor.id });
events.emit('feedback', {
type: 'success',
message: `${props.actor.name} stashed to ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = false;
events.emit('feedback', {
type: 'error',
message: `Failed to stash ${props.actor.name} to ${user.primaryStash.name}`,
});
}
}
async function unstash() {
try {
favorited.value = false;
await del(`/stashes/${user.primaryStash.id}/actors/${props.actor.id}`);
events.emit('feedback', {
type: 'remove',
message: `${props.actor.name} unstashed from ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = true;
console.error(error);
events.emit('feedback', {
type: 'error',
message: `Failed to unstash ${props.actor.name} from ${user.primaryStash.name}`,
});
}
}
</script>
<style scoped>
@@ -157,6 +109,10 @@ async function unstash() {
.name {
color: var(--primary);
}
:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
fill: var(--text-light);
}
}
&.unstashed {
@@ -205,26 +161,6 @@ async function unstash() {
opacity: .1;
}
.icon.heart {
width: 2rem;
height: 1.5rem;
position: absolute;
top: 0;
right: 0;
padding: .5rem .5rem 1rem 1rem;
fill: var(--highlight-strong-10);
filter: drop-shadow(0 0 3px var(--shadow));
&:hover {
cursor: pointer;
fill: var(--primary);
}
&.favorited {
fill: var(--primary);
}
}
.details {
width: 100%;
height: 1.5rem;

68
components/movies/tile.vue
View File

@@ -26,18 +26,13 @@
>
</a>
<Icon
v-show="favorited"
icon="heart7"
class="heart favorited"
@click.native.stop="unstash"
/>
<Icon
v-show="!favorited && user"
icon="heart8"
class="heart"
@click.native.stop="stash"
<Heart
domain="movies"
:item="movie"
:show-secondary="false"
class="light tiled"
@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
/>
</div>
@@ -111,9 +106,7 @@
import { ref, inject } from 'vue';
import { format } from 'date-fns';
import { post, del } from '#/src/api.js';
import events from '#/src/events.js';
import ellipsis from '#/utils/ellipsis.js';
import Heart from '#/components/stashes/heart.vue';
const props = defineProps({
movie: {
@@ -127,51 +120,8 @@ const user = pageContext.user;
const pageStash = pageContext.pageProps.stash;
const currentYear = new Date().getFullYear();
const fbCutoff = 20;
const favorited = ref(props.movie.stashes.some((sceneStash) => sceneStash.isPrimary));
async function stash() {
try {
favorited.value = true;
await post(`/stashes/${user.primaryStash.id}/movies`, { movieId: props.movie.id });
events.emit('feedback', {
type: 'success',
message: `"${ellipsis(props.movie.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = false;
events.emit('feedback', {
type: 'error',
message: `Failed to stash "${ellipsis(props.movie.title, fbCutoff)}" to ${user.primaryStash.name}`,
});
}
}
async function unstash() {
try {
favorited.value = false;
await del(`/stashes/${user.primaryStash.id}/movies/${props.movie.id}`);
events.emit('feedback', {
type: 'remove',
message: `"${ellipsis(props.movie.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = true;
console.error(error);
events.emit('feedback', {
type: 'error',
message: `Failed to unstash "${ellipsis(props.movie.title, fbCutoff)}" from ${user.primaryStash.name}`,
});
}
}
</script>
<style scoped>
@@ -186,7 +136,7 @@ async function unstash() {
&:hover {
box-shadow: 0 0 3px var(--shadow-weak-20);
.heart {
:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
fill: var(--text-light);
}
}

89
components/scenes/tile.vue
View File

@@ -27,18 +27,13 @@
/>
</Link>
<Icon
v-show="favorited"
icon="heart7"
class="heart favorited"
@click.native.stop="unstash"
/>
<Icon
v-show="!favorited && user"
icon="heart8"
class="heart"
@click.native.stop="stash"
<Heart
domain="scenes"
:item="scene"
:show-secondary="false"
class="light tiled"
@stashed="(stash) => { favorited = stash.isPrimary ? true : favorited; }"
@unstashed="(stash) => { favorited = stash.isPrimary ? false : favorited; }"
/>
<span
@@ -117,12 +112,9 @@
import { ref, inject } from 'vue';
import { format } from 'date-fns';
import { post, del } from '#/src/api.js';
import events from '#/src/events.js';
import getPath from '#/src/get-path.js';
import ellipsis from '#/utils/ellipsis.js';
import Icon from '../icon/icon.vue';
import Heart from '#/components/stashes/heart.vue';
const props = defineProps({
scene: {
@@ -136,49 +128,6 @@ const user = pageContext.user;
const pageStash = pageContext.pageProps.stash;
const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.isPrimary));
const fbCutoff = 20;
async function stash() {
try {
favorited.value = true;
await post(`/stashes/${user.primaryStash.id}/scenes`, { sceneId: props.scene.id });
events.emit('feedback', {
type: 'success',
message: `"${ellipsis(props.scene.title, fbCutoff)}" stashed to ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = false;
events.emit('feedback', {
type: 'error',
message: `Failed to stash "${ellipsis(props.scene.title, fbCutoff)}" to ${user.primaryStash.name}`,
});
}
}
async function unstash() {
try {
favorited.value = false;
await del(`/stashes/${user.primaryStash.id}/scenes/${props.scene.id}`);
events.emit('feedback', {
type: 'remove',
message: `"${ellipsis(props.scene.title, fbCutoff)}" unstashed from ${user.primaryStash.name}`,
});
} catch (error) {
favorited.value = true;
console.error(error);
events.emit('feedback', {
type: 'error',
message: `Failed to unstash "${ellipsis(props.scene.title, fbCutoff)}" from ${user.primaryStash.name}`,
});
}
}
</script>
<style scoped>
@@ -192,7 +141,7 @@ async function unstash() {
&:hover {
box-shadow: 0 0 3px var(--shadow-weak-20);
.heart {
:deep(.bookmarks) .icon:not(.favorited):not(:hover) {
fill: var(--text-light);
}
}
@@ -233,26 +182,6 @@ async function unstash() {
background-position: center;
}
.icon.heart {
width: 2rem;
height: 1.5rem;
position: absolute;
top: 0;
right: 0;
padding: .5rem .5rem 1rem 1rem;
fill: var(--highlight-strong-10);
filter: drop-shadow(0 0 3px var(--shadow));
&:hover {
cursor: pointer;
fill: var(--primary);
}
&.favorited {
fill: var(--primary);
}
}
.new {
display: flex;
flex-direction: row-reverse;

186
components/stashes/heart.vue Normal file
View File

@@ -0,0 +1,186 @@
<template>
<div
v-if="user"
class="bookmarks"
>
<VDropdown v-if="showSecondary">
<Icon
icon="folder-heart"
class="heart noselect"
:class="{ favorited: itemStashes.some((itemStash) => !itemStash.isPrimary) }"
/>
<template #popper>
<ul class="stash-menu nolist">
<li
v-for="userStash in user.stashes"
:key="`stash-${userStash.id}`"
class="menu-item"
>
<label class="menu-stash">
<Checkbox
:checked="itemStashes.some((itemStash) => itemStash.id === userStash.id)"
@change="(checked) => checked ? stashItem(userStash) : unstashItem(userStash)"
/>{{ userStash.name }}
</label>
</li>
</ul>
</template>
</VDropdown>
<Icon
v-if="itemStashes.some((itemStash) => itemStash.isPrimary)"
icon="heart7"
class="heart favorited noselect"
@click.native.stop="unstashItem(user.primaryStash)"
/>
<Icon
v-else
icon="heart8"
class="heart noselect"
@click.native.stop="stashItem(user.primaryStash)"
/>
</div>
</template>
<script setup>
import { ref, inject } from 'vue';
import { post, del } from '#/src/api.js';
import ellipsis from '#/utils/ellipsis.js';
import Icon from '#/components/icon/icon.vue';
import Checkbox from '#/components/form/checkbox.vue';
const props = defineProps({
domain: {
type: String,
default: 'scenes',
},
item: {
type: Object,
default: null,
},
showSecondary: {
type: Boolean,
default: true,
},
});
const emit = defineEmits(['stashed', 'unstashed']);
const { user } = inject('pageContext');
const itemStashes = ref(props.item.stashes);
const done = ref(true);
const feedbackCutoff = 20;
const itemKeys = {
scenes: 'sceneId',
actors: 'actorId',
movies: 'movieId',
};
async function stashItem(stash) {
if (!done.value) {
return;
}
const stashState = itemStashes.value;
done.value = false;
itemStashes.value = itemStashes.value.concat(stash);
try {
await post(`/stashes/${stash.id}/${props.domain}`, { [itemKeys[props.domain]]: props.item.id }, {
successFeedback: `"${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" stashed to ${stash.name}`,
errorFeedback: `Failed to stash "${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" to ${stash.name}`,
});
emit('stashed', stash);
} catch (error) {
itemStashes.value = stashState;
}
done.value = true;
}
async function unstashItem(stash) {
if (!done.value) {
return;
}
const stashState = itemStashes.value;
done.value = false;
itemStashes.value = itemStashes.value.filter((itemStash) => itemStash.id !== stash.id);
try {
await del(`/stashes/${stash.id}/${props.domain}/${props.item.id}`, {
undoFeedback: `"${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" unstashed from ${stash.name}`,
errorFeedback: `Failed to unstash "${ellipsis(props.item.title || props.item.name, feedbackCutoff)}" from ${stash.name}`,
});
emit('unstashed', stash);
} catch (error) {
itemStashes.value = stashState;
}
done.value = true;
}
</script>
<style scoped>
.bookmarks {
display: flex;
.icon {
width: 1.5rem;
height: 1.5rem;
padding: .5rem .5rem;
fill: var(--shadow);
}
&.light .icon {
fill: var(--highlight);
}
&.tiled {
position: absolute;
top: 0;
right: 0;
.icon {
fill: var(--highlight-strong-20);
filter: drop-shadow(0 0 3px var(--shadow-strong-10));
}
}
.icon.heart:hover,
.icon.heart.favorited {
cursor: pointer;
fill: var(--primary);
}
}
.menu-item {
display: block;
}
.menu-stash {
display: flex;
align-items: center;
padding: .5rem;
&:hover {
cursor: pointer;
color: var(--primary);
}
.check-container {
margin-right: .5rem;
}
}
</style>