feat: search url query param handling

cypress/integration/dashboard.spec.ts

@@ -175,7 +175,7 @@ describe('dashboard', async function () {
         .find('.searchbar')
         .type('test', {scrollBehavior: false})
         .type('{enter}', {scrollBehavior: false});
-      cy.url().should('eq', Cypress.config().baseUrl + '/search/test');
+      cy.url().should('eq', Cypress.config().baseUrl + '/search?query=test');
       cy.get('ion-searchbar').should('have.value', 'test');
 
       cy.get('stapps-data-list-item').should('have.length.greaterThan', 0);
@@ -185,7 +185,7 @@ describe('dashboard', async function () {
       cy.visit('/overview');
 
       cy.get('stapps-search-section').find('ion-icon[name=search]').click();
-      cy.url().should('eq', Cypress.config().baseUrl + '/search/');
+      cy.url().should('eq', Cypress.config().baseUrl + '/search?query=');
       cy.get('ion-searchbar').should('not.have.value');
 
       cy.get('stapps-data-list-item').should('have.length', 0);

src/app/modules/dashboard/sections/search-section/search-section.component.ts

@@ -35,7 +35,7 @@ export class SearchSectionComponent {
    */
   onSubmitSearch() {
     this.router
-      .navigate(['/search', this.searchTerm])
+      .navigate(['/search'], {queryParams: {query: this.searchTerm}})
       .then(() => this.hideKeyboard());
   }
 

src/app/modules/data/data-routing.module.ts

@@ -1,16 +1,16 @@
 /*
  * Copyright (C) 2022 StApps
- *  This program is free software: you can redistribute it and/or modify it
+ * This program is free software: you can redistribute it and/or modify it
- *  under the terms of the GNU General Public License as published by the Free
+ * under the terms of the GNU General Public License as published by the Free
- *  Software Foundation, version 3.
+ * Software Foundation, version 3.
  *
- *  This program is distributed in the hope that it will be useful, but WITHOUT
+ * This program is distributed in the hope that it will be useful, but WITHOUT
- *  ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
- *  FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
+ * FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for
- *  more details.
+ * more details.
  *
- *  You should have received a copy of the GNU General Public License along with
+ * You should have received a copy of the GNU General Public License along with
- *  this program. If not, see <https://www.gnu.org/licenses/>.
+ * this program. If not, see <https://www.gnu.org/licenses/>.
  */
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
@@ -20,7 +20,6 @@ import {SearchPageComponent} from './list/search-page.component';
 
 const dataRoutes: Routes = [
   {path: 'search', component: SearchPageComponent},
-  {path: 'search/:term', component: SearchPageComponent},
   {path: 'data-detail/:uid', component: DataDetailComponent},
   {path: 'canteen', component: FoodDataListComponent},
 ];

src/app/modules/data/list/search-page.component.ts

@@ -277,6 +277,11 @@ export class SearchPageComponent implements OnInit, OnDestroy {
    * Search event of search bar
    */
   searchStringChanged(queryValue: string) {
+    this.router.navigate([], {
+      relativeTo: this.route,
+      queryParams: {query: queryValue},
+      queryParamsHandling: 'merge',
+    });
     this.queryTextChanged.next(queryValue);
   }
 
@@ -366,7 +371,7 @@ export class SearchPageComponent implements OnInit, OnDestroy {
    * Initialize
    */
   async ionViewWillEnter() {
-    const term = this.route.snapshot.paramMap.get('term') || undefined;
+    const term = this.route.snapshot.queryParamMap.get('query') || undefined;
     if (term) {
       this.queryText = term;
       this.searchStringChanged(term);

src/app/modules/data/list/search-page.html

@@ -49,8 +49,8 @@
         'search.type' | translate
       }}</ion-button>
       <ion-button
-        [routerLink]="['/hebis-search/' + (queryText || '')]"
+        [routerLink]="['/hebis-search']"
-        [skipLocationChange]="true"
+        queryParamsHandling="merge"
         [routerAnimation]="routeAnimation"
         fill="outline"
         size="large"

src/app/modules/hebis/hebis-routing.module.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (C) 2018-2021 StApps
+ * Copyright (C) 2022 StApps
  * This program is free software: you can redistribute it and/or modify it
  * under the terms of the GNU General Public License as published by the Free
  * Software Foundation, version 3.
@@ -19,7 +19,6 @@ import {HebisSearchPageComponent} from './list/hebis-search-page.component';
 
 const hebisRoutes: Routes = [
   {path: 'hebis-search', component: HebisSearchPageComponent},
-  {path: 'hebis-search/:term', component: HebisSearchPageComponent},
   {path: 'hebis-detail/:uid', component: HebisDetailComponent},
 ];
 

src/app/modules/hebis/list/hebis-search-page.html

@@ -37,7 +37,8 @@
   <ion-toolbar color="primary" class="category-tab">
     <ion-buttons class="ion-justify-content-between">
       <ion-button
-        [routerLink]="['/search/' + (queryText || '')]"
+        [routerLink]="['/search']"
+        queryParamsHandling="preserve"
         [routerAnimation]="routeAnimation"
         fill="outline"
         size="large"