KevinMidboe/seasonedRequest
1
0
Fork 0
mirror of https://github.com/KevinMidboe/seasonedRequest.git synced 2025-10-29 18:00:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added filter toggle for requested.

Browse Source
This commit is contained in:
Kevin
2018-07-25 18:46:08 +02:00
parent 86d70f3c69
commit c8a80d6b05
1 changed files with 21 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/components/MoviesList.vue
View File

@@ -4,18 +4,34 @@
<header class="movies__header"> <header class="movies__header">
<h2 class="movies__title">{{ listTitle }}</h2> <h2 class="movies__title">{{ listTitle }}</h2>
<span class="movies__results" v-if="!shortList">{{ countResults }}</span> <span class="movies__results" v-if="!shortList">{{ countResults }}</span>
<router-link v-if="shortList && mode != 'user-requests'" class="movies__link" :to="{name: 'home-category', params: {category: category}}"> <router-link v-if="shortList && mode != 'user-requests'" class="movies__link" :to="{name: 'home-category', params: {category: category}}">
View All View All
</router-link> </router-link>
<router-link v-if="shortList && mode == 'user-requests'" class="movies__link" :to="{name: 'user-requests'}"> <router-link v-if="shortList && mode == 'user-requests'" class="movies__link" :to="{name: 'user-requests'}">
View All View All
</router-link> </router-link>
<span v-if="!shortList && (this.$route.params.category === 'requests' || mode == 'user-requests')" class="movies__filters">
<button type="button" class="button" @click="toggleFilter">Filter</button>
<span class="movies__filters__button-spacing"></span>
<!-- <button type="button" class="button" @click="sort">Sort</button> -->
<span class="movies__filters__button-spacing"></span>
<div class="form__group">
<input v-model="filter_query" class="form__group-input" placeholder="Filter by search"/>
</div>
</span>
</header> </header>
<ul v-if="showFilter" class="movies__filters-list">
<li v-for="(item, index) in filters.status.elms" @click="applyFilter(item, index)" :class="{'active': index === filters.status.selected}">{{ item }}</li>
</ul>
<ul class="movies__list"> <ul class="movies__list">
<movies-list-item class="movies__item" v-for="(movie, index) in movies" :movie="movie"></movies-list-item> <movies-list-item class="movies__item" v-for="(movie, index) in movies" :movie="movie"></movies-list-item>
</ul> </ul>
<div class="movies__nav" v-if="!shortList" :class="{'is-hidden' : currentPage == pages}"> <div class="movies__nav" v-if="!shortList" :class="{'is-hidden' : currentPage == pages}">
<button @click="loadMore" class="button">Load More</button> <button @click="loadMore" class="button">Load Mores</button>
</div> </div>
</div> </div>
<i v-if="!listLoaded" class="loader"></i> <i v-if="!listLoaded" class="loader"></i>
@@ -134,9 +150,9 @@ export default {
this.movies = newData; this.movies = newData;
}.bind(this)); }.bind(this));
}, },
sortt() { // sort() {
console.log(this.showFilters) // console.log(this.showFilters)
}, // },
toggleFilter(item, index){ toggleFilter(item, index){
this.showFilter = this.showFilter ? false : true; this.showFilter = this.showFilter ? false : true;
// this.results = this.results.filter(result => result.status != 'downloaded') // this.results = this.results.filter(result => result.status != 'downloaded')
@@ -147,28 +163,6 @@ export default {
console.log('applied query filter: ', item, index) console.log('applied query filter: ', item, index)
this.fetchCategory() this.fetchCategory()
} }
// updateFavorite(){
// if(this.mode == 'favorite'){
// let promises = [], movies = [], pages, results;
// for(let i = 1; i <= this.currentPage; i++){
// promises.push(axios.get(`https://api.themoviedb.org/3/account/${storage.userId}/favorite/movies?api_key=${storage.apiKey}&session_id=${storage.sessionId}&language=en-US&sort_by=created_at.desc&page=${i}`))
// }
// axios.all(promises).then(function(results) {
// results.forEach(function(resp) {
// let data = resp.data;
// movies = movies.concat(data.results);
// pages = data.total_pages;
// results = data.total_results;
// });
// this.movies = movies;
// this.pages = pages;
// if(this.currentPage > pages){
// this.currentPage -= 1;
// }
// this.results = results;
// }.bind(this));
// }
// }
}, },
watch: { watch: {
filter_query: function(val, oldVal) { filter_query: function(val, oldVal) {
@@ -236,6 +230,7 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20px 10px; padding: 20px 10px;
@include tablet-min{ @include tablet-min{
padding: 23px 15px; padding: 23px 15px;
} }