[CST-4633] Fix issue with detail view mode

src/app/shared/search/search-sidebar/search-sidebar.component.html

@@ -8,7 +8,9 @@
         </button>
     </div>
     <div id="search-sidebar-content">
-        <ds-view-mode-switch *ngIf="showViewModes" [viewModeList]="viewModeList" class="d-none d-md-block"></ds-view-mode-switch>
+        <ds-view-mode-switch *ngIf="showViewModes" class="d-none d-md-block"
+                             [viewModeList]="viewModeList"
+                             (changeViewMode)="changeViewMode.emit($event)"></ds-view-mode-switch>
         <div class="sidebar-content">
             <ds-search-switch-configuration *ngIf="configurationList"
                                             [configurationList]="configurationList"

src/app/shared/search/search-sidebar/search-sidebar.component.ts

@@ -88,4 +88,9 @@ export class SearchSidebarComponent {
    */
   @Output() changeConfiguration: EventEmitter<SearchConfigurationOption> = new EventEmitter<SearchConfigurationOption>();
 
+  /**
+   * Emits event when the user select a new view mode
+   */
+  @Output() changeViewMode: EventEmitter<ViewMode> = new EventEmitter<ViewMode>();
+
 }

src/app/shared/search/search.component.html

@@ -48,7 +48,8 @@
                        [currentSortOption]="(currentSortOptions$ | async)"
                        [inPlaceSearch]="inPlaceSearch"
                        [viewModeList]="viewModeList"
-                       (changeConfiguration)="changeContext($event.context)"></ds-search-sidebar>
+                       (changeConfiguration)="changeContext($event.context)"
+                       (changeViewMode)="changeViewMode()"></ds-search-sidebar>
     <ds-search-sidebar id="search-sidebar-sm" *ngIf="(isXsOrSm$ | async)"
                        [configurationList]="configurationList"
                        [configuration]="(currentConfiguration$ | async)"
@@ -59,7 +60,8 @@
                        [currentSortOption]="(currentSortOptions$ | async)"
                        [viewModeList]="viewModeList"
                        (toggleSidebar)="closeSidebar()"
-                       (changeConfiguration)="changeContext($event.context)">
+                       (changeConfiguration)="changeContext($event.context)"
+                       (changeViewMode)="changeViewMode()">
     </ds-search-sidebar>
 </ng-template>
 

src/app/shared/search/search.component.ts

@@ -256,6 +256,13 @@ export class SearchComponent implements OnInit {
     this.sidebarService.collapse();
   }
 
+  /**
+   * Reset result list on view mode change
+   */
+  public changeViewMode() {
+    this.resultsRD$.next(null);
+  }
+
   /**
    * Set the sidebar to an expanded state
    */

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

@@ -21,7 +21,7 @@
     </a>
     <a *ngIf="isToShow(viewModeEnum.DetailedListElement)"
        routerLink="."
-       [queryParams]="{view: 'detail'}"
+       [queryParams]="{view: 'detailed'}"
        queryParamsHandling="merge"
        (click)="switchViewTo(viewModeEnum.DetailedListElement)"
        routerLinkActive="active"

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

@@ -1,11 +1,10 @@
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { TranslateLoaderMock } from '../mocks/translate-loader.mock';
 import { RouterTestingModule } from '@angular/router/testing';
-
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
+import { TranslateLoaderMock } from '../mocks/translate-loader.mock';
 import { SearchService } from '../../core/shared/search/search.service';
 import { ViewModeSwitchComponent } from './view-mode-switch.component';
 import { SearchServiceStub } from '../testing/search-service.stub';
