From 3f8ca8cda3da47e37063e65b55cf5886aaa139d9 Mon Sep 17 00:00:00 2001
From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch>
Date: Mon, 18 Mar 2024 21:34:43 +0100
Subject: [PATCH] [web] Rewrite of the GroupedList to accept multiple sort
 criteria

---
 web-src/src/components/ListAlbums.vue        |   4 +-
 web-src/src/components/ListArtists.vue       |   4 +-
 web-src/src/components/ListComposers.vue     |   4 +-
 web-src/src/components/ListGenres.vue        |   4 +-
 web-src/src/components/ListTracks.vue        |   4 +-
 web-src/src/i18n/de.json                     |  15 +-
 web-src/src/i18n/en.json                     |   7 +-
 web-src/src/i18n/fr.json                     |   7 +-
 web-src/src/i18n/zh.json                     |   7 +-
 web-src/src/lib/GroupedList.js               | 173 +++++++------------
 web-src/src/pages/PageAlbum.vue              |  12 +-
 web-src/src/pages/PageAlbums.vue             |  45 +++--
 web-src/src/pages/PageArtist.vue             |  16 +-
 web-src/src/pages/PageArtistTracks.vue       |  16 +-
 web-src/src/pages/PageArtists.vue            |  16 +-
 web-src/src/pages/PageAudiobooksAlbums.vue   |   7 +-
 web-src/src/pages/PageAudiobooksArtists.vue  |  18 +-
 web-src/src/pages/PageAudiobooksGenres.vue   |   8 +-
 web-src/src/pages/PageComposerAlbums.vue     |   6 +-
 web-src/src/pages/PageComposerTracks.vue     |  11 +-
 web-src/src/pages/PageComposers.vue          |   7 +-
 web-src/src/pages/PageGenreAlbums.vue        |   7 +-
 web-src/src/pages/PageGenreTracks.vue        |  11 +-
 web-src/src/pages/PageGenres.vue             |   8 +-
 web-src/src/pages/PageMusicRecentlyAdded.vue |  12 +-
 web-src/src/pages/PagePlaylistFolder.vue     |  18 +-
 26 files changed, 225 insertions(+), 222 deletions(-)

diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 0fac30f9..2ca0c98c 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -2,9 +2,9 @@
   <template v-for="album in albums" :key="album.itemId">
     <div v-if="!album.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
       <span
-        :id="'index_' + album.groupKey"
+        :id="'index_' + album.index"
         class="tag is-info is-light is-small has-text-weight-bold"
-        v-text="album.groupKey"
+        v-text="album.index"
       />
     </div>
     <div
diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue
index bc63168a..641d7143 100644
--- a/web-src/src/components/ListArtists.vue
+++ b/web-src/src/components/ListArtists.vue
@@ -3,9 +3,9 @@
     <div v-if="!artist.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
-          :id="'index_' + artist.groupKey"
+          :id="'index_' + artist.index"
           class="tag is-info is-light is-small has-text-weight-bold"
-          v-text="artist.groupKey"
+          v-text="artist.index"
         />
       </div>
     </div>
diff --git a/web-src/src/components/ListComposers.vue b/web-src/src/components/ListComposers.vue
index 34b80dc7..5d87ae7c 100644
--- a/web-src/src/components/ListComposers.vue
+++ b/web-src/src/components/ListComposers.vue
@@ -3,9 +3,9 @@
     <div v-if="!composer.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
-          :id="'index_' + composer.groupKey"
+          :id="'index_' + composer.index"
           class="tag is-info is-light is-small has-text-weight-bold"
-          v-text="composer.groupKey"
+          v-text="composer.index"
         />
       </div>
     </div>
diff --git a/web-src/src/components/ListGenres.vue b/web-src/src/components/ListGenres.vue
index 3ce3eec3..30f0a2ac 100644
--- a/web-src/src/components/ListGenres.vue
+++ b/web-src/src/components/ListGenres.vue
@@ -3,9 +3,9 @@
     <div v-if="!genre.isItem && !hide_group_title" class="mt-6 mb-5 py-2">
       <div class="media-content is-clipped">
         <span
