diff --git a/assets/components/actors/tile.vue b/assets/components/actors/tile.vue index ea00aca6..0cf2cc18 100644 --- a/assets/components/actors/tile.vue +++ b/assets/components/actors/tile.vue @@ -59,6 +59,20 @@ class="avatar-fallback" > + + + + @@ -115,6 +129,36 @@ @@ -243,6 +297,22 @@ export default { 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 { background: var(--darken); color: var(--text-light); diff --git a/assets/js/actors/actions.js b/assets/js/actors/actions.js index 59f5e6b1..3b330bbe 100644 --- a/assets/js/actors/actions.js +++ b/assets/js/actors/actions.js @@ -2,10 +2,16 @@ import config from 'config'; import dayjs from 'dayjs'; import { graphql, get } from '../api'; -import { releaseFields, getIncludedEntities, getIncludedActors } from '../fragments'; import { curateActor, curateRelease } from '../curate'; import getDateRange from '../get-date-range'; +import { + releaseFields, + actorStashesFields, + getIncludedEntities, + getIncludedActors, +} from '../fragments'; + function initActorActions(store, router) { async function fetchActorById({ _commit }, { actorId, @@ -246,23 +252,7 @@ function initActorActions(store, router) { } totalCount } - isStashed - stashes: stashesActors( - filter: { - stash: { - userId: { - equalTo: $userId - } - } - } - ) @include(if: $hasAuth) { - stash { - id - name - slug - primary - } - } + ${actorStashesFields} } } `, { @@ -346,6 +336,8 @@ function initActorActions(store, router) { $offset: Int = 0, $letter: String! = "", $naturalBoobs: Boolean, + $userId: Int, + $hasAuth: Boolean!, ) { connection: actorsConnection( first: $limit, @@ -413,6 +405,7 @@ function initActorActions(store, router) { name alias } + ${actorStashesFields} } } } @@ -421,6 +414,8 @@ function initActorActions(store, router) { limit, letter, naturalBoobs, + hasAuth: !!store.state.auth.user, + userId: store.state.auth.user?.id, }); return { diff --git a/assets/js/fragments.js b/assets/js/fragments.js index a4f3e031..f7783a5f 100644 --- a/assets/js/fragments.js +++ b/assets/js/fragments.js @@ -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 = ` id name @@ -72,6 +93,7 @@ const actorFields = ` name alias } + ${actorStashesFields} `; const releaseActorsFragment = ` @@ -455,6 +477,7 @@ function getIncludedActors(router) { } export { + actorStashesFields, releaseActorsFragment, releaseFields, releaseTagsFragment, diff --git a/assets/js/ui/actions.js b/assets/js/ui/actions.js index 6ca67db4..9545bed4 100644 --- a/assets/js/ui/actions.js +++ b/assets/js/ui/actions.js @@ -1,5 +1,5 @@ import { graphql } from '../api'; -import { releaseFields } from '../fragments'; +import { releaseFields, actorStashesFields } from '../fragments'; import { curateRelease, curateActor } from '../curate'; function initUiActions(store, _router) { @@ -116,6 +116,7 @@ function initUiActions(store, _router) { name alias } + ${actorStashesFields} } } `, {