From 966d5634186626d9d06b13ed17e103b3193810cb Mon Sep 17 00:00:00 2001 From: Alain Nussbaumer Date: Sat, 8 Mar 2025 12:13:12 +0100 Subject: [PATCH] [web] Move grouping options to computed properties --- web-src/src/pages/PageAlbums.vue | 30 ++++++++++---------- web-src/src/pages/PageArtist.vue | 26 ++++++++++-------- web-src/src/pages/PageArtistTracks.vue | 28 ++++++++++--------- web-src/src/pages/PageArtists.vue | 35 ++++++++++++------------ web-src/src/pages/PageComposerTracks.vue | 33 +++++++++++----------- web-src/src/pages/PageGenreTracks.vue | 22 ++++++++------- 6 files changed, 92 insertions(+), 82 deletions(-) diff --git a/web-src/src/pages/PageAlbums.vue b/web-src/src/pages/PageAlbums.vue index c64b3ff4..d221e189 100644 --- a/web-src/src/pages/PageAlbums.vue +++ b/web-src/src/pages/PageAlbums.vue @@ -95,8 +95,22 @@ export default { }, data() { return { - albums_list: new GroupedList(), - groupings: [ + albums_list: new GroupedList() + } + }, + 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 { diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue index 33c3cddf..bdd903af 100644 --- a/web-src/src/pages/PageArtist.vue +++ b/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, diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue index 7afcb749..0a9b3d8c 100644 --- a/web-src/src/pages/PageArtistTracks.vue +++ b/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 { diff --git a/web-src/src/pages/PageArtists.vue b/web-src/src/pages/PageArtists.vue index 803898b7..62d86d5b 100644 --- a/web-src/src/pages/PageArtists.vue +++ b/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(), - 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 } - } - } - ] + artists_list: new GroupedList() } }, 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'), diff --git a/web-src/src/pages/PageComposerTracks.vue b/web-src/src/pages/PageComposerTracks.vue index c46a9169..8bb31151 100644 --- a/web-src/src/pages/PageComposerTracks.vue +++ b/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', diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue index afad9f49..8bc861f3 100644 --- a/web-src/src/pages/PageGenreTracks.vue +++ b/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) {