Added sort and filter to all volumes page

stashr/static/css/stashr.css

@@ -14,6 +14,7 @@ ul { list-style-type: none; }
 .bg-mine { background: #3e3e44; }
 
 .stashr-menu { transition: 0.5s; }
+.stashr-submenu { transition: 0.5s; z-index:-5; margin-top:-100% !important; }
 .stashr-footer { position:fixed; bottom:0; z-index:6; }
 .stashr-item_container { overflow: hidden; }
 .stashr-poster_container { position:relative; overflow: hidden; }

stashr/static/js/stashr.js

@@ -15,4 +15,13 @@ function toggleMenu() {
     } else {
         document.getElementById('sideMenu').style.marginLeft = "0px"
     }
-}
+}
+
+function toggleSubMenu() {
+    var margin = getComputedStyle(document.querySelector('.stashr-submenu')).marginTop;
+    if ( margin == '0px' ) {
+        document.querySelector('.stashr-submenu').style.setProperty('margin-top', '-100%', 'important')
+    } else {
+        document.querySelector('.stashr-submenu').style.setProperty('margin-top', '0px', 'important')
+    }
+}

stashr/templates/all_volumes_page.html

@@ -6,6 +6,7 @@
 
 {% block header %}
 {{ emit_tep('all_volumes_page_header') }}
+
 {% endblock %}
 
 {% block content %}
@@ -113,8 +114,30 @@ Vue.component('volumes', {
     template: `
     <div>
         <div class="d-grid w-100 bg-mine m-0 p-0 sticky-top shadow">
-            <div class="row w-100 m-0 p-3">
-                <input type="text" v-model="search" class="form-control" placeholder="Search Volumes..." />
+            <div class="row d-flex flex-nowrap w-100 m-0 p-3 bg-mine">
+                <input type="text" v-model="search" class="form-control flex-shrink-1" placeholder="Search Volumes..." />
+                <span class="fa-stack p-0 text-white" onclick="toggleSubMenu()">
+                    <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="d-flex flex-shrink-1">
+                    <i class="fas fa-2x fa-sort text-white me-1"></i>
+                    <select class="form-select" aria-label="Default select example" v-model="sorted">
+                        <option value="volume_sort_title">Name</option>
+                        <option value="volume_year">Year</option>
+                        <option value="volume_total">Length</option>
+                        <option value="progress">Progress</option>
+                    </select>
+                </div>
+                <div class="d-flex flex-shrink-1">
+                    <i class="fas fa-2x fa-filter text-white me-1"></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>
         <ul class="d-flex flex-wrap w-100 m-0 p-0 py-2 justify-content-center">
@@ -126,12 +149,20 @@ Vue.component('volumes', {
         </ul>
     </div>
     `,
-    data() { return { loading: true, search: '', } },
+    data() { return { loading: true, search: '', filter: '', sorted: 'volume_sort_title'} },
     computed: {
         filteredList() {
-            return this.volumes.filter(volume => {
-                return volume.volume_name.toLowerCase().includes(this.search.toLowerCase())
-            })
+            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) })
+                    .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) })
+                    .sort((a, b) => a[this.sorted] - b[this.sorted])
+            }
         },
     },
     delimiters: ["[[","]]"],