From 1ff4b3a322b755e2761d3113e06f7a1d940ba8be Mon Sep 17 00:00:00 2001 From: bbcodrin Date: Mon, 10 Sep 2018 13:48:39 +0300 Subject: [PATCH] [ADF-3397] Task filter - icons added (#3703) * task filters icons added * test fix --- lib/process-services/app-list/icon.model.ts | 7 ++-- .../components/task-filters.component.html | 2 +- .../components/task-filters.component.spec.ts | 36 +++++++++++++++++++ .../components/task-filters.component.ts | 20 ++++++++--- 4 files changed, 57 insertions(+), 8 deletions(-) diff --git a/lib/process-services/app-list/icon.model.ts b/lib/process-services/app-list/icon.model.ts index df9446988f..ee745ad7a2 100644 --- a/lib/process-services/app-list/icon.model.ts +++ b/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'); } } diff --git a/lib/process-services/task-list/components/task-filters.component.html b/lib/process-services/task-list/components/task-filters.component.html index 41569373cb..d10cbb7da3 100644 --- a/lib/process-services/task-list/components/task-filters.component.html +++ b/lib/process-services/task-list/components/task-filters.component.html @@ -2,7 +2,7 @@ - assignment + {{getFilterIcon(filter.icon)}} {{filter.name}} diff --git a/lib/process-services/task-list/components/task-filters.component.spec.ts b/lib/process-services/task-list/components/task-filters.component.spec.ts index 8f63ef4eb6..e98b70b0b5 100644 --- a/lib/process-services/task-list/components/task-filters.component.spec.ts +++ b/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(); + }); + }); }); diff --git a/lib/process-services/task-list/components/task-filters.component.ts b/lib/process-services/task-list/components/task-filters.component.ts index 5839b9f699..05fc1e1f2d 100644 --- a/lib/process-services/task-list/components/task-filters.component.ts +++ b/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; @@ -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); + } }