Added sections and pagination to stash page.

This commit is contained in:
DebaucheryLibrarian 2021-09-12 00:05:45 +02:00
parent 8c5ef21459
commit d542889827
17 changed files with 37095 additions and 95 deletions

View File

@ -3,7 +3,7 @@
v-if="actor"
class="actor"
>
<router-link
<RouterLink
:to="{ name: 'actor', params: { actorId: actor.id, actorSlug: actor.slug } }"
class="link"
>
@ -15,7 +15,7 @@
class="name"
>{{ actor.name }}</span>
<router-link
<RouterLink
v-if="actor.entity"
v-tooltip="actor.entity.name"
:to="{ name: actor.entity.type, params: { entitySlug: actor.entity.slug, range: 'new', pageNumber: 1 } }"
@ -25,7 +25,7 @@
:src="`/img/logos/${actor.entity.slug}/favicon_dark.png`"
class="favicon-icon"
>
</router-link>
</RouterLink>
<Icon
v-if="alias"
@ -122,7 +122,7 @@
/>
</span>
</div>
</router-link>
</RouterLink>
</div>
</template>

View File

@ -2,22 +2,12 @@
<div class="filter-bar noselect">
<div class="sort">
<router-link
:to="{ params: { range: 'latest', pageNumber: 1 }, query: $route.query }"
:class="{ active: $route.name === 'latest' || range === 'latest' }"
v-for="section in ranges"
:key="section"
:to="{ params: { range: section, pageNumber: 1 }, query: $route.query }"
:class="{ active: $route.name === section || range === section }"
class="range range-button"
>Latest</router-link>
<router-link
:to="{ params: { range: 'upcoming', pageNumber: 1 }, query: $route.query }"
:class="{ active: $route.name === 'upcoming' || range === 'upcoming' }"
class="range-button"
>Upcoming</router-link>
<router-link
:to="{ params: { range: 'new', pageNumber: 1 }, query: $route.query }"
:class="{ active: $route.name === 'new' || range === 'new' }"
class="range-button"
>New</router-link>
>{{ section }}</router-link>
</div>
<div class="filters">
@ -96,6 +86,10 @@ export default {
type: Number,
default: 10,
},
ranges: {
type: Array,
default: () => ['latest', 'upcoming', 'new'],
},
availableTags: {
type: Array,
default: () => [],
@ -324,6 +318,7 @@ export default {
text-decoration: none;
border: solid 1px transparent;
border-bottom: none;
text-transform: capitalize;
&:hover:not(.active) {
color: var(--shadow-strong);

View File

@ -3,7 +3,7 @@
<Details :release="movie" />
<div class="movie">
<router-link
<RouterLink
:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
class="cover"
>
@ -13,15 +13,29 @@
:style="{ 'background-image': getBgPath(movie.covers[0], 'lazy') }"
loading="lazy"
>
</router-link>
<Icon
v-show="favorited"
icon="heart7"
class="stash stashed"
@click.prevent.native="unstashMovie"
/>
<Icon
v-show="favorited === false"
icon="heart8"
class="stash unstashed"
@click.prevent.native="stashMovie"
/>
</RouterLink>
<div class="info">
<router-link
<RouterLink
:to="{ name: 'movie', params: { releaseId: movie.id, releaseSlug: movie.slug } }"
class="title-link"
>
<h3 class="title">{{ movie.title }}</h3>
</router-link>
</RouterLink>
<ul
class="actors nolist"
@ -31,10 +45,10 @@
v-for="actor in movie.actors"
:key="`tag-${movie.id}-${actor.id}`"
class="actor"
><router-link
><RouterLink
:to="`/actor/${actor.id}/${actor.slug}`"
class="actor-link"
>{{ actor.name }}</router-link></li>
>{{ actor.name }}</RouterLink></li>
</ul>
<ul
@ -45,10 +59,10 @@
v-for="tag in movie.tags"
:key="`tag-${movie.id}-${tag.id}`"
class="tag"
><router-link
><RouterLink
:to="`/tag/${tag.slug}`"
class="tag-link"
>{{ tag.name }}</router-link></li>
>{{ tag.name }}</RouterLink></li>
</ul>
</div>
</div>
@ -58,6 +72,36 @@
<script>
import Details from './tile-details.vue';
async function stashMovie() {
this.favorited = true;
try {
await this.$store.dispatch('stashMovie', {
movieId: this.movie.id,
stashId: this.$store.getters.favorites.id,
});
this.$emit('stash', true);
} catch (error) {
this.favorited = false;
}
}
async function unstashMovie() {
this.favorited = false;
try {
await this.$store.dispatch('unstashMovie', {
movieId: this.movie.id,
stashId: this.$store.getters.favorites.id,
});
this.$emit('stash', false);
} catch (error) {
this.favorited = true;
}
}
function sfw() {
return this.$store.state.ui.sfw;
}
@ -72,9 +116,18 @@ export default {
default: null,
},
},
data() {
return {
favorited: this.movie.isFavorited,
};
},
computed: {
sfw,
},
methods: {
stashMovie,
unstashMovie,
},
};
</script>
@ -87,6 +140,10 @@ export default {
background: var(--background);
box-shadow: 0 0 3px var(--darken-weak);
font-size: 0;
&:hover .unstashed {
fill: var(--lighten);
}
}
.movie {
@ -101,6 +158,7 @@ export default {
.cover {
height: 100%;
position: relative;
box-shadow: 0 0 3px var(--darken-weak);
img {
@ -179,6 +237,22 @@ export default {
}
}
.stash {
width: 1.25rem;
height: 1.25rem;
padding: .25rem .5rem .5rem .25rem;
position: absolute;
top: 0;
right: 0;
fill: var(--lighten-weak);
filter: drop-shadow(0 0 2px var(--darken));
&:hover,
&.stashed {
fill: var(--primary);
}
}
@media(max-width: $breakpoint-kilo) {
.movie {
height: 12rem;

View File

@ -10,11 +10,11 @@
>{{ stash.name }}</h2>
<span class="header-section">
<router-link
<RouterLink
v-if="stash.user"
:to="{ name: 'user', params: { username: stash.user.username } }"
class="header-item stash-username nolink"
><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></router-link>
><Icon icon="user3" /><span class="username-name">{{ stash.user.username }}</span></RouterLink>
<label
v-if="isMine"
@ -55,15 +55,17 @@
</div>
<div class="content-inner">
<FilterBar :ranges="['scenes', 'actors', 'movies']" />
<Releases
v-if="stash.scenes?.length > 0"
v-if="$route.params.range === 'scenes' && stash.scenes?.length > 0"
:releases="stash.scenes.map(item => item.scene)"
class="stash-section stash-scenes"
@stash="fetchStash"
/>
<ul
v-if="stash.actors?.length > 0"
v-if="$route.params.range === 'actors'"
class="stash-section stash-actors nolist"
>
<li
@ -71,6 +73,26 @@
:key="item.id"
><Actor :actor="item.actor" /></li>
</ul>
<div
v-if="$route.params.range === 'movies'"
class="stash-movies"
>
<Movie
v-for="item in stash.movies"
:key="`movie-${item.id}`"
:movie="item.movie"
@stash="fetchStash"
/>
</div>
<Pagination
:items-total="totalCount"
:items-per-page="limit"
class="pagination-bottom"
/>
<Footer />
</div>
</div>
</template>
@ -78,12 +100,37 @@
<script>
import Actor from '../actors/tile.vue';
import Releases from '../releases/releases.vue';
import Movie from '../releases/movie-tile.vue';
import RemoveStash from './remove.vue';
import Toggle from '../form/toggle.vue';
import FilterBar from '../filters/filter-bar.vue';
import Pagination from '../pagination/pagination.vue';
async function fetchStash() {
this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
this.stash = await this.$store.dispatch('fetchStash', {
stashId: this.$route.params.stashId,
section: this.$route.params.range,
pageNumber: this.$route.params.pageNumber || 1,
limit: this.limit,
});
console.log(this.stash.movies);
this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
if (this.$route.params.range === 'scenes') {
this.totalCount = this.stash.sceneTotal;
}
if (this.$route.params.range === 'actors') {
this.totalCount = this.stash.actorTotal;
}
if (this.$route.params.range === 'movies') {
this.totalCount = this.stash.movieTotal;
}
this.pageTitle = this.stash.name;
}
async function publishStash(isPublic) {
@ -109,23 +156,32 @@ async function removeStash(removed) {
}
async function mounted() {
this.fetchStash();
await this.fetchStash();
}
export default {
components: {
Actor,
Movie,
Releases,
RemoveStash,
Pagination,
FilterBar,
Toggle,
},
data() {
return {
stash: null,
limit: Number(this.$route.query.limit) || 20,
pageTitle: null,
showRemoveStash: false,
isMine: false,
totalCount: 0,
};
},
watch: {
$route: fetchStash,
},
mounted,
methods: {
fetchStash,
@ -199,21 +255,26 @@ export default {
}
}
.stash-section:not(:last-child) {
border-bottom: solid 1px var(--shadow-hint);
}
.stash-actors {
display: grid;
grid-gap: .5rem;
grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
flex-grow: 1;
padding: 1rem;
border-top: solid 1px var(--shadow-hint);
}
.stash-movies {
display: grid;
flex-grow: 1;
grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
grid-template-rows: min-content;
grid-gap: 1rem;
padding: 1rem;
border-top: solid 1px var(--shadow-hint);
}
.stash-scenes {
flex-grow: 0;
.tiles {
grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
}

View File

@ -2,7 +2,7 @@
<div class="stash">
<div class="stash-section stash-header">
<router-link
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug, range: 'scenes', pageNumber: 1 } }"
class="stash-link nolink"
>
<h4 class="stash-name">{{ stash.name }}</h4>

View File

@ -136,20 +136,30 @@ function curateTag(tag) {
function curateStash(stash) {
const curatedStash = stash;
if (stash.scenes) {
curatedStash.scenes = stash.scenes.map(item => ({
if (stash.scenes || stash.scenesConnection?.scenes) {
curatedStash.sceneTotal = stash.scenesConnection?.totalCount || null;
curatedStash.scenes = (stash.scenesConnection?.scenes || stash.scenes).map(item => ({
...item,
scene: curateRelease(item.scene),
}));
}
if (stash.actors) {
curatedStash.actors = stash.actors.map(item => ({
if (stash.actors || stash.actorsConnection?.actors) {
curatedStash.actorTotal = stash.actorsConnection?.totalCount || null;
curatedStash.actors = (stash.actorsConnection?.actors || stash.actors).map(item => ({
...item,
actor: curateActor(item.actor),
}));
}
if (stash.movies || stash.moviesConnection?.movies) {
curatedStash.movieTotal = stash.moviesConnection?.totalCount || null;
curatedStash.movies = (stash.moviesConnection?.movies || stash.movies).map(item => ({
...item,
movie: curateRelease(item.movie),
}));
}
return curatedStash;
}

View File

@ -145,6 +145,24 @@ const movieFields = `
}
}
}
isFavorited
isStashed(includeFavorites: false)
stashes: stashesMovies(
filter: {
stash: {
userId: {
equalTo: $userId
}
}
}
) @include(if: $hasAuth) {
stash {
id
name
slug
primary
}
}
`;
const campaignsFragment = `

View File

@ -72,6 +72,8 @@ function initReleasesActions(store, router) {
query Movies(
$limit:Int = 1000,
$offset:Int = 0,
$hasAuth: Boolean!
$userId: Int
) {
connection: moviesConnection(
first: $limit
@ -90,6 +92,8 @@ function initReleasesActions(store, router) {
}
}
`, {
hasAuth: !!store.state.auth.user,
userId: store.state.auth.user?.id,
limit,
offset: Math.max(0, (pageNumber - 1)) * limit,
});

View File

@ -228,7 +228,18 @@ const routes = [
name: 'notifications',
},
{
path: '/stash/:stashId/:stashSlug?',
path: '/stash/:stashId/:stashSlug',
redirect: from => ({
name: 'stash',
params: {
...from.params,
range: 'scenes',
pageNumber: 1,
},
}),
},
{
path: '/stash/:stashId/:stashSlug?/:range/:pageNumber',
component: Stash,
name: 'stash',
},

View File

@ -5,14 +5,24 @@ import {
patch,
} from '../api';
import { releaseFields, actorStashesFields } from '../fragments';
import { releaseFields, actorStashesFields, movieFields } from '../fragments';
import { curateStash } from '../curate';
function initStashesActions(store, _router) {
async function fetchStash(context, stashId) {
async function fetchStash(context, {
stashId,
section = 'scenes',
pageNumber = 1,
limit = 20,
}) {
const { stash } = await graphql(`
query Stash(
$stashId: Int!
$includeScenes: Boolean!
$includeActors: Boolean!
$includeMovies: Boolean!
$limit:Int = 10,
$offset:Int = 0,
$hasAuth: Boolean!
$userId: Int
) {
@ -26,7 +36,13 @@ function initStashesActions(store, _router) {
id
username
}
actors: stashesActors {
actorsConnection: stashesActorsConnection(
orderBy: CREATED_AT_DESC
first: $limit
offset: $offset
) @include(if: $includeActors) {
totalCount
actors: nodes {
comment
actor {
id
@ -55,16 +71,42 @@ function initStashesActions(store, _router) {
${actorStashesFields}
}
}
scenes: stashesScenes {
}
scenesConnection: stashesScenesConnection(
orderBy: CREATED_AT_DESC
first: $limit
offset: $offset
) @include(if: $includeScenes) {
totalCount
scenes: nodes {
comment
scene {
${releaseFields}
}
}
}
moviesConnection: stashesMoviesConnection(
orderBy: CREATED_AT_DESC
first: $limit
offset: $offset
) @include(if: $includeMovies) {
totalCount
movies: nodes {
comment
movie {
${movieFields}
}
}
}
}
}
`, {
stashId: Number(stashId),
includeScenes: section === 'scenes',
includeActors: section === 'actors',
includeMovies: section === 'movies',
offset: Math.max(0, (pageNumber - 1)) * limit,
limit: Number(limit),
hasAuth: !!store.state.auth.user,
userId: store.state.auth.user?.id,
});

View File

@ -57,7 +57,10 @@ function initUsersActions(store, _router) {
}
}
}
scenes: stashesScenes(first: 20) {
scenes: stashesScenes(
first: 20
orderBy: CREATED_AT_DESC
) {
comment
scene {
${releaseFields}

36768
docs/names.md Normal file

File diff suppressed because it is too large Load Diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 792 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 31 KiB

View File

@ -842,6 +842,7 @@ const tagMedia = [
['enhanced-boobs', 'september_reign_spizoo', 'September Rain in "September Reign Loves Jessica"', 'spizoo'],
['enhanced-boobs', 'katrina_moreno_bangbros', 'Katrina Moreno in "Stripper Cream Pie"', 'bangbros'],
['enhanced-boobs', 'sadie_santana_newsensations', 'Sadie Santana in "Backdoor Beauties"', 'newsensations'],
['enhanced-boobs', 'kiera_king_puremature', 'Kiera King in "Warming Up"', 'puremature'],
['enhanced-boobs', 'diana_prince_penthouse_2', 'Diana Prince in "It Is What It Seems"', 'penthouse'],
['enhanced-boobs', 'chessie_kay_chelsey_lanette_eurogirlsongirls', 'Chelsey Lanette and Chessie Kay', 'eurogirlsongirls'],
['enhanced-boobs', 'chelsey_lanette_sexart_1', 'Chelsey Lanette in "Tell Me How You Want"', 'sexart'],

View File

@ -2,23 +2,15 @@
const { makeExtendSchemaPlugin, gql } = require('graphile-utils');
const schemaExtender = makeExtendSchemaPlugin(_build => ({
typeDefs: gql`
extend type Release {
isFavorited: Boolean @requires(columns: ["stashesScenesBySceneId"])
isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesScenesBySceneId"])
}
`,
resolvers: {
Release: {
isFavorited(parent) {
function isFavorited(parent) {
if (!parent['@stashes'] || (parent['@stashes'].length > 0 && typeof parent['@stashes'][0]['@stash'].primary === 'undefined')) {
return null;
}
return parent['@stashes'].some(({ '@stash': stash }) => stash.primary);
},
isStashed(parent, args) {
}
function isStashed(parent, args) {
if (!parent['@stashes'] || (parent['@stashes'].length > 0 && typeof parent['@stashes'][0]['@stash'].primary === 'undefined')) {
return null;
}
@ -28,7 +20,28 @@ const schemaExtender = makeExtendSchemaPlugin(_build => ({
}
return parent['@stashes'].some(({ '@stash': stash }) => !stash.primary);
}
const schemaExtender = makeExtendSchemaPlugin(_build => ({
typeDefs: gql`
extend type Release {
isFavorited: Boolean @requires(columns: ["stashesScenesBySceneId"])
isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesScenesBySceneId"])
}
extend type Movie {
isFavorited: Boolean @requires(columns: ["stashesMovies"])
isStashed(includeFavorites: Boolean = false): Boolean @requires(columns: ["stashesMovies"])
}
`,
resolvers: {
Release: {
isFavorited,
isStashed,
},
Movie: {
isFavorited,
isStashed,
},
},
}));