Add:Authors page #618

components/home/BookshelfNavBar.vue

@@ -101,15 +101,15 @@ export default {
             icon: 'collections_bookmark',
             iconClass: 'text-xl',
             text: 'Collections'
+          },
+          {
+            to: '/bookshelf/authors',
+            routeName: 'bookshelf-authors',
+            iconPack: 'abs-icons',
+            icon: 'authors',
+            iconClass: 'text-2xl',
+            text: 'Authors'
           }
-          // {
-          //   to: '/bookshelf/authors',
-          //   routeName: 'bookshelf-authors',
-          //   iconPack: 'abs-icons',
-          //   icon: 'authors',
-          //   iconClass: 'text-2xl pb-px',
-          //   text: 'Authors'
-          // }
         ]
       }
 

components/home/BookshelfToolbar.vue

@@ -66,6 +66,8 @@ export default {
         return 'Collections'
       } else if (this.page === 'playlists') {
         return 'Playlists'
+      } else if (this.page === 'authors') {
+        return 'Authors'
       }
       return ''
     },

pages/bookshelf/authors.vue

@@ -1,14 +1,70 @@
 <template>
-  <div>Authors</div>
+  <div>
+    <div id="bookshelf" class="w-full h-full p-4 overflow-y-auto">
+      <div class="flex flex-wrap justify-center">
+        <template v-for="author in authors">
+          <cards-author-card :key="author.id" :author="author" :width="96" :height="120" class="p-2" />
+        </template>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   data() {
-    return {}
+    return {
+      loading: true,
+      authors: []
+    }
   },
-  watch: {},
-  computed: {},
-  methods: {}
+  computed: {
+    currentLibraryId() {
+      return this.$store.state.libraries.currentLibraryId
+    }
+  },
+  methods: {
+    async init() {
+      this.authors = await this.$axios
+        .$get(`/api/libraries/${this.currentLibraryId}/authors`)
+        .then((response) => response.authors)
+        .catch((error) => {
+          console.error('Failed to load authors', error)
+          return []
+        })
+      console.log('Loaded authors', this.authors)
+      this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+      this.loading = false
+    },
+    authorAdded(author) {
+      if (!this.authors.some((au) => au.id === author.id)) {
+        this.authors.push(author)
+        this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+      }
+    },
+    authorUpdated(author) {
+      this.authors = this.authors.map((au) => {
+        if (au.id === author.id) {
+          return author
+        }
+        return au
+      })
+    },
+    authorRemoved(author) {
+      this.authors = this.authors.filter((au) => au.id !== author.id)
+      this.$eventBus.$emit('bookshelf-total-entities', this.authors.length)
+    }
+  },
+  mounted() {
+    this.init()
+    this.$socket.$on('author_added', this.authorAdded)
+    this.$socket.$on('author_updated', this.authorUpdated)
+    this.$socket.$on('author_removed', this.authorRemoved)
+  },
+  beforeDestroy() {
+    this.$socket.$off('author_added', this.authorAdded)
+    this.$socket.$off('author_updated', this.authorUpdated)
+    this.$socket.$off('author_removed', this.authorRemoved)
+  }
 }
 </script>