Added heart button to actor tiles.

This commit is contained in:
DebaucheryLibrarian 2021-03-24 01:52:27 +01:00
parent e12de5ec00
commit 093d447328
4 changed files with 108 additions and 19 deletions

View File

@ -59,6 +59,20 @@
class="avatar-fallback" class="avatar-fallback"
></span> ></span>
<Icon
v-show="favorited"
icon="heart7"
class="stash stashed"
@click.prevent.native="unstashActor"
/>
<Icon
v-show="favorited === false"
icon="heart8"
class="stash unstashed"
@click.prevent.native="stashActor"
/>
<span <span
class="details" class="details"
> >
@ -115,6 +129,36 @@
<script> <script>
import Gender from './gender.vue'; import Gender from './gender.vue';
async function stashActor() {
this.favorited = true;
try {
await this.$store.dispatch('stashActor', {
actorId: this.actor.id,
stashId: this.$store.getters.favorites.id,
});
this.$emit('stash', true);
} catch (error) {
this.favorited = false;
}
}
async function unstashActor() {
this.favorited = false;
try {
await this.$store.dispatch('unstashActor', {
actorId: this.actor.id,
stashId: this.$store.getters.favorites.id,
});
this.$emit('stash', false);
} catch (error) {
this.favorited = true;
}
}
function sfw() { function sfw() {
return this.$store.state.ui.sfw; return this.$store.state.ui.sfw;
} }
@ -133,9 +177,19 @@ export default {
default: null, default: null,
}, },
}, },
emits: ['stash'],
data() {
return {
favorited: this.actor.isFavorited,
};
},
computed: { computed: {
sfw, sfw,
}, },
methods: {
stashActor,
unstashActor,
},
}; };
</script> </script>
@ -243,6 +297,22 @@ export default {
opacity: .1; opacity: .1;
} }
.stash {
width: 1.25rem;
height: 1.25rem;
padding: .25rem .25rem .5rem .5rem;
position: absolute;
top: 0;
right: 0;
fill: var(--lighten-weak);
filter: drop-shadow(0 0 2px var(--darken));
&:hover,
&.stashed {
fill: var(--primary);
}
}
.details { .details {
background: var(--darken); background: var(--darken);
color: var(--text-light); color: var(--text-light);

View File

@ -2,10 +2,16 @@ import config from 'config';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { graphql, get } from '../api'; import { graphql, get } from '../api';
import { releaseFields, getIncludedEntities, getIncludedActors } from '../fragments';
import { curateActor, curateRelease } from '../curate'; import { curateActor, curateRelease } from '../curate';
import getDateRange from '../get-date-range'; import getDateRange from '../get-date-range';
import {
releaseFields,
actorStashesFields,
getIncludedEntities,
getIncludedActors,
} from '../fragments';
function initActorActions(store, router) { function initActorActions(store, router) {
async function fetchActorById({ _commit }, { async function fetchActorById({ _commit }, {
actorId, actorId,
@ -246,23 +252,7 @@ function initActorActions(store, router) {
} }
totalCount totalCount
} }
isStashed ${actorStashesFields}
stashes: stashesActors(
filter: {
stash: {
userId: {
equalTo: $userId
}
}
}
) @include(if: $hasAuth) {
stash {
id
name
slug
primary
}
}
} }
} }
`, { `, {
@ -346,6 +336,8 @@ function initActorActions(store, router) {
$offset: Int = 0, $offset: Int = 0,
$letter: String! = "", $letter: String! = "",
$naturalBoobs: Boolean, $naturalBoobs: Boolean,
$userId: Int,
$hasAuth: Boolean!,
) { ) {
connection: actorsConnection( connection: actorsConnection(
first: $limit, first: $limit,
@ -413,6 +405,7 @@ function initActorActions(store, router) {
name name
alias alias
} }
${actorStashesFields}
} }
} }
} }
@ -421,6 +414,8 @@ function initActorActions(store, router) {
limit, limit,
letter, letter,
naturalBoobs, naturalBoobs,
hasAuth: !!store.state.auth.user,
userId: store.state.auth.user?.id,
}); });
return { return {

View File

@ -40,6 +40,27 @@ const sitesFragment = `
} }
`; `;
const actorStashesFields = `
isStashed
isFavorited
stashes: stashesActors(
filter: {
stash: {
userId: {
equalTo: $userId
}
}
}
) @include(if: $hasAuth) {
stash {
id
name
slug
primary
}
}
`;
const actorFields = ` const actorFields = `
id id
name name
@ -72,6 +93,7 @@ const actorFields = `
name name
alias alias
} }
${actorStashesFields}
`; `;
const releaseActorsFragment = ` const releaseActorsFragment = `
@ -455,6 +477,7 @@ function getIncludedActors(router) {
} }
export { export {
actorStashesFields,
releaseActorsFragment, releaseActorsFragment,
releaseFields, releaseFields,
releaseTagsFragment, releaseTagsFragment,

View File

@ -1,5 +1,5 @@
import { graphql } from '../api'; import { graphql } from '../api';
import { releaseFields } from '../fragments'; import { releaseFields, actorStashesFields } from '../fragments';
import { curateRelease, curateActor } from '../curate'; import { curateRelease, curateActor } from '../curate';
function initUiActions(store, _router) { function initUiActions(store, _router) {
@ -116,6 +116,7 @@ function initUiActions(store, _router) {
name name
alias alias
} }
${actorStashesFields}
} }
} }
`, { `, {