@@ -21,6 +20,7 @@ describe('ViewModeSwitchComponent', () => {
   const searchService = new SearchServiceStub();
   let listButton: HTMLElement;
   let gridButton: HTMLElement;
+  let detailButton: HTMLElement;
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [
@@ -49,27 +49,76 @@ describe('ViewModeSwitchComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ViewModeSwitchComponent);
     comp = fixture.componentInstance; // ViewModeSwitchComponent test instance
-    fixture.detectChanges();
-    const debugElements = fixture.debugElement.queryAll(By.css('a'));
-    listButton = debugElements[0].nativeElement;
-    gridButton = debugElements[1].nativeElement;
+    spyOn(comp.changeViewMode, 'emit');
+  });
+
+  describe('', () => {
+    beforeEach(fakeAsync(() => {
+      comp.viewModeList = [ViewMode.ListElement, ViewMode.GridElement];
+      comp.currentMode = ViewMode.ListElement;
+      searchService.setViewMode(ViewMode.ListElement);
+      tick();
+      fixture.detectChanges();
+      const debugElements = fixture.debugElement.queryAll(By.css('a'));
+      listButton = debugElements[0].nativeElement;
+      gridButton = debugElements[1].nativeElement;
+    }));
+
+    it('should set list button as active when on list mode', fakeAsync(() => {
+      comp.switchViewTo(ViewMode.ListElement);
+      expect(comp.changeViewMode.emit).not.toHaveBeenCalled();
+      tick();
+      fixture.detectChanges();
+      expect(comp.currentMode).toBe(ViewMode.ListElement);
+      expect(listButton.classList).toContain('active');
+      expect(gridButton.classList).not.toContain('active');
+
+    }));
+
+    it('should set grid button as active when on grid mode', fakeAsync(() => {
+      comp.switchViewTo(ViewMode.GridElement);
+      expect(comp.changeViewMode.emit).toHaveBeenCalledWith(ViewMode.GridElement);
+      tick();
+      fixture.detectChanges();
+      expect(comp.currentMode).toBe(ViewMode.GridElement);
+      expect(listButton.classList).not.toContain('active');
+      expect(gridButton.classList).toContain('active');
+    }));
+  });
+
+
+  describe('', () => {
+    beforeEach(fakeAsync(() => {
+      comp.viewModeList = [ViewMode.ListElement, ViewMode.DetailedListElement];
+      comp.currentMode = ViewMode.ListElement;
+      searchService.setViewMode(ViewMode.ListElement);
+      tick();
+      fixture.detectChanges();
+      const debugElements = fixture.debugElement.queryAll(By.css('a'));
+      listButton = debugElements[0].nativeElement;
+      detailButton = debugElements[1].nativeElement;
+    }));
+
+    it('should set list button as active when on list mode', fakeAsync(() => {
+      comp.switchViewTo(ViewMode.ListElement);
+      expect(comp.changeViewMode.emit).not.toHaveBeenCalled();
+      tick();
+      fixture.detectChanges();
+      expect(comp.currentMode).toBe(ViewMode.ListElement);
+      expect(listButton.classList).toContain('active');
+      expect(detailButton.classList).not.toContain('active');
+    }));
+
+    it('should set detail button as active when on detailed mode', fakeAsync(() => {
+      comp.switchViewTo(ViewMode.DetailedListElement);
+      expect(comp.changeViewMode.emit).toHaveBeenCalledWith(ViewMode.DetailedListElement);
+      tick();
+      fixture.detectChanges();
+      expect(comp.currentMode).toBe(ViewMode.DetailedListElement);
+      expect(listButton.classList).not.toContain('active');
+      expect(detailButton.classList).toContain('active');
+    }));
   });
 
-  it('should set list button as active when on list mode', fakeAsync(() => {
-    searchService.setViewMode(ViewMode.ListElement);
-    tick();
-    fixture.detectChanges();
-    expect(comp.currentMode).toBe(ViewMode.ListElement);
-    expect(listButton.classList).toContain('active');
-    expect(gridButton.classList).not.toContain('active');
-  }));
 
-  it('should set grid button as active when on grid mode', fakeAsync(() => {
-    searchService.setViewMode(ViewMode.GridElement);
-    tick();
-    fixture.detectChanges();
-    expect(comp.currentMode).toBe(ViewMode.GridElement);
-    expect(listButton.classList).not.toContain('active');
-    expect(gridButton.classList).toContain('active');
-  }));
 });

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

@@ -1,12 +1,13 @@
-import { Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { Component, EventEmitter, Input, OnDestroy, OnInit, Output } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
 import { SearchService } from '../../core/shared/search/search.service';
 import { ViewMode } from '../../core/shared/view-mode.model';
-import { isEmpty } from '../empty.util';
+import { isEmpty, isNotEmpty } from '../empty.util';
 import { currentPath } from '../utils/route.utils';
 import { Router } from '@angular/router';
+import { filter } from 'rxjs/operators';
 
 /**
  * Component to switch between list and grid views.
@@ -37,8 +38,18 @@ export class ViewModeSwitchComponent implements OnInit, OnDestroy {
    * All available view modes
    */
   viewModeEnum = ViewMode;
+
+  /**
+   * Subscription to unsubscribe OnDestroy
+   * @private
+   */
   private sub: Subscription;
 
+  /**
+   * Emits event when the user select a new view mode
+   */
+  @Output() changeViewMode: EventEmitter<ViewMode> = new EventEmitter<ViewMode>();
+
   constructor(private searchService: SearchService, private router: Router) {
   }
 
@@ -50,7 +61,9 @@ export class ViewModeSwitchComponent implements OnInit, OnDestroy {
       this.viewModeList = [ViewMode.ListElement, ViewMode.GridElement];
     }
 
-    this.sub = this.searchService.getViewMode().subscribe((viewMode: ViewMode) => {
+    this.sub = this.searchService.getViewMode().pipe(
+      filter((viewMode: ViewMode) => isNotEmpty(viewMode))
+    ).subscribe((viewMode: ViewMode) => {
       this.currentMode = viewMode;
     });
   }
@@ -60,6 +73,9 @@ export class ViewModeSwitchComponent implements OnInit, OnDestroy {
    * @param viewMode The new view mode
    */
   switchViewTo(viewMode: ViewMode) {
+    if (viewMode !== this.currentMode) {
+      this.changeViewMode.emit(viewMode);
+    }
     this.searchService.setViewMode(viewMode, this.getSearchLinkParts());
   }