Using paginated full text search for movies, combined actor search and fetch to allow combining search with filters.

assets/components/actors/actors.vue

@@ -7,9 +7,48 @@
 			ref="filters"
 			class="filters"
 		>
-			<SearchBar :placeholder="`Search ${totalCount} actors`" />
-
 			<div class="filters-row">
+				<ul class="genders nolist">
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'all' }"
+							class="gender-link all"
+						>all</router-link>
+					</li>
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'female' }"
+							class="gender-link female"
+						><Gender gender="female" /></router-link>
+					</li>
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'male' }"
+							class="gender-link male"
+							replace
+						><Gender gender="male" /></router-link>
+					</li>
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'trans' }"
+							class="gender-link transsexual"
+							replace
+						><Gender gender="transsexual" /></router-link>
+					</li>
+					<li class="gender">
+						<router-link
+							:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 }, query: $route.query }"
+							:class="{ selected: gender === 'other' }"
+							class="gender-link other"
+							replace
+						><Icon icon="question5" /></router-link>
+					</li>
+				</ul>
+
 				<ul class="nolist">
 					<li>
 						<Tooltip class="filter boobs">
@@ -156,48 +195,9 @@
 						</Tooltip>
 					</li>
 				</ul>
-
-				<ul class="genders nolist">
-					<li class="gender">
-						<router-link
-							:to="{ name: 'actors', params: { gender: 'all', letter, pageNumber: 1 } }"
-							:class="{ selected: gender === 'all' }"
-							class="gender-link all"
-						>all</router-link>
-					</li>
-					<li class="gender">
-						<router-link
-							:to="{ name: 'actors', params: { gender: 'female', letter, pageNumber: 1 } }"
-							:class="{ selected: gender === 'female' }"
-							class="gender-link female"
-						><Gender gender="female" /></router-link>
-					</li>
-					<li class="gender">
-						<router-link
-							:to="{ name: 'actors', params: { gender: 'male', letter, pageNumber: 1 } }"
-							:class="{ selected: gender === 'male' }"
-							class="gender-link male"
-							replace
-						><Gender gender="male" /></router-link>
-					</li>
-					<li class="gender">
-						<router-link
-							:to="{ name: 'actors', params: { gender: 'trans', letter, pageNumber: 1 } }"
-							:class="{ selected: gender === 'trans' }"
-							class="gender-link transsexual"
-							replace
-						><Gender gender="transsexual" /></router-link>
-					</li>
-					<li class="gender">
-						<router-link
-							:to="{ name: 'actors', params: { gender: 'other', letter, pageNumber: 1 } }"
-							:class="{ selected: gender === 'other' }"
-							class="gender-link other"
-							replace
-						><Icon icon="question5" /></router-link>
-					</li>
-				</ul>
 			</div>
+
+			<SearchBar :placeholder="`Search ${totalCount} actors`" />
 		</nav>
 
 		<div class="tiles">
@@ -247,6 +247,7 @@ function updateFilters() {
 			w: this.weightRequired ? this.weight.join(',') : undefined,
 			age: this.ageRequired ? this.age.join(',') : undefined,
 			dob: this.dobRequired ? this.dob : undefined,
+			query: this.$route.query.query,
 		},
 	});
 }
