Added basic pagination to homepage.
This commit is contained in:
parent
f38be7a706
commit
2fcd426b49
|
@ -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>
|
||||
|
|
|
@ -0,0 +1,112 @@
|
|||
<template>
|
||||
<div class="pagination">
|
||||
<template v-if="pageNumber > 1">
|
||||
<router-link
|
||||
class="pagination-page"
|
||||
:to="{ params: { pageNumber: 1 } }"
|
||||
><<</router-link>
|
||||
|
||||
<router-link
|
||||
class="pagination-page"
|
||||
:to="{ params: { pageNumber: pageNumber - 1 } }"
|
||||
><</router-link>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<span class="pagination-page disabled"><<</span>
|
||||
<span class="pagination-page disabled"><</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 } }"
|
||||
>></router-link>
|
||||
|
||||
<router-link
|
||||
class="pagination-page"
|
||||
:to="{ params: { pageNumber: pageCount } }"
|
||||
>>></router-link>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<span class="pagination-page disabled">></span>
|
||||
<span class="pagination-page disabled">>></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>
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -136,7 +136,7 @@ function initActorActions(store, _router) {
|
|||
lessThan: $before,
|
||||
greaterThan: $after,
|
||||
},
|
||||
releasesTags: {
|
||||
releasesTagsConnection: {
|
||||
none: {
|
||||
tag: {
|
||||
slug: {
|
||||
|
|
|
@ -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
|
||||
}
|
||||
`;
|
||||
|
||||
|
|
|
@ -92,7 +92,7 @@ function initNetworksActions(store, _router) {
|
|||
}
|
||||
}
|
||||
]
|
||||
releasesTags: {
|
||||
releasesTagsConnection: {
|
||||
none: {
|
||||
tag: {
|
||||
slug: {
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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',
|
||||
},
|
||||
|
|
|
@ -64,7 +64,7 @@ function initTagsActions(store, _router) {
|
|||
lessThan: $before,
|
||||
greaterThan: $after,
|
||||
},
|
||||
releasesTags: {
|
||||
releasesTagsConnection: {
|
||||
none: {
|
||||
tag: {
|
||||
slug: {
|
||||
|
|
|
@ -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')
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -41,7 +41,8 @@ function initServer() {
|
|||
graphiql: true,
|
||||
enhanceGraphiql: true,
|
||||
allowExplain: () => true,
|
||||
simpleCollections: 'only',
|
||||
// simpleCollections: 'only',
|
||||
simpleCollections: 'both',
|
||||
graphileBuildOptions: {
|
||||
pgOmitListSuffix: true,
|
||||
connectionFilterRelations: true,
|
||||
|
|
Loading…
Reference in New Issue