Added pagination and search to movies page.

assets/js/fragments.js

@@ -96,6 +96,57 @@ const actorFields = `
 		${actorStashesFields}
 `;
 
+const movieFields = `
+	id
+	title
+	url
+	slug
+	date
+	datePrecision
+	actors {
+		id
+		name
+		slug
+	}
+	tags {
+		id
+		name
+		slug
+	}
+	entity {
+		id
+		name
+		slug
+		type
+		parent {
+			id
+			name
+			slug
+			type
+		}
+	}
+	covers: moviesCovers {
+		media {
+			id
+			path
+			thumbnail
+			lazy
+			width
+			height
+			thumbnailWidth
+			thumbnailHeight
+			isS3
+			sfw: sfwMedia {
+				id
+				path
+				thumbnail
+				lazy
+				comment
+			}
+		}
+	}
+`;
+
 const campaignsFragment = `
 	campaigns(filter: {
 		or: [
@@ -543,6 +594,7 @@ export {
 	actorFields,
 	actorStashesFields,
 	campaignsFragment,
+	movieFields,
 	releaseActorsFragment,
 	releaseFields,
 	releaseTagsFragment,

assets/js/releases/actions.js

@@ -1,5 +1,5 @@
 import { graphql } from '../api';
-import { releasesFragment, releaseFragment, releaseFields } from '../fragments';
+import { releasesFragment, releaseFragment, releaseFields, movieFields } from '../fragments';
 import { curateRelease } from '../curate';
 import getDateRange from '../get-date-range';
 
@@ -79,54 +79,7 @@ function initReleasesActions(store, router) {
 					}
 				) {
 					movies: nodes {
-						id
-						title
-						url
-						slug
-						date
-						datePrecision
-						actors {
-							id
-							name
-							slug
-						}
-						tags {
-							id
-							name
-							slug
-						}
-						entity {
-							id
-							name
-							slug
-							type
-							parent {
-								id
-								name
-								slug
-								type
-							}
-						}
-						covers: moviesCovers {
-							media {
-								id
-								path
-								thumbnail
-								lazy
-								width
-								height
-								thumbnailWidth
-								thumbnailHeight
-								isS3
-								sfw: sfwMedia {
-									id
-									path
-									thumbnail
-									lazy
-									comment
-								}
-							}
-						}
+						${movieFields}
 					}
 					totalCount
 				}
@@ -142,6 +95,28 @@ function initReleasesActions(store, router) {
 		};
 	}
 
+	async function searchMovies({ _commit }, { query, limit = 20 }) {
+		const { movies } = await graphql(`
+            query SearchMovies(
+                $query: String!
+                $limit:Int = 20,
+            ) {
+                movies: searchMovies(
+                    query: $query
+					minLength: 1
+                    first: $limit
+                ) {
+					${movieFields}
+                }
+            }
+        `, {
+			query,
+			limit,
+		});
+
+		return movies.map(movie => curateRelease(movie));
+	}
+
 	async function fetchMovieById({ _commit }, movieId) {
 		// const release = await get(`/releases/${releaseId}`);
 
@@ -297,6 +272,7 @@ function initReleasesActions(store, router) {
 		fetchReleaseById,
 		fetchMovies,
 		fetchMovieById,
+		searchMovies,
 	};
 }
 

assets/js/router.js

@@ -196,6 +196,17 @@ const routes = [
 	{
 		path: '/movies',
 		component: Movies,
+		redirect: {
+			name: 'movies',
+			params: {
+				range: 'latest',
+				pageNumber: 1,
+			},
+		},
+	},
+	{
+		path: '/movies/:range/:pageNumber',
+		component: Movies,
 		name: 'movies',
 	},
 	{