Added basic pagination to homepage.

This commit is contained in:
ThePendulum 2020-05-22 04:32:16 +02:00
parent f38be7a706
commit 2fcd426b49
13 changed files with 214 additions and 66 deletions

View File

@ -1,59 +1,76 @@
<template>
<div class="content">
<FilterBar
:fetch-releases="fetchReleases"
:is-home="true"
/>
<div class="content">
<FilterBar
:fetch-releases="fetchReleases"
:is-home="true"
/>
<div class="content-inner">
<Releases :releases="releases" />
</div>
</div>
<div class="content-inner">
<Pagination
:items-total="totalCount"
:items-per-page="limit"
class="pagination-top"
/>
<Releases :releases="releases" />
<Pagination
:items-total="totalCount"
:items-per-page="limit"
class="pagination-bottom"
/>
</div>
</div>
</template>
<script>
import FilterBar from '../header/filter-bar.vue';
import Releases from '../releases/releases.vue';
import Pagination from '../pagination/pagination.vue';
async function fetchReleases() {
this.releases = await this.$store.dispatch('fetchReleases', {
limit: (this.$route.query && this.$route.query.limit && Number(this.$route.query.limit)) || 30,
range: this.$route.name,
});
const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
limit: this.limit,
pageNumber: Number(this.$route.params.pageNumber) || 1,
range: this.$route.name,
});
this.totalCount = totalCount;
this.releases = releases;
}
async function route() {
await this.fetchReleases();
await this.fetchReleases();
}
async function mounted() {
this.pageTitle = '';
this.pageTitle = '';
await this.fetchReleases();
await this.fetchReleases();
}
export default {
components: {
FilterBar,
Releases,
},
data() {
return {
releases: [],
networks: [],
pageTitle: null,
from: null,
};
},
beforeRouteEnter(to, from, next) {
next(vm => vm.$set(vm, 'from', from));
},
watch: {
$route: route,
},
mounted,
methods: {
fetchReleases,
},
components: {
FilterBar,
Releases,
Pagination,
},
data() {
return {
releases: [],
networks: [],
pageTitle: null,
limit: 15,
totalCount: 0,
from: null,
};
},
watch: {
$route: route,
},
mounted,
methods: {
fetchReleases,
},
};
</script>

View File

@ -0,0 +1,112 @@
<template>
<div class="pagination">
<template v-if="pageNumber > 1">
<router-link
class="pagination-page"
:to="{ params: { pageNumber: 1 } }"
>&lt;&lt;</router-link>
<router-link
class="pagination-page"
:to="{ params: { pageNumber: pageNumber - 1 } }"
>&lt;</router-link>
</template>
<template v-else>
<span class="pagination-page disabled">&lt;&lt;</span>
<span class="pagination-page disabled">&lt;</span>
</template>
<router-link
v-for="pageX in pageCount"
:key="`page-${pageX}`"
:to="{ params: { pageNumber: pageX } }"
:class="{ active: pageX === pageNumber }"
class="pagination-page"
> {{ pageX }} </router-link>
<template v-if="pageNumber < pageCount">
<router-link
class="pagination-page"
:to="{ params: { pageNumber: pageNumber + 1 } }"
>&gt;</router-link>
<router-link
class="pagination-page"
:to="{ params: { pageNumber: pageCount } }"
>&gt;&gt;</router-link>
</template>
<template v-else>
<span class="pagination-page disabled">&gt;</span>
<span class="pagination-page disabled">&gt;&gt;</span>
</template>
</div>
</template>
<script>
function pageNumber() {
return Number(this.$route.params.pageNumber) || 1;
}
function pageCount() {
return Math.ceil(this.itemsTotal / this.itemsPerPage);
}
export default {
props: {
itemsTotal: {
type: Number,
default: 0,
},
itemsPerPage: {
type: Number,
default: 10,
},
},
computed: {
pageNumber,
pageCount,
},
};
</script>
<style lang="scss" scoped>
.pagination {
width: 100%;
display: flex;
justify-content: center;
}
.pagination-page {
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
margin: 0 .5rem 0 0;
justify-content: center;
color: var(--shadow);
font-weight: bold;
text-decoration: none;
&:hover:not(.active, .disabled) {
color: var(--text);
}
&.active {
color: var(--primary);
}
&.disabled {
color: var(--shadow-weak);
}
}
.pagination-top {
margin: 0 0 1rem 0;
}
.pagination-bottom{
margin: 1rem 0 0 0;
}
</style>

View File

@ -3,6 +3,8 @@
v-if="release"
class="content"
>
<Banner :release="release" />
<div class="details">
<div class="column">
<a
@ -93,8 +95,6 @@
</div>
</div>
<Banner :release="release" />
<div class="info column">
<h2 class="row title">{{ release.title }}</h2>

