[web-src] Artists/albums list sort + filter

web-src/src/pages/PageAlbums.vue

@@ -4,22 +4,40 @@
 
     <content-with-heading>
       <template slot="options">
-        <index-button-list :index="index_list"></index-button-list>
+        <index-button-list :index="albums_list.indexList"></index-button-list>
+
+        <div class="columns">
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Filter</p>
+            <div class="field">
+              <div class="control">
+                <input id="switchHideSingles" type="checkbox" name="switchHideSingles" class="switch" v-model="hide_singles">
+                <label for="switchHideSingles">Hide singles</label>
+              </div>
+              <p class="help">If active, hides artists that only appear on singles or playlists.</p>
+            </div>
+            <div class="field">
+              <div class="control">
+                <input id="switchHideSpotify" type="checkbox" name="switchHideSpotify" class="switch" v-model="hide_spotify">
+                <label for="switchHideSpotify">Hide artists from Spotify</label>
+              </div>
+              <p class="help">If active, hides artists that only appear in your Spotify library.</p>
+            </div>
+          </div>
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Sort by</p>
+            <dropdown-menu v-model="sort" :options="sort_options"></dropdown-menu>
+          </div>
+        </div>
       </template>
       <template slot="heading-left">
         <p class="title is-4">Albums</p>
-        <p class="heading">{{ albums.total }} albums</p>
+        <p class="heading">{{ albums_list.sortedAndFiltered.length }} Albums</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-albums :albums="albums_filtered"></list-albums>
+        <list-albums :albums="albums_list"></list-albums>
       </template>
     </content-with-heading>
   </div>
@@ -31,8 +49,10 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import IndexButtonList from '@/components/IndexButtonList'
 import ListAlbums from '@/components/ListAlbums'
