Sorting, fix user object bug, add settings module

client/components/app/Appbar.vue

@@ -83,6 +83,7 @@ export default {
 
 <style>
 #appbar {
-  box-shadow: 0px 8px 8px #111111aa;
+  /* box-shadow: 0px 8px 8px #111111aa; */
+  box-shadow: 0px 5px 5px #11111155;
 }
 </style>

client/components/app/BookShelf.vue

@@ -35,21 +35,43 @@ export default {
     },
     audiobooks() {
       return this.$store.state.audiobooks.audiobooks
+    },
+    orderBy() {
+      return this.$store.state.settings.orderBy
+    },
+    orderDesc() {
+      return this.$store.state.settings.orderDesc
     }
   },
   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 = []
-      for (let i = 0; i < this.audiobooks.length; i++) {
+      var audiobooksSorted = this.sortAudiobooks()
+      console.log('AB SORTED', audiobooksSorted)
+      for (let i = 0; i < audiobooksSorted.length; i++) {
         var row = Math.floor(i / this.booksPerRow)
         if (row > currentRow) {
           groups.push([...currentGroup])
           currentRow = row
           currentGroup = []
         }
-        currentGroup.push(this.audiobooks[i])
+        currentGroup.push(audiobooksSorted[i])
       }
       if (currentGroup.length) {
         groups.push([...currentGroup])
@@ -98,6 +120,9 @@ export default {
 </script>
 
 <style>
+#bookshelf {
+  height: calc(100% - 40px);
+}
 .bookshelfRow {
   background-image: url(/wood_panels.jpg);
 }

client/components/app/BookShelfToolbar.vue

@@ -0,0 +1,33 @@
+<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>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    orderBy() {
+      return this.$store.state.settings.orderBy
+    },
+    orderDesc() {
+      return this.$store.state.settings.orderDesc
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
+
+
+<style>
+#toolbar {
+  box-shadow: 0px 8px 8px #111111aa;
+}
+</style>