From 0d73b6d164979f122522b5e0ba5ffb4b637fdb4c Mon Sep 17 00:00:00 2001 From: Giuseppe Digilio Date: Fri, 14 Jan 2022 12:15:12 +0100 Subject: [PATCH] [CST-4633] Fix issue with detail view mode --- .../search-sidebar.component.html | 4 +- .../search-sidebar.component.ts | 5 + src/app/shared/search/search.component.html | 6 +- src/app/shared/search/search.component.ts | 7 ++ .../view-mode-switch.component.html | 2 +- .../view-mode-switch.component.spec.ts | 93 ++++++++++++++----- .../view-mode-switch.component.ts | 22 ++++- 7 files changed, 110 insertions(+), 29 deletions(-) diff --git a/src/app/shared/search/search-sidebar/search-sidebar.component.html b/src/app/shared/search/search-sidebar/search-sidebar.component.html index c9e34d5007..e17fe941ba 100644 --- a/src/app/shared/search/search-sidebar/search-sidebar.component.html +++ b/src/app/shared/search/search-sidebar/search-sidebar.component.html @@ -8,7 +8,9 @@
- +
= new EventEmitter(); + /** + * Emits event when the user select a new view mode + */ + @Output() changeViewMode: EventEmitter = new EventEmitter(); + } diff --git a/src/app/shared/search/search.component.html b/src/app/shared/search/search.component.html index e445b0669c..3b2d39d791 100644 --- a/src/app/shared/search/search.component.html +++ b/src/app/shared/search/search.component.html @@ -48,7 +48,8 @@ [currentSortOption]="(currentSortOptions$ | async)" [inPlaceSearch]="inPlaceSearch" [viewModeList]="viewModeList" - (changeConfiguration)="changeContext($event.context)"> + (changeConfiguration)="changeContext($event.context)" + (changeViewMode)="changeViewMode()"> + (changeConfiguration)="changeContext($event.context)" + (changeViewMode)="changeViewMode()"> diff --git a/src/app/shared/search/search.component.ts b/src/app/shared/search/search.component.ts index f739242357..c7cbdc846c 100644 --- a/src/app/shared/search/search.component.ts +++ b/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 */ diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.html b/src/app/shared/view-mode-switch/view-mode-switch.component.html index b4c1c18d4f..007b124b9c 100644 --- a/src/app/shared/view-mode-switch/view-mode-switch.component.html +++ b/src/app/shared/view-mode-switch/view-mode-switch.component.html @@ -21,7 +21,7 @@ { 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'); - })); }); diff --git a/src/app/shared/view-mode-switch/view-mode-switch.component.ts b/src/app/shared/view-mode-switch/view-mode-switch.component.ts index 146cb042f3..95f35abf17 100644 --- a/src/app/shared/view-mode-switch/view-mode-switch.component.ts +++ b/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 = new EventEmitter(); + 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()); }