boiii/traxxx
1
0
Fork 0
forked from DebaucheryLibrarian/traxxx
Code Issues Pull Requests Projects 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,
},