[ADF-3883] Improve edit-process-filter-cloud by adding inputs to control filters, sort and actions (#4127)

* [ADF-3883] Improve edit-process-filter-cloud by adding inputs to control filters, sort and actions * Fixed translate keys

* * Added more properties to the editProcessModel

* Fix FIlterOption model

* Fix import model name

* * After rebase* Cherry pick * Updated doc

* Revert commit

* Revert changes

* * Removed obervalu from model* Added edit process/task filter to the demo shell* Refacotred edit task/process filter * Updated test to the recent changes

* * Fixed failing e2e tests * Added data-automation-id

* * After rebase

* * Modified ProcessFilterActionType model* Added condition to get the currect filter after save as* Changed column to sort in the en.json, removed unused keys* Improved onSave editProcessfilter method * imported missing groupModule in the process-service-cloud module

* * Fixed e2e test
This commit is contained in:
siva kumar
2019-01-29 18:18:11 +05:30
committed by Maurizio Vitale
parent 618929cefb
commit ea733fc996
29 changed files with 802 additions and 290 deletions

View File

@@ -126,21 +126,30 @@
},
"ADF_CLOUD_EDIT_PROCESS_FILTER": {
"TITLE": "Customize your filter",
"STATUS": "Select a status",
"ASSIGNMENT": "ASSIGNMENT",
"COLUMN": "Select a column",
"DIRECTION": "Select a direction",
"LABEL": {
"APP_NAME": "ApplicationName",
"STATUS": "Status",
"INITIATOR": "Initiator",
"ASSIGNMENT": "Assignment",
"SORT": "Sort",
"DIRECTION": "Direction",
"PROCESS_DEF_ID": "ProcessDefinitionId",
"PROCESS_DEF_KEY": "ProcessDefinitionKey",
"PROCESS_INS_ID": "ProcessInstanceId",
"START_DATE": "StartDate",
"LAST_MODIFIED": "LastModified",
"LAST_MODIFIED_DATE_FORM": "LastModifiedFrom",
"LAST_MODIFIED_TO": "LastModifiedTo",
"PROCESS_NAME": "ProcessName"
},
"ERROR": {
"DATE": "Date format DD/MM/YYYY"
},
"TOOL_TIP": {
"SAVE": "Save filter",
"SAVE_AS": "Save filter as",
"DELETE": "Delete filter"
},
"LABEL": {
"STATUS": "Status",
"ASSIGNMENT": "Assignment",
"COLUMN": "Column",
"DIRECTION": "Direction"
},
"DIALOG": {
"TITLE": "Save filter as",
"SAVE": "SAVE",

View File

@@ -20,12 +20,14 @@ import { TRANSLATION_PROVIDER } from '@alfresco/adf-core';
import { AppListCloudModule } from './app/app-list-cloud.module';
import { TaskCloudModule } from './task/task-cloud.module';
import { ProcessCloudModule } from './process/process-cloud.module';
import { GroupCloudModule } from './group/group-cloud.module';
@NgModule({
imports: [
AppListCloudModule,
ProcessCloudModule,
TaskCloudModule
TaskCloudModule,
GroupCloudModule
],
providers: [
{
@@ -40,7 +42,8 @@ import { ProcessCloudModule } from './process/process-cloud.module';
exports: [
AppListCloudModule,
ProcessCloudModule,
TaskCloudModule
TaskCloudModule,
GroupCloudModule
]
})
export class ProcessServicesCloudModule { }

View File

@@ -1,60 +1,65 @@
<mat-accordion *ngIf="processFilter">
<mat-expansion-panel>
<mat-expansion-panel (afterExpand)="onExpand($event)" (closed)="onClose($event)">
<mat-expansion-panel-header id="adf-edit-process-filter-expansion-header">
<mat-panel-title id="adf-edit-process-filter-title-id">{{processFilter.name | translate}}</mat-panel-title>
<mat-panel-description id="adf-edit-process-filter-sub-title-id">
{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}
<mat-panel-title fxLayoutAlign="space-between center" id="adf-edit-process-filter-title-id">{{processFilter.name | translate}}</mat-panel-title>
<mat-panel-description fxLayoutAlign="space-between center" id="adf-edit-process-filter-sub-title-id">
<span *ngIf="showTitle"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>
<div *ngIf="showActions()" class="adf-cloud-edit-process-filter-actions">
<ng-container *ngIf="toggleFilterActions">
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.TOOL_TIP.SAVE' | translate}}" [disabled]="!formHasBeenChanged" id="adf-save-id" (click)="onSave()">
<mat-icon>save</mat-icon>
</button>
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.TOOL_TIP.SAVE_AS' | translate}}" [disabled]="!formHasBeenChanged" id="adf-save-as-id" (click)="onSaveAs()">
<mat-icon>unarchive</mat-icon>
</button>
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.TOOL_TIP.DELETE' | translate}}" id="adf-delete-id" (click)="onDelete()">
<mat-icon>delete</mat-icon>
</button>
</ng-container>
</div>
</mat-panel-description>
</mat-expansion-panel-header>
<form [formGroup]="editProcessFilterForm">
<div fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between center" fxLayoutGap="10px">
<mat-form-field [floatLabel]="'auto'" fxFlex data-automation-id="status">
<mat-select placeholder="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.STATUS' | translate}}" formControlName="state" id="adf-process-filter-state-id">
<mat-option *ngFor="let state of status" [value]="state.value">
{{ state.label }}
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start center">
<ng-container *ngFor="let processFilterProperty of processFilterProperties">
<mat-form-field fxFlex="23%" *ngIf="isSelectType(processFilterProperty)" [attr.data-automation-id]="processFilterProperty.key">
<mat-select
placeholder="{{processFilterProperty.label | translate}}"
[formControlName]="processFilterProperty.key"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key">
<mat-option *ngFor="let propertyOption of processFilterProperty.options" [value]="propertyOption.value" [attr.data-automation-id]="'adf-cloud-edit-process-property-options' + processFilterProperty.key">
{{ propertyOption.label }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field *ngIf="false" [floatLabel]="'auto'" fxFlex>
<mat-form-field fxFlex="23%" *ngIf="isTextType(processFilterProperty)" [attr.data-automation-id]="processFilterProperty.key">
<input matInput
formControlName="appName"
type="text"
id="adf-process-filter-appname-id"
placeholder="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.APP_NAME' | translate}}"/>
[formControlName]="processFilterProperty.key"
type="text"
placeholder="{{processFilterProperty.label | translate}}"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
</mat-form-field>
<mat-form-field *ngIf="false" [floatLabel]="'auto'" fxFlex>
<input matInput
formControlName="processDefinitionId"
type="text"
id="adf-process-filter-process-definition-id"
placeholder="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_DEF_ID' | translate}}"/>
<mat-form-field fxFlex="23%" *ngIf="isDateType(processFilterProperty)" [attr.data-automation-id]="processFilterProperty.key">
<mat-label>{{processFilterProperty.label | translate}}</mat-label>
<input
matInput
(keyup)="onDateChanged($event.srcElement.value, processFilterProperty)"
(dateChange)="onDateChanged($event.value, processFilterProperty)"
[matDatepicker]="dateController"
placeholder="{{processFilterProperty.label | translate}}"
[formControlName]="processFilterProperty.key"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key">
<mat-datepicker-toggle matSuffix [for]="dateController" [attr.data-automation-id]="'adf-cloud-edit-process-property-date-toggle' + processFilterProperty.key"></mat-datepicker-toggle>
<mat-datepicker #dateController [attr.data-automation-id]="'adf-cloud-edit-process-property-date-picker' + processFilterProperty.key"></mat-datepicker>
<div class="adf-edit-process-filter-date-error-container">
<div *ngIf="hasError(processFilterProperty)">
<div class="adf-error-text">{{'ADF_CLOUD_EDIT_PROCESS_FILTER.ERROR.DATE' | translate}}</div>
<mat-icon class="adf-error-icon">warning</mat-icon>
</div>
</div>
</mat-form-field>
<mat-form-field [floatLabel]="'auto'" fxFlex data-automation-id="sort">
<mat-select placeholder="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.COLUMN' | translate}}" formControlName="sort" id="adf-process-filter-sort-id">
<mat-option *ngFor="let column of columns" [value]="column.key">
{{ column.label }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [floatLabel]="'auto'" fxFlex data-automation-id="order">
<mat-select placeholder="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DIRECTION' | translate}}" formControlName="order" id="adf-process-filter-order-id">
<mat-option *ngFor="let direction of directions" [value]="direction">
{{ direction }}
</mat-option>
</mat-select>
</mat-form-field>
<div>
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.TOOL_TIP.SAVE' | translate}}" [disabled]="!formHasBeenChanged" id="adf-save-id" (click)="onSave()">
<mat-icon>save</mat-icon>
</button>
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.TOOL_TIP.SAVE_AS' | translate}}" [disabled]="!formHasBeenChanged" id="adf-save-as-id" (click)="onSaveAs()">
<mat-icon>unarchive</mat-icon>
</button>
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_PROCESS_FILTER.TOOL_TIP.DELETE' | translate}}" id="adf-delete-id" (click)="onDelete()">
<mat-icon>delete</mat-icon>
</button>
</div>
</div>
</ng-container>
</div>
</form>
</mat-expansion-panel>
</mat-accordion>

View File

@@ -0,0 +1,31 @@
@mixin adf-cloud-edit-process-filter-theme($theme) {
$warn: map-get($theme, warn);
.adf-edit-process-filter-date-error-container {
position: absolute;
height: 20px;
margin-top: 12px;
width: 100%;
& > div {
display: flex;
flex-flow: row;
justify-content: flex-start;
}
.adf-error-text {
padding-right: 8px;
height: 16px;
font-size: 11px;
line-height: 1.33;
color: mat-color($warn);
width: auto;
}
.adf-error-icon {
font-size: 16px;
color: mat-color($warn);
}
}
}

View File

@@ -19,7 +19,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { SimpleChange } from '@angular/core';
import { By } from '@angular/platform-browser';
import { setupTestBed, IdentityUserService } from '@alfresco/adf-core';
import { setupTestBed } from '@alfresco/adf-core';
import { ProcessServiceCloudTestingModule } from '../../../testing/process-service-cloud.testing.module';
import { MatDialog } from '@angular/material';
import { of } from 'rxjs';
@@ -28,20 +28,24 @@ import { EditProcessFilterCloudComponent } from './edit-process-filter-cloud.com
import { ProcessFiltersCloudModule } from '../process-filters-cloud.module';
import { ProcessFilterCloudModel } from '../models/process-filter-cloud.model';
import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
import { fakeApplicationInstance } from './../../../app/mock/app-model.mock';
describe('EditProcessFilterCloudComponent', () => {
let component: EditProcessFilterCloudComponent;
let service: ProcessFilterCloudService;
let identityService: IdentityUserService;
let fixture: ComponentFixture<EditProcessFilterCloudComponent>;
let dialog: MatDialog;
let appsService: AppsProcessCloudService;
let getRunningApplicationsSpy: jasmine.Spy;
let getProcessFilterByIdSpy: jasmine.Spy;
let fakeFilter = new ProcessFilterCloudModel({
name: 'FakeRunningProcess',
icon: 'adjust',
id: 10,
id: 'mock-process-filter-id',
state: 'RUNNING',
appName: 'app-name',
appName: 'mock-app-name',
processDefinitionId: 'process-def-id',
assignment: 'fake-involved',
order: 'ASC',
@@ -57,14 +61,15 @@ describe('EditProcessFilterCloudComponent', () => {
fixture = TestBed.createComponent(EditProcessFilterCloudComponent);
component = fixture.componentInstance;
service = TestBed.get(ProcessFilterCloudService);
identityService = TestBed.get(IdentityUserService);
appsService = TestBed.get(AppsProcessCloudService);
dialog = TestBed.get(MatDialog);
spyOn(dialog, 'open').and.returnValue({ afterClosed() { return of({
action: ProcessFilterDialogCloudComponent.ACTION_SAVE,
icon: 'icon',
name: 'fake-name'
}); }});
spyOn(service, 'getProcessFilterById').and.returnValue(fakeFilter);
getProcessFilterByIdSpy = spyOn(service, 'getProcessFilterById').and.returnValue(fakeFilter);
getRunningApplicationsSpy = spyOn(appsService, 'getDeployedApplicationsByStatus').and.returnValue(of(fakeApplicationInstance));
});
it('should create EditProcessFilterCloudComponent', () => {
@@ -72,12 +77,12 @@ describe('EditProcessFilterCloudComponent', () => {
});
it('should fetch process instance filter by id', async(() => {
let change = new SimpleChange(undefined, '10', true);
component.ngOnChanges({ 'id': change });
fixture.detectChanges();
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(getProcessFilterByIdSpy).toHaveBeenCalled();
expect(component.processFilter.name).toEqual('FakeRunningProcess');
expect(component.processFilter.icon).toEqual('adjust');
expect(component.processFilter.state).toEqual('RUNNING');
@@ -87,27 +92,26 @@ describe('EditProcessFilterCloudComponent', () => {
}));
it('should display filter name as title', () => {
let change = new SimpleChange(undefined, '10', true);
component.ngOnChanges({ 'id': change });
fixture.detectChanges();
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
fixture.detectChanges();
const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-title-id');
const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-process-filter-sub-title-id');
expect(title).toBeDefined();
expect(subTitle).toBeDefined();
expect(title.innerText).toEqual('FakeRunningProcess');
expect(subTitle.innerText).toEqual('ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE');
expect(subTitle.innerText.trim()).toEqual('ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE');
});
describe('EditProcessFilter form', () => {
beforeEach(() => {
let change = new SimpleChange(undefined, '10', true);
component.ngOnChanges({ 'id': change });
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
fixture.detectChanges();
});
it('should define editProcessFilter form', () => {
it('should defined editProcessFilter form', () => {
expect(component.editProcessFilterForm).toBeDefined();
});
@@ -129,6 +133,7 @@ describe('EditProcessFilterCloudComponent', () => {
}));
it('should disable save button if the process filter is not changed', async(() => {
component.toggleFilterActions = true;
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
@@ -139,6 +144,7 @@ describe('EditProcessFilterCloudComponent', () => {
}));
it('should disable saveAs button if the process filter is not changed', async(() => {
component.toggleFilterActions = true;
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
@@ -149,6 +155,7 @@ describe('EditProcessFilterCloudComponent', () => {
}));
it('should enable delete button by default', async(() => {
component.toggleFilterActions = true;
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
@@ -159,33 +166,35 @@ describe('EditProcessFilterCloudComponent', () => {
}));
it('should display current process filter details', async(() => {
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
let stateElement = fixture.debugElement.nativeElement.querySelector('#adf-process-filter-state-id');
let sortElement = fixture.debugElement.nativeElement.querySelector('#adf-process-filter-sort-id');
let orderElement = fixture.debugElement.nativeElement.querySelector('#adf-process-filter-order-id');
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
let stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-state"]');
let sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"]');
let orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-order"]');
expect(stateElement).toBeDefined();
expect(sortElement).toBeDefined();
expect(orderElement).toBeDefined();
expect(stateElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.STATUS');
expect(sortElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.COLUMN');
expect(orderElement.innerText.trim()).toBe('ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DIRECTION');
expect(stateElement.innerText.trim()).toBe('RUNNING');
expect(sortElement.innerText.trim()).toBe('ID');
expect(orderElement.innerText.trim()).toBe('ASC');
});
}));
it('should enable save button if the process filter is changed', async(() => {
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const stateElement = fixture.debugElement.query(By.css('#adf-process-filter-state-id .mat-select-trigger')).nativeElement;
let stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-state"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-id');
const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
options[2].nativeElement.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-id');
const options = fixture.debugElement.queryAll(By.css('.mat-option-text'));
options[2].nativeElement.click();
fixture.detectChanges();
expect(saveButton.disabled).toBe(false);
});
}));
@@ -194,7 +203,7 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const stateElement = fixture.debugElement.query(By.css('#adf-process-filter-state-id .mat-select-trigger')).nativeElement;
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-state"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -207,7 +216,7 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const sortElement = fixture.debugElement.query(By.css('#adf-process-filter-sort-id .mat-select-trigger')).nativeElement;
const sortElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-sort"] .mat-select-trigger');
sortElement.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -220,7 +229,7 @@ describe('EditProcessFilterCloudComponent', () => {
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const orderElement = fixture.debugElement.query(By.css('#adf-process-filter-order-id .mat-select-trigger')).nativeElement;
const orderElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-order"] .mat-select-trigger');
orderElement.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -228,48 +237,117 @@ describe('EditProcessFilterCloudComponent', () => {
expect(orderOptions.length).toEqual(2);
});
}));
it('should able to build a editProcessFilter form with default properties if input is empty', async(() => {
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
component.filterProperties = [];
fixture.detectChanges();
fixture.whenStable().then(() => {
const stateController = component.editProcessFilterForm.get('state');
const sortController = component.editProcessFilterForm.get('sort');
const orderController = component.editProcessFilterForm.get('order');
fixture.detectChanges();
expect(component.processFilterProperties).toBeDefined();
expect(component.processFilterProperties.length).toBe(3);
expect(component.editProcessFilterForm).toBeDefined();
expect(stateController).toBeDefined();
expect(sortController).toBeDefined();
expect(orderController).toBeDefined();
expect(stateController.value).toBe('RUNNING');
expect(sortController.value).toBe('id');
expect(orderController.value).toBe('ASC');
});
}));
});
describe('Process filterProperties', () => {
beforeEach(() => {
component.filterProperties = ['appName', 'processInstanceId', 'processName'];
});
it('should able to fetch running applications when appName property defined in the input', async(() => {
fixture.detectChanges();
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
const appController = component.editProcessFilterForm.get('appName');
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(getRunningApplicationsSpy).toHaveBeenCalled();
expect(appController).toBeDefined();
expect(appController.value).toBe('mock-app-name');
});
}));
it('should able to build a editProcessFilter form with given input properties', async(() => {
fixture.detectChanges();
getProcessFilterByIdSpy.and.returnValue({ appName: 'mock-app-name', processInstanceId: 'process-instance-id', processName: 'mock-process-name' });
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
fixture.detectChanges();
const appController = component.editProcessFilterForm.get('appName');
const processNameController = component.editProcessFilterForm.get('processName');
const processInsIdController = component.editProcessFilterForm.get('processInstanceId');
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(getRunningApplicationsSpy).toHaveBeenCalled();
expect(component.processFilterProperties).toBeDefined();
expect(component.editProcessFilterForm).toBeDefined();
expect(component.processFilterProperties.length).toBe(3);
expect(appController).toBeDefined();
expect(processNameController).toBeDefined();
expect(processInsIdController).toBeDefined();
expect(appController.value).toBe('mock-app-name');
});
}));
});
describe('edit filter actions', () => {
beforeEach(() => {
let change = new SimpleChange(undefined, '10', true);
component.ngOnChanges({ 'id': change });
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
fixture.detectChanges();
});
it('should emit save event and save the filter on click save button', async(() => {
spyOn(identityService, 'getCurrentUserInfo').and.returnValue({username: 'currentUser'});
component.toggleFilterActions = true;
const saveFilterSpy = spyOn(service, 'updateFilter').and.returnValue(fakeFilter);
let saveSpy: jasmine.Spy = spyOn(component.action, 'emit');
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const stateElement = fixture.debugElement.query(By.css('#adf-process-filter-state-id .mat-select-trigger')).nativeElement;
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-state"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-id');
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
stateOptions[2].nativeElement.click();
saveButton.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-id');
const stateOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
stateOptions[2].nativeElement.click();
fixture.detectChanges();
saveButton.click();
fixture.detectChanges();
expect(saveFilterSpy).toHaveBeenCalled();
expect(saveSpy).toHaveBeenCalled();
});
}));
it('should emit delete event and delete the filter on click of delete button', async(() => {
spyOn(identityService, 'getCurrentUserInfo').and.returnValue({username: 'currentUser'});
component.toggleFilterActions = true;
const deleteFilterSpy = spyOn(service, 'deleteFilter').and.callThrough();
let deleteSpy: jasmine.Spy = spyOn(component.action, 'emit');
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const stateElement = fixture.debugElement.query(By.css('#adf-process-filter-state-id .mat-select-trigger')).nativeElement;
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-state"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
let deleteButton = fixture.debugElement.nativeElement.querySelector('#adf-delete-id');
const deleteButton = fixture.debugElement.nativeElement.querySelector('#adf-delete-id');
deleteButton.click();
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -279,13 +357,15 @@ describe('EditProcessFilterCloudComponent', () => {
}));
it('should emit saveAs event and add filter on click saveAs button', async(() => {
spyOn(identityService, 'getCurrentUserInfo').and.returnValue({username: 'currentUser'});
component.toggleFilterActions = true;
const saveAsFilterSpy = spyOn(service, 'addFilter').and.callThrough();
let saveAsSpy: jasmine.Spy = spyOn(component.action, 'emit');
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
const expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
const stateElement = fixture.debugElement.query(By.css('#adf-process-filter-state-id .mat-select-trigger')).nativeElement;
fixture.detectChanges();
const stateElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-cloud-edit-process-property-state"] .mat-select-trigger');
stateElement.click();
fixture.detectChanges();
const saveButton = fixture.debugElement.nativeElement.querySelector('#adf-save-as-id');

View File

@@ -16,25 +16,34 @@
*/
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms';
import { ProcessFilterCloudModel, ProcessFilterActionType } from '../models/process-filter-cloud.model';
import { FormGroup, FormBuilder, AbstractControl } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { debounceTime, filter } from 'rxjs/operators';
import moment from 'moment-es6';
import { ApplicationInstanceModel } from '../../../app/models/application-instance.model';
import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
import { ProcessFilterCloudModel, ProcessFilterActionType, ProcessFilterProperties } from '../models/process-filter-cloud.model';
import { TranslationService } from '@alfresco/adf-core';
import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
import { ProcessFilterDialogCloudComponent } from './process-filter-dialog-cloud.component';
import { MatDialog } from '@angular/material';
@Component({
selector: 'adf-cloud-edit-process-filter',
templateUrl: './edit-process-filter-cloud.component.html',
styleUrls: ['./edit-process-filter-cloud.component.scss']
selector: 'adf-cloud-edit-process-filter',
templateUrl: './edit-process-filter-cloud.component.html',
styleUrls: ['./edit-process-filter-cloud.component.scss']
})
export class EditProcessFilterCloudComponent implements OnChanges {
public static ACTION_SAVE = 'SAVE';
public static ACTION_SAVE_AS = 'SAVE_AS';
public static ACTION_DELETE = 'DELETE';
public static APPLICATION_NAME: string = 'appName';
public static APP_RUNNING_STATUS: string = 'Running';
public static DEFAULT_PROCESS_FILTER_PROPERTIES = ['state', 'sort', 'order'];
public FORMAT_DATE: string = 'DD/MM/YYYY';
/** The name of the application. */
/** The name of the application. */
@Input()
appName: string;
@@ -42,6 +51,16 @@ export class EditProcessFilterCloudComponent implements OnChanges {
@Input()
id: string;
/** List of process filter properties to display */
@Input()
filterProperties: string[] = EditProcessFilterCloudComponent.DEFAULT_PROCESS_FILTER_PROPERTIES; // default ['state', 'sort', 'order']
@Input()
showFilterActions = true;
@Input()
showTitle = true;
/** Emitted when an process instance filter property changes. */
@Output()
filterChange: EventEmitter<ProcessFilterCloudModel> = new EventEmitter();
@@ -54,67 +73,129 @@ export class EditProcessFilterCloudComponent implements OnChanges {
changedProcessFilter: ProcessFilterCloudModel;
columns = [
{key: 'id', label: 'ID'},
{key: 'name', label: 'NAME'},
{key: 'status', label: 'STATUS'},
{key: 'startDate', label: 'START DATE'}
];
status = [
{label: 'ALL', value: ''},
{label: 'RUNNING', value: 'RUNNING'},
{label: 'COMPLETED', value: 'COMPLETED'}
{ value: 'id', label: 'ID' },
{ value: 'name', label: 'NAME' },
{ value: 'status', label: 'STATUS' },
{ value: 'startDate', label: 'START DATE' }
];
directions = ['ASC', 'DESC'];
status = [
{ label: 'ALL', value: '' },
{ label: 'RUNNING', value: 'RUNNING' },
{ label: 'COMPLETED', value: 'COMPLETED' }
];
directions = [{ label: 'ASC', value: 'ASC' }, { label: 'DESC', value: 'DESC' }];
applicationNames: any[] = [];
formHasBeenChanged = false;
editProcessFilterForm: FormGroup;
processFilterProperties: any[] = [];
toggleFilterActions: boolean = false;
constructor(
private formBuilder: FormBuilder,
public dialog: MatDialog,
private translateService: TranslationService,
private processFilterCloudService: ProcessFilterCloudService) {}
private processFilterCloudService: ProcessFilterCloudService,
private appsProcessCloudService: AppsProcessCloudService) { }
ngOnChanges(changes: SimpleChanges) {
const id = changes['id'];
if (id && id.currentValue !== id.previousValue) {
this.retrieveProcessFilter();
this.buildForm();
this.processFilterProperties = this.createAndFilterProperties();
this.buildForm(this.processFilterProperties);
}
}
/**
* Build process filter edit form
*/
buildForm() {
buildForm(processFilterProperties: ProcessFilterProperties[]) {
this.formHasBeenChanged = false;
this.editProcessFilterForm = this.formBuilder.group({
state: this.processFilter.state ? this.processFilter.state : '',
sort: this.processFilter.sort,
order: this.processFilter.order,
processDefinitionId: this.processFilter.processDefinitionId,
appName: this.processFilter.appName
});
this.editProcessFilterForm = this.formBuilder.group(this.getFormControlsConfig(processFilterProperties));
this.onFilterChange();
}
getFormControlsConfig(processFilterProperties: ProcessFilterProperties[]): any {
const properties = processFilterProperties.map((property: ProcessFilterProperties) => {
return { [property.key]: property.value };
});
return properties.reduce(((result, current) => Object.assign(result, current)), {});
}
/**
* Return process instance filter by application name and filter id
*/
retrieveProcessFilter() {
this.processFilter = this.processFilterCloudService.getProcessFilterById(this.appName, this.id);
retrieveProcessFilter(): ProcessFilterCloudModel {
return new ProcessFilterCloudModel(this.processFilterCloudService.getProcessFilterById(this.appName, this.id));
}
/**
* Check process instance filter changes
*/
onFilterChange() {
this.editProcessFilterForm.valueChanges.subscribe((formValues: ProcessFilterCloudModel) => {
this.changedProcessFilter = new ProcessFilterCloudModel(Object.assign({}, this.processFilter, formValues));
this.formHasBeenChanged = !this.compareFilters(this.changedProcessFilter, this.processFilter);
this.filterChange.emit(this.changedProcessFilter);
});
this.editProcessFilterForm.valueChanges
.pipe(debounceTime(500), filter(() => this.isFormValid()))
.subscribe((formValues: ProcessFilterCloudModel) => {
this.changedProcessFilter = new ProcessFilterCloudModel(Object.assign({}, this.processFilter, formValues));
this.formHasBeenChanged = !this.compareFilters(this.changedProcessFilter, this.processFilter);
this.filterChange.emit(this.changedProcessFilter);
});
}
createAndFilterProperties() {
this.checkMandatoryFilterProperties();
if (this.checkForApplicationNameProperty()) {
this.getRunningApplications();
}
this.processFilter = this.retrieveProcessFilter();
const defaultProperties = this.createProcessFilterProperties(this.processFilter);
return defaultProperties.filter((filterProperty: ProcessFilterProperties) => this.isValidProperty(this.filterProperties, filterProperty));
}
checkMandatoryFilterProperties() {
if (this.filterProperties === undefined || this.filterProperties.length === 0) {
this.filterProperties = EditProcessFilterCloudComponent.DEFAULT_PROCESS_FILTER_PROPERTIES;
}
}
checkForApplicationNameProperty(): boolean {
return this.filterProperties ? this.filterProperties.indexOf(EditProcessFilterCloudComponent.APPLICATION_NAME) >= 0 : false;
}
private isValidProperty(filterProperties: string[], filterProperty: ProcessFilterProperties): boolean {
return filterProperties ? filterProperties.indexOf(filterProperty.key) >= 0 : true;
}
isFormValid(): boolean {
return this.editProcessFilterForm.valid;
}
getPropertyController(property: ProcessFilterProperties): AbstractControl {
return this.editProcessFilterForm.get(property.key);
}
onDateChanged(newDateValue: any, dateProperty: ProcessFilterProperties) {
if (newDateValue) {
let momentDate;
if (typeof newDateValue === 'string') {
momentDate = moment(newDateValue, this.FORMAT_DATE, true);
} else {
momentDate = newDateValue;
}
if (momentDate.isValid()) {
this.getPropertyController(dateProperty).setValue(momentDate.toDate());
this.getPropertyController(dateProperty).setErrors(null);
} else {
this.getPropertyController(dateProperty).setErrors({ invalid: true });
}
}
}
hasError(property: ProcessFilterProperties): boolean {
return this.getPropertyController(property).errors && this.getPropertyController(property).errors.invalid;
}
/**
@@ -125,12 +206,24 @@ export class EditProcessFilterCloudComponent implements OnChanges {
return JSON.stringify(editedQuery).toLowerCase() === JSON.stringify(currentQuery).toLowerCase();
}
getRunningApplications() {
this.appsProcessCloudService.getDeployedApplicationsByStatus(EditProcessFilterCloudComponent.APP_RUNNING_STATUS)
.subscribe((applications: ApplicationInstanceModel[]) => {
if (applications && applications.length > 0) {
applications.map((application) => {
this.applicationNames.push({ label: application.name, value: application.name });
});
}
});
}
/**
* Save a process instance filter
*/
onSave() {
this.processFilterCloudService.updateFilter(this.changedProcessFilter);
this.action.emit({actionType: EditProcessFilterCloudComponent.ACTION_SAVE, id: this.changedProcessFilter.id});
this.action.emit({ actionType: EditProcessFilterCloudComponent.ACTION_SAVE, filter: this.changedProcessFilter });
this.formHasBeenChanged = this.compareFilters(this.changedProcessFilter, this.processFilter);
}
/**
@@ -138,7 +231,7 @@ export class EditProcessFilterCloudComponent implements OnChanges {
*/
onDelete() {
this.processFilterCloudService.deleteFilter(this.processFilter);
this.action.emit({actionType: EditProcessFilterCloudComponent.ACTION_DELETE, id: this.processFilter.id});
this.action.emit({ actionType: EditProcessFilterCloudComponent.ACTION_DELETE, filter: this.processFilter });
}
/**
@@ -152,19 +245,19 @@ export class EditProcessFilterCloudComponent implements OnChanges {
height: 'auto',
minWidth: '30%'
});
dialogRef.afterClosed().subscribe( (result) => {
dialogRef.afterClosed().subscribe((result) => {
if (result && result.action === ProcessFilterDialogCloudComponent.ACTION_SAVE) {
const filterId = Math.random().toString(36).substr(2, 9);
const filterKey = this.getSanitizeFilterName(result.name);
const newFilter = {
name: result.name,
icon: result.icon,
id: filterId,
key: 'custom-' + filterKey
};
const filter = Object.assign({}, this.changedProcessFilter, newFilter);
this.processFilterCloudService.addFilter(filter);
this.action.emit({actionType: EditProcessFilterCloudComponent.ACTION_SAVE_AS, id: filter.id});
name: result.name,
icon: result.icon,
id: filterId,
key: 'custom-' + filterKey
};
const resultFilter: ProcessFilterCloudModel = Object.assign({}, this.changedProcessFilter, newFilter);
this.processFilterCloudService.addFilter(resultFilter);
this.action.emit({ actionType: EditProcessFilterCloudComponent.ACTION_SAVE_AS, filter: resultFilter });
}
});
}
@@ -186,4 +279,115 @@ export class EditProcessFilterCloudComponent implements OnChanges {
const regExt = new RegExp(' ', 'g');
return name.replace(regExt, '-');
}
showActions(): boolean {
return this.showFilterActions;
}
onExpand(event: any) {
this.toggleFilterActions = true;
}
onClose(event: any) {
this.toggleFilterActions = false;
}
isDateType(property: ProcessFilterProperties): boolean {
return property.type === 'date';
}
isSelectType(property: ProcessFilterProperties): boolean {
return property.type === 'select';
}
isTextType(property: ProcessFilterProperties): boolean {
return property.type === 'text';
}
createProcessFilterProperties(currentProcessFilter: ProcessFilterCloudModel): ProcessFilterProperties[] {
return [
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.APP_NAME',
type: 'select',
key: 'appName',
value: currentProcessFilter.appName || '',
options: this.applicationNames
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.INITIATOR',
type: 'text',
key: 'initiator',
value: currentProcessFilter.initiator || ''
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.STATUS',
type: 'select',
key: 'state',
value: currentProcessFilter.state || this.status[0].value,
options: this.status
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.SORT',
type: 'select',
key: 'sort',
value: currentProcessFilter.sort || this.columns[0].value,
options: this.columns
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.DIRECTION',
type: 'select',
key: 'order',
value: currentProcessFilter.order || this.directions[0].value,
options: this.directions
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_NAME',
type: 'text',
key: 'processName',
value: currentProcessFilter.processName || ''
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_DEF_ID',
type: 'text',
key: 'processDefinitionId',
value: currentProcessFilter.processDefinitionId || ''
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_DEF_KEY',
type: 'text',
key: 'processDefinitionKey',
value: currentProcessFilter.processDefinitionKey || ''
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.PROCESS_INS_ID',
type: 'text',
key: 'processInstanceId',
value: ''
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.START_DATE',
type: 'date',
key: 'startDate',
value: ''
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.LAST_MODIFIED',
type: 'date',
key: 'lastModified',
value: ''
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.LAST_MODIFIED_DATE_FORM',
type: 'date',
key: 'lastModifiedFrom',
value: ''
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.LAST_MODIFIED_TO',
type: 'date',
key: 'lastModifiedTo',
value: ''
})
];
}
}

View File

@@ -21,11 +21,19 @@ export class ProcessFilterCloudModel {
key: string;
icon: string;
index: number;
processDefinitionId: string;
appName: string;
processName: string;
initiator: string;
state: string;
sort: string;
order: string;
processDefinitionId: string;
processDefinitionKey: string;
processInstanceId: string;
startDate: Date;
lastModified: Date;
lastModifiedTo: Date;
lastModifiedFrom: Date;
constructor(obj?: any) {
if (obj) {
@@ -35,15 +43,46 @@ export class ProcessFilterCloudModel {
this.icon = obj.icon || null;
this.index = obj.index || null;
this.appName = obj.appName || null;
this.processDefinitionId = obj.processDefinitionId || null;
this.processName = obj.processName || null;
this.initiator = obj.initiator || null;
this.state = obj.state || null;
this.sort = obj.sort || null;
this.order = obj.order || null;
this.processDefinitionId = obj.processDefinitionId || null;
this.processDefinitionKey = obj.processDefinitionKey || null;
this.processInstanceId = obj.processInstanceId || null;
this.startDate = obj.startDate || null;
this.lastModified = obj.lastModified || null;
this.lastModifiedTo = obj.lastModifiedTo || null;
this.lastModifiedFrom = obj.lastModifiedFrom || null;
}
}
}
export interface ProcessFilterActionType {
actionType: string;
id: string;
filter: ProcessFilterCloudModel;
}
export interface ProcessFilterOptions {
label?: string;
value?: string;
}
export class ProcessFilterProperties {
label: string;
type: string;
value: string;
key: string;
options: ProcessFilterOptions[];
constructor(obj?: any) {
if (obj) {
this.label = obj.label || null;
this.type = obj.type || null;
this.value = obj.value || '';
this.key = obj.key || null;
this.options = obj.options || null;
}
}
}

View File

@@ -27,6 +27,7 @@ import { ProcessFilterCloudService } from './services/process-filter-cloud.servi
import { HttpClientModule } from '@angular/common/http';
import { EditProcessFilterCloudComponent } from './components/edit-process-filter-cloud.component';
import { ProcessFilterDialogCloudComponent } from './components/process-filter-dialog-cloud.component';
import { AppListCloudModule } from './../../app/app-list-cloud.module';
@NgModule({
imports: [
FormsModule,
@@ -40,7 +41,8 @@ import { ProcessFilterDialogCloudComponent } from './components/process-filter-d
}
}),
FlexLayoutModule,
MaterialModule
MaterialModule,
AppListCloudModule
],
declarations: [ProcessFiltersCloudComponent, EditProcessFilterCloudComponent, ProcessFilterDialogCloudComponent],
exports: [ProcessFiltersCloudComponent, EditProcessFilterCloudComponent, ProcessFilterDialogCloudComponent],

View File

@@ -4,6 +4,7 @@
@import './../task/task-filters/components/edit-task-filter-cloud.component.scss';
@import './../process/process-list/components/process-list-cloud.component.scss';
@import './../task/start-task/components/start-task-cloud.component.scss';
@import './../process/process-filters/components/edit-process-filter-cloud.component.scss';
@import './../task/start-task/components/people-cloud/people-cloud.component.scss';
@import './../group/components/group-cloud.component';
@@ -13,6 +14,7 @@
@include adf-cloud-app-details-theme($theme);
@include adf-cloud-task-filters-theme($theme);
@include adf-cloud-edit-task-filters-theme($theme);
@include adf-cloud-edit-process-filter-theme($theme);
@include adf-process-filters-cloud-theme($theme);
@include adf-start-task-cloud-theme($theme);
@include adf-cloud-people-theme($theme);

View File

@@ -4,8 +4,8 @@
<mat-panel-title fxLayoutAlign="space-between center" id="adf-edit-task-filter-title-id">{{taskFilter.name | translate}}</mat-panel-title>
<mat-panel-description fxLayoutAlign="space-between center" id="adf-edit-task-filter-sub-title-id">
<span *ngIf="showTitle">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>
<div *ngIf="toggleActions()" class="adf-cloud-edit-task-filter-actions">
<ng-container *ngIf="showFilterActions">
<div *ngIf="showActions()" class="adf-cloud-edit-task-filter-actions">
<ng-container *ngIf="toggleFilterActions">
<button mat-icon-button matTooltip="{{'ADF_CLOUD_EDIT_TASK_FILTER.TOOL_TIP.SAVE' | translate}}" id="adf-save-id" [disabled]="!formHasBeenChanged" (click)="onSave()">
<mat-icon>save</mat-icon>
</button>
@@ -22,24 +22,24 @@
<form [formGroup]="editTaskFilterForm">
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start center">
<ng-container *ngFor="let taskFilterProperty of taskFilterProperties">
<mat-form-field fxFlex="23%" *ngIf="isSelectType(taskFilterProperty)">
<mat-form-field fxFlex="23%" *ngIf="isSelectType(taskFilterProperty)" [attr.data-automation-id]="taskFilterProperty.key">
<mat-select
placeholder="{{taskFilterProperty.label | translate}}"
[formControlName]="taskFilterProperty.key"
[attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key">
<mat-option *ngFor="let propertyOption of taskFilterProperty.options$ | async" [value]="propertyOption.value" [attr.data-automation-id]="'adf-cloud-edit-task-property-options' + taskFilterProperty.key">
<mat-option *ngFor="let propertyOption of taskFilterProperty.options" [value]="propertyOption.value" [attr.data-automation-id]="'adf-cloud-edit-task-property-options' + taskFilterProperty.key">
{{ propertyOption.label }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="23%" *ngIf="isTextType(taskFilterProperty)">
<mat-form-field fxFlex="23%" *ngIf="isTextType(taskFilterProperty)" [attr.data-automation-id]="taskFilterProperty.key">
<input matInput
[formControlName]="taskFilterProperty.key"
type="text"
placeholder="{{taskFilterProperty.label | translate}}"
[attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key"/>
</mat-form-field>
<mat-form-field fxFlex="23%" *ngIf="isDateType(taskFilterProperty)">
<mat-form-field fxFlex="23%" *ngIf="isDateType(taskFilterProperty)" [attr.data-automation-id]="taskFilterProperty.key">
<mat-label>{{taskFilterProperty.label | translate}}</mat-label>
<input
matInput

View File

@@ -39,14 +39,14 @@ describe('EditTaskFilterCloudComponent', () => {
let fixture: ComponentFixture<EditTaskFilterCloudComponent>;
let dialog: MatDialog;
let getTaskFilterSpy: jasmine.Spy;
let getDeployedApplicationsByStatusSpy: jasmine.Spy;
let getRunningApplicationsSpy: jasmine.Spy;
let fakeFilter = new TaskFilterCloudModel({
name: 'FakeInvolvedTasks',
icon: 'adjust',
id: 10,
id: 'mock-task-filter-id',
state: 'CREATED',
appName: 'app-name',
appName: 'mock-app-name',
processDefinitionId: 'process-def-id',
assignment: 'fake-involved',
order: 'ASC',
@@ -70,7 +70,8 @@ describe('EditTaskFilterCloudComponent', () => {
name: 'fake-name'
}); }});
getTaskFilterSpy = spyOn(service, 'getTaskFilterById').and.returnValue(fakeFilter);
getDeployedApplicationsByStatusSpy = spyOn(appsService, 'getDeployedApplicationsByStatus').and.returnValue(of(fakeApplicationInstance));
getRunningApplicationsSpy = spyOn(appsService, 'getDeployedApplicationsByStatus').and.returnValue(of(fakeApplicationInstance));
fixture.detectChanges();
});
it('should create EditTaskFilterCloudComponent', () => {
@@ -78,10 +79,11 @@ describe('EditTaskFilterCloudComponent', () => {
});
it('should fetch task filter by taskId', async(() => {
let change = new SimpleChange(undefined, '10', true);
component.ngOnChanges({ 'id': change });
let taskFilterIDchange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIDchange});
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(getTaskFilterSpy).toHaveBeenCalled();
expect(component.taskFilter.name).toEqual('FakeInvolvedTasks');
expect(component.taskFilter.icon).toEqual('adjust');
expect(component.taskFilter.state).toEqual('CREATED');
@@ -91,8 +93,8 @@ describe('EditTaskFilterCloudComponent', () => {
}));
it('should display filter name as title', () => {
let change = new SimpleChange(undefined, '10', true);
component.ngOnChanges({ 'id': change });
let taskFilterIDchange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIDchange});
fixture.detectChanges();
const title = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-title-id');
const subTitle = fixture.debugElement.nativeElement.querySelector('#adf-edit-task-filter-sub-title-id');
@@ -105,8 +107,8 @@ describe('EditTaskFilterCloudComponent', () => {
describe('EditTaskFilter form', () => {
beforeEach(() => {
let change = new SimpleChange(undefined, '10', true);
component.ngOnChanges({ 'id': change });
let taskFilterIDchange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({'id': taskFilterIDchange});
fixture.detectChanges();
});
@@ -135,7 +137,7 @@ describe('EditTaskFilterCloudComponent', () => {
}));
it('should disable save button if the task filter is not changed', async(() => {
component.showFilterActions = true;
component.toggleFilterActions = true;
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
@@ -146,7 +148,7 @@ describe('EditTaskFilterCloudComponent', () => {
}));
it('should disable saveAs button if the task filter is not changed', async(() => {
component.showFilterActions = true;
component.toggleFilterActions = true;
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
fixture.detectChanges();
@@ -157,7 +159,7 @@ describe('EditTaskFilterCloudComponent', () => {
}));
it('should enable delete button by default', async(() => {
component.showFilterActions = true;
component.toggleFilterActions = true;
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
@@ -230,27 +232,15 @@ describe('EditTaskFilterCloudComponent', () => {
});
}));
it('should able to fetch running applications', async(() => {
component.appName = 'mock-app-name';
component.filterProperties = ['appName', 'processInstanceId', 'dueBefore'];
let change = new SimpleChange(undefined, 'mock-task-id', true);
component.ngOnChanges({ 'id': change });
const appController = component.editTaskFilterForm.get('appName');
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(appController).toBeDefined();
expect(appController.value).toBe('mock-app-name' );
expect(getDeployedApplicationsByStatusSpy).toHaveBeenCalled();
});
}));
it('should able to build a editTaskFilter form with default properties if input is empty', async(() => {
let taskFilterIDchange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIDchange});
component.filterProperties = [];
fixture.detectChanges();
const stateController = component.editTaskFilterForm.get('state');
const sortController = component.editTaskFilterForm.get('sort');
const orderController = component.editTaskFilterForm.get('order');
fixture.whenStable().then(() => {
const stateController = component.editTaskFilterForm.get('state');
const sortController = component.editTaskFilterForm.get('sort');
const orderController = component.editTaskFilterForm.get('order');
fixture.detectChanges();
expect(component.taskFilterProperties).toBeDefined();
expect(component.taskFilterProperties.length).toBe(4);
@@ -263,28 +253,46 @@ describe('EditTaskFilterCloudComponent', () => {
expect(orderController.value).toBe('ASC');
});
}));
});
describe('Task filterProperties', () => {
beforeEach(() => {
component.filterProperties = ['appName', 'processInstanceId', 'priority'];
});
it('should able to fetch running applications when appName property defined in the input', async(() => {
fixture.detectChanges();
let taskFilterIDchange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIDchange});
const appController = component.editTaskFilterForm.get('appName');
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(getRunningApplicationsSpy).toHaveBeenCalled();
expect(appController).toBeDefined();
expect(appController.value).toBe('mock-app-name');
});
}));
it('should able to build a editTaskFilter form with given input properties', async(() => {
getTaskFilterSpy.and.returnValue({ processInstanceId: 'process-instance-id', priority: '12' });
component.appName = 'mock-app-name';
component.filterProperties = ['appName', 'processInstanceId', 'priority'];
let change = new SimpleChange(undefined, 'mock-task-id', true);
component.ngOnChanges({ 'id': change });
fixture.detectChanges();
getTaskFilterSpy.and.returnValue({ appName: 'mock-app-name', processInstanceId: 'process-instance-id', priority: '12' });
let taskFilterIDchange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIDchange});
fixture.detectChanges();
const appController = component.editTaskFilterForm.get('appName');
const propertyController = component.editTaskFilterForm.get('priority');
const priorityController = component.editTaskFilterForm.get('priority');
const processInsIdController = component.editTaskFilterForm.get('processInstanceId');
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(getDeployedApplicationsByStatusSpy).toHaveBeenCalled();
expect(component.taskFilterProperties).toBeDefined();
expect(component.editTaskFilterForm).toBeDefined();
expect(component.taskFilterProperties.length).toBe(3);
expect(appController).toBeDefined();
expect(propertyController.value).toBe('12');
expect(priorityController.value).toBe('12');
expect(processInsIdController).toBeDefined();
expect(appController.value).toBe('mock-app-name');
expect(processInsIdController.value).toBe('process-instance-id');
});
}));
});
@@ -292,13 +300,14 @@ describe('EditTaskFilterCloudComponent', () => {
describe('edit filter actions', () => {
beforeEach(() => {
let change = new SimpleChange(undefined, '10', true);
component.ngOnChanges({ 'id': change });
component.filterProperties = ['state'];
let taskFilterIDchange = new SimpleChange(undefined, 'mock-task-filter-id', true);
component.ngOnChanges({ 'id': taskFilterIDchange});
fixture.detectChanges();
});
it('should emit save event and save the filter on click save button', async(() => {
component.showFilterActions = true;
component.toggleFilterActions = true;
const saveFilterSpy = spyOn(service, 'updateFilter').and.returnValue(fakeFilter);
let saveSpy: jasmine.Spy = spyOn(component.action, 'emit');
fixture.detectChanges();
@@ -321,7 +330,7 @@ describe('EditTaskFilterCloudComponent', () => {
}));
it('should emit delete event and delete the filter on click of delete button', async(() => {
component.showFilterActions = true;
component.toggleFilterActions = true;
const deleteFilterSpy = spyOn(service, 'deleteFilter').and.callThrough();
let deleteSpy: jasmine.Spy = spyOn(component.action, 'emit');
fixture.detectChanges();
@@ -341,7 +350,7 @@ describe('EditTaskFilterCloudComponent', () => {
}));
it('should emit saveAs event and add filter on click saveAs button', async(() => {
component.showFilterActions = true;
component.toggleFilterActions = true;
const saveAsFilterSpy = spyOn(service, 'addFilter').and.callThrough();
let saveAsSpy: jasmine.Spy = spyOn(component.action, 'emit');
fixture.detectChanges();

View File

@@ -16,21 +16,20 @@
*/
import { Component, OnChanges, Input, Output, EventEmitter, SimpleChanges } from '@angular/core';
import { AbstractControl , FormGroup, FormBuilder } from '@angular/forms';
import { TaskFilterCloudModel, FilterActionType, TaskFilterProperties, FilterOptions } from './../models/filter-cloud.model';
import { AbstractControl, FormGroup, FormBuilder } from '@angular/forms';
import { TaskFilterCloudModel, FilterActionType, TaskFilterProperties } from './../models/filter-cloud.model';
import { TaskFilterCloudService } from '../services/task-filter-cloud.service';
import { MatDialog } from '@angular/material';
import { TaskFilterDialogCloudComponent } from './task-filter-dialog-cloud.component';
import { TranslationService } from '@alfresco/adf-core';
import { debounceTime, map, filter } from 'rxjs/operators';
import { of, Observable } from 'rxjs';
import { debounceTime, filter } from 'rxjs/operators';
import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
import { ApplicationInstanceModel } from '../../../app/models/application-instance.model';
import moment from 'moment-es6';
@Component({
selector: 'adf-cloud-edit-task-filter',
templateUrl: './edit-task-filter-cloud.component.html',
selector: 'adf-cloud-edit-task-filter',
templateUrl: './edit-task-filter-cloud.component.html',
styleUrls: ['./edit-task-filter-cloud.component.scss']
})
export class EditTaskFilterCloudComponent implements OnChanges {
@@ -40,6 +39,7 @@ export class EditTaskFilterCloudComponent implements OnChanges {
public static ACTION_DELETE = 'DELETE';
public static APP_RUNNING_STATUS: string = 'RUNNING';
public static MIN_VALUE = 1;
public static APPLICATION_NAME: string = 'appName';
public static DEFAULT_TASK_FILTER_PROPERTIES = ['state', 'assignment', 'sort', 'order'];
public FORMAT_DATE: string = 'DD/MM/YYYY';
@@ -57,7 +57,7 @@ export class EditTaskFilterCloudComponent implements OnChanges {
/** Toggles the filter actions. */
@Input()
toggleFilterActions = true;
showFilterActions = true;
/** Toggles the title. */
@Input()
@@ -75,21 +75,21 @@ export class EditTaskFilterCloudComponent implements OnChanges {
changedTaskFilter: TaskFilterCloudModel;
columns = [
{value: 'id', label: 'ID'},
{value: 'name', label: 'NAME'},
{value: 'createdDate', label: 'CREATED DATE'},
{value: 'priority', label: 'PRIORITY'},
{value: 'processDefinitionId', label: 'PROCESS DEFINITION ID'}
];
{ value: 'id', label: 'ID' },
{ value: 'name', label: 'NAME' },
{ value: 'createdDate', label: 'Created Date' },
{ value: 'priority', label: 'PRIORITY' },
{ value: 'processDefinitionId', label: 'PROCESS DEFINITION ID' }
];
status = [
{label: 'ALL', value: ''},
{label: 'CREATED', value: 'CREATED'},
{label: 'CANCELLED', value: 'CANCELLED'},
{label: 'ASSIGNED', value: 'ASSIGNED'},
{label: 'SUSPENDED', value: 'SUSPENDED'},
{label: 'COMPLETED', value: 'COMPLETED'},
{label: 'DELETED', value: 'DELETED'}
{ label: 'ALL', value: '' },
{ label: 'CREATED', value: 'CREATED' },
{ label: 'CANCELLED', value: 'CANCELLED' },
{ label: 'ASSIGNED', value: 'ASSIGNED' },
{ label: 'SUSPENDED', value: 'SUSPENDED' },
{ label: 'COMPLETED', value: 'COMPLETED' },
{ label: 'DELETED', value: 'DELETED' }
];
directions = [
@@ -97,10 +97,11 @@ export class EditTaskFilterCloudComponent implements OnChanges {
{ label: 'DESC', value: 'DESC' }
];
applicationNames: any[] = [];
formHasBeenChanged = false;
editTaskFilterForm: FormGroup;
taskFilterProperties: any[] = [];
showFilterActions: boolean = false;
toggleFilterActions: boolean = false;
constructor(
private formBuilder: FormBuilder,
@@ -108,19 +109,18 @@ export class EditTaskFilterCloudComponent implements OnChanges {
private translateService: TranslationService,
private taskFilterCloudService: TaskFilterCloudService,
private appsProcessCloudService: AppsProcessCloudService) {
}
}
ngOnChanges(changes: SimpleChanges) {
const id = changes['id'];
if (id && id.currentValue !== id.previousValue) {
this.retrieveTaskFilter();
this.initTaskFilterProperties(this.taskFilter);
this.taskFilterProperties = this.createAndFilterProperties();
this.buildForm(this.taskFilterProperties);
}
}
retrieveTaskFilter() {
this.taskFilter = new TaskFilterCloudModel(this.taskFilterCloudService.getTaskFilterById(this.appName, this.id));
retrieveTaskFilter(): TaskFilterCloudModel {
return new TaskFilterCloudModel(this.taskFilterCloudService.getTaskFilterById(this.appName, this.id));
}
buildForm(taskFilterProperties: TaskFilterProperties[]) {
@@ -141,21 +141,28 @@ export class EditTaskFilterCloudComponent implements OnChanges {
*/
onFilterChange() {
this.editTaskFilterForm.valueChanges
.pipe(debounceTime(500),
filter(() => this.isFormValid()))
.pipe(debounceTime(500),
filter(() => this.isFormValid()))
.subscribe((formValues: TaskFilterCloudModel) => {
this.changedTaskFilter = new TaskFilterCloudModel(Object.assign({}, this.taskFilter, formValues));
this.formHasBeenChanged = !this.compareFilters(this.changedTaskFilter, this.taskFilter);
this.filterChange.emit(this.changedTaskFilter);
});
});
}
initTaskFilterProperties(taskFilter: TaskFilterCloudModel) {
if (this.filterProperties && this.filterProperties.length > 0) {
const defaultProperties = this.defaultTaskFilterProperties(taskFilter);
this.taskFilterProperties = defaultProperties.filter((filterProperty) => this.isValidProperty(this.filterProperties, filterProperty));
} else {
this.taskFilterProperties = EditTaskFilterCloudComponent.DEFAULT_TASK_FILTER_PROPERTIES;
createAndFilterProperties(): TaskFilterProperties[] {
this.checkMandatoryFilterProperties();
if (this.checkForApplicationNameProperty()) {
this.getRunningApplications();
}
this.taskFilter = this.retrieveTaskFilter();
const defaultProperties = this.createTaskFilterProperties(this.taskFilter);
return defaultProperties.filter((filterProperty: TaskFilterProperties) => this.isValidProperty(this.filterProperties, filterProperty));
}
checkMandatoryFilterProperties() {
if (this.filterProperties === undefined || this.filterProperties.length === 0) {
this.filterProperties = EditTaskFilterCloudComponent.DEFAULT_TASK_FILTER_PROPERTIES;
}
}
@@ -163,6 +170,10 @@ export class EditTaskFilterCloudComponent implements OnChanges {
return filterProperties ? filterProperties.indexOf(filterProperty.key) >= 0 : true;
}
checkForApplicationNameProperty(): boolean {
return this.filterProperties ? this.filterProperties.indexOf(EditTaskFilterCloudComponent.APPLICATION_NAME) >= 0 : false;
}
isFormValid(): boolean {
return this.editTaskFilterForm.valid;
}
@@ -200,17 +211,15 @@ export class EditTaskFilterCloudComponent implements OnChanges {
return JSON.stringify(editedQuery).toLowerCase() === JSON.stringify(currentQuery).toLowerCase();
}
getRunningApplications(): Observable<FilterOptions[]> {
return this.appsProcessCloudService.getDeployedApplicationsByStatus(EditTaskFilterCloudComponent.APP_RUNNING_STATUS).pipe(
map((applications: ApplicationInstanceModel[]) => {
getRunningApplications() {
this.appsProcessCloudService.getDeployedApplicationsByStatus(EditTaskFilterCloudComponent.APP_RUNNING_STATUS)
.subscribe((applications: ApplicationInstanceModel[]) => {
if (applications && applications.length > 0) {
let options: FilterOptions[] = [];
applications.map((application) => {
options.push({ label: application.name, value: application.name });
this.applicationNames.push({ label: application.name, value: application.name });
});
return options;
}
}));
});
}
onSave() {
@@ -232,16 +241,16 @@ export class EditTaskFilterCloudComponent implements OnChanges {
height: 'auto',
minWidth: '30%'
});
dialogRef.afterClosed().subscribe( (result) => {
dialogRef.afterClosed().subscribe((result) => {
if (result && result.action === TaskFilterDialogCloudComponent.ACTION_SAVE) {
const filterId = Math.random().toString(36).substr(2, 9);
const filterKey = this.getSanitizeFilterName(result.name);
const newFilter = {
name: result.name,
icon: result.icon,
id: filterId,
key: 'custom-' + filterKey
};
name: result.name,
icon: result.icon,
id: filterId,
key: 'custom-' + filterKey
};
const resultFilter = Object.assign({}, this.changedTaskFilter, newFilter);
this.taskFilterCloudService.addFilter(resultFilter);
this.action.emit({actionType: EditTaskFilterCloudComponent.ACTION_SAVE_AS, filter: resultFilter});
@@ -260,16 +269,16 @@ export class EditTaskFilterCloudComponent implements OnChanges {
return name.replace(regExt, '-');
}
toggleActions(): boolean {
return this.toggleFilterActions;
showActions(): boolean {
return this.showFilterActions;
}
onExpand(event: any) {
this.showFilterActions = true;
this.toggleFilterActions = true;
}
onClose(event: any) {
this.showFilterActions = false;
this.toggleFilterActions = false;
}
isDateType(property: TaskFilterProperties): boolean {
@@ -284,21 +293,21 @@ export class EditTaskFilterCloudComponent implements OnChanges {
return property.type === 'text';
}
defaultTaskFilterProperties(currentTaskFilter: TaskFilterCloudModel): TaskFilterProperties[] {
createTaskFilterProperties(currentTaskFilter: TaskFilterCloudModel): TaskFilterProperties[] {
return [
new TaskFilterProperties({
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.APP_NAME',
type: 'select',
key: 'appName',
value: this.appName || '',
options: this.getRunningApplications()
value: currentTaskFilter.appName || '',
options: this.applicationNames
}),
new TaskFilterProperties({
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.STATUS',
type: 'select',
key: 'state',
value: currentTaskFilter.state || this.status[0].value,
options: of(this.status)
options: this.status
}),
new TaskFilterProperties({
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.ASSIGNMENT',
@@ -317,14 +326,14 @@ export class EditTaskFilterCloudComponent implements OnChanges {
type: 'select',
key: 'sort',
value: currentTaskFilter.sort || this.columns[0].value,
options: of(this.columns)
options: this.columns
}),
new TaskFilterProperties({
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.DIRECTION',
type: 'select',
key: 'order',
value: currentTaskFilter.order || this.directions[0].value,
options: of(this.directions)
options: this.directions
}),
new TaskFilterProperties({
label: 'ADF_CLOUD_EDIT_TASK_FILTER.LABEL.PROCESS_INSTANCE_ID',

View File

@@ -15,8 +15,6 @@
* limitations under the License.
*/
import { Observable } from 'rxjs';
export class TaskFilterCloudModel {
id: string;
name: string;
@@ -108,10 +106,10 @@ export interface FilterOptions {
export class TaskFilterProperties {
label: string;
type: string; // text|date|select
type: string;
value: string;
key: string;
options$: Observable<FilterOptions[]>;
options: FilterOptions[];
constructor(obj?: any) {
if (obj) {
@@ -119,7 +117,7 @@ export class TaskFilterProperties {
this.type = obj.type || null;
this.value = obj.value || null;
this.key = obj.key || null;
this.options$ = obj.options || null;
this.options = obj.options || null;
}
}
}