[web] Use named route for search pages

Switching to named routes in order to reduce future maintenance.
This commit is contained in:
Alain Nussbaumer 2023-07-12 22:39:21 +02:00
parent 845f111c29
commit 6f1f53007d
6 changed files with 19 additions and 18 deletions

View File

@ -27,7 +27,7 @@
<navbar-item-link v-if="is_visible_files" :to="{ name: 'files' }"> <navbar-item-link v-if="is_visible_files" :to="{ name: 'files' }">
<mdicon class="icon" name="folder-open" size="16" /> <mdicon class="icon" name="folder-open" size="16" />
</navbar-item-link> </navbar-item-link>
<navbar-item-link v-if="is_visible_search" :to="{ name: 'search' }"> <navbar-item-link v-if="is_visible_search" :to="{ name: search_name }">
<mdicon class="icon" name="magnify" size="16" /> <mdicon class="icon" name="magnify" size="16" />
</navbar-item-link> </navbar-item-link>
<div <div
@ -96,7 +96,7 @@
<mdicon class="icon" name="folder-open" size="16" /> <mdicon class="icon" name="folder-open" size="16" />
<b v-text="$t('navigation.files')" /> <b v-text="$t('navigation.files')" />
</navbar-item-link> </navbar-item-link>
<navbar-item-link :to="{ name: 'search' }"> <navbar-item-link :to="{ name: search_name }">
<mdicon class="icon" name="magnify" size="16" /> <mdicon class="icon" name="magnify" size="16" />
<b v-text="$t('navigation.search')" /> <b v-text="$t('navigation.search')" />
</navbar-item-link> </navbar-item-link>
@ -229,6 +229,12 @@ export default {
} }
}, },
search_name: {
get() {
return 'search-' + this.$store.state.search_source
}
},
zindex() { zindex() {
if (this.show_player_menu) { if (this.show_player_menu) {
return 'z-index: 20' return 'z-index: 20'

View File

@ -7,7 +7,7 @@
<ul> <ul>
<li <li
:class="{ :class="{
'is-active': $store.state.search_path === '/search/library' 'is-active': $store.state.search_source === 'library'
}" }"
> >
<a @click="search_library"> <a @click="search_library">
@ -17,7 +17,7 @@
</li> </li>
<li <li
:class="{ :class="{
'is-active': $store.state.search_path === '/search/spotify' 'is-active': $store.state.search_source === 'spotify'
}" }"
> >
<a @click="search_spotify"> <a @click="search_spotify">
@ -62,17 +62,17 @@ export default {
methods: { methods: {
search_library() { search_library() {
this.$store.commit(types.SEARCH_PATH, '/search/library') this.$store.commit(types.SEARCH_SOURCE, 'library')
this.$router.push({ this.$router.push({
path: this.$store.state.search_path, name: 'search-library',
query: this.route_query query: this.route_query
}) })
}, },
search_spotify() { search_spotify() {
this.$store.commit(types.SEARCH_PATH, '/search/spotify') this.$store.commit(types.SEARCH_SOURCE, 'spotify')
this.$router.push({ this.$router.push({
path: this.$store.state.search_path, name: 'search-spotify',
query: this.route_query query: this.route_query
}) })
} }

View File

@ -485,7 +485,7 @@ export default {
} }
this.$router.push({ this.$router.push({
path: this.$store.state.search_path, name: 'search-library',
query: { query: {
type: 'track,artist,album,playlist,audiobook,podcast,composer', type: 'track,artist,album,playlist,audiobook,podcast,composer',
query: this.search_query, query: this.search_query,

View File

@ -253,11 +253,6 @@ export const router = createRouter({
name: 'queue', name: 'queue',
path: '/' path: '/'
}, },
{
name: 'search',
path: '/search',
redirect: '/search/library'
},
{ {
component: PageSearchLibrary, component: PageSearchLibrary,
name: 'search-library', name: 'search-library',

View File

@ -50,7 +50,7 @@ export default createStore({
list: [] list: []
}, },
search_path: '/search/library', search_source: 'library',
recent_searches: [], recent_searches: [],
composer_tracks_sort: 1, composer_tracks_sort: 1,
@ -222,8 +222,8 @@ export default createStore({
state.notifications.list.splice(index, 1) state.notifications.list.splice(index, 1)
} }
}, },
[types.SEARCH_PATH](state, searchPath) { [types.SEARCH_SOURCE](state, searchSource) {
state.search_path = searchPath state.search_source = searchSource
}, },
[types.ADD_RECENT_SEARCH](state, query) { [types.ADD_RECENT_SEARCH](state, query) {
const index = state.recent_searches.findIndex((elem) => elem === query) const index = state.recent_searches.findIndex((elem) => elem === query)

View File

@ -18,7 +18,7 @@ export const SPOTIFY_FEATURED_PLAYLISTS = 'SPOTIFY_FEATURED_PLAYLISTS'
export const ADD_NOTIFICATION = 'ADD_NOTIFICATION' export const ADD_NOTIFICATION = 'ADD_NOTIFICATION'
export const DELETE_NOTIFICATION = 'DELETE_NOTIFICATION' export const DELETE_NOTIFICATION = 'DELETE_NOTIFICATION'
export const SEARCH_PATH = 'SEARCH_PATH' export const SEARCH_SOURCE = 'SEARCH_SOURCE'
export const ADD_RECENT_SEARCH = 'ADD_RECENT_SEARCH' export const ADD_RECENT_SEARCH = 'ADD_RECENT_SEARCH'
export const COMPOSER_TRACKS_SORT = 'COMPOSER_TRACKS_SORT' export const COMPOSER_TRACKS_SORT = 'COMPOSER_TRACKS_SORT'