From 9c4c25f507567380c3b29cdae9b0d73c3caaf04a Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Wed, 1 Jul 2020 07:29:03 +0200
Subject: [PATCH] [web-src] Start implementing audiobooks authors page

---
 web-src/src/components/TabsAudiobooks.vue   | 35 +++++++++++++++++++++
 web-src/src/pages/PageArtists.vue           |  2 +-
 web-src/src/pages/PageAudiobooks.vue        |  5 ++-
 web-src/src/pages/PageAudiobooksArtists.vue | 20 +++++-------
 web-src/src/router/index.js                 | 15 +++++++--
 web-src/src/webapi/index.js                 |  4 +--
 6 files changed, 62 insertions(+), 19 deletions(-)
 create mode 100644 web-src/src/components/TabsAudiobooks.vue

diff --git a/web-src/src/components/TabsAudiobooks.vue b/web-src/src/components/TabsAudiobooks.vue
new file mode 100644
index 00000000..13375fed
--- /dev/null
+++ b/web-src/src/components/TabsAudiobooks.vue
@@ -0,0 +1,35 @@
+<template>
+  <section class="section fd-tabs-section">
+    <div class="container">
+      <div class="columns is-centered">
+        <div class="column is-four-fifths">
+          <div class="tabs is-centered is-small">
+            <ul>
+              <router-link tag="li" to="/audiobooks/artists" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-artist"></i></span>
+                  <span class="">Authors</span>
+                </a>
+              </router-link>
+              <router-link tag="li" to="/audiobooks/albums" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-album"></i></span>
+                  <span class="">Albums</span>
+                </a>
+              </router-link>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: 'TabsAudiobooks'
+}
+</script>
+
+<style>
+</style>
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index 7b93746f..ad5cfcc9 100644
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -47,7 +47,7 @@ import * as types from '@/store/mutation_types'
 
 const artistsData = {
   load: function (to) {
-    return webapi.library_artists()
+    return webapi.library_artists('music')
   },
 
   set: function (vm, response) {
diff --git a/web-src/src/pages/PageAudiobooks.vue b/web-src/src/pages/PageAudiobooks.vue
index 00104694..96bbe92b 100644
--- a/web-src/src/pages/PageAudiobooks.vue
+++ b/web-src/src/pages/PageAudiobooks.vue
@@ -1,5 +1,7 @@
 <template>
   <div>
+    <tabs-audiobooks></tabs-audiobooks>
+
     <content-with-heading>
       <template slot="heading-left">
         <p class="title is-4">Audiobooks</p>
@@ -21,6 +23,7 @@
 
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
+import TabsAudiobooks from '@/components/TabsAudiobooks'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemAlbum from '@/components/ListItemAlbum'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
@@ -39,7 +42,7 @@ const albumsData = {
 export default {
   name: 'PageAudiobooks',
   mixins: [LoadDataBeforeEnterMixin(albumsData)],
-  components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum },
+  components: { TabsAudiobooks, ContentWithHeading, ListItemAlbum, ModalDialogAlbum },
 
   data () {
     return {
diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue
index 7b93746f..ba3d3f0f 100644
--- a/web-src/src/pages/PageAudiobooksArtists.vue
+++ b/web-src/src/pages/PageAudiobooksArtists.vue
@@ -1,22 +1,16 @@
 <template>
   <div>
-    <tabs-music></tabs-music>
+    <tabs-audiobooks></tabs-audiobooks>
 
     <content-with-heading>
       <template slot="options">
         <index-button-list :index="index_list"></index-button-list>
       </template>
       <template slot="heading-left">
-        <p class="title is-4">Artists</p>
-        <p class="heading">{{ artists.total }} artists</p>
+        <p class="title is-4">Authors</p>
+        <p class="heading">{{ artists.total }} authors</p>
       </template>
       <template slot="heading-right">
-        <a class="button is-small" :class="{ 'is-info': hide_singles }" @click="update_hide_singles">
-          <span class="icon">
-            <i class="mdi mdi-numeric-1-box-multiple-outline"></i>
-          </span>
-          <span>Hide singles</span>
-        </a>
       </template>
       <template slot="content">
         <list-item-artist v-for="artist in artists_filtered"
@@ -38,7 +32,7 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import TabsMusic from '@/components/TabsMusic'
+import TabsAudiobooks from '@/components/TabsAudiobooks'
 import IndexButtonList from '@/components/IndexButtonList'
 import ListItemArtist from '@/components/ListItemArtist'
 import ModalDialogArtist from '@/components/ModalDialogArtist'
@@ -47,7 +41,7 @@ import * as types from '@/store/mutation_types'
 
 const artistsData = {
   load: function (to) {
-    return webapi.library_artists()
+    return webapi.library_artists('audiobook')
   },
 
   set: function (vm, response) {
@@ -56,9 +50,9 @@ const artistsData = {
 }
 
 export default {
-  name: 'PageArtists',
+  name: 'PageAudiobooksArtists',
   mixins: [LoadDataBeforeEnterMixin(artistsData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListItemArtist, ModalDialogArtist },
+  components: { ContentWithHeading, TabsAudiobooks, IndexButtonList, ListItemArtist, ModalDialogArtist },
 
   data () {
     return {
diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js
index 0c24586a..5a3de87d 100644
--- a/web-src/src/router/index.js
+++ b/web-src/src/router/index.js
@@ -18,6 +18,7 @@ import PageArtistTracks from '@/pages/PageArtistTracks'
 import PagePodcasts from '@/pages/PagePodcasts'
 import PagePodcast from '@/pages/PagePodcast'
 import PageAudiobooks from '@/pages/PageAudiobooks'
+import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists'
 import PageAudiobook from '@/pages/PageAudiobook'
 import PagePlaylists from '@/pages/PagePlaylists'
 import PagePlaylist from '@/pages/PagePlaylist'
@@ -146,9 +147,19 @@ export const router = new VueRouter({
     },
     {
       path: '/audiobooks',
-      name: 'Audiobooks',
+      redirect: '/audiobooks/artists'
+    },
+    {
+      path: '/audiobooks/artists',
+      name: 'AudiobooksArtists',
+      component: PageAudiobooksArtists,
+      meta: { show_progress: true, has_tabs: true }
+    },
+    {
+      path: '/audiobooks/albums',
+      name: 'AudiobooksAlbums',
       component: PageAudiobooks,
-      meta: { show_progress: true }
+      meta: { show_progress: true, has_tabs: true }
     },
     {
       path: '/audiobooks/:album_id',
diff --git a/web-src/src/webapi/index.js b/web-src/src/webapi/index.js
index 1960be74..6ddf7b8c 100644
--- a/web-src/src/webapi/index.js
+++ b/web-src/src/webapi/index.js
@@ -200,8 +200,8 @@ export default {
     return axios.put('/api/outputs/' + outputId + '/toggle')
   },
 
-  library_artists () {
-    return axios.get('/api/library/artists?media_kind=music')
+  library_artists (media_kind = undefined) {
+    return axios.get('/api/library/artists', { params: { media_kind: media_kind } })
   },
 
   library_artist (artistId) {