+import DropdownMenu from '@/components/DropdownMenu'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
+import Albums from '@/lib/Albums'
 
 const albumsData = {
   load: function (to) {
@@ -50,38 +70,56 @@ const albumsData = {
 export default {
   name: 'PageAlbums',
   mixins: [LoadDataBeforeEnterMixin(albumsData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListAlbums },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListAlbums, DropdownMenu },
 
   data () {
     return {
       albums: { items: [] },
-      index_list: []
+      sort_options: ['Name', 'Recently added', 'Recently released']
     }
   },
 
   computed: {
-    hide_singles () {
-      return this.$store.state.hide_singles
+    albums_list () {
+      return new Albums(this.albums.items, {
+        hideSingles: this.hide_singles,
+        hideSpotify: this.hide_spotify,
+        sort: this.sort,
+        group: true
+      })
     },
 
-    albums_filtered () {
-      if (this.hide_singles) {
-        return this.albums.items.filter(album => album.track_count > 2)
+    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 this.$store.state.albums_sort
+      },
+      set (value) {
+        this.$store.commit(types.ALBUMS_SORT, value)
       }
-      return this.albums.items
     }
   },
 
   methods: {
-    update_hide_singles: function (e) {
-      this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
-    }
-  },
-
-  watch: {
-    'hide_singles' () {
-      this.index_list = [...new Set(this.albums_filtered
-        .map(album => album.name_sort.charAt(0).toUpperCase()))]
+    scrollToTop: function () {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
     }
   }
 }

web-src/src/pages/PageArtists.vue

@@ -4,22 +4,40 @@
 
     <content-with-heading>
       <template slot="options">
-        <index-button-list :index="index_list"></index-button-list>
+        <index-button-list :index="artists_list.indexList"></index-button-list>
+
+        <div class="columns">
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Filter</p>
+            <div class="field">
+              <div class="control">
+                <input id="switchHideSingles" type="checkbox" name="switchHideSingles" class="switch" v-model="hide_singles">
+                <label for="switchHideSingles">Hide singles</label>
+              </div>
+              <p class="help">If active, hides artists that only appear on singles or playlists.</p>
+            </div>
+            <div class="field">
+              <div class="control">
+                <input id="switchHideSpotify" type="checkbox" name="switchHideSpotify" class="switch" v-model="hide_spotify">
+                <label for="switchHideSpotify">Hide artists from Spotify</label>
+              </div>
+              <p class="help">If active, hides artists that only appear in your Spotify library.</p>
+            </div>
+          </div>
+          <div class="column">
+            <p class="heading" style="margin-bottom: 24px;">Sort by</p>
+            <dropdown-menu v-model="sort" :options="sort_options"></dropdown-menu>
+          </div>
+        </div>
       </template>
       <template slot="heading-left">
         <p class="title is-4">Artists</p>
-        <p class="heading">{{ artists.total }} artists</p>
+        <p class="heading">{{ artists_list.sortedAndFiltered.length }} Artists</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-artists :artists="artists_filtered"></list-artists>
+        <list-artists :artists="artists_list"></list-artists>
       </template>
     </content-with-heading>
   </div>
@@ -31,8 +49,10 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import IndexButtonList from '@/components/IndexButtonList'
 import ListArtists from '@/components/ListArtists'
+import DropdownMenu from '@/components/DropdownMenu'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
+import Artists from '@/lib/Artists'
 
 const artistsData = {
   load: function (to) {
@@ -47,35 +67,56 @@ const artistsData = {
 export default {
   name: 'PageArtists',
   mixins: [LoadDataBeforeEnterMixin(artistsData)],
-  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListArtists },
+  components: { ContentWithHeading, TabsMusic, IndexButtonList, ListArtists, DropdownMenu },
 
   data () {
     return {
-      artists: { items: [] }
+      artists: { items: [] },
+      sort_options: ['Name', 'Recently added']
     }
   },
 
   computed: {
-    hide_singles () {
-      return this.$store.state.hide_singles
+    artists_list () {
+      return new Artists(this.artists.items, {
+        hideSingles: this.hide_singles,
+        hideSpotify: this.hide_spotify,
+        sort: this.sort,
+        group: true
+      })
     },
 
-    index_list () {
-      return [...new Set(this.artists_filtered
-        .map(artist => artist.name_sort.charAt(0).toUpperCase()))]
-    },
-
-    artists_filtered () {
-      if (this.hide_singles) {
-        return this.artists.items.filter(artist => artist.track_count > (artist.album_count * 2))
+    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 this.$store.state.artists_sort
+      },
+      set (value) {
+        this.$store.commit(types.ARTISTS_SORT, value)
       }
-      return this.artists.items
     }
   },
 
   methods: {
-    update_hide_singles: function (e) {
-      this.$store.commit(types.HIDE_SINGLES, !this.hide_singles)
+    scrollToTop: function () {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
     }
   }
 }

web-src/src/pages/PageAudiobooksAlbums.vue

@@ -4,14 +4,14 @@
 
     <content-with-heading>
       <template slot="options">
-        <index-button-list :index="index_list"></index-button-list>
+        <index-button-list :index="albums_list.indexList"></index-button-list>
       </template>
       <template slot="heading-left">
         <p class="title is-4">Audiobooks</p>
-        <p class="heading">{{ albums.total }} audiobooks</p>
+        <p class="heading">{{ albums_list.sortedAndFiltered.length }} Audiobooks</p>
       </template>
       <template slot="content">
-        <list-albums :albums="albums.items"></list-albums>
+        <list-albums :albums="albums_list"></list-albums>
       </template>
     </content-with-heading>
   </div>
@@ -24,6 +24,7 @@ import IndexButtonList from '@/components/IndexButtonList'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListAlbums from '@/components/ListAlbums'
 import webapi from '@/webapi'
+import Albums from '@/lib/Albums'
 
 const albumsData = {
   load: function (to) {
@@ -47,9 +48,11 @@ export default {
   },
 
   computed: {
-    index_list () {
-      return [...new Set(this.albums.items
-        .map(album => album.name_sort.charAt(0).toUpperCase()))]
+    albums_list () {
+      return new Albums(this.albums.items, {
+        sort: 'Name',
+        group: true
+      })
     }
   },
 

web-src/src/pages/PageAudiobooksArtists.vue

@@ -4,16 +4,16 @@
 
     <content-with-heading>
       <template slot="options">
-        <index-button-list :index="index_list"></index-button-list>
+        <index-button-list :index="artists_list.indexList"></index-button-list>
       </template>
       <template slot="heading-left">
         <p class="title is-4">Authors</p>
-        <p class="heading">{{ artists.total }} authors</p>
+        <p class="heading">{{ artists_list.sortedAndFiltered.length }} Authors</p>
       </template>
       <template slot="heading-right">
       </template>
       <template slot="content">
-        <list-artists :artists="artists.items"></list-artists>
+        <list-artists :artists="artists_list"></list-artists>
       </template>
     </content-with-heading>
   </div>
@@ -26,6 +26,7 @@ import TabsAudiobooks from '@/components/TabsAudiobooks'
 import IndexButtonList from '@/components/IndexButtonList'
 import ListArtists from '@/components/ListArtists'
 import webapi from '@/webapi'
+import Artists from '@/lib/Artists'
 
 const artistsData = {
   load: function (to) {
@@ -49,9 +50,11 @@ export default {
   },
 
   computed: {
-    index_list () {
-      return [...new Set(this.artists.items
-        .map(artist => artist.name_sort.charAt(0).toUpperCase()))]
+    artists_list () {
+      return new Artists(this.artists.items, {
+        sort: 'Name',
+        group: true
+      })
     }
   },