[ADF-3397] Task filter - icons added (#3703)

* task filters icons added

* test fix

lib/process-services/app-list/icon.model.ts

@@ -50,7 +50,7 @@ export class IconModel {
         this.iconsMDL.set('glyphicon-user', 'person');
         this.iconsMDL.set('glyphicon-film', 'movie_creation');
         this.iconsMDL.set('glyphicon-th-large', 'view_comfy');
-        this.iconsMDL.set('glyphicon-th', 'view_compact');
+        this.iconsMDL.set('glyphicon-th', 'dashboard');
         this.iconsMDL.set('glyphicon-th-list', 'list');
         this.iconsMDL.set('glyphicon-ok', 'done');
         this.iconsMDL.set('glyphicon-remove', 'cancel');
@@ -114,7 +114,7 @@ export class IconModel {
         this.iconsMDL.set('glyphicon-warning-sign', 'warning');
         this.iconsMDL.set('glyphicon-plane', 'airplanemode_active');
         this.iconsMDL.set('glyphicon-calendar', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
-        this.iconsMDL.set('glyphicon-random', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
+        this.iconsMDL.set('glyphicon-random', 'shuffle');
         this.iconsMDL.set('glyphicon-comment', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
         this.iconsMDL.set('glyphicon-magnet', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
         this.iconsMDL.set('glyphicon-retweet', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
@@ -142,7 +142,7 @@ export class IconModel {
         this.iconsMDL.set('glyphicon-gbp', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
         this.iconsMDL.set('glyphicon-sort', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
         this.iconsMDL.set('glyphicon-flash', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
-        this.iconsMDL.set('glyphicon-record', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
+        this.iconsMDL.set('glyphicon-record', 'radio_button_checked');
         this.iconsMDL.set('glyphicon-save', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
         this.iconsMDL.set('glyphicon-open', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
         this.iconsMDL.set('glyphicon-saved', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
@@ -158,5 +158,6 @@ export class IconModel {
         this.iconsMDL.set('glyphicon-cloud-upload', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
         this.iconsMDL.set('glyphicon-tree-conifer', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
         this.iconsMDL.set('glyphicon-tree-deciduous', IconModel.DEFAULT_TASKS_APP_MATERIAL_ICON);
+        this.iconsMDL.set('glyphicon-align-left', 'format_align_left');
     }
 }

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

@@ -2,7 +2,7 @@
     <mat-list class="adf-menu-list">
         <mat-list-item (click)="selectFilterAndEmit(filter)" *ngFor="let filter of filters"
                       class="adf-filters__entry" [class.active]="currentFilter === filter">
-            <mat-icon *ngIf="hasIcon" matListIcon class="adf-filters__entry-icon">assignment</mat-icon>
+            <mat-icon *ngIf="hasIcon" 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/task-list/components/task-filters.component.spec.ts

@@ -24,6 +24,7 @@ import { TaskListService } from '../services/tasklist.service';
 import { TaskFilterService } from '../services/task-filter.service';
 import { TaskFiltersComponent } from './task-filters.component';
 import { ProcessTestingModule } from '../../testing/process.testing.module';
+import { By } from '@angular/platform-browser';
 
 describe('TaskFiltersComponent', () => {
 
@@ -34,16 +35,19 @@ describe('TaskFiltersComponent', () => {
     let fakeGlobalFilter = [];
     fakeGlobalFilter.push(new FilterRepresentationModel({
         name: 'FakeInvolvedTasks',
+        icon: 'glyphicon-align-left',
         id: 10,
         filter: { state: 'open', assignment: 'fake-involved' }
     }));
     fakeGlobalFilter.push(new FilterRepresentationModel({
         name: 'FakeMyTasks1',
+        icon: 'glyphicon-ok-sign',
         id: 11,
         filter: { state: 'open', assignment: 'fake-assignee' }
     }));
     fakeGlobalFilter.push(new FilterRepresentationModel({
         name: 'FakeMyTasks2',
+        icon: 'glyphicon-inbox',
         id: 12,
         filter: { state: 'open', assignment: 'fake-assignee' }
     }));
@@ -350,4 +354,36 @@ describe('TaskFiltersComponent', () => {
 
         expect(component.currentFilter).toBe(filter);
     }));
+
+    it('should attach specific icon for each filter if hasIcon is true', (done) => {
+        spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(from(fakeGlobalFilterPromise));
+        component.hasIcon = true;
+        let change = new SimpleChange(undefined, 1, true);
+        component.ngOnChanges({ 'appId': change });
+        fixture.detectChanges();
+        fixture.whenStable().then(() => {
+            fixture.detectChanges();
+            expect(component.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('format_align_left');
+            expect(filters[1].nativeElement.innerText).toContain('check_circle');
+            expect(filters[2].nativeElement.innerText).toContain('inbox');
+            done();
+        });
+    });
+
+    it('should not attach icons for each filter if hasIcon is false', (done) => {
+        spyOn(taskFilterService, 'getTaskListFilters').and.returnValue(from(fakeGlobalFilterPromise));
+        component.hasIcon = false;
+        let change = new SimpleChange(undefined, 1, true);
+        component.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/task-list/components/task-filters.component.ts

@@ -21,12 +21,13 @@ import { Observable } from 'rxjs';
 import { FilterParamsModel, FilterRepresentationModel } from '../models/filter.model';
 import { TaskFilterService } from './../services/task-filter.service';
 import { TaskListService } from './../services/tasklist.service';
+import { IconModel } from '../../app-list/icon.model';
 
 /**
- * @deprecated: in 2.4.0 'adf-filters' and 'taskListService-filters' selectors were deprecated, use adf-task-filters instead.
+ * @deprecated: in 2.4.0 'adf-filters' selector was deprecated, use adf-task-filters instead.
  */
 @Component({
-    selector: 'adf-task-filters, adf-filters, taskListService-filters',
+    selector: 'adf-task-filters, adf-filters',
     templateUrl: './task-filters.component.html',
     styleUrls: ['task-filters.component.scss']
 })
@@ -60,7 +61,7 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
 
     /** Toggles display of the filter's icon. */
     @Input()
-    hasIcon: boolean = true;
+    hasIcon: boolean;
 
     filter$: Observable<FilterRepresentationModel>;
 
@@ -68,12 +69,16 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
 
     filters: FilterRepresentationModel [] = [];
 
+    private iconsMDL: IconModel;
+
     constructor(private taskFilterService: TaskFilterService,
                 private taskListService: TaskListService,
                 private appsProcessService: AppsProcessService) {
     }
 
-    ngOnInit() { }
+    ngOnInit() {
+        this.iconsMDL = new IconModel();
+    }
 
     ngOnChanges(changes: SimpleChanges) {
         const appName = changes['appName'];
@@ -226,4 +231,11 @@ export class TaskFiltersComponent implements OnInit, OnChanges {
         this.filters = [];
         this.currentFilter = undefined;
     }
+
+    /**
+     * Return current filter icon
+     */
+    getFilterIcon(icon): string {
+        return this.iconsMDL.mapGlyphiconToMaterialDesignIcons(icon);
+    }
 }