From 00461e4f9ff42fcc3fc5ad46c7d22d02e5c63fa5 Mon Sep 17 00:00:00 2001
From: whatdoineed2do/Ray <whatdoineed2do@nospam.gmail.com>
Date: Thu, 30 Dec 2021 11:15:14 +0000
Subject: [PATCH] [web-src] composer review

---
 web-src/src/lib/Composers.js             |  2 +-
 web-src/src/pages/PageComposer.vue       |  7 ++--
 web-src/src/pages/PageComposerTracks.vue |  8 ++---
 web-src/src/pages/PageComposers.vue      | 41 ++++--------------------
 web-src/src/webapi/index.js              | 17 ++++++++--
 5 files changed, 26 insertions(+), 49 deletions(-)

diff --git a/web-src/src/lib/Composers.js b/web-src/src/lib/Composers.js
index 12bad844..67f2c8c7 100644
--- a/web-src/src/lib/Composers.js
+++ b/web-src/src/lib/Composers.js
@@ -39,7 +39,7 @@ export default class Composers {
   }
 
   createSortedAndFilteredList () {
-    var composersSorted = this.items
+    let composersSorted = this.items
     if (this.options.hideSingles || this.options.hideSpotify || this.options.hideOther) {
       composersSorted = composersSorted.filter(composer => this.isComposerVisible(composer))
     }
diff --git a/web-src/src/pages/PageComposer.vue b/web-src/src/pages/PageComposer.vue
index 328d6758..609fec61 100644
--- a/web-src/src/pages/PageComposer.vue
+++ b/web-src/src/pages/PageComposer.vue
@@ -1,7 +1,5 @@
 <template>
   <div>
-    <tabs-music></tabs-music>
-
     <content-with-heading>
       <template slot="heading-left">
         <p class="title is-4">{{ name }}</p>
@@ -35,7 +33,6 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import TabsMusic from '@/components/TabsMusic'
 import ListItemAlbums from '@/components/ListItemAlbum'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import ModalDialogComposer from '@/components/ModalDialogComposer'
@@ -43,7 +40,7 @@ import webapi from '@/webapi'
 
 const composerData = {
   load: function (to) {
-    return webapi.library_composer(to.params.composer, 'albums')
+    return webapi.library_composer(to.params.composer)
   },
 
   set: function (vm, response) {
@@ -55,7 +52,7 @@ const composerData = {
 export default {
   name: 'PageComposer',
   mixins: [LoadDataBeforeEnterMixin(composerData)],
-  components: { ContentWithHeading, TabsMusic, ListItemAlbums, ModalDialogAlbum, ModalDialogComposer },
+  components: { ContentWithHeading, ListItemAlbums, ModalDialogAlbum, ModalDialogComposer },
 
   data () {
     return {
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 1b3cad35..2eb022a9 100644
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -1,11 +1,8 @@
 <template>
   <div>
-    <tabs-music></tabs-music>
-
     <content-with-heading>
       <template slot="heading-left">
         <p class="title is-4">{{ composer }}</p>
-        <p class="heading">{{ tracks.total }} tracks</p>
       </template>
       <template slot="heading-right">
         <div class="buttons is-centered">
@@ -36,7 +33,6 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import TabsMusic from '@/components/TabsMusic'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
 import ModalDialogComposer from '@/components/ModalDialogComposer'
@@ -44,7 +40,7 @@ import webapi from '@/webapi'
 
 const tracksData = {
   load: function (to) {
-    return webapi.library_composer(to.params.composer, 'tracks')
+    return webapi.library_composer_tracks(to.params.composer)
   },
 
   set: function (vm, response) {
@@ -56,7 +52,7 @@ const tracksData = {
 export default {
   name: 'PageComposerTracks',
   mixins: [LoadDataBeforeEnterMixin(tracksData)],
-  components: { ContentWithHeading, TabsMusic, ListItemTrack, ModalDialogTrack, ModalDialogComposer },
+  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, ModalDialogComposer },
 
   data () {
     return {
diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue
index 1c0874eb..854d36e4 100644
--- a/web-src/src/pages/PageComposers.vue
+++ b/web-src/src/pages/PageComposers.vue
@@ -3,6 +3,9 @@
     <tabs-music></tabs-music>
 
     <content-with-heading>
+      <template slot="options">
+        <index-button-list :index="composers_list.indexList"></index-button-list>
+      </template>
       <template slot="heading-left">
         <p class="title is-4">{{ heading }}</p>
         <p class="heading">{{ composers.total }} composers</p>
@@ -18,18 +21,14 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
+import IndexButtonList from '@/components/IndexButtonList'
 import ListComposers from '@/components/ListComposers'
 import webapi from '@/webapi'
-import * as types from '@/store/mutation_types'
 import Composers from '@/lib/Composers'
 
 const composersData = {
   load: function (to) {
-    if (to.params.genre) {
-      return webapi.library_genre_composers(to.params.genre)
-    } else {
-      return webapi.library_composers()
-    }
+    return webapi.library_composers()
   },
 
   set: function (vm, response) {
@@ -46,7 +45,7 @@ const composersData = {
 export default {
   name: 'PageComposers',
   mixins: [LoadDataBeforeEnterMixin(composersData)],
-  components: { ContentWithHeading, TabsMusic, ListComposers },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListComposers },
 
   data () {
     return {
@@ -66,35 +65,9 @@ export default {
 
     composers_list () {
       return new Composers(this.composers.items, {
-        hideSingles: this.hide_singles,
-        hideSpotify: this.hide_spotify,
-        sort: this.sort,
+        sort: 'Name',
         group: true
       })
-    },
-
-    hide_singles: {
-      get () {
-        return this.$store.state.hide_singles
-      },
-      set (value) {
-        this.$store.commit(types.HIDE_SINGLES, value)
-      }
-    },
-
-    hide_spotify: {
-      get () {
-        return this.$store.state.hide_spotify
-      },
-      set (value) {
-        this.$store.commit(types.HIDE_SPOTIFY, value)
-      }
-    },
-
-    sort: {
-      get () {
-        return 'Name'
-      }
     }
   },
 
diff --git a/web-src/src/webapi/index.js b/web-src/src/webapi/index.js
index 093352f0..f3c9eebb 100644
--- a/web-src/src/webapi/index.js
+++ b/web-src/src/webapi/index.js
@@ -271,9 +271,20 @@ export default {
     return axios.get('/api/library/composers')
   },
 
-  library_composer (composer, type) {
-    var params = {
-      type: type,
+  library_composer (composer) {
+    const params = {
+      type: 'albums',
+      media_kind: 'music',
+      expression: 'composer is "' + composer + '"'
+    }
+    return axios.get('/api/search', {
+      params: params
+    })
+  },
+
+  library_composer_tracks (composer) {
+    const params = {
+      type: 'tracks',
       media_kind: 'music',
       expression: 'composer is "' + composer + '"'
     }