Add sort and filter to new release

stashr/templates/new_releases_page.html

@@ -154,15 +154,13 @@ Vue.component('releases', {
     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 New Releases..." />
+            <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 New Releases..." />
+                <a class="fa-stack p-0 text-white">
+                    <i class="fas fa-bars fa-stack-1x" data-bs-toggle="offcanvas" href="#offcanvasRight" role="button"></i>
+                </a>
             </div>
         </div>
-        <!--
-        <div class="mb-3 px-5">
-            <input type="text" v-model="search" class="form-control" placeholder="Search New Releases..." />
-        </div>
-        -->
         <ul class="d-flex flex-wrap w-100 m-0 p-0 py-2 justify-content-center">
             <release-item
                 v-for="release in filteredList"
@@ -170,14 +168,55 @@ Vue.component('releases', {
                 v-bind:key="release.new_release_id"
             ></release-item>
         </ul>
+        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
+            <div class="offcanvas-header">
+                <h5 id="offcanvasRightLabel">Sort/Filter</h5>
+                <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+            </div>
+            <div class="offcanvas-body">
+                <div class="m-3">
+                    <div class="my-2">
+                        <i class="fas fa-sort"></i>
+                        <strong>Sort</strong>
+                    </div>
+                    <select class="form-select" aria-label="Default select example" v-model="sorted">
+                        <option value="new_release_comic_name">Name</option>
+                        <option value="new_release_issue_number">Issue Number</option>
+                    </select>
+                </div>
+                <div class="m-3">
+                    <div class="my-2">
+                        <i class="fas fa-sort"></i>
+                        <strong>Library Status</strong>
+                    </div>
+                    <select class="form-select" aria-label="Default select example" v-model="library">
+                        <option :value="''">All</option>
+                        <option value="library">In Library</option>
+                        <option :value="Null">Not In Library</option>
+                    </select>
+                </div>
+            </div>
+        </div>
     </div>
     `,
-    data() { return { search: '', } },
+    data() { return { search: '', sorted: 'new_release_comic_name', library: ''} },
     computed: {
         filteredList() {
-            return this.releases.filter(release => {
-                return release.new_release_comic_name.toLowerCase().includes(this.search.toLowerCase())
-            })
+            if (this.library == null) {
+                return this.releases
+                    .filter(release => { return release.new_release_comic_name.toLowerCase().includes(this.search.toLowerCase()) })
+                    .filter(release => { return release.status == null })
+                    .sort((a, b) => a[this.sorted] - b[this.sorted])
+            } else if (this.library == 'library') {
+                return this.releases
+                    .filter(release => { return release.new_release_comic_name.toLowerCase().includes(this.search.toLowerCase()) })
+                    .filter(release => { return release.status != null })
+                    .sort((a, b) => a[this.sorted] - b[this.sorted])
+            } else {
+                return this.releases
+                .filter(release => { return release.new_release_comic_name.toLowerCase().includes(this.search.toLowerCase()) })
+                .sort((a, b) => a[this.sorted] - b[this.sorted])
+            }
         },
     },
     delimiters: ["[[","]]"]