From 60374c2f473ecd199083f5f8fb0676bf2b62a258 Mon Sep 17 00:00:00 2001 From: Alain Nussbaumer <alain.nussbaumer@alleluia.ch> Date: Mon, 10 Jul 2023 20:33:07 +0200 Subject: [PATCH] [web] Use named route for music artists Switching to named routes in order to reduce future maintenance. --- web-src/src/components/ListArtists.vue | 2 +- web-src/src/components/ModalDialogAlbum.vue | 5 +- web-src/src/components/ModalDialogArtist.vue | 5 +- .../src/components/ModalDialogQueueItem.vue | 5 +- web-src/src/components/ModalDialogTrack.vue | 3 +- web-src/src/components/NavbarTop.vue | 2 +- web-src/src/pages/PageAlbum.vue | 9 ++- web-src/src/pages/PageArtist.vue | 11 ++-- web-src/src/pages/PageArtistTracks.vue | 9 ++- web-src/src/router/index.js | 65 ++++++++++--------- 10 files changed, 67 insertions(+), 49 deletions(-) diff --git a/web-src/src/components/ListArtists.vue b/web-src/src/components/ListArtists.vue index ff015fc9..94e39479 100644 --- a/web-src/src/components/ListArtists.vue +++ b/web-src/src/components/ListArtists.vue @@ -65,7 +65,7 @@ export default { params: { id: artist.id } }) } else { - this.$router.push({ path: '/music/artists/' + artist.id }) + this.$router.push({ name: 'music-artist', params: { id: artist.id } }) } }, diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue index 996d7539..0546743a 100644 --- a/web-src/src/components/ModalDialogAlbum.vue +++ b/web-src/src/components/ModalDialogAlbum.vue @@ -177,7 +177,10 @@ export default { params: { id: this.album.artist_id } }) } else { - this.$router.push({ path: '/music/artists/' + this.album.artist_id }) + this.$router.push({ + name: 'music-artist', + params: { id: this.album.artist_id } + }) } }, diff --git a/web-src/src/components/ModalDialogArtist.vue b/web-src/src/components/ModalDialogArtist.vue index c479e976..78db81ff 100644 --- a/web-src/src/components/ModalDialogArtist.vue +++ b/web-src/src/components/ModalDialogArtist.vue @@ -90,7 +90,10 @@ export default { open_artist() { this.$emit('close') - this.$router.push({ path: '/music/artists/' + this.artist.id }) + this.$router.push({ + name: 'music-artist', + params: { id: this.artist.id } + }) } } } diff --git a/web-src/src/components/ModalDialogQueueItem.vue b/web-src/src/components/ModalDialogQueueItem.vue index 60416288..32f3b938 100644 --- a/web-src/src/components/ModalDialogQueueItem.vue +++ b/web-src/src/components/ModalDialogQueueItem.vue @@ -224,7 +224,10 @@ export default { }, open_album_artist() { - this.$router.push({ path: '/music/artists/' + this.item.album_artist_id }) + this.$router.push({ + name: 'music-artist', + params: { id: this.item.album_artist_id } + }) }, open_genre() { diff --git a/web-src/src/components/ModalDialogTrack.vue b/web-src/src/components/ModalDialogTrack.vue index 8ca2ef3f..e27842db 100644 --- a/web-src/src/components/ModalDialogTrack.vue +++ b/web-src/src/components/ModalDialogTrack.vue @@ -260,7 +260,8 @@ export default { open_artist() { this.$emit('close') this.$router.push({ - path: '/music/artists/' + this.track.album_artist_id + name: 'music-artist', + params: { id: this.track.album_artist_id } }) }, diff --git a/web-src/src/components/NavbarTop.vue b/web-src/src/components/NavbarTop.vue index 9f80b4c9..f12a8716 100644 --- a/web-src/src/components/NavbarTop.vue +++ b/web-src/src/components/NavbarTop.vue @@ -65,7 +65,7 @@ <mdicon class="icon" name="music" size="16" /> <b v-text="$t('navigation.music')" /> </navbar-item-link> - <navbar-item-link :to="{ path: '/music/artists' }"> + <navbar-item-link :to="{ name: 'music-artists' }"> <span class="pl-5" v-text="$t('navigation.artists')" /> </navbar-item-link> <navbar-item-link :to="{ path: '/music/albums' }"> diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue index 7ae0204f..25e2a60b 100644 --- a/web-src/src/pages/PageAlbum.vue +++ b/web-src/src/pages/PageAlbum.vue @@ -46,11 +46,11 @@ <script> import ContentWithHero from '@/templates/ContentWithHero.vue' +import CoverArtwork from '@/components/CoverArtwork.vue' +import { GroupByList } from '@/lib/GroupByList' import ListTracks from '@/components/ListTracks.vue' import ModalDialogAlbum from '@/components/ModalDialogAlbum.vue' -import CoverArtwork from '@/components/CoverArtwork.vue' import webapi from '@/webapi' -import { GroupByList } from '@/lib/GroupByList' const dataObject = { load(to) { @@ -94,7 +94,10 @@ export default { methods: { open_artist() { this.show_details_modal = false - this.$router.push({ path: '/music/artists/' + this.album.artist_id }) + this.$router.push({ + name: 'music-artist', + params: { id: this.album.artist_id } + }) }, play() { diff --git a/web-src/src/pages/PageArtist.vue b/web-src/src/pages/PageArtist.vue index 3bb74613..f6e69e36 100644 --- a/web-src/src/pages/PageArtist.vue +++ b/web-src/src/pages/PageArtist.vue @@ -57,19 +57,19 @@ </template> <script> +import * as types from '@/store/mutation_types' import ContentWithHeading from '@/templates/ContentWithHeading.vue' import ControlDropdown from '@/components/ControlDropdown.vue' +import { GroupByList, byName, byYear } from '@/lib/GroupByList' import ListAlbums from '@/components/ListAlbums.vue' import ModalDialogArtist from '@/components/ModalDialogArtist.vue' import webapi from '@/webapi' -import * as types from '@/store/mutation_types' -import { GroupByList, byName, byYear } from '@/lib/GroupByList' const dataObject = { load(to) { return Promise.all([ - webapi.library_artist(to.params.artist_id), - webapi.library_artist_albums(to.params.artist_id) + webapi.library_artist(to.params.id), + webapi.library_artist_albums(to.params.id) ]) }, @@ -146,7 +146,8 @@ export default { methods: { open_tracks() { this.$router.push({ - path: '/music/artists/' + this.artist.id + '/tracks' + name: 'music-artist-tracks', + params: { id: this.artist.id } }) }, diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue index d95f8a28..581bb8ed 100644 --- a/web-src/src/pages/PageArtistTracks.vue +++ b/web-src/src/pages/PageArtistTracks.vue @@ -70,8 +70,8 @@ import webapi from '@/webapi' const dataObject = { load(to) { return Promise.all([ - webapi.library_artist(to.params.artist_id), - webapi.library_artist_tracks(to.params.artist_id) + webapi.library_artist(to.params.id), + webapi.library_artist_tracks(to.params.id) ]) }, @@ -150,7 +150,10 @@ export default { methods: { open_artist() { this.show_details_modal = false - this.$router.push({ path: '/music/artists/' + this.artist.id }) + this.$router.push({ + name: 'music-artist', + params: { id: this.artist.id } + }) }, play() { diff --git a/web-src/src/router/index.js b/web-src/src/router/index.js index 482dd865..55a3c5b4 100644 --- a/web-src/src/router/index.js +++ b/web-src/src/router/index.js @@ -1,8 +1,15 @@ import * as types from '@/store/mutation_types' import { createRouter, createWebHashHistory } from 'vue-router' import PageAbout from '@/pages/PageAbout.vue' +import PageAlbum from '@/pages/PageAlbum.vue' +import PageAlbums from '@/pages/PageAlbums.vue' +import PageArtist from '@/pages/PageArtist.vue' +import PageArtistTracks from '@/pages/PageArtistTracks.vue' +import PageArtists from '@/pages/PageArtists.vue' import PageAudiobooksAlbum from '@/pages/PageAudiobooksAlbum.vue' import PageAudiobooksAlbums from '@/pages/PageAudiobooksAlbums.vue' +import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue' +import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue' import PageFiles from '@/pages/PageFiles.vue' import PagePlaylist from '@/pages/PagePlaylist.vue' import PagePlaylistSpotify from '@/pages/PagePlaylistSpotify.vue' @@ -14,19 +21,12 @@ import PageQueue from '@/pages/PageQueue.vue' import PageBrowse from '@/pages/PageBrowse.vue' import PageBrowseRecentlyAdded from '@/pages/PageBrowseRecentlyAdded.vue' import PageBrowseRecentlyPlayed from '@/pages/PageBrowseRecentlyPlayed.vue' -import PageArtists from '@/pages/PageArtists.vue' -import PageArtist from '@/pages/PageArtist.vue' -import PageAlbums from '@/pages/PageAlbums.vue' -import PageAlbum from '@/pages/PageAlbum.vue' import PageGenres from '@/pages/PageGenres.vue' import PageGenre from '@/pages/PageGenre.vue' import PageGenreTracks from '@/pages/PageGenreTracks.vue' -import PageArtistTracks from '@/pages/PageArtistTracks.vue' import PageComposers from '@/pages/PageComposers.vue' import PageComposer from '@/pages/PageComposer.vue' import PageComposerTracks from '@/pages/PageComposerTracks.vue' -import PageAudiobooksArtists from '@/pages/PageAudiobooksArtists.vue' -import PageAudiobooksArtist from '@/pages/PageAudiobooksArtist.vue' import PageRadioStreams from '@/pages/PageRadioStreams.vue' import PageSearchLibrary from '@/pages/PageSearchLibrary.vue' import PageSearchSpotify from '@/pages/PageSearchSpotify.vue' @@ -49,11 +49,30 @@ export const router = createRouter({ name: 'about', path: '/about' }, + + { + component: PageArtist, + meta: { show_progress: true, has_index: true }, + name: 'music-artist', + path: '/music/artists/:id' + }, + { + component: PageArtists, + meta: { has_index: true, has_tabs: true, show_progress: true }, + name: 'music-artists', + path: '/music/artists' + }, + { + component: PageArtistTracks, + meta: { has_index: true, show_progress: true }, + name: 'music-artist-tracks', + path: '/music/artists/:id/tracks' + }, { component: PageAudiobooksAlbum, meta: { show_progress: true }, name: 'audiobooks-album', - path: '/audiobooks/album/:id' + path: '/audiobooks/albums/:id' }, { component: PageAudiobooksAlbums, @@ -65,7 +84,7 @@ export const router = createRouter({ component: PageAudiobooksArtist, meta: { show_progress: true }, name: 'audiobooks-artist', - path: '/audiobooks/artist/:id' + path: '/audiobooks/artists/:id' }, { component: PageAudiobooksArtists, @@ -100,24 +119,6 @@ export const router = createRouter({ component: PageBrowseRecentlyPlayed, meta: { show_progress: true, has_tabs: true } }, - { - path: '/music/artists', - name: 'Artists', - component: PageArtists, - meta: { show_progress: true, has_tabs: true, has_index: true } - }, - { - path: '/music/artists/:artist_id', - name: 'Artist', - component: PageArtist, - meta: { show_progress: true, has_index: true } - }, - { - path: '/music/artists/:artist_id/tracks', - name: 'Tracks', - component: PageArtistTracks, - meta: { show_progress: true, has_index: true } - }, { path: '/music/albums', name: 'Albums', @@ -179,31 +180,31 @@ export const router = createRouter({ }, { name: 'playlists', - redirect: '/playlist/0' + redirect: '/playlists/0' }, { component: PagePlaylist, meta: { show_progress: true }, name: 'playlist', - path: '/playlist/:id' + path: '/playlists/:id' }, { component: PagePlaylistSpotify, meta: { show_progress: true }, name: 'playlist-spotify', - path: '/playlist/spotify/:id' + path: '/playlists/spotify/:id' }, { component: PagePlaylistTracks, meta: { show_progress: true }, name: 'playlist-tracks', - path: '/playlist/:id/tracks' + path: '/playlists/:id/tracks' }, { component: PagePodcast, meta: { show_progress: true }, name: 'podcast', - path: '/podcast/:id' + path: '/podcasts/:id' }, { component: PagePodcasts,