Sorting and filtering

client/components/app/BookShelf.vue

@@ -20,13 +20,17 @@
 </template>
 
 <script>
+import { sort } from '@/assets/fastSort'
+console.log('SORT', sort)
+
 export default {
   data() {
     return {
       width: 0,
       bookWidth: 176,
       booksPerRow: 0,
-      groupedBooks: []
+      groupedBooks: [],
+      currFilterOrderKey: null
     }
   },
   computed: {
@@ -36,34 +40,19 @@ export default {
     audiobooks() {
       return this.$store.state.audiobooks.audiobooks
     },
-    orderBy() {
-      return this.$store.state.settings.orderBy
-    },
-    orderDesc() {
-      return this.$store.state.settings.orderDesc
+    filterOrderKey() {
+      return this.$store.getters['settings/getFilterOrderKey']
     }
   },
   methods: {
-    sortAudiobooks() {
-      var audiobooks = this.audiobooks.map((ab) => ({ ...ab }))
-      audiobooks.sort((a, b) => {
-        var bookA = a.book || {}
-        var bookB = b.book || {}
-        if (this.orderDesc) {
-          return bookB[this.orderBy] > bookA[this.orderBy] ? 1 : -1
-        } else {
-          // ASCENDING A -> Z
-          return bookA[this.orderBy] > bookB[this.orderBy] ? 1 : -1
-        }
-      })
-      return audiobooks
-    },
     setGroupedBooks() {
       var groups = []
       var currentRow = 0
       var currentGroup = []
-      var audiobooksSorted = this.sortAudiobooks()
-      console.log('AB SORTED', audiobooksSorted)
+
+      var audiobooksSorted = this.$store.getters['audiobooks/getFilteredAndSorted']()
+      this.currFilterOrderKey = this.filterOrderKey
+
       for (let i = 0; i < audiobooksSorted.length; i++) {
         var row = Math.floor(i / this.booksPerRow)
         if (row > currentRow) {
@@ -102,18 +91,27 @@ export default {
       console.log('[AudioBookshelf] Audiobooks Updated')
       this.setGroupedBooks()
     },
+    settingsUpdated() {
+      // var newSortKey = `${this.orderBy}-${this.orderDesc}`
+      if (this.currFilterOrderKey !== this.filterOrderKey) {
+        this.setGroupedBooks()
+      }
+    },
     scan() {
       this.$root.socket.emit('scan')
     }
   },
   mounted() {
     this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
+    this.$store.commit('settings/addListener', { id: 'bookshelf', meth: this.settingsUpdated })
+
     this.$store.dispatch('audiobooks/load')
     this.init()
     window.addEventListener('resize', this.resize)
   },
   beforeDestroy() {
     this.$store.commit('audiobooks/removeListener', 'bookshelf')
+    this.$store.commit('settings/removeListener', 'bookshelf')
     window.removeEventListener('resize', this.resize)
   }
 }

client/components/app/BookShelfToolbar.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="w-full h-10 relative">
     <div id="toolbar" class="absolute top-0 left-0 w-full h-full z-10 flex items-center px-8">
-      <p>Order By: {{ orderBy }}</p>
-      <p class="px-4">Desc: {{ orderDesc ? 'Desc' : 'Asc' }}</p>
+      <!-- <p>Order By: {{ settings.orderBy }}</p>
+      <p class="px-4">Desc: {{ settings.orderDesc ? 'Desc' : 'Asc' }}</p> -->
+      <p class="font-book">{{ numShowing }} Audiobooks</p>
+      <div class="flex-grow" />
+      <controls-filter-select v-model="settings.filterBy" class="w-28 h-7.5" @change="updateFilter" />
+      <span class="px-4 text-sm">by</span>
+      <controls-order-select v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-40 h-7.5" @change="updateOrder" />
     </div>
   </div>
 </template>
@@ -10,18 +15,33 @@
 <script>
 export default {
   data() {
-    return {}
-  },
-  computed: {
-    orderBy() {
-      return this.$store.state.settings.orderBy
-    },
-    orderDesc() {
-      return this.$store.state.settings.orderDesc
+    return {
+      settings: {}
     }
   },
-  methods: {},
-  mounted() {}
+  computed: {
+    numShowing() {
+      return this.$store.getters['audiobooks/getFiltered']().length
+    }
+  },
+  methods: {
+    updateOrder() {
+      this.saveSettings()
+    },
+    updateFilter() {
+      this.saveSettings()
+    },
+    saveSettings() {
+      // Send to server
+      this.$store.commit('settings/setSettings', this.settings)
+    },
+    init() {
+      this.settings = { ...this.$store.state.settings.settings }
+    }
+  },
+  mounted() {
+    this.init()
+  }
 }
 </script>