-          :id="'index_' + genre.groupKey"
+          :id="'index_' + genre.index"
           class="tag is-info is-light is-small has-text-weight-bold"
-          v-text="genre.groupKey"
+          v-text="genre.index"
         />
       </div>
     </div>
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
index 12621170..bdcb4d45 100644
--- a/web-src/src/components/ListTracks.vue
+++ b/web-src/src/components/ListTracks.vue
@@ -2,9 +2,9 @@
   <template v-for="track in tracks" :key="track.itemId">
     <div v-if="!track.isItem" class="mt-6 mb-5 py-2">
       <span
-        :id="'index_' + track.groupKey"
+        :id="'index_' + track.index"
         class="tag is-info is-light is-small has-text-weight-bold"
-        v-text="track.groupKey"
+        v-text="track.index"
       />
     </div>
     <div
diff --git a/web-src/src/i18n/de.json b/web-src/src/i18n/de.json
index 0d8cadef..82d4326d 100644
--- a/web-src/src/i18n/de.json
+++ b/web-src/src/i18n/de.json
@@ -35,7 +35,7 @@
       "duration": "Dauer",
       "mark-as-played": "Markiere als gespielt",
       "play": "Spielen",
-      "release-date": "Veröffentlichungsdatum",
+      "release-date": "Erscheinungsdatum",
       "remove-podcast": "Entferne podcast",
       "tracks": "Track Nummer",
       "type": "Art",
@@ -117,7 +117,7 @@
         "add": "Hinzufügen",
         "album-artist": "Album-Künstler",
         "play": "Spielen",
