Added dedicated scene function and pagination to tag page.

assets/components/container/container.vue

@@ -85,6 +85,8 @@ export default {
 }
 
 .content-inner {
+	display: flex;
+	flex-direction: column;
 	flex-grow: 1;
 	overflow-y: auto;
 	overflow-x: hidden;

assets/components/pagination/pagination.vue

@@ -112,6 +112,7 @@ export default {
 .pagination {
 	display: flex;
 	justify-content: center;
+	flex-shrink: 0;
 	overflow: hidden;
 	height: 3rem;
 }

assets/components/releases/releases.vue

@@ -84,6 +84,7 @@ export default {
 }
 
 .releases {
+	flex-grow: 1;
 	border-top: solid 1px var(--crease);
 
 	&.embedded {

assets/components/tags/tag.vue

@@ -30,7 +30,13 @@
 			</Scroll>
 
 			<FilterBar :fetch-releases="fetchReleases" />
-			<Releases :releases="tag.releases" />
+			<Releases :releases="releases" />
+
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
 
 			<Footer />
 		</div>
@@ -46,16 +52,23 @@ import escapeHtml from '../../../src/utils/escape-html';
 import FilterBar from '../filters/filter-bar.vue';
 import Photos from './photos.vue';
 import Releases from '../releases/releases.vue';
+import Pagination from '../pagination/pagination.vue';
 import Scroll from '../scroll/scroll.vue';
 
 const converter = new Converter();
 
 async function fetchReleases() {
-	this.tag = await this.$store.dispatch('fetchTagBySlug', {
+	const { tag, releases, totalCount } = await this.$store.dispatch('fetchTagBySlug', {
 		tagSlug: this.$route.params.tagSlug,
+		pageNumber: Number(this.$route.params.pageNumber),
+		limit: this.limit,
 		range: this.$route.params.range,
 	});
 
+	this.tag = tag;
+	this.releases = releases;
+	this.totalCount = totalCount;
+
 	this.hasMedia = this.tag.poster || this.tag.photos.length > 0;
 	this.description = this.tag.description && converter.makeHtml(escapeHtml(this.tag.description));
 }
@@ -74,6 +87,7 @@ export default {
 		FilterBar,
 		Releases,
 		Photos,
+		Pagination,
 		Scroll,
 	},
 	data() {
@@ -81,6 +95,8 @@ export default {
 			tag: null,
 			description: null,
 			releases: null,
+			totalCount: 0,
+			limit: 15,
 			pageTitle: null,
 			hasMedia: false,
 			expanded: false,

assets/js/router.js

@@ -125,11 +125,12 @@ const routes = [
 			params: {
 				...from.params,
 				range: 'latest',
+				pageNumber: 1,
 			},
 		}),
 	},
 	{
-		path: '/tag/:tagSlug/:range',
+		path: '/tag/:tagSlug/:range/:pageNumber',
 		component: Tag,
 		name: 'tag',
 	},

assets/js/tags/actions.js

@@ -2,20 +2,26 @@ import { graphql, get } from '../api';
 import {
 	releaseFields,
 } from '../fragments';
-import { curateTag } from '../curate';
+import { curateTag, curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
 function initTagsActions(store, _router) {
-	async function fetchTagBySlug({ _commit }, { tagSlug, limit = 100, range = 'latest' }) {
+	async function fetchTagBySlug({ _commit }, {
+		tagSlug,
+		pageNumber = 1,
+		limit = 100,
+		range = 'latest',
+	}) {
 		const { before, after, orderBy } = getDateRange(range);
 
 		const { tagBySlug } = await graphql(`
             query Tag(
                 $tagSlug:String!
+				$offset: Int = 0,
                 $limit:Int = 1000,
                 $after:Datetime = "1900-01-01",
                 $before:Datetime = "2100-01-01",
-                $orderBy: [ReleasesTagsOrderBy!],
+                $orderBy: [ReleasesOrderBy!],
                 $exclude: [String!]
             ) {
                 tagBySlug(slug:$tagSlug) {
@@ -57,31 +63,31 @@ function initTagsActions(store, _router) {
                             }
                         }
                     }
-                    releases: releasesTags(
+                    scenesConnection(
                         filter: {
-                            release: {
-                                date: {
-                                    lessThan: $before,
-                                    greaterThan: $after,
-                                },
-                                releasesTagsConnection: {
-                                    none: {
-                                        tag: {
-                                            slug: {
-                                                in: $exclude
-                                            }
-                                        }
-                                    }
-                                }
-                            }
+							date: {
+								lessThan: $before,
+								greaterThan: $after,
+							},
+							releasesTagsConnection: {
+								none: {
+									tag: {
+										slug: {
+											in: $exclude
+										}
+									}
+								}
+							}
                         },
                         first: $limit,
                         orderBy: $orderBy,
+						offset: $offset
                     ) {
-                        release {
-                            ${releaseFields}
-                        }
-                    }
+						releases: nodes {
+							${releaseFields}
+						}
+						totalCount
+					}
                 }
             }
         `, {
@@ -89,11 +95,16 @@ function initTagsActions(store, _router) {
 			limit,
 			after,
 			before,
-			orderBy: orderBy === 'DATE_DESC' ? 'RELEASE_BY_RELEASE_ID__DATE_DESC' : 'RELEASE_BY_RELEASE_ID__DATE_ASC',
+			orderBy: orderBy === 'DATE_DESC' ? 'DATE_DESC' : 'DATE_ASC',
+			offset: Math.max(0, (pageNumber - 1)) * limit,
 			exclude: store.state.ui.filter,
 		});
 
-		return curateTag(tagBySlug, store);
+		return {
+			tag: curateTag(tagBySlug, null, curateRelease),
+			releases: tagBySlug.scenesConnection.releases.map(release => curateRelease(release)),
+			totalCount: tagBySlug.scenesConnection.totalCount,
+		};
 	}
 
 	async function fetchTags({ _commit }, {