Added more filtering options

stashr/templates/all_volumes_page.html

@@ -29,7 +29,7 @@
 </div>
 
 <div id="app">
-    <volumes v-bind:volumes='volumesList'></volumes>
+    <volumes v-bind:volumes='volumesList' v-bind:publishers="publishers" v-bind:ratings="ratings"></volumes>
 </div>
 
 {% endblock %}
@@ -49,6 +49,22 @@
 
 {% block script %}
 
+Vue.component('publisher-item', {
+    props: ['publisher'],
+    template: `
+    <option :value="publisher.publisher_id">[[ publisher.publisher_name ]]</option>
+    `,
+    delimiters: ["[[","]]"],
+})
+
+Vue.component('rating-item', {
+    props: ['rating'],
+    template: `
+    <option :value="rating.rating_value">[[ rating.rating_long ]]</option>
+    `,
+    delimiters: ["[[","]]"],
+})
+
 Vue.component('volume-item', {
     props: ['volume'],
     template: `
@@ -110,7 +126,7 @@ Vue.component('volume-item', {
 })
 
 Vue.component('volumes', {
-    props: ['volumes'],
+    props: ['volumes', 'ratings', 'publishers'],
     template: `
     <div>
         <div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
@@ -120,23 +136,49 @@ Vue.component('volumes', {
                     <i class="fas fa-bars fa-stack-1x"></i>
                 </span>
             </div>
-            <div class="row d-flex flex-nowrap w-100 m-0 p-3 stashr-submenu">
+            <div class="row d-flex flex-wrap w-100 m-0 p-0 stashr-submenu">
-                <div class="d-flex flex-shrink-1">
+                <div class="d-flex flex-row flex-nowrap w-100 m-0 p-2">
-                    <i class="fas fa-2x fa-sort text-white me-1"></i>
+                    <div class="d-flex flex-grow-1">
-                    <select class="form-select" aria-label="Default select example" v-model="sorted">
+                        <i class="fas fa-2x fa-sort text-white mx-2"></i>
-                        <option value="volume_sort_title">Name</option>
+                        <select class="form-select" aria-label="Default select example" v-model="sorted">
-                        <option value="volume_year">Year</option>
+                            <option value="volume_sort_title">Name</option>
-                        <option value="volume_total">Length</option>
+                            <option value="volume_year">Year</option>
-                        <option value="progress">Progress</option>
+                            <option value="volume_total">Length</option>
-                    </select>
+                            <option value="progress">Progress</option>
+                        </select>
+                    </div>
+                    <div class="d-flex flex-grow-1">
+                        <i class="fas fa-2x fa-filter text-white mx-2"></i>
+                        <select class="form-select" aria-label="Default select example" v-model="filter">
+                            <option :value="''">All</option>
+                            <option :value=false>Ended</option>
+                            <option :value=true>Ongoing</option>
+                        </select>
+                    </div>
                 </div>
-                <div class="d-flex flex-shrink-1">
+                <div class="d-flex flex-row flex-nowrap w-100 m-0 p-2">
-                    <i class="fas fa-2x fa-filter text-white me-1"></i>
+                    <div class="d-flex flex-grow-1">
-                    <select class="form-select" aria-label="Default select example" v-model="filter">
+                        <i class="fas fa-2x fa-filter text-white mx-2"></i>
-                        <option :value="''">All</option>
+                        <select class="form-select" aria-label="Default select example" v-model="rating">
-                        <option :value=false>Ended</option>
+                            <option :value="''">All</option>
-                        <option :value=true>Ongoing</option>
+                            <rating-item
-                    </select>
+                                v-for="rating in ratings"
+                                v-bind:rating="rating"
+                                v-bind:key="rating.rating_id"
+                            ></rating-item>
+                        </select>
+                    </div>
+                    <div class="d-flex flex-grow-1">
+                        <i class="fas fa-2x fa-filter text-white mx-2"></i>
+                        <select class="form-select" aria-label="Default select example" v-model="publisher">
+                            <option :value="''">All</option>
+                            <publisher-item
+                                v-for="publisher in publishers"
+                                v-bind:publisher="publisher"
+                                v-bind:key="publisher.publisher_id"
+                            ></publisher-item>
+                        </select>
+                    </div>
                 </div>
             </div>
         </div>
@@ -149,18 +191,21 @@ Vue.component('volumes', {
         </ul>
     </div>
     `,
-    data() { return { loading: true, search: '', filter: '', sorted: 'volume_sort_title'} },
+    data() { return { loading: true, search: '', filter: '', sorted: 'volume_sort_title', rating: '', publisher: ''} },
     computed: {
         filteredList() {
             if (this.sorted.toLowerCase() == 'progress') {
                 return this.volumes
                     .filter(volume => { return volume.volume_name.toLowerCase().includes(this.search.toLowerCase()) })
                     .filter(volume => { return volume.volume_status.toString().includes(this.filter) })
+                    .filter(volume => { return volume.publisher.publisher_id.toString().includes(this.publisher) })
                     .sort((a, b) => (a.volume_have / a.volume_total) - (b.volume_have / b.volume_total))
             } else {
                 return this.volumes
                     .filter(volume => { return volume.volume_name.toLowerCase().includes(this.search.toLowerCase()) })
                     .filter(volume => { return volume.volume_status.toString().includes(this.filter) })
+                    .filter(volume => { return volume.publisher.publisher_id.toString().includes(this.publisher) })
+                    .filter(volume => { return volume.volume_age_rating.toString().includes(this.rating) })
                     .sort((a, b) => a[this.sorted] - b[this.sorted])
             }
         },
@@ -172,11 +217,39 @@ var app = new Vue({
     el: '#app',
     data: {
         volumesList: [],
+        ratings: [],
+        publishers: [],
     },
     created() {
-        this.getVolumes()
+        this.getVolumes();
+        this.getPublishers();
+        this.getRatings();
     },
     methods:{
+        getRatings() {
+            axios.get('{{ url_for('api.api_get_all_ratings') }}')
+                .then(res => {
+                    this.ratings = res.data.results;
+                })
+                .catch(err => console.log(err))
+        },
+        getPublishers() {
+            axios.get('{{ url_for('api.api_get_all_publishers') }}', {
+                params: {
+                    offset: this.publishers.length
+                }
+            })
+                .then(res => {
+                    if(res.data.number_of_page_results > 0) {
+                        res.data.results.forEach(result => {
+                            this.publishers.push(result)
+                        })
+                        if(this.publishers.length < res.data.number_of_total_results) {
+                            this.getPublishers()
+                        }
+                    }
+                })
+        },
         getVolumes() {
             axios.get('{{ url_for('api.api_get_all_volumes') }}', {
                 params: {