@@ -260,17 +261,12 @@ function updateValue(prop, value, load = true) {
 }
 
 async function fetchActors(scroll) {
-	if (this.$route.query.query) {
-		await this.searchActors();
-		return;
-	}
-
 	const curatedGender = this.gender.replace('trans', 'transsexual');
 
 	const { actors, totalCount } = await this.$store.dispatch('fetchActors', {
 		limit: this.limit,
 		pageNumber: Number(this.$route.params.pageNumber) || 1,
-		letter: this.letter.replace('all', ''),
+		query: this.$route.query.query,
 		gender: curatedGender === 'other' ? null : curatedGender,
 		age: this.ageRequired && this.age,
 		dob: this.dobRequired && this.dob,
@@ -289,22 +285,6 @@ async function fetchActors(scroll) {
 	}
 }
 
-async function searchActors(scroll) {
-	const actors = await this.$store.dispatch('searchActors', {
-		minLength: 1,
-		query: this.$route.query.query,
-		limit: this.limit,
-	});
-
-	this.actors = actors;
-	this.totalCount = actors.length;
-
-	if (scroll) {
-		this.$refs.content.scrollTop = 0;
-		// this.$refs.filter?.scrollIntoView();
-	}
-}
-
 function letter() {
 	return this.$route.params.letter || 'all';
 }
@@ -366,7 +346,6 @@ export default {
 	mounted,
 	methods: {
 		fetchActors,
-		searchActors,
 		updateFilters,
 		updateValue,
 	},
@@ -419,6 +398,7 @@ export default {
 
 .search {
 	width: 0;
+	justify-content: flex-end;
 	flex-grow: 1;
 	box-sizing: border-box;
 	padding: 0 1rem;
@@ -435,10 +415,6 @@ export default {
 	margin: 1rem 0 .5rem 0;
 }
 
-.filters-row {
-	flex-grow: 1;
-}
-
 .filters-row,
 .filter {
 	padding: 0 1rem;
@@ -447,7 +423,7 @@ export default {
 .genders {
     display: flex;
     flex-shrink: 0;
-    padding: 0 0 0 .5rem;
+    padding: 0 .5rem 0 0;
 }
 
 .letter,
@@ -690,7 +666,7 @@ export default {
 
 @media(max-width: $breakpoint-kilo) {
     .filters {
-        flex-direction: column;
+        flex-direction: column-reverse;
     }
 
 	::v-deep(.search) {
@@ -702,7 +678,7 @@ export default {
 
 @media(max-width: $breakpoint) {
     .filters-row {
-        flex-direction: column-reverse;
+        flex-direction: column;
     }
 
 	.genders {

assets/components/releases/movies.vue

@@ -45,13 +45,14 @@ async function fetchMovies() {
 }
 
 async function searchMovies() {
-	const movies = await this.$store.dispatch('searchMovies', {
+	const { movies, totalCount } = await this.$store.dispatch('searchMovies', {
 		query: this.$route.query.query,
 		limit: this.limit,
+		pageNumber: this.$route.params.pageNumber,
 	});
 
 	this.movies = movies;
-	this.totalCount = movies.length;
+	this.totalCount = totalCount;
 }
 
 async function mounted() {

assets/components/search/bar.vue

@@ -22,6 +22,10 @@ function search() {
 	this.$router.replace({ query: { query: this.query || undefined } });
 }
 
+function resetQuery() {
+	this.query = this.$route.query.query || null;
+}
+
 export default {
 	props: {
 		placeholder: {
@@ -34,6 +38,9 @@ export default {
 			query: this.$route.query.query || null,
 		};
 	},
+	watch: {
+		$route: resetQuery,
+	},
 	methods: {
 		search,
 	},

assets/js/actors/actions.js

@@ -289,7 +289,7 @@ function initActorActions(store, router) {
 	async function fetchActors({ _commit }, {
 		limit = 10,
 		pageNumber = 1,
-		letter,
+		query,
 		gender,
 		age,
 		dob,
@@ -332,24 +332,23 @@ function initActorActions(store, router) {
 
 		const { connection: { actors, totalCount } } = await graphql(`
             query Actors(
+                $query: String
                 $limit: Int,
                 $offset: Int = 0,
-                $letter: String! = "",
 				$naturalBoobs: Boolean,
 				$userId: Int,
 				$hasAuth: Boolean!,
             ) {
-				connection: actorsConnection(
+				connection: searchActorsConnection(
+					query: $query
                     first: $limit,
 					offset: $offset
                     orderBy: NAME_ASC
+					minLength: 0
                     filter: {
 						aliasFor: {
 							isNull: true
 						}
-                        name: {
-                            startsWith: $letter
-                        }
 						${genderFilter}
 						${ageFilter}
 						${dobFilter}
@@ -410,9 +409,9 @@ function initActorActions(store, router) {
                 }
             }
         `, {
+			query,
 			offset: Math.max(0, (pageNumber - 1)) * limit,
 			limit,
-			letter,
 			naturalBoobs,
 			hasAuth: !!store.state.auth.user,
 			userId: store.state.auth.user?.id,
@@ -424,96 +423,6 @@ function initActorActions(store, router) {
 		};
 	}
 
-	async function searchActors({ _commit }, { query, limit = 20, minLength = 2 }) {
-		const { actors } = await graphql(`
-            query SearchActors(
-                $query: String!
-                $limit: Int = 20
-                $minLength: Int = 2
-				$hasAuth: Boolean!
-				$userId: Int
-            ) {
-                actors: searchActors(
-                    search: $query,
-					minLength: $minLength
-                    first: $limit
-					orderBy: NAME_ASC
-                ) {
-                    id
-                    name
-                    slug
-					dateOfBirth
-					ageFromBirth
-					ageAtDeath
-					dateOfBirth
-					dateOfDeath
-                    gender
-					aliasFor: actorByAliasFor {
-						id
-						name
-						slug
-						age
-						ageAtDeath
-						dateOfBirth
-						dateOfDeath
-						gender
-						entity {
-							id
-							name
-							slug
-						}
-						avatar: avatarMedia {
-							id
-							path
-							thumbnail
-							lazy
-							isS3
-							width
-							height
-							comment
-							credit
-						}
-						birthCountry: countryByBirthCountryAlpha2 {
-						  alpha2
-						  name
-						  alias
-						}
-					}
-                    entity {
-                        id
-                        name
-                        slug
-                    }
-					avatar: avatarMedia {
-						id
-						path
-						thumbnail
-						lazy
-						isS3
-						width
-						height
-						comment
-						credit
-					}
-                    birthCountry: countryByBirthCountryAlpha2 {
-                      alpha2
-                      name
-                      alias
-                    }
-					${actorStashesFields}
-                }
-            }
-        `, {
-			query,
-			limit,
-			minLength,
-			hasAuth: !!store.state.auth.user,
-			userId: store.state.auth.user?.id,
-		});
-
-		return actors.map(actor => curateActor(actor));
-	}
-
 	async function fetchActorReleases({ _commit }, actorId) {
 		const releases = await get(`/actors/${actorId}/releases`, {
 			filter: store.state.ui.filter,
@@ -528,7 +437,6 @@ function initActorActions(store, router) {
 		fetchActorById,
 		fetchActors,
 		fetchActorReleases,
-		searchActors,
 	};
 }
 

assets/js/releases/actions.js

@@ -100,26 +100,37 @@ function initReleasesActions(store, router) {
 		};
 	}
 
-	async function searchMovies({ _commit }, { query, limit = 20 }) {
-		const { movies } = await graphql(`
+	async function searchMovies({ _commit }, { query, limit = 20, pageNumber = 1 }) {
+		const { connection: { movies, totalCount } } = await graphql(`
             query SearchMovies(
                 $query: String!
-                $limit:Int = 20,
+                $limit:Int = 20
+                $offset:Int = 0
             ) {
-                movies: searchMovies(
+				connection: searchMoviesConnection(
                     query: $query
-					minLength: 1
                     first: $limit
+					offset: $offset
+					orderBy: RANK_DESC
                 ) {
-					${movieFields}
+					movies: nodes {
+						movie {
+							${movieFields}
+						}
+					}
+					totalCount
                 }
             }
         `, {
 			query,
 			limit,
+			offset: Math.max(0, (pageNumber - 1)) * limit,
 		});
 
-		return movies.map(movie => curateRelease(movie));
+		return {
+			movies: movies.map(({ movie }) => curateRelease(movie)),
+			totalCount,
+		};
 	}
 
 	async function fetchMovieById({ _commit }, movieId) {