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>

client/components/modals/edit-tabs/Match.vue

@@ -11,6 +11,9 @@
     <div v-show="processing" class="flex h-full items-center justify-center">
       <p>Loading...</p>
     </div>
+    <div v-show="!processing && !searchResults.length" class="flex h-full items-center justify-center">
+      <p>No Results</p>
+    </div>
     <div v-show="!processing" class="w-full max-h-full overflow-y-auto overflow-x-hidden">
       <template v-for="(res, index) in searchResults">
         <div :key="index" class="w-full border-b border-gray-700 pb-2 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch(res)">
@@ -42,6 +45,7 @@
 <script>
 export default {
   props: {
+    processing: Boolean,
     audiobook: {
       type: Object,
       default: () => {}
@@ -63,7 +67,16 @@ export default {
       }
     }
   },
-  computed: {},
+  computed: {
+    isProcessing: {
+      get() {
+        return this.processing
+      },
+      set(val) {
+        this.$emit('update:processing', val)
+      }
+    }
+  },
   methods: {
     submitSearch() {
       this.runSearch()
@@ -75,7 +88,13 @@ export default {
       this.searchResults = []
       this.processing = true
       this.lastSearch = this.search
-      var results = await this.$axios.$get(`/api/find/search?title=${this.search}`)
+      var results = await this.$axios.$get(`/api/find/search?title=${this.search}`).catch((error) => {
+        console.error('Failed', error)
+        return []
+      })
+      results = results.filter((res) => {
+        return !!res.title
+      })
       console.log('Got results', results)
       this.searchResults = results
       this.processing = false
@@ -91,10 +110,31 @@ export default {
       this.search = this.audiobook.book.title
       this.runSearch()
     },
-    selectMatch(match) {}
-  },
-  mounted() {
-    console.log('Match mounted')
+    async selectMatch(match) {
+      this.isProcessing = true
+      const updatePayload = {
+        book: {}
+      }
+      if (match.cover) {
+        updatePayload.book.cover = match.cover
+      }
+      if (match.title) {
+        updatePayload.book.title = match.title
+      }
+      if (match.description) {
+        updatePayload.book.description = match.description
+      }
+      var updatedAudiobook = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
+        console.error('Failed to update', error)
+        return false
+      })
+      this.isProcessing = false
+      if (updatedAudiobook) {
+        console.log('Update Successful', updatedAudiobook)
+        this.$toast.success('Update Successful')
+        this.$emit('close')
+      }
+    }
   }
 }
 </script>

client/components/ui/Tooltip.vue

@@ -50,6 +50,9 @@ export default {
     mouseleave() {
       if (this.isShowing) this.hideTooltip()
     }
+  },
+  beforeDestroy() {
+    this.hideTooltip()
   }
 }
 </script>