View File

@ -172,6 +172,7 @@ export default {
color: var(--text-light);
display: flex;
flex-direction: column;
flex-shrink: 0;
width: 25rem;
box-sizing: border-box;
overflow: hidden;

View File

@ -136,7 +136,7 @@ function initActorActions(store, _router) {
lessThan: $before,
greaterThan: $after,
},
releasesTags: {
releasesTagsConnection: {
none: {
tag: {
slug: {

View File

@ -176,13 +176,13 @@ const releaseFields = `
`;
const releasesFragment = `
releases(
connection: releasesConnection(
filter: {
date: {
lessThan: $before,
greaterThan: $after,
}
releasesTags: {
releasesTagsConnection: {
none: {
tag: {
slug: {
@ -193,21 +193,25 @@ const releasesFragment = `
}
},
first: $limit,
offset: $offset,
orderBy: $orderBy,
) {
${releaseFields}
movieActors: movieActorsByMovieId(orderBy: ACTOR_BY_ACTOR_ID__GENDER_ASC) {
actor {
${actorFields}
}
}
movieTags: movieTagsByMovieId(orderBy: TAG_BY_TAG_ID__PRIORITY_DESC) {
tag {
id
name
slug
}
}
releases: nodes {
${releaseFields}
movieActors: movieActorsByMovieId(orderBy: ACTOR_BY_ACTOR_ID__GENDER_ASC) {
actor {
${actorFields}
}
}
movieTags: movieTagsByMovieId(orderBy: TAG_BY_TAG_ID__PRIORITY_DESC) {
tag {
id
name
slug
}
}
}
totalCount
}
`;

View File

@ -92,7 +92,7 @@ function initNetworksActions(store, _router) {
}
}
]
releasesTags: {
releasesTagsConnection: {
none: {
tag: {
slug: {

View File

@ -4,12 +4,13 @@ import { curateRelease } from '../curate';
import getDateRange from '../get-date-range';
function initReleasesActions(store, _router) {
async function fetchReleases({ _commit }, { limit = 100, range = 'latest' }) {
async function fetchReleases({ _commit }, { limit = 10, pageNumber = 1, range = 'latest' }) {
const { before, after, orderBy } = getDateRange(range);
const { releases } = await graphql(`
const { connection: { releases, totalCount } } = await graphql(`
query Releases(
$limit:Int = 1000,
$offset:Int = 0,
$after:Date = "1900-01-01",
$before:Date = "2100-01-01",
$orderBy:[ReleasesOrderBy!],
@ -19,13 +20,17 @@ function initReleasesActions(store, _router) {
}
`, {
limit,
offset: Math.max(0, (pageNumber - 1)) * limit,
after,
before,
orderBy,
exclude: store.state.ui.filter,
});
return releases.map(release => curateRelease(release));
return {
releases: releases.map(release => curateRelease(release)),
totalCount,
};
}
async function fetchReleaseById({ _commit }, releaseId) {

View File

@ -20,26 +20,32 @@ const routes = [
path: '/',
redirect: {
name: 'latest',
params: {
page: 1,
},
},
},
{
path: '/home',
redirect: {
name: 'latest',
params: {
page: 1,
},
},
},
{
path: '/latest',
path: '/latest/:pageNumber',
component: Home,
name: 'latest',
},
{
path: '/upcoming',
path: '/upcoming/:pageNumber',
component: Home,
name: 'upcoming',
},
{
path: '/new',
path: '/new/:pageNumber',
component: Home,
name: 'new',
},

View File

@ -64,7 +64,7 @@ function initTagsActions(store, _router) {
lessThan: $before,
greaterThan: $after,
},
releasesTags: {
releasesTagsConnection: {
none: {
tag: {
slug: {

View File

@ -644,7 +644,10 @@ exports.up = knex => Promise.resolve()
table.string('url', 1000);
table.string('title');
table.string('slug');
table.date('date');
table.index('date');
table.text('description');
table.integer('duration')

View File

@ -7,7 +7,6 @@ const cheerio = require('cheerio');
const { JSDOM } = require('jsdom');
const moment = require('moment');
const logger = require('../logger')(__filename);
const { get, geta, ctxa, parseDate } = require('../utils/q');
const { heightToCm } = require('../utils/convert');
const slugify = require('../utils/slugify');

View File

@ -41,7 +41,8 @@ function initServer() {
graphiql: true,
enhanceGraphiql: true,
allowExplain: () => true,
simpleCollections: 'only',
// simpleCollections: 'only',
simpleCollections: 'both',
graphileBuildOptions: {
pgOmitListSuffix: true,
connectionFilterRelations: true,