inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* task filters icons added

* test fix

* process filters icons added
This commit is contained in:
bbcodrin 2018-09-14 19:59:59 +03:00 committed by Eugenio Romano
parent a6e61ac3a4
commit 6ac0346039
4 changed files with 56 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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)">

2
lib/process-services/process-list/components/process-filters.component.html
View File

@ -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>

40
lib/process-services/process-list/components/process-filters.component.spec.ts
View File

@ -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();
});
});
});

18
lib/process-services/process-list/components/process-filters.component.ts
View File

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