DebaucheryLibrarian/traxxx
2
1
Fork 1
Code Issues 39 Pull Requests 1 Releases Wiki Activity

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

Browse Source
This commit is contained in:
DebaucheryLibrarian
2021-08-22 22:25:20 +02:00
parent e0905ab8fc
commit 6a8c9d89cb
21 changed files with 163 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
assets/components/actors/actors.vue
View File

@@ -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 {

5
assets/components/releases/movies.vue
View File

@@ -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() {

7
assets/components/search/bar.vue
View File

@@ -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,
},