#195 TSLint error checking, redirect using previous query params

src/app/+search-page/search-page.component.html

@@ -1,45 +1,45 @@
 <div class="container">
-    <div class="search-page row">
-      <div class="col-3">
-        <ds-search-sidebar *ngIf="!(isMobileView | async)" class="sidebar-sm-sticky"
-                           id="search-sidebar"
-                           [resultCount]="(resultsRDObs | async)?.pageInfo?.totalElements"></ds-search-sidebar>
-        </div>
-        <div class="col-9">
-          <div id="search-header" class="row">
-            <ds-search-form id="search-form"
-                            [query]="query"
-                            [scope]="(scopeObjectRDObs | async)?.payload"
-                            [currentParams]="currentParams"
-                            [scopes]="(scopeListRDObs | async)?.payload">
-            </ds-search-form>
-        </div>
-            <div class="row">
-                <div id="search-body"
-                     class="row-offcanvas row-offcanvas-left"
-                     [@pushInOut]="(isSidebarCollapsed() | async) ? 'collapsed' : 'expanded'">
-                    <ds-search-sidebar *ngIf="(isMobileView | async)" class="col-12"
-                                       id="search-sidebar-xs"
-                                       [resultCount]="(resultsRDObs | async)?.pageInfo?.totalElements"
-                                       (toggleSidebar)="closeSidebar()"
-                                       [ngClass]="{'active': !(isSidebarCollapsed() | async)}">
-                    </ds-search-sidebar>
-                    <div id="search-content" class="col-12">
-                        <div class="d-block d-sm-none search-controls clearfix">
-                            <ds-view-mode-switch></ds-view-mode-switch>
-                            <button (click)="openSidebar()" aria-controls="#search-body"
-                                    class="btn btn-outline-primary float-right open-sidebar"><i
-                                    class="fa fa-sliders"></i> {{"search.sidebar.open"
-                                | translate}}
-                            </button>
-                        </div>
-                        <ds-search-results [searchResults]="resultsRDObs | async"
-                                           [searchConfig]="searchOptions"></ds-search-results>
-                    </div>
-                </div>
+  <div class="search-page row">
+    <div class="col-3">
+      <ds-search-sidebar *ngIf="!(isMobileView | async)" class="sidebar-sm-sticky"
+                         id="search-sidebar"
+                         [resultCount]="(resultsRDObs | async)?.pageInfo?.totalElements"></ds-search-sidebar>
+    </div>
+    <div class="col-9">
+      <div id="search-header" class="row">
+        <ds-search-form id="search-form"
+                        [query]="query"
+                        [scope]="(scopeObjectRDObs | async)?.payload"
+                        [currentParams]="currentParams"
+                        [scopes]="(scopeListRDObs | async)?.payload">
+        </ds-search-form>
+      </div>
+      <div class="row">
+        <div id="search-body"
+             class="row-offcanvas row-offcanvas-left"
+             [@pushInOut]="(isSidebarCollapsed() | async) ? 'collapsed' : 'expanded'">
+          <ds-search-sidebar *ngIf="(isMobileView | async)" class="col-12"
+                             id="search-sidebar-xs"
+                             [resultCount]="(resultsRDObs | async)?.pageInfo?.totalElements"
+                             (toggleSidebar)="closeSidebar()"
+                             [ngClass]="{'active': !(isSidebarCollapsed() | async)}">
+          </ds-search-sidebar>
+          <div id="search-content" class="col-12">
+            <div class="d-block d-sm-none search-controls clearfix">
+              <ds-view-mode-switch></ds-view-mode-switch>
+              <button (click)="openSidebar()" aria-controls="#search-body"
+                      class="btn btn-outline-primary float-right open-sidebar"><i
+                class="fa fa-sliders"></i> {{"search.sidebar.open"
+                | translate}}
+              </button>
             </div>
+            <ds-search-results [searchResults]="resultsRDObs | async"
+                               [searchConfig]="searchOptions"></ds-search-results>
+          </div>
         </div>
+      </div>
     </div>
   </div>
 </div>
 
+

src/app/+search-page/search-settings/search-settings.component.html

@@ -1,5 +1,5 @@
-<h3>{{ 'search.sidebar.settings.title' | translate}}</h3>
-<div *ngIf="[searchOptions].sort" class="result-order-settings">
+<h3 class="mt-3">{{ 'search.sidebar.settings.title' | translate}}</h3>
+<div *ngIf="[searchOptions].sort" class="setting-option result-order-settings d-block mb-3 px-3 py-2 ng-tns-c13-5">
   <h4>{{ 'search.sidebar.settings.sort-by' | translate}}</h4>
     <div class="form-group">
       <select class="form-control" (change)="reloadOrder($event)">
@@ -11,7 +11,7 @@
     </div>
 </div>
 
-<div *ngIf="searchOptions.pagination.pageSize" class="page-size-settings">
+<div *ngIf="searchOptions.pagination.pageSize" class="setting-option page-size-settings d-block mb-3 px-3 py-2 ng-tns-c13-5">
   <h4>{{ 'search.sidebar.settings.rpp' | translate}}</h4>
 
     <div class="form-group">

