[web] Rewrite of the GroupedList to accept multiple sort criteria

2025-11-11 06:20:17 -05:00 · 2024-03-18 21:34:43 +01:00
parent 824a37f0a6
commit 3f8ca8cda3
26 changed files with 225 additions and 222 deletions
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -45,7 +45,7 @@
 </template>

 <script>
-import { GroupedList, byMedium, noop } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHero from '@/templates/ContentWithHero.vue'
 import CoverArtwork from '@/components/CoverArtwork.vue'
 import ListTracks from '@/components/ListTracks.vue'
@@ -62,10 +62,12 @@ const dataObject = {

  set(vm, response) {
    vm.album = response[0].data
-    vm.tracks = new GroupedList(response[1].data)
-    vm.tracks.group(byMedium('disc_number'))
-    if (vm.tracks.indices <= 1) {
-      vm.tracks.group(noop())
+    vm.tracks = new GroupedList(response[1].data, {
+      criteria: [{ field: 'disc_number', type: Number }],
+      index: { field: 'disc_number', type: Number }
+    })
+    if (vm.tracks.indices.length < 2) {
+      vm.tracks.group({ index: { type: undefined } })
    }
  }
 }
--- a/web-src/src/pages/PageAlbums.vue
+++ b/web-src/src/pages/PageAlbums.vue
@@ -64,7 +64,7 @@

 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList, byName, byYear } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -113,21 +113,45 @@ export default {
        {
          id: 1,
          name: this.$t('page.albums.sort.name'),
-          options: byName('name_sort', true)
+          options: { index: { field: 'name_sort', type: String } }
        },
        {
          id: 2,
          name: this.$t('page.albums.sort.recently-added'),
-          options: byYear('time_added', {
-            direction: 'desc'
-          })
+          options: {
+            criteria: [{ field: 'time_added', type: Date, order: -1 }],
+            index: { field: 'time_added', type: Date }
+          }
        },
        {
          id: 3,
          name: this.$t('page.albums.sort.recently-released'),
-          options: byYear('date_released', {
-            direction: 'desc'
-          })
+          options: {
+            criteria: [{ field: 'date_released', type: Date, order: -1 }],
+            index: { field: 'date_released', type: Date }
+          }
+        },
+        {
+          id: 4,
+          name: this.$t('page.albums.sort.artist-name'),
+          options: {
+            criteria: [
+              { field: 'artist', type: String },
+              { field: 'name_sort', type: String }
+            ],
+            index: { field: 'artist', type: String }
+          }
+        },
+        {
+          id: 5,
+          name: this.$t('page.albums.sort.artist-date'),
+          options: {
+            criteria: [
+              { field: 'artist', type: String },
+              { field: 'date_released', type: Date }
+            ],
+            index: { field: 'artist', type: String }
+          }
        }
      ]
    }
@@ -138,10 +162,11 @@ export default {
      const grouping = this.grouping_options.find(
        (o) => o.id === this.selected_grouping_option_id
      )
-      this.albums_list.group(grouping.options, [
+      grouping.options.filters = [
        (album) => !this.hide_singles || album.track_count > 2,
        (album) => !this.hide_spotify || album.data_kind !== 'spotify'
-      ])
+      ]
+      this.albums_list.group(grouping.options)

      return this.albums_list
    },
--- a/web-src/src/pages/PageArtist.vue
+++ b/web-src/src/pages/PageArtist.vue
@@ -72,7 +72,7 @@

 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList, byName, byYear } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
@@ -123,14 +123,15 @@ export default {
        {
          id: 1,
          name: this.$t('page.artist.sort.name'),
-          options: byName('name_sort', true)
+          options: { index: { field: 'name_sort', type: String } }
        },
        {
          id: 2,
          name: this.$t('page.artist.sort.release-date'),
-          options: byYear('date_released', {
-            direction: 'asc'
-          })
+          options: {
+            criteria: [{ field: 'date_released', type: Date }],
+            index: { field: 'date_released', type: Date }
+          }
        }
      ],
      show_details_modal: false
@@ -142,9 +143,10 @@ export default {
      const grouping = this.grouping_options.find(
        (o) => o.id === this.selected_grouping_option_id
      )
-      this.albums_list.group(grouping.options, [
+      grouping.options.filters = [
        (album) => !this.hide_spotify || album.data_kind !== 'spotify'
-      ])
+      ]
+      this.albums_list.group(grouping.options)
      return this.albums_list
    },
    hide_spotify: {
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -73,7 +73,7 @@

 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList, byName, byRating } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -125,14 +125,15 @@ export default {
        {
          id: 1,
          name: this.$t('page.artist.sort.name'),
-          options: byName('title_sort')
+          options: { index: { field: 'title_sort', type: String } }
        },
        {
          id: 2,
          name: this.$t('page.artist.sort.rating'),
-          options: byRating('rating', {
-            direction: 'desc'
-          })
+          options: {
+            criteria: [{ field: 'rating', type: Number, order: -1 }],
+            index: { field: 'rating', type: 'Digits' }
+          }
        }
      ],
      show_details_modal: false,
