From 6ac0346039f41656355f02bd14de9ed8bf81c138 Mon Sep 17 00:00:00 2001 From: bbcodrin Date: Fri, 14 Sep 2018 19:59:59 +0300 Subject: [PATCH] [ADF-3415] Process filter - icons added (#3705) * task filters icons added * test fix * process filters icons added --- .../process-service.component.html | 3 +- .../components/process-filters.component.html | 2 +- .../process-filters.component.spec.ts | 40 +++++++++++++++++-- .../components/process-filters.component.ts | 18 ++++++++- 4 files changed, 56 insertions(+), 7 deletions(-) diff --git a/demo-shell/src/app/components/process-service/process-service.component.html b/demo-shell/src/app/components/process-service/process-service.component.html index bb34ea92f5..f66f6c5619 100644 --- a/demo-shell/src/app/components/process-service/process-service.component.html +++ b/demo-shell/src/app/components/process-service/process-service.component.html @@ -131,8 +131,9 @@ [headingIcon]="'assessment'"> diff --git a/lib/process-services/process-list/components/process-filters.component.html b/lib/process-services/process-list/components/process-filters.component.html index 8620c89d4e..411c726ee3 100644 --- a/lib/process-services/process-list/components/process-filters.component.html +++ b/lib/process-services/process-list/components/process-filters.component.html @@ -2,7 +2,7 @@ - assignment + {{getFilterIcon(filter.icon)}} {{filter.name}} diff --git a/lib/process-services/process-list/components/process-filters.component.spec.ts b/lib/process-services/process-list/components/process-filters.component.spec.ts index 3eff1fe5ca..6428d7ea82 100644 --- a/lib/process-services/process-list/components/process-filters.component.spec.ts +++ b/lib/process-services/process-list/components/process-filters.component.spec.ts @@ -25,6 +25,7 @@ import { setupTestBed } from '../../../core/testing/setupTestBed'; import { CoreModule } from '../../../core/core.module'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; describe('ProcessFiltersComponent', () => { @@ -53,16 +54,19 @@ describe('ProcessFiltersComponent', () => { new FilterProcessRepresentationModel({ id: 10, name: 'FakeInvolvedTasks', + icon: 'glyphicon-th', filter: { state: 'open', assignment: 'fake-involved' } }), new FilterProcessRepresentationModel({ id: 20, name: 'FakeMyTasks', + icon: 'glyphicon-random', filter: { state: 'open', assignment: 'fake-assignee' } }), new FilterProcessRepresentationModel({ id: 30, name: 'Running', + icon: 'glyphicon-ok-sign', filter: { state: 'open', assignment: 'fake-running' } }) ]); @@ -71,9 +75,8 @@ describe('ProcessFiltersComponent', () => { error: 'wrong request' }); - processFilterService = new ProcessFilterService(null); - appsProcessService = new AppsProcessService(null, null); - filterList = new ProcessFiltersComponent(processFilterService, appsProcessService); + processFilterService = TestBed.get(ProcessFilterService); + appsProcessService = TestBed.get(AppsProcessService); }); afterEach(() => { @@ -296,4 +299,35 @@ describe('ProcessFiltersComponent', () => { done(); }); }); + + it('should attach specific icon for each filter if hasIcon is true', (done) => { + spyOn(processFilterService, 'getProcessFilters').and.returnValue(from(fakeGlobalFilterPromise)); + filterList.showIcon = true; + let change = new SimpleChange(undefined, 1, true); + filterList.ngOnChanges({ 'appId': change }); + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + expect(filterList.filters.length).toBe(3); + let filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon')); + expect(filters.length).toBe(3); + expect(filters[0].nativeElement.innerText).toContain('dashboard'); + expect(filters[1].nativeElement.innerText).toContain('shuffle'); + expect(filters[2].nativeElement.innerText).toContain('check_circle'); + done(); + }); + }); + it('should not attach icons for each filter if hasIcon is false', (done) => { + spyOn(processFilterService, 'getProcessFilters').and.returnValue(from(fakeGlobalFilterPromise)); + filterList.showIcon = false; + let change = new SimpleChange(undefined, 1, true); + filterList.ngOnChanges({ 'appId': change }); + fixture.detectChanges(); + fixture.whenStable().then(() => { + fixture.detectChanges(); + let filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon')); + expect(filters.length).toBe(0); + done(); + }); + }); }); diff --git a/lib/process-services/process-list/components/process-filters.component.ts b/lib/process-services/process-list/components/process-filters.component.ts index 76f9da5d61..0f9a755984 100644 --- a/lib/process-services/process-list/components/process-filters.component.ts +++ b/lib/process-services/process-list/components/process-filters.component.ts @@ -16,18 +16,19 @@ */ import { AppsProcessService } from '@alfresco/adf-core'; -import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core'; +import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core'; import { ProcessInstanceFilterRepresentation, UserProcessInstanceFilterRepresentation } from 'alfresco-js-api'; import { Observable } from 'rxjs'; import { FilterProcessRepresentationModel } from '../models/filter-process.model'; import { ProcessFilterService } from './../services/process-filter.service'; +import { IconModel } from '../../app-list/icon.model'; @Component({ selector: 'adf-process-instance-filters', templateUrl: './process-filters.component.html', styleUrls: ['process-filters.component.scss'] }) -export class ProcessFiltersComponent implements OnChanges { +export class ProcessFiltersComponent implements OnInit, OnChanges { /** The parameters to filter the task filter. If there is no match then the default one * (ie, the first filter in the list) is selected. @@ -69,10 +70,16 @@ export class ProcessFiltersComponent implements OnChanges { filters: UserProcessInstanceFilterRepresentation [] = []; + private iconsMDL: IconModel; + constructor(private processFilterService: ProcessFilterService, private appsProcessService: AppsProcessService) { } + ngOnInit() { + this.iconsMDL = new IconModel(); + } + ngOnChanges(changes: SimpleChanges) { const appId = changes['appId']; const appName = changes['appName']; @@ -204,4 +211,11 @@ export class ProcessFiltersComponent implements OnChanges { private isCurrentFilterEmpty(): boolean { return this.currentFilter === undefined || null; } + + /** + * Return current filter icon + */ + getFilterIcon(icon): string { + return this.iconsMDL.mapGlyphiconToMaterialDesignIcons(icon); + } }