[web] Move grouping options to computed properties

web-src/src/pages/PageAlbums.vue

@@ -95,8 +95,22 @@ export default {
   },
   data() {
     return {
-      albums_list: new GroupedList(),
+      albums_list: new GroupedList()
-      groupings: [
+    }
+  },
+  computed: {
+    albums() {
+      const { options } = this.groupings.find(
+        (grouping) => grouping.id === this.uiStore.albums_sort
+      )
+      options.filters = [
+        (album) => !this.uiStore.hide_singles || album.track_count > 2,
+        (album) => !this.uiStore.hide_spotify || album.data_kind !== 'spotify'
+      ]
+      return this.albums_list.group(options)
+    },
+    groupings() {
+      return [
         {
           id: 1,
           name: this.$t('page.albums.sort.name'),
@@ -141,18 +155,6 @@ export default {
           }
         }
       ]
-    }
-  },
-  computed: {
-    albums() {
-      const { options } = this.groupings.find(
-        (grouping) => grouping.id === this.uiStore.albums_sort
-      )
-      options.filters = [
-        (album) => !this.uiStore.hide_singles || album.track_count > 2,
-        (album) => !this.uiStore.hide_spotify || album.data_kind !== 'spotify'
-      ]
-      return this.albums_list.group(options)
     },
     heading() {
       return {

web-src/src/pages/PageArtist.vue

@@ -104,18 +104,6 @@ export default {
     return {
       albums_list: new GroupedList(),
       artist: {},
-      groupings: [
-        {
-          id: 1,
-          name: this.$t('page.artist.sort.name'),
-          options: { criteria: [{ field: 'name_sort', type: String }] }
-        },
-        {
-          id: 2,
-          name: this.$t('page.artist.sort.release-date'),
-          options: { criteria: [{ field: 'date_released', type: Date }] }
-        }
-      ],
       show_details_modal: false
     }
   },
@@ -129,6 +117,20 @@ export default {
       ]
       return this.albums_list.group(options)
     },
+    groupings() {
+      return [
+        {
+          id: 1,
+          name: this.$t('page.artist.sort.name'),
+          options: { criteria: [{ field: 'name_sort', type: String }] }
+        },
+        {
+          id: 2,
+          name: this.$t('page.artist.sort.release-date'),
+          options: { criteria: [{ field: 'date_released', type: Date }] }
+        }
+      ]
+    },
     heading() {
       return {
         title: this.artist.name,

web-src/src/pages/PageArtistTracks.vue

@@ -106,7 +106,20 @@ export default {
   data() {
     return {
       artist: {},
-      groupings: [
+      show_details_modal: false,
+      tracks_list: new GroupedList()
+    }
+  },
+  computed: {
+    album_count() {
+      return new Set(
+        [...this.tracks]
+          .filter((track) => track.isItem)
+          .map((track) => track.item.album_id)
+      ).size
+    },
+    groupings() {
+      return [
         {
           id: 1,
           name: this.$t('page.artist.sort.name'),
@@ -120,18 +133,7 @@ export default {
             index: { field: 'rating', type: 'Digits' }
           }
         }
-      ],
+      ]
-      show_details_modal: false,
-      tracks_list: new GroupedList()
-    }
-  },
-  computed: {
-    album_count() {
-      return new Set(
-        [...this.tracks]
-          .filter((track) => track.isItem)
-          .map((track) => track.item.album_id)
-      ).size
     },
     heading() {
       return {

web-src/src/pages/PageArtists.vue

@@ -68,7 +68,6 @@ const dataObject = {
   load(to) {
     return webapi.library_artists('music')
   },
-
   set(vm, response) {
     vm.artists_list = new GroupedList(response.data)
   }
@@ -95,22 +94,7 @@ export default {
   },
   data() {
     return {
-      artists_list: new GroupedList(),
+      artists_list: new GroupedList()
-      groupings: [
-        {
-          id: 1,
-          name: this.$t('page.artists.sort.name'),
-          options: { index: { field: 'name_sort', type: String } }
-        },
-        {
-          id: 2,
-          name: this.$t('page.artists.sort.recently-added'),
-          options: {
-            criteria: [{ field: 'time_added', order: -1, type: Date }],
-            index: { field: 'time_added', type: Date }
-          }
-        }
-      ]
     }
   },
   computed: {
@@ -126,6 +110,23 @@ export default {
       ]
       return this.artists_list.group(options)
     },
+    groupings() {
+      return [
+        {
+          id: 1,
+          name: this.$t('page.artists.sort.name'),
+          options: { index: { field: 'name_sort', type: String } }
+        },
+        {
+          id: 2,
+          name: this.$t('page.artists.sort.recently-added'),
+          options: {
+            criteria: [{ field: 'time_added', order: -1, type: Date }],
+            index: { field: 'time_added', type: Date }
+          }
+        }
+      ]
+    },
     heading() {
       return {
         title: this.$t('page.artists.title'),

web-src/src/pages/PageComposerTracks.vue

@@ -58,7 +58,6 @@ const dataObject = {
       webapi.library_composer_tracks(to.params.name)
     ])
   },
-
   set(vm, response) {
     vm.composer = response[0].data
     vm.tracks_list = new GroupedList(response[1].data.tracks)
@@ -87,21 +86,6 @@ export default {
   data() {
     return {
       composer: {},
-      groupings: [
-        {
-          id: 1,
-          name: this.$t('page.composer.sort.name'),
-          options: { index: { field: 'title_sort', type: String } }
-        },
-        {
-          id: 2,
-          name: this.$t('page.composer.sort.rating'),
-          options: {
-            criteria: [{ field: 'rating', order: -1, type: Number }],
-            index: { field: 'rating', type: 'Digits' }
-          }
-        }
-      ],
       show_details_modal: false,
       tracks_list: new GroupedList()
     }
@@ -134,6 +118,23 @@ export default {
     }
   },
   methods: {
+    groupings() {
+      return [
+        {
+          id: 1,
+          name: this.$t('page.composer.sort.name'),
+          options: { index: { field: 'title_sort', type: String } }
+        },
+        {
+          id: 2,
+          name: this.$t('page.composer.sort.rating'),
+          options: {
+            criteria: [{ field: 'rating', order: -1, type: Number }],
+            index: { field: 'rating', type: 'Digits' }
+          }
+        }
+      ]
+    },
     open_albums() {
       this.$router.push({
         name: 'music-composer-albums',

web-src/src/pages/PageGenreTracks.vue

@@ -87,7 +87,17 @@ export default {
   data() {
     return {
       genre: {},
-      groupings: [
+      media_kind: this.$route.query.media_kind,
+      show_details_modal: false,
+      tracks_list: new GroupedList()
+    }
+  },
+  computed: {
+    expression() {
+      return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
+    },
+    groupings() {
+      return [
         {
           id: 1,
           name: this.$t('page.genre.sort.name'),
@@ -101,15 +111,7 @@ export default {
             index: { field: 'rating', type: 'Digits' }
           }
         }
-      ],
+      ]
-      media_kind: this.$route.query.media_kind,
-      show_details_modal: false,
-      tracks_list: new GroupedList()
-    }
-  },
-  computed: {
-    expression() {
-      return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
     },
     heading() {
       if (this.genre.name) {