navigation: show search results length badge

appinfo/routes.php

@@ -68,10 +68,9 @@ return [
        ],
        [
          'name' => 'page#index',
-         'url' => '/search/{query}',
+         'url' => '/search',
          'verb' => 'GET',
          'postfix' => 'search',
-         'requirements' => ['query' => '.+'],
        ],
 
        // Settings

css/icons.scss

@@ -23,3 +23,4 @@
 
 @include icon-black-white('recent', 'radio', 1);
 @include icon-black-white('radio', 'radio', 1);
+@include icon-black-white('radio-trans', 'radio', 1);

lib/Search/SearchProvider.php

@@ -69,8 +69,8 @@ class SearchProvider implements IProvider {
 				$result['favicon'],
 				$result['name'],
 				str_replace(",",", ",$result['tags']),
-				$this->url->linkToRouteAbsolute('radio.page.index') . 'search/'.$term.'#/search/'.$term,
-				'icon-radio'
+				$this->url->linkToRouteAbsolute('radio.page.index') . 'search#'.$term,
+				'icon-radio-trans'
 			);
 		}, $parsed);
 

src/components/Main.vue

@@ -1,6 +1,7 @@
 <template>
 	<Content app-name="radio">
-		<Navigation />
+		<Navigation
+			:station-data="tableData" />
 		<AppContent>
 			<Breadcrumbs class="breadcrumbs">
 				<Breadcrumb title="Home" href="/" />
@@ -192,7 +193,7 @@ export default {
 
 			let queryURI = queryBase
 			if (menuState === 'SEARCH') {
-				const searchQuery = vm.$route.params.query
+				const searchQuery = vm.$route.hash.substr(1)
 				queryURI = queryBase + '/byname/' + searchQuery
 			} else if (menuState === 'FAVORITES') {
 				queryURI = generateUrl('/apps/radio/api/favorites')

src/components/Navigation.vue

@@ -26,8 +26,10 @@
 				:to="{ name: 'SEARCH' }"
 				icon="icon-search"
 				:title="t('radio', 'Search')">
-				<AppNavigationCounter slot="counter" :highlighted="true">
-					99+
+				<AppNavigationCounter
+					slot="counter"
+					:highlighted="true">
+					{{ stationData.length }}
 				</AppNavigationCounter>
 			</AppNavigationItem>
 		</template>
@@ -52,6 +54,12 @@ export default {
 		AppNavigationCounter,
 		Player,
 	},
+	props: {
+		stationData: {
+			type: Array,
+			default() { return [] },
+		},
+	},
 	computed: {
 		isSearch() {
 			return this.$route.name === 'SEARCH'
@@ -59,3 +67,9 @@ export default {
 	},
 }
 </script>
+
+<style>
+.app-navigation-entry__utils {
+	margin-right: 10px;
+}
+</style>

src/router.js

@@ -39,7 +39,7 @@ const router = new Router({
 			name: 'CATEGORIES',
 		},
 		{
-			path: '/search/:query',
+			path: '/search',
 			component: Main,
 			name: 'SEARCH',
 		},
@@ -48,12 +48,6 @@ const router = new Router({
 
 router.beforeEach((to, from, next) => {
 
-	if (to.hash) {
-		const hashPath = to.hash.substr(1)
-		next(hashPath)
-		return
-	}
-
 	if (to.name) {
 		store.dispatch('setMenuState', to.name)
 		next()