[web-src] use ListComposer for index block separation

web-src/src/pages/PageComposers.vue

@@ -8,14 +8,7 @@
         <p class="heading">{{ composers.total }} composers</p>
       </template>
       <template slot="content">
-        <list-item-composer v-for="composer in composers.items" :key="composer.name" :composer="composer" @click="open_composer(composer)">
-          <template slot="actions">
-            <a @click="open_dialog(composer)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-composer>
-        <modal-dialog-composer :show="show_details_modal" :composer="selected_composer" @close="show_details_modal = false" />
+        <list-composers :composers="composers_list"></list-composers>
       </template>
     </content-with-heading>
   </div>
@@ -25,9 +18,10 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
-import ListItemComposer from '@/components/ListItemComposer'
-import ModalDialogComposer from '@/components/ModalDialogComposer'
+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) {
@@ -52,7 +46,7 @@ const composersData = {
 export default {
   name: 'PageComposers',
   mixins: [LoadDataBeforeEnterMixin(composersData)],
-  components: { ContentWithHeading, TabsMusic, ListItemComposer, ModalDialogComposer },
+  components: { ContentWithHeading, TabsMusic, ListComposers },
 
   data () {
     return {
@@ -68,6 +62,39 @@ export default {
     index_list () {
       return [...new Set(this.composers.items
         .map(composer => composer.name.charAt(0).toUpperCase()))]
+    },
+
+    composers_list () {
+      return new Composers(this.composers.items, {
+        hideSingles: this.hide_singles,
+        hideSpotify: this.hide_spotify,
+        sort: this.sort,
+        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'
+      }
     }
   },