Implement component to switch between view modes

For now it allows to switch between list and grid views.

Fixes https://github.com/DSpace/dspace-angular/issues/171

resources/i18n/en.json

@@ -81,6 +81,10 @@
     },
     "results": {
       "title": "Search Results"
+    },
+    "view-switch": {
+      "show-list": "Show as list",
+      "show-grid": "Show as grid"
     }
   },
   "loading": {

src/app/+search-page/search-options.model.ts

@@ -1,7 +1,13 @@
 import { SortOptions } from '../core/cache/models/sort-options.model';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
 
+export enum ViewMode {
+  List = 'list',
+  Grid = 'grid'
+}
+
 export class SearchOptions {
   pagination?: PaginationComponentOptions;
   sort?: SortOptions;
+  view?: ViewMode = ViewMode.List;
 }

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

@@ -5,5 +5,6 @@
       [currentParams]="currentParams"
       [scopes]="scopeList?.payload">
     </ds-search-form>
+    <ds-view-mode-switch></ds-view-mode-switch>
     <ds-search-results [searchResults]="results" [searchConfig]="searchOptions"></ds-search-results>
 </div>

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

@@ -6,6 +6,7 @@ import { SearchResult } from './search-result.model';
 import { DSpaceObject } from '../core/shared/dspace-object.model';
 import { SortOptions } from '../core/cache/models/sort-options.model';
 import { PaginationComponentOptions } from '../shared/pagination/pagination-component-options.model';
+import { ViewModeSwitchComponent } from '../shared/view-mode-switch/view-mode-switch.component';
 import { SearchOptions } from './search-options.model';
 import { CommunityDataService } from '../core/data/community-data.service';
 import { isNotEmpty } from '../shared/empty.util';

src/app/+search-page/search-service/search.service.ts

@@ -13,6 +13,8 @@ import { ItemSearchResult } from '../../object-list/search-result-list-element/i
 import { SearchFilterConfig } from './search-filter-config.model';
 import { FilterType } from './filter-type.model';
 import { FacetValue } from './facet-value.model';
+import { ViewMode } from '../../+search-page/search-options.model';
+import { Router, NavigationExtras } from '@angular/router';
 
 function shuffle(array: any[]) {
   let i = 0;
@@ -76,7 +78,9 @@ export class SearchService {
     })
   ];
 
-  constructor(private itemDataService: ItemDataService) {
+  constructor(
+    private itemDataService: ItemDataService,
+    private router: Router) {
 
   }
 
@@ -192,4 +196,13 @@ export class SearchService {
       Observable.of(values)
     );
   }
+
+  setViewMode(viewMode: ViewMode) {
+    const navigationExtras: NavigationExtras = {
+      queryParams: {view: viewMode},
+      queryParamsHandling: 'merge'
+    };
+
+    this.router.navigate(['/search'], navigationExtras);
+  }
 }

src/app/shared/shared.module.ts

@@ -29,6 +29,7 @@ import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
 import { SearchResultListElementComponent } from '../object-list/search-result-list-element/search-result-list-element.component';
 import { SearchFormComponent } from './search-form/search-form.component';
 import { WrapperListElementComponent } from '../object-list/wrapper-list-element/wrapper-list-element.component';
+import { ViewModeSwitchComponent } from './view-mode-switch/view-mode-switch.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -61,7 +62,8 @@ const COMPONENTS = [
   PaginationComponent,
   SearchFormComponent,
   ThumbnailComponent,
-  WrapperListElementComponent
+  WrapperListElementComponent,
+  ViewModeSwitchComponent
 ];
 
 const ENTRY_COMPONENTS = [

src/app/shared/view-mode-switch/view-mode-switch.component.html

@@ -0,0 +1,18 @@
+<div class="btn-group" data-toggle="buttons">
+    <a routerLink="."
+       [queryParams]="{view: 'list'}"
+       queryParamsHandling="merge"
+       (click)="switchViewTo(viewModeEnum.List)"
+       routerLinkActive="active"
+       class="btn btn-secondary">
+          <i class="fa fa-list" title="{{'search.view-switch.show-list' | translate}}"></i>
+    </a>
+    <a routerLink="."
+       [queryParams]="{view: 'grid'}"
+       queryParamsHandling="merge"
+       (click)="switchViewTo(viewModeEnum.Grid)"
+       routerLinkActive="active"
+       class="btn btn-secondary">
+          <i class="fa fa-th-large" title="{{'search.view-switch.show-grid' | translate}}"></i>
+    </a>
+</div>

src/app/shared/view-mode-switch/view-mode-switch.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables.scss';

src/app/shared/view-mode-switch/view-mode-switch.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { ViewMode } from '../../+search-page/search-options.model';
+import { SearchService } from './../../+search-page/search-service/search.service';
+
+/**
+ * Component to switch between list and grid views.
+ */
+@Component({
+  selector: 'ds-view-mode-switch',
+  styleUrls: ['./view-mode-switch.component.scss'],
+  templateUrl: './view-mode-switch.component.html'
+})
+export class ViewModeSwitchComponent {
+  constructor(private searchService: SearchService) {
+  }
+
+  switchViewTo(viewMode: ViewMode) {
+    this.searchService.setViewMode(viewMode);
+  }
+}