@@ -171,9 +172,10 @@ export default {
      const grouping = this.grouping_options.find(
        (o) => o.id === this.selected_grouping_option_id
      )
-      this.tracks_list.group(grouping.options, [
+      grouping.options.filters = [
        (track) => !this.hide_spotify || track.data_kind !== 'spotify'
-      ])
+      ]
+      this.tracks_list.group(grouping.options)
      return this.tracks_list
    },
    track_uris() {
--- a/web-src/src/pages/PageArtists.vue
+++ b/web-src/src/pages/PageArtists.vue
@@ -64,7 +64,7 @@

 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList, byName, byYear } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -113,14 +113,15 @@ export default {
        {
          id: 1,
          name: this.$t('page.artists.sort.name'),
-          options: byName('name_sort', true)
+          options: { index: { field: 'name_sort', type: String } }
        },
        {
          id: 2,
          name: this.$t('page.artists.sort.recently-added'),
-          options: byYear('time_added', {
-            direction: 'desc'
-          })
+          options: {
+            criteria: [{ field: 'time_added', type: Date, order: -1 }],
+            index: { field: 'time_added', type: Date }
+          }
        }
      ]
    }
@@ -136,11 +137,12 @@ export default {
      const grouping = this.grouping_options.find(
        (o) => o.id === this.selected_grouping_option_id
      )
-      this.artists_list.group(grouping.options, [
+      grouping.options.filters = [
        (artist) =>
          !this.hide_singles || artist.track_count > artist.album_count * 2,
        (artist) => !this.hide_spotify || artist.data_kind !== 'spotify'
-      ])
+      ]
+      this.artists_list.group(grouping.options)

      return this.artists_list
    },
--- a/web-src/src/pages/PageAudiobooksAlbums.vue
+++ b/web-src/src/pages/PageAudiobooksAlbums.vue
@@ -20,7 +20,7 @@
 </template>

 <script>
-import { GroupedList, byName } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
@@ -33,8 +33,9 @@ const dataObject = {
  },

  set(vm, response) {
-    vm.albums = new GroupedList(response.data)
-    vm.albums.group(byName('name_sort', true))
+    vm.albums = new GroupedList(response.data, {
+      index: { field: 'name_sort', type: String }
+    })
  }
 }

--- a/web-src/src/pages/PageAudiobooksArtists.vue
+++ b/web-src/src/pages/PageAudiobooksArtists.vue
@@ -21,7 +21,7 @@
 </template>

 <script>
-import { GroupedList, byName } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
@@ -34,7 +34,9 @@ const dataObject = {
  },

  set(vm, response) {
-    vm.artists_list = new GroupedList(response.data)
+    vm.artists = new GroupedList(response.data, {
+      index: { field: 'name_sort', type: String }
+    })
  }
 }

@@ -63,17 +65,7 @@ export default {

  data() {
    return {
-      artists_list: new GroupedList()
-    }
-  },
-
-  computed: {
-    artists() {
-      if (!this.artists_list) {
-        return []
-      }
-      this.artists_list.group(byName('name_sort', true))
-      return this.artists_list
+      artists: new GroupedList()
    }
  }
 }
--- a/web-src/src/pages/PageAudiobooksGenres.vue
+++ b/web-src/src/pages/PageAudiobooksGenres.vue
@@ -20,7 +20,7 @@
 </template>

 <script>
-import { GroupedList, byName } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
@@ -33,9 +33,9 @@ const dataObject = {
  },

  set(vm, response) {
-    vm.genres = response.data
-    vm.genres = new GroupedList(response.data)
-    vm.genres.group(byName('name_sort'))
+    vm.genres = new GroupedList(response.data, {
+      index: { field: 'name_sort', type: String }
+    })
  }
 }

--- a/web-src/src/pages/PageComposerAlbums.vue
+++ b/web-src/src/pages/PageComposerAlbums.vue
@@ -34,7 +34,7 @@
            "
          />
        </p>
-        <list-albums :albums="albums_list" :hide_group_title="true" />
+        <list-albums :albums="albums" :hide_group_title="true" />
        <modal-dialog-composer
          :show="show_details_modal"
          :composer="composer"
@@ -62,7 +62,7 @@ const dataObject = {

  set(vm, response) {
    vm.composer = response[0].data
-    vm.albums_list = new GroupedList(response[1].data.albums)
+    vm.albums = new GroupedList(response[1].data.albums)
  }
 }

