MyFavMirrors/owntone-server
1
0
Fork 0
mirror of https://github.com/owntone/owntone-server.git synced 2025-11-09 05:34:58 -05:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
Albums, artists, composers, genres, and any other items listed on page where they appear sorted by names are now all displayed properly.
This commit is contained in:
Alain Nussbaumer
2023-06-04 13:54:01 +02:00
parent d6dd790569
commit a1046f3913
10 changed files with 49 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web-src/src/components/IndexButtonList.vue
View File

@@ -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' })
}
}
}

40
web-src/src/lib/GroupByList.js
View File

@@ -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 '⌘'
}
}
}
}

12
web-src/src/pages/PageAlbums.vue
View File

@@ -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'
})
}
]

10
web-src/src/pages/PageArtist.vue
View File

@@ -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
}
},

10
web-src/src/pages/PageArtists.vue
View File

@@ -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'
})
}
]

4
web-src/src/pages/PageAudiobooksAlbums.vue
View File

@@ -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))
}
}

4
web-src/src/pages/PageAudiobooksArtists.vue
View File

@@ -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
}
},

3
web-src/src/pages/PageBrowseRecentlyAdded.vue
View File

@@ -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'
})
)
}

4
web-src/src/pages/PageGenre.vue
View File

@@ -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))
}
}