-        "release-date": "Veröffentlichungsdatum",
+        "release-date": "Erscheinungsdatum",
         "type": "Art"
       },
       "artist": {
@@ -144,7 +144,7 @@
         "path": "Pfad",
         "play": "Spielen",
         "position": "Disc / Track",
-        "release-date": "Veröffentlichungsdatum"
+        "release-date": "Erscheinungsdatum"
       }
     },
     "track": {
@@ -167,7 +167,7 @@
       "quality": "Qualität",
       "rating-value": "{rating} / 10",
       "rating": "Bewertung",
-      "release-date": "Veröffentlichungsdatum",
+      "release-date": "Erscheinungsdatum",
       "samplerate": " {'|'} {rate} Hz",
       "spotify-album": "Album",
       "spotify-artist": "Künstler",
@@ -262,6 +262,8 @@
       "hide-spotify": "Verbirgt Spotify-Alben",
       "title": "Alben",
       "sort": {
+        "artist-name": "Künstler › Name",
+        "artist-date": "Künstler › Erscheinungsdatum",
         "title": "Sortieren",
         "name": "Name",
         "recently-added": "Kürzlich hinzugefügt",
@@ -588,10 +590,11 @@
     "appended-tracks": "{count} Track an die Abspielliste angehängt|{count} Tracks an die Abspielliste angehängt",
     "empty-queue": "Warteschlange ist leer"
   },
-  "group-by-list": {
+  "grouped-list": {
     "today": "Heute",
     "last-week": "Letzte Woche",
-    "last-month": "Letzer Monat"
+    "last-month": "Letzer Monat",
+    "undefined": "Unbestimmt"
   },
   "filter": {
     "mono": "Mono",
diff --git a/web-src/src/i18n/en.json b/web-src/src/i18n/en.json
index a5ebc533..b17f07f5 100644
--- a/web-src/src/i18n/en.json
+++ b/web-src/src/i18n/en.json
@@ -262,6 +262,8 @@
       "hide-spotify": "Hide albums from Spotify",
       "title": "Albums",
       "sort": {
+        "artist-name": "Artist › Name",
+        "artist-date": "Artist › Release date",
         "title": "Sort",
         "name": "Name",
         "recently-added": "Recently added",
@@ -588,10 +590,11 @@
     "appended-tracks": "{count} track appended to the queue|{count} tracks appended to the queue",
     "empty-queue": "Queue is empty"
   },
-  "group-by-list": {
+  "grouped-list": {
     "today": "Today",
     "last-week": "Last week",
-    "last-month": "Last month"
+    "last-month": "Last month",
+    "undefined": "Undefined"
   },
   "filter": {
     "mono": "mono",
diff --git a/web-src/src/i18n/fr.json b/web-src/src/i18n/fr.json
index 88124929..8ccd53da 100644
--- a/web-src/src/i18n/fr.json
+++ b/web-src/src/i18n/fr.json
@@ -262,6 +262,8 @@
       "hide-spotify": "Masquer les albums de Spotify",
       "title": "Albums",
       "sort": {
+        "artist-name": "Artiste › Nom",
+        "artist-date": "Artiste › Date de sortie",
         "title": "Trier",
         "name": "Nom",
         "recently-added": "Ajouts récents",
@@ -588,10 +590,11 @@
     "appended-tracks": "{count} piste ajoutée à la file d’attente|{count} pistes ajoutées à la file d’attente",
     "empty-queue": "La file d’attente est vide"
   },
-  "group-by-list": {
+  "grouped-list": {
     "today": "Aujourd’hui",
     "last-week": "La semaine dernière",
-    "last-month": "Le mois dernier"
+    "last-month": "Le mois dernier",
+    "undefined": "Indéfini"
   },
   "filter": {
     "mono": "mono",
diff --git a/web-src/src/i18n/zh.json b/web-src/src/i18n/zh.json
index 64ca2f6a..e440c40a 100644
--- a/web-src/src/i18n/zh.json
+++ b/web-src/src/i18n/zh.json
@@ -262,6 +262,8 @@
       "hide-spotify": "隐藏来自Spotify的专辑",
       "title": "专辑",
       "sort": {
+        "artist-name": "艺人 › 名称",
+        "artist-date": "艺人 › 发行日期",
         "title": "分类",
         "name": "名称",
         "recently-added": "最近添加",
@@ -588,10 +590,11 @@
     "appended-tracks": "已附加到队列的 {count} 只曲目|已附加到队列的 {count} 只曲目",
     "empty-queue": "清单是空的"
   },
-  "group-by-list": {
+  "grouped-list": {
     "today": "今日",
     "last-week": "上周",
-    "last-month": "上月"
+    "last-month": "上月",
+    "undefined": "未定义"
   },
   "filter": {
     "mono": "单声道",
diff --git a/web-src/src/lib/GroupedList.js b/web-src/src/lib/GroupedList.js
index 83500b74..ab1e9c80 100644
--- a/web-src/src/lib/GroupedList.js
+++ b/web-src/src/lib/GroupedList.js
@@ -1,137 +1,98 @@
 import i18n from '@/i18n'
 
 const { t, locale } = i18n.global
-const GROUP_KEY_NONE = 'GROUP_KEY_NONE'
+const NO_INDEX = 'NO_INDEX'
 
-export function noop() {
-  return {
-    compareFn: null,
-    groupKeyFn: (item) => GROUP_KEY_NONE
-  }
+const numberComparator = (a, b) => a - b
+const stringComparator = (a, b) => a.localeCompare(b, locale.value)
+const dateComparator = (a, b) =>
+  new Date(a) - new Date(b) || (!a ? -1 : !b ? 1 : 0)
+
+function createComparators(criteria) {
+  return criteria.map(({ field, type, order = 1 }) => {
+    switch (type) {
+      case String:
+        return (a, b) => stringComparator(a[field], b[field]) * order
+      case Number:
+        return (a, b) => numberComparator(a[field], b[field]) * order
+      case Date:
+        return (a, b) => dateComparator(a[field], b[field]) * order
+    }
+  })
 }
 
-export function byName(field, keepSortOrder = false, defaultValue = '_') {
-  return {
-    compareFn: keepSortOrder
-      ? null
-      : (a, b) => {
-          const fieldA = a[field] || defaultValue
-          const fieldB = b[field] || defaultValue
-          return fieldA.localeCompare(fieldB, locale.value)
-        },
-
-    groupKeyFn: (item) => {
-      const value = (item[field] || defaultValue).charAt(0)
-      if (value.match(/\p{Letter}/gu)) {
-        return value.toUpperCase()
-      } else if (value.match(/\p{Number}/gu)) {
-        return '#'
-      }
-      return '⌘'
-    }
+const characterIndex = (string = '') => {
+  const value = string.charAt(0)
+  if (value.match(/\p{Letter}/gu)) {
+    return value.toUpperCase()
+  } else if (value.match(/\p{Number}/gu)) {
+    return '#'
   }
+  return '⌘'
 }
 
-export function byRating(field, { direction = 'asc', defaultValue = 0 }) {
-  return {
-    compareFn: (a, b) => {
-      const fieldA = a[field] || defaultValue
-      const fieldB = b[field] || defaultValue
-      const result = fieldA - fieldB
-      return direction === 'asc' ? result : result * -1
-    },
-
-    groupKeyFn: (item) => {
-      const fieldValue = item[field] || defaultValue
-      return Math.floor(fieldValue / 10)
-    }
-  }
+export const numberIndex = (number) => {
+  return Math.floor(number / 10)
 }
 
-export function byMedium(field, direction = 'asc', defaultValue = 1) {
-  return {
-    compareFn: (a, b) => {
-      const fieldA = a[field] || defaultValue
-      const fieldB = b[field] || defaultValue
-      const result = fieldA - fieldB
-      return direction === 'asc' ? result : result * -1
-    },
+const times = [
+  { difference: NaN, text: () => t('grouped-list.undefined') },
+  { difference: 86400000, text: () => t('grouped-list.today') },
+  { difference: 604800000, text: () => t('grouped-list.last-week') },
+  { difference: 2592000000, text: () => t('grouped-list.last-month') },
+  { difference: Infinity, text: (date) => date.getFullYear() }
+]
 
-    groupKeyFn: (item) => {
-      return item[field] || defaultValue
-    }
-  }
+const timeIndex = (string) => {
+  const date = new Date(string)
+  const diff = new Date() - date
+  return times.find((item) => isNaN(diff) || diff < item.difference)?.text(date)
 }
 
-export function byYear(field, { direction = 'asc', defaultValue = '0000' }) {
-  return {
-    compareFn: (a, b) => {
-      const fieldA = a[field] || defaultValue
-      const fieldB = b[field] || defaultValue
-      const result = fieldA.localeCompare(fieldB, locale.value)
-      return direction === 'asc' ? result : result * -1
-    },
-
-    groupKeyFn: (item) => {
-      const fieldValue = item[field] || defaultValue
-      return fieldValue.substring(0, 4)
-    }
-  }
-}
-
-export function byDateSinceToday(field, defaultValue = '0000') {
-  return {
-    compareFn: (a, b) => {
-      const fieldA = a[field] || defaultValue
-      const fieldB = b[field] || defaultValue
-      return fieldB.localeCompare(fieldA, locale.value)
-    },
-
-    groupKeyFn: (item) => {
-      const fieldValue = item[field]
-      if (!fieldValue) {
-        return defaultValue
-      }
-      const diff = new Date().getTime() - new Date(fieldValue).getTime()
-      if (diff < 86400000) {
-        // 24h
-        return t('group-by-list.today')
-      } else if (diff < 604800000) {
-        // 7 days
-        return t('group-by-list.last-week')
-      } else if (diff < 2592000000) {
-        // 30 days
-        return t('group-by-list.last-month')
-      }
-      return fieldValue.substring(0, 4)
-    }
+function createIndexer({ field, type = undefined } = {}) {
+  switch (type) {
+    case String:
+      return (item) => characterIndex(item[field])
+    case Number:
+      return (item) => item[field]
+    case Date:
+      return (item) => timeIndex(item[field])
+    case 'Digits':
+      return (item) => numberIndex(item[field])
+    default:
+      return (item) => NO_INDEX
   }
 }
 
 export class GroupedList {
-  constructor({ items = [], total = 0, offset = 0, limit = -1 } = {}) {
+  constructor({ items = [], total = 0, offset = 0, limit = -1 } = {}, options) {
     this.items = items
     this.total = total
     this.offset = offset
     this.limit = limit
     this.count = items.length
     this.indices = []
-    this.group(noop())
+    this.group(options)
   }
 
-  group(options, filterFns = []) {
+  group({ criteria = [], filters = [], index } = {}) {
+    const indexer = createIndexer(index)
     const itemsFiltered = this.items.filter((item) =>
-      filterFns.every((fn) => fn(item))
+      filters.every((filter) => filter(item))
     )
     this.count = itemsFiltered.length
     // Sort item list
-    const itemsSorted = [...itemsFiltered].sort(
-      options.compareFn ?? (() => true)
+    const comparators = createComparators(criteria)
+    const itemsSorted = itemsFiltered.sort((a, b) =>
+      comparators.reduce(
+        (comparison, comparator) => comparison || comparator(a, b),
+        0
+      )
     )
     // Group item list
     this.itemsGrouped = itemsSorted.reduce((map, item) => {
-      const groupKey = options.groupKeyFn(item)
-      map.set(groupKey, [...(map.get(groupKey) || []), item])
+      const index = indexer(item)
+      map.set(index, [...(map.get(index) || []), item])
       return map
     }, new Map())
     // Create index list
@@ -139,18 +100,18 @@ export class GroupedList {
   }
 
   *generate() {
-    for (const [key, items] of this.itemsGrouped.entries()) {
-      if (key !== GROUP_KEY_NONE) {
+    for (const [index, items] of this.itemsGrouped.entries()) {
+      if (index !== NO_INDEX) {
         yield {
-          groupKey: key,
-          itemId: key,
+          index: index,
+          itemId: index,
           isItem: false,
           item: {}
         }
       }
       for (const item of items) {
         yield {
-          groupKey: key,
+          index: index,
           itemId: item.id,
           isItem: true,
           item: item
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 5b504aa9..a9ebe73a 100644
--- 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 } })
     }
   }
 }
diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue
index 4af4627f..02f9dda2 100644
--- 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
     },
diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue
index ee529256..4b372fc7 100644
--- 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: {
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index e736f99e..fd4c4f58 100644
--- 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() {
diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue
index 0fa02c80..abba1efc 100644
--- 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
     },
diff --git a/web-src/src/pages/PageAudiobooksAlbums.vue b/web-src/src/pages/PageAudiobooksAlbums.vue
index 9ea53a90..ce8a49d2 100644
--- 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 }
+    })
   }
 }
 
diff --git a/web-src/src/pages/PageAudiobooksArtists.vue b/web-src/src/pages/PageAudiobooksArtists.vue
index 7dd0f5dc..3babfd32 100644
--- 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()
     }
   }
 }
diff --git a/web-src/src/pages/PageAudiobooksGenres.vue b/web-src/src/pages/PageAudiobooksGenres.vue
index 3fa35255..4dc1a51e 100644
--- 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 }
+    })
   }
 }
 
diff --git a/web-src/src/pages/PageComposerAlbums.vue b/web-src/src/pages/PageComposerAlbums.vue
index 263f5a9e..8d1891c4 100644
--- 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
     }
diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue
index 95b0a3f4..52334594 100644
--- 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,
diff --git a/web-src/src/pages/PageComposers.vue b/web-src/src/pages/PageComposers.vue
index 0f451671..18cc4afd 100644
--- 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 }
+    })
   }
 }
 
diff --git a/web-src/src/pages/PageGenreAlbums.vue b/web-src/src/pages/PageGenreAlbums.vue
index d7feb0e4..9b05ef26 100644
--- 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 }
+    })
   }
 }
 
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index 66d516dd..140a511f 100644
--- 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,
diff --git a/web-src/src/pages/PageGenres.vue b/web-src/src/pages/PageGenres.vue
index ef04634d..5527e586 100644
--- 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 }
+    })
   }
 }
 
diff --git a/web-src/src/pages/PageMusicRecentlyAdded.vue b/web-src/src/pages/PageMusicRecentlyAdded.vue
index 0b084101..43407297 100644
--- 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 }
+    })
   }
 }
 
diff --git a/web-src/src/pages/PagePlaylistFolder.vue b/web-src/src/pages/PagePlaylistFolder.vue
index 4b43ebf0..ce550e6b 100644
--- 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() {