@@ -89,7 +89,7 @@ export default {

  data() {
    return {
-      albums_list: new GroupedList(),
+      albums: new GroupedList(),
      composer: {},
      show_details_modal: false
    }
--- a/web-src/src/pages/PageComposerTracks.vue
+++ b/web-src/src/pages/PageComposerTracks.vue
@@ -61,7 +61,7 @@

 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList, byName, byRating } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -113,14 +113,15 @@ export default {
        {
          id: 1,
          name: this.$t('page.composer.sort.name'),
-          options: byName('title_sort')
+          options: { index: { field: 'title_sort', type: String } }
        },
        {
          id: 2,
          name: this.$t('page.composer.sort.rating'),
-          options: byRating('rating', {
-            direction: 'desc'
-          })
+          options: {
+            criteria: [{ field: 'rating', type: Number, order: -1 }],
+            index: { field: 'rating', type: 'Digits' }
+          }
        }
      ],
      show_details_modal: false,
--- a/web-src/src/pages/PageComposers.vue
+++ b/web-src/src/pages/PageComposers.vue
@@ -20,7 +20,7 @@
 </template>

 <script>
-import { GroupedList, byName } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListComposers from '@/components/ListComposers.vue'
@@ -33,8 +33,9 @@ const dataObject = {
  },

  set(vm, response) {
-    vm.composers = new GroupedList(response.data)
-    vm.composers.group(byName('name_sort'))
+    vm.composers = new GroupedList(response.data, {
+      index: { field: 'name_sort', type: String }
+    })
  }
 }

--- a/web-src/src/pages/PageGenreAlbums.vue
+++ b/web-src/src/pages/PageGenreAlbums.vue
@@ -46,7 +46,7 @@
 </template>

 <script>
-import { GroupedList, byName } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
@@ -63,8 +63,9 @@ const dataObject = {

  set(vm, response) {
    vm.genre = response[0].data
-    vm.albums = new GroupedList(response[1].data.albums)
-    vm.albums.group(byName('name_sort', true))
+    vm.albums = new GroupedList(response[1].data.albums, {
+      index: { field: 'name_sort', type: String }
+    })
  }
 }

--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -56,7 +56,7 @@

 <script>
 import * as types from '@/store/mutation_types'
-import { GroupedList, byName, byRating } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
@@ -108,14 +108,15 @@ export default {
        {
          id: 1,
          name: this.$t('page.genre.sort.name'),
-          options: byName('title_sort')
+          options: { index: { field: 'title_sort', type: String } }
        },
        {
          id: 2,
          name: this.$t('page.genre.sort.rating'),
-          options: byRating('rating', {
-            direction: 'desc'
-          })
+          options: {
+            criteria: [{ field: 'rating', type: Number, order: -1 }],
+            index: { field: 'rating', type: 'Digits' }
+          }
        }
      ],
      media_kind: this.$route.query.media_kind,
--- a/web-src/src/pages/PageGenres.vue
+++ b/web-src/src/pages/PageGenres.vue
@@ -20,7 +20,7 @@
 </template>

 <script>
-import { GroupedList, byName } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
@@ -33,9 +33,9 @@ const dataObject = {
  },

  set(vm, response) {
-    vm.genres = response.data
-    vm.genres = new GroupedList(response.data)
-    vm.genres.group(byName('name_sort'))
+    vm.genres = new GroupedList(response.data, {
+      index: { field: 'name_sort', type: String }
+    })
  }
 }

--- a/web-src/src/pages/PageMusicRecentlyAdded.vue
+++ b/web-src/src/pages/PageMusicRecentlyAdded.vue
@@ -13,7 +13,7 @@
 </template>

 <script>
-import { GroupedList, byDateSinceToday } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -32,12 +32,10 @@ const dataObject = {
  },

  set(vm, response) {
-    vm.recently_added = new GroupedList(response.data.albums)
-    vm.recently_added.group(
-      byDateSinceToday('time_added', {
-        direction: 'desc'
-      })
-    )
+    vm.recently_added = new GroupedList(response.data.albums, {
+      criteria: [{ field: 'time_added', type: Date, order: -1 }],
+      index: { field: 'time_added', type: Date }
+    })
  }
 }

--- a/web-src/src/pages/PagePlaylistFolder.vue
+++ b/web-src/src/pages/PagePlaylistFolder.vue
@@ -21,7 +21,7 @@
 </template>

 <script>
-import { GroupedList, noop } from '@/lib/GroupedList'
+import { GroupedList } from '@/lib/GroupedList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListPlaylists from '@/components/ListPlaylists.vue'
 import webapi from '@/webapi'
@@ -66,13 +66,15 @@ export default {

  computed: {
    playlists() {
-      this.playlists_list.group(noop(), [
-        (playlist) =>
-          playlist.folder ||
-          this.radio_playlists ||
-          playlist.stream_count === 0 ||
-          playlist.item_count > playlist.stream_count
-      ])
+      this.playlists_list.group({
+        filters: [
+          (playlist) =>
+            playlist.folder ||
+            this.radio_playlists ||
+            playlist.stream_count === 0 ||
+            playlist.item_count > playlist.stream_count
+        ]
+      })
      return this.playlists_list
    },
    radio_playlists() {