Update authors sort

client/pages/library/_library/authors/index.vue

@@ -3,7 +3,7 @@
     <app-book-shelf-toolbar page="authors" is-home :authors="authors" />
     <div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
       <div class="flex flex-wrap justify-center">
-        <template v-for="author in authors">
+        <template v-for="author in authorsSorted">
           <cards-author-card :key="author.id" :author="author" :width="160" :height="200" class="p-3" @edit="editAuthor" />
         </template>
       </div>
@@ -44,16 +44,29 @@ export default {
     },
     selectedAuthor() {
       return this.$store.state.globals.selectedAuthor
+    },
+    authorSortBy() {
+      return this.$store.getters['user/getUserSetting']('authorSortBy') || 'name'
+    },
+    authorSortDesc() {
+      return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
+    },
+    authorsSorted() {
+      const sortProp = this.authorSortBy
+      const bDesc = this.authorSortDesc ? -1 : 1
+      return this.authors.sort((a, b) => {
+        if (typeof a[sortProp] === 'number' && typeof b[sortProp] === 'number') {
+          return a[sortProp] > b[sortProp] ? bDesc : -bDesc
+        }
+        return a[sortProp].localeCompare(b[sortProp], undefined, { sensitivity: 'base' }) * bDesc
+      })
     }
   },
   methods: {
     async init() {
-      this.settings = { ...this.$store.state.user.settings }
       this.authors = await this.$axios
         .$get(`/api/libraries/${this.currentLibraryId}/authors`)
-        .then((response) => {
-          return this.sortAuthors(response.authors)
-        })
+        .then((response) => response.authors)
         .catch((error) => {
           console.error('Failed to load authors', error)
           return []
@@ -81,33 +94,15 @@ export default {
     },
     editAuthor(author) {
       this.$store.commit('globals/showEditAuthorModal', author)
-    },
-    sortAuthors(authors) {
-      const sortProp = this.settings.authorSortBy
-      const bDesc = this.settings.authorSortDesc === true ? -1 : 1
-      return authors.sort((a, b) => {
-        if (typeof a[sortProp] === 'number' && typeof b[sortProp] === 'number') {
-          return a[sortProp] > b[sortProp] ? 1 * bDesc : -1 * bDesc
-        }
-        return a[sortProp].localeCompare(b[sortProp], undefined, { sensitivity: 'base' }) * bDesc
-      })
-    },
-    settingsUpdated(settings) {
-      for (const key in settings) {
-        this.settings[key] = settings[key]
-      }
-      this.sortAuthors(this.authors)
     }
   },
   mounted() {
     this.init()
-    this.$eventBus.$on('user-settings', this.settingsUpdated)
     this.$root.socket.on('author_added', this.authorAdded)
     this.$root.socket.on('author_updated', this.authorUpdated)
     this.$root.socket.on('author_removed', this.authorRemoved)
   },
   beforeDestroy() {
-    this.$eventBus.$off('user-settings', this.settingsUpdated)
     this.$root.socket.off('author_added', this.authorAdded)
     this.$root.socket.off('author_updated', this.authorUpdated)
     this.$root.socket.off('author_removed', this.authorRemoved)

client/store/user.js

@@ -13,7 +13,7 @@ export const state = () => ({
     seriesSortDesc: false,
     seriesFilterBy: 'all',
     authorSortBy: 'name',
-    authorSortDesc: false,
+    authorSortDesc: false
   }
 })