src/app/+search-page/search-settings/search-settings.component.scss

@@ -0,0 +1,5 @@
+@import '../../../styles/variables.scss';
+
+.setting-option {
+  border: 1px solid map-get($theme-colors, light);
+}

src/app/+search-page/search-settings/search-settings.component.spec.ts

@@ -11,7 +11,6 @@ import { SearchSidebarService } from '../search-sidebar/search-sidebar.service';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { EnumKeysPipe } from '../../shared/utils/enum-keys-pipe';
 import { By } from '@angular/platform-browser';
-import Any = jasmine.Any;
 
 describe('SearchSettingsComponent', () => {
 
@@ -72,35 +71,33 @@ describe('SearchSettingsComponent', () => {
     spyOn(comp, 'reloadOrder');
     spyOn(searchServiceObject, 'search').and.callThrough();
 
-
   });
 
   it('it should show the order settings with the respective selectable options', () => {
-    let orderSetting = fixture.debugElement.query(By.css('div.result-order-settings'));
+    const orderSetting = fixture.debugElement.query(By.css('div.result-order-settings'));
     expect(orderSetting).toBeDefined();
-    let childElements = orderSetting.query(By.css('.form-control')).children;
+    const childElements = orderSetting.query(By.css('.form-control')).children;
     expect(childElements.length).toEqual(2);
 
   });
 
   it('it should show the size settings with the respective selectable options', () => {
-    let pageSizeSetting = fixture.debugElement.query(By.css('div.page-size-settings'));
+    const pageSizeSetting = fixture.debugElement.query(By.css('div.page-size-settings'));
     expect(pageSizeSetting).toBeDefined();
-    let childElements = pageSizeSetting.query(By.css('.form-control')).children;
+    const childElements = pageSizeSetting.query(By.css('.form-control')).children;
     expect(childElements.length).toEqual(7);
   });
 
   it('should have the proper order value selected by default', () => {
-    let orderSetting = fixture.debugElement.query(By.css('div.result-order-settings'));
-    let childElementToBeSelected = orderSetting.query(By.css('.form-control option[value="0"][selected="selected"]'))
+    const orderSetting = fixture.debugElement.query(By.css('div.result-order-settings'));
+    const childElementToBeSelected = orderSetting.query(By.css('.form-control option[value="0"][selected="selected"]'))
     expect(childElementToBeSelected).toBeDefined();
   });
 
   it('should have the proper rpp value selected by default', () => {
-    let pageSizeSetting = fixture.debugElement.query(By.css('div.page-size-settings'));
-    let childElementToBeSelected = pageSizeSetting.query(By.css('.form-control option[value="10"][selected="selected"]'))
+    const pageSizeSetting = fixture.debugElement.query(By.css('div.page-size-settings'));
+    const childElementToBeSelected = pageSizeSetting.query(By.css('.form-control option[value="10"][selected="selected"]'))
     expect(childElementToBeSelected).toBeDefined();
   });
 
-
 });

src/app/+search-page/search-settings/search-settings.component.ts

@@ -9,7 +9,7 @@ import { ActivatedRoute, NavigationExtras, Router } from '@angular/router';
   styleUrls: ['./search-settings.component.scss'],
   templateUrl: './search-settings.component.html',
 })
-export class SearchSettingsComponent implements OnInit{
+export class SearchSettingsComponent implements OnInit {
 
   @Input() searchOptions: SearchOptions;
   /**
@@ -30,8 +30,7 @@ export class SearchSettingsComponent implements OnInit{
 
   constructor(private service: SearchService,
               private route: ActivatedRoute,
-              private router: Router){
-
+              private router: Router) {
   }
 
   ngOnInit(): void {
@@ -48,32 +47,24 @@ export class SearchSettingsComponent implements OnInit{
         this.direction = +params.sortDirection || this.searchOptions.sort.direction;
       });
   }
-  reloadRPP(event:Event) {
-    let value = (<HTMLInputElement>event.target).value;
-    this.searchOptions.sort.direction;
+
+  reloadRPP(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
     const navigationExtras: NavigationExtras = {
-      queryParams: {
-        query:this.query,
-        pageSize:value,
-        scope: this.scope,
-        page:this.page,
-        sortDirection:this.direction
-      }
+      queryParams: Object.assign({}, this.currentParams, {
+        pageSize: value
+      })
     };
-    this.router.navigate(['/search'], navigationExtras);
+    this.router.navigate([ '/search' ], navigationExtras);
   }
 
-  reloadOrder(event:Event) {
-    let value = (<HTMLInputElement>event.target).value;
+  reloadOrder(event: Event) {
+    const value = (event.target as HTMLInputElement).value;
     const navigationExtras: NavigationExtras = {
-      queryParams: {
-        query:this.query,
-        pageSize:this.pageSize,
-        scope: this.scope,
-        page:this.page,
-        sortDirection:value
-      }
+      queryParams: Object.assign({}, this.currentParams, {
+        sortDirection: value
+      })
     };
-    this.router.navigate(['/search'], navigationExtras);
+    this.router.navigate([ '/search' ], navigationExtras);
   }
 }