[web] Fix for items not displaying because of their name

Albums, artists, composers, genres, and any other items listed on page where they appear sorted by names are now all displayed properly.

web-src/src/components/IndexButtonList.vue

@@ -2,7 +2,7 @@
   <section>
     <nav class="buttons is-centered fd-is-square" style="margin-bottom: 16px">
       <a
-        v-for="char in filtered_index"
+        v-for="char in index"
         :key="char"
         class="button is-small"
         @click="nav(char)"
@@ -16,22 +16,9 @@
 export default {
   name: 'IndexButtonList',
   props: ['index'],
-  computed: {
-    filtered_index() {
-      if (!this.index) {
-        return []
-      }
-      const specialChars = '!"#$%&\'()*+,-./:;<=>?@[\\]^`{|}~'
-      return this.index.filter((c) => !specialChars.includes(c))
-    }
-  },
   methods: {
     nav: function (id) {
       this.$router.push({ hash: '#index_' + id })
-    },
-
-    scroll_to_top: function () {
-      window.scrollTo({ top: 0, behavior: 'smooth' })
     }
   }
 }

web-src/src/lib/GroupByList.js

@@ -10,33 +10,25 @@ export function noop() {
   }
 }
 
-/*
- * Keep default sorting of item list and build index and group by given field
- */
-export function bySortName(field, defaultValue = '_') {
+export function byName(field, keepSortOrder = false, defaultValue = '_') {
   return {
-    // Keep the sort order of the original item list
-    // Assumes that the list is already ordered by name
-    compareFn: null,
+    compareFn: keepSortOrder
+      ? null
+      : (a, b) => {
+          const fieldA = a[field] || defaultValue
+          const fieldB = b[field] || defaultValue
+          return fieldA.localeCompare(fieldB, locale.value)
+        },
 
     groupKeyFn: (item) => {
-      const fieldValue = item[field] || defaultValue
-      return fieldValue.charAt(0).toUpperCase()
-    }
-  }
-}
-
-export function byName(field, defaultValue = '_') {
-  return {
-    compareFn: (a, b) => {
-      const fieldA = a[field] || defaultValue
-      const fieldB = b[field] || defaultValue
-      return fieldA.localeCompare(fieldB, locale.value)
-    },
-
-    groupKeyFn: (item) => {
-      const fieldValue = item[field] || defaultValue
-      return fieldValue.charAt(0).toUpperCase()
+      const value = (item[field] || defaultValue).charAt(0)
+      if (value.match(/\p{Letter}/gu)) {
+        return value.toUpperCase()
+      } else if (value.match(/\p{Number}/gu)) {
+        return '#'
+      } else {
+        return '⌘'
+      }
     }
   }
 }

web-src/src/pages/PageAlbums.vue

@@ -80,7 +80,7 @@ import ListAlbums from '@/components/ListAlbums.vue'
 import DropdownMenu from '@/components/DropdownMenu.vue'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
-import { bySortName, byYear, GroupByList } from '@/lib/GroupByList'
+import { byName, byYear, GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
@@ -123,28 +123,24 @@ export default {
   data() {
     return {
       albums_list: new GroupByList(),
-
-      // List of group by/sort options for itemsGroupByList
       groupby_options: [
         {
           id: 1,
           name: this.$t('page.albums.sort-by.name'),
-          options: bySortName('name_sort')
+          options: byName('name_sort', true)
         },
         {
           id: 2,
           name: this.$t('page.albums.sort-by.recently-added'),
           options: byYear('time_added', {
-            direction: 'desc',
-            defaultValue: '0000'
+            direction: 'desc'
           })
         },
         {
           id: 3,
           name: this.$t('page.albums.sort-by.recently-released'),
           options: byYear('date_released', {
-            direction: 'desc',
-            defaultValue: '0000'
+            direction: 'desc'
           })
         }
       ]

web-src/src/pages/PageArtist.vue

@@ -61,7 +61,7 @@ import ModalDialogArtist from '@/components/ModalDialogArtist.vue'
 import DropdownMenu from '@/components/DropdownMenu.vue'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
-import { bySortName, byYear, GroupByList } from '@/lib/GroupByList'
+import { byName, byYear, GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
@@ -103,24 +103,20 @@ export default {
     return {
       artist: {},
       albums_list: new GroupByList(),
-
-      // List of group by/sort options for itemsGroupByList
       groupby_options: [
         {
           id: 1,
           name: this.$t('page.artist.sort-by.name'),
-          options: bySortName('name_sort')
+          options: byName('name_sort', true)
         },
         {
           id: 2,
           name: this.$t('page.artist.sort-by.release-date'),
           options: byYear('date_released', {
-            direction: 'asc',
-            defaultValue: '0000'
+            direction: 'asc'
           })
         }
       ],
-
       show_artist_details_modal: false
     }
   },

web-src/src/pages/PageArtists.vue

@@ -80,7 +80,7 @@ import ListArtists from '@/components/ListArtists.vue'
 import DropdownMenu from '@/components/DropdownMenu.vue'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
-import { bySortName, byYear, GroupByList } from '@/lib/GroupByList'
+import { byName, byYear, GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
@@ -122,22 +122,18 @@ export default {
 
   data() {
     return {
-      // Original data from API call
       artists_list: new GroupByList(),
-
-      // List of group by/sort options for itemsGroupByList
       groupby_options: [
         {
           id: 1,
           name: this.$t('page.artists.sort-by.name'),
-          options: bySortName('name_sort')
+          options: byName('name_sort', true)
         },
         {
           id: 2,
           name: this.$t('page.artists.sort-by.recently-added'),
           options: byYear('time_added', {
-            direction: 'desc',
-            defaultValue: '0000'
+            direction: 'desc'
           })
         }
       ]

web-src/src/pages/PageAudiobooksAlbums.vue

@@ -25,7 +25,7 @@ import IndexButtonList from '@/components/IndexButtonList.vue'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import webapi from '@/webapi'
-import { bySortName, GroupByList } from '@/lib/GroupByList'
+import { byName, GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
@@ -34,7 +34,7 @@ const dataObject = {
 
   set: function (vm, response) {
     vm.albums = new GroupByList(response.data)
-    vm.albums.group(bySortName('name_sort'))
+    vm.albums.group(byName('name_sort', true))
   }
 }
 

web-src/src/pages/PageAudiobooksArtists.vue

@@ -26,7 +26,7 @@ import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListArtists from '@/components/ListArtists.vue'
 import webapi from '@/webapi'
-import { bySortName, GroupByList } from '@/lib/GroupByList'
+import { byName, GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
@@ -76,7 +76,7 @@ export default {
       if (!this.artists_list) {
         return []
       }
-      this.artists_list.group(bySortName('name_sort'))
+      this.artists_list.group(byName('name_sort', true))
       return this.artists_list
     }
   },

web-src/src/pages/PageBrowseRecentlyAdded.vue

@@ -36,8 +36,7 @@ const dataObject = {
     vm.recently_added = new GroupByList(response.data.albums)
     vm.recently_added.group(
       byDateSinceToday('time_added', {
-        direction: 'desc',
-        defaultValue: '0000'
+        direction: 'desc'
       })
     )
   }

web-src/src/pages/PageGenre.vue

@@ -52,7 +52,7 @@ import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
 import webapi from '@/webapi'
-import { bySortName, GroupByList } from '@/lib/GroupByList'
+import { byName, GroupByList } from '@/lib/GroupByList'
 
 const dataObject = {
   load: function (to) {
@@ -65,7 +65,7 @@ const dataObject = {
   set: function (vm, response) {
     vm.genre = response[0].data
     vm.albums_list = new GroupByList(response[1].data.albums)
-    vm.albums_list.group(bySortName('name_sort'))
+    vm.albums_list.group(byName('name_sort', true))
   }
 }