[ADF-3415] Process filter - icons added (#3705)

* task filters icons added

* test fix

* process filters icons added

demo-shell/src/app/components/process-service/process-service.component.html

@@ -131,8 +131,9 @@
                                              [headingIcon]="'assessment'">
                             <adf-process-instance-filters
                                 #activitiprocessfilter
-                                [filterParam]="filterSelected"
                                 [appId]="appId"
+                                [filterParam]="filterSelected"
+                                [showIcon]="false"
                                 (filterClick)="onProcessFilterChange($event)"
                                 (filterSelected)="onProcessFilterChange($event)"
                                 (success)="onSuccessProcessFilterList($event)">

lib/process-services/process-list/components/process-filters.component.html

@@ -2,7 +2,7 @@
     <mat-list class="adf-menu-list">
         <mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
                         class="adf-filters__entry" [class.active]="currentFilter === filter">
-            <mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">assignment</mat-icon>
+            <mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon>
             <span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
         </mat-list-item>
     </mat-list>

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);
+        processFilterService = TestBed.get(ProcessFilterService);
-        appsProcessService = new AppsProcessService(null, null);
+        appsProcessService = TestBed.get(AppsProcessService);
-        filterList = new ProcessFiltersComponent(processFilterService, 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();
+        });
+    });
 });

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);
+    }
 }