inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3308] ProcessList Component - Provide a way to filter the list by fields (#3629)

Browse Source 
* [ADF-3308] Removed name input added two inputs

* * [ADF-3308] Modified demo component

* [ADF-3367] Modified docs

* [ADF-3308] Added tests

* [ADF-3308] Deprecated processDefinitionKey property
This commit is contained in:
Deepak Paul
2018-08-01 14:09:53 +05:30
committed by Eugenio Romano
parent 7173a620de
commit 50e5e7a36a
9 changed files with 158 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
demo-shell/src/app.config.json
View File

@@ -501,10 +501,22 @@
"sortable": true
},
{
"key": "created",
"key": "id",
"type": "text",
"title": "ADF_PROCESS_LIST.PROPERTIES.ID",
"sortable": true
},
{
"key": "processDefinitionId",
"type": "text",
"title": "ADF_PROCESS_LIST.PROPERTIES.PROCESS_DEFINITION_ID",
"sortable": true
},
{
"key": "started",
"type": "date",
"title": "ADF_PROCESS_LIST.PROPERTIES.CREATED",
"cssClass": "hidden",
"format": "timeAgo",
"sortable": true
}
]

30
demo-shell/src/app/components/process-list-demo/process-list-demo.component.html
View File

@@ -15,14 +15,6 @@
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>Process Name</mat-label>
<input
matInput
class="form-control"
[formControl]="processName">
</mat-form-field>
<mat-form-field>
<mat-label>ProcessDefinitionId</mat-label>
<input
@@ -33,7 +25,15 @@
</mat-form-field>
<mat-form-field>
<mat-label>State</mat-label>
<mat-label>ProcessInstanceId</mat-label>
<input
matInput
class="form-control"
[formControl]="processInstanceId">
</mat-form-field>
<mat-form-field>
<mat-label>Status</mat-label>
<mat-select
class="form-control"
[formControl]="processState">
@@ -60,10 +60,18 @@
<adf-process-instance-list
#processList
[appId]="appId"
[processDefinitionKey]="processDefId"
[processDefinitionId]="processDefId"
[processInstanceId]="instanceId"
[state]="state"
[sort]="sort"
[name]="name">
[presetColumn]="presetColumn">
<data-columns>
<data-column key="ended" title="ADF_PROCESS_LIST.PROPERTIES.STATUS">
<ng-template let-entry="$implicit">
<div title="{{getStatus(entry.row.obj.ended)}}">{{getStatus(entry.row.obj.ended)}}</div>
</ng-template>
</data-column>
</data-columns>
</adf-process-instance-list>
<adf-pagination

23
demo-shell/src/app/components/process-list-demo/process-list-demo.component.ts
View File

@@ -37,10 +37,14 @@ export class ProcessListDemoComponent implements OnInit {
processDefId: string;
instanceId: number|string;
state: string;
sort: string;
presetColumn = 'default';
stateOptions = [
{value: 'all', title: 'All'},
{value: 'active', title: 'Active'},
@@ -49,9 +53,7 @@ export class ProcessListDemoComponent implements OnInit {
sortOptions = [
{value: 'created-asc', title: 'Created (asc)'},
{value: 'created-desc', title: 'Created (desc)'},
{value: 'due-asc', title: 'Due (asc)'},
{value: 'due-desc', title: 'Due (desc)'}
{value: 'created-desc', title: 'Created (desc)'}
];
constructor(private route: ActivatedRoute,
@@ -70,8 +72,8 @@ export class ProcessListDemoComponent implements OnInit {
buildForm() {
this.processListForm = this.formBuilder.group({
processAppId: new FormControl(this.defaultAppId, [Validators.required, Validators.pattern('^[0-9]*$')]),
processName: new FormControl(''),
processDefinitionId: new FormControl(''),
processInstanceId: new FormControl(''),
processState: new FormControl(''),
processSort: new FormControl('')
});
@@ -90,6 +92,7 @@ export class ProcessListDemoComponent implements OnInit {
this.appId = processFilter.processAppId;
this.name = processFilter.processName;
this.processDefId = processFilter.processDefinitionId;
this.instanceId = processFilter.processInstanceId;
this.state = processFilter.processState;
this.sort = processFilter.processSort;
}
@@ -102,18 +105,22 @@ export class ProcessListDemoComponent implements OnInit {
this.processListForm.reset();
}
getStatus(ended: Date) {
return ended ? 'Completed' : 'Active';
}
get processAppId(): AbstractControl {
return this.processListForm.get('processAppId');
}
get processName(): AbstractControl {
return this.processListForm.get('processName');
}
get processDefinitionId(): AbstractControl {
return this.processListForm.get('processDefinitionId');
}
get processInstanceId(): AbstractControl {
return this.processListForm.get('processInstanceId');
}
get processState(): AbstractControl {
return this.processListForm.get('processState');
}

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

@@ -137,7 +137,6 @@
#processList
*ngIf="processFilter?.filter" [appId]="processFilter?.appId"
[processDefinitionKey]="processFilter?.filter?.processDefinitionKey"
[name]="processFilter?.filter?.name"
[presetColumn]="presetColumn"
[state]="processFilter?.filter?.state"
[page]="processPage"

4
docs/process-services/process-list.component.md
View File

@@ -45,11 +45,11 @@ Renders a list containing all the process instances matched by the parameters sp
| appId | `number` | | The id of the app. |
| data | [`DataTableAdapter`](../../lib/core/datatable/data/datatable-adapter.ts) | | Data source to define the datatable. |
| multiselect | `boolean` | false | Toggles multiple row selection, which renders checkboxes at the beginning of each row |
| name | `string` | | The name of the list. |
| page | `number` | 0 | The page number of the processes to fetch. |
| presetColumn | `string` | | Name of a custom schema to fetch from `app.config.json`. |
| processDefinitionKey | `string` | | The processDefinitionKey of the process. |
| processDefinitionId | `string` | | The Definition Id of the process. |
| processDefinitionKey | `string` | | (**Deprecated:** 2.4.0) The Definition key of the process. |
| processInstanceId | `number|string` | | The id of the process instance. |
| selectFirstRow | `boolean` | true | Toggles default selection of the first row |
| selectionMode | `string` | "single" | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode, you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. |
| size | `number` | [`PaginationComponent`](../core/pagination.component.md).DEFAULT_PAGINATION.maxItems | The number of processes to fetch in each page. |

3
lib/process-services/i18n/en.json
View File

@@ -187,7 +187,8 @@
"BUSINESS_KEY_DEFAULT": "None",
"DESCRIPTION": "Description",
"DESCRIPTION_DEFAULT": "No description",
"ID": "ID"
"ID": "ID",
"PROCESS_DEFINITION_ID": "Process Definition Id"
},
"MENU_ACTIONS": {
"VIEW_CONTENT": "View",

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

@@ -481,9 +481,9 @@ describe('ProcessInstanceListComponent', () => {
component.ngOnChanges({'sort': change});
});
it('should reload the process list when the name parameter changes', (done) => {
const name = 'FakeTaskName';
let change = new SimpleChange(null, name, true);
it('should reload the process list when the processDefinitionKey parameter changes', (done) => {
const processDefinitionKey = 'SimpleProcess';
let change = new SimpleChange(null, processDefinitionKey, true);
component.success.subscribe((res) => {
expect(res).toBeDefined();
@@ -494,7 +494,87 @@ describe('ProcessInstanceListComponent', () => {
done();
});
component.ngOnChanges({'name': change});
component.ngOnChanges({'processDefinitionKey': change});
});
it('should reload the process list when the processDefinitionKey parameter changes to null', (done) => {
const processDefinitionKey = null;
let change = new SimpleChange('SimpleProcess', processDefinitionKey, false);
component.success.subscribe((res) => {
expect(res).toBeDefined();
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
done();
});
component.ngOnChanges({'processDefinitionKey': change});
});
it('should reload the process list when the processDefinitionId parameter changes', (done) => {
const processDefinitionId = 'SimpleProcess:1:10';
let change = new SimpleChange(null, processDefinitionId, true);
component.success.subscribe((res) => {
expect(res).toBeDefined();
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
done();
});
component.ngOnChanges({'processDefinitionId': change});
});
it('should reload the process list when the processDefinitionId parameter changes to null', (done) => {
const processDefinitionId = null;
let change = new SimpleChange('SimpleProcess:1:10', processDefinitionId, false);
component.success.subscribe((res) => {
expect(res).toBeDefined();
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
done();
});
component.ngOnChanges({'processDefinitionId': change});
});
it('should reload the process list when the processInstanceId parameter changes', (done) => {
const processInstanceId = '123';
let change = new SimpleChange(null, processInstanceId, true);
component.success.subscribe((res) => {
expect(res).toBeDefined();
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
done();
});
component.ngOnChanges({'processInstanceId': change});
});
it('should reload the process list when the processInstanceId parameter changes to null', (done) => {
const processInstanceId = null;
let change = new SimpleChange('123', processInstanceId, false);
component.success.subscribe((res) => {
expect(res).toBeDefined();
expect(component.data).toBeDefined();
expect(component.isListEmpty()).not.toBeTruthy();
expect(component.data.getRows().length).toEqual(2);
expect(component.data.getRows()[0].getValue('name')).toEqual('Process 773443333');
done();
});
component.ngOnChanges({'processInstanceId': change});
});
});
});

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

@@ -69,10 +69,20 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
@Input()
appId: number;
/** The processDefinitionKey of the process. */
/** The Definition Key of the process.
* @deprecated 2.4.0
*/
@Input()
processDefinitionKey: string;
/** The Definition Id of the process. */
@Input()
processDefinitionId: string;
/** The id of the process instance. */
@Input()
processInstanceId: number|string;
/** Defines the state of the processes. Possible values are `running`, `completed` and `all` */
@Input()
state: string;
@@ -83,10 +93,6 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
@Input()
sort: string;
/** The name of the list. */
@Input()
name: string;
/** The page number of the processes to fetch. */
@Input()
page: number = 0;
@@ -191,22 +197,25 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
let appId = changes['appId'];
let processDefinitionKey = changes['processDefinitionKey'];
let processDefinitionId = changes['processDefinitionId'];
let processInstanceId = changes['processInstanceId'];
let state = changes['state'];
let sort = changes['sort'];
let name = changes['name'];
let page = changes['page'];
let size = changes['size'];
if (appId && appId.currentValue) {
changed = true;
} else if (processDefinitionKey && processDefinitionKey.currentValue) {
} else if (processDefinitionKey) {
changed = true;
} else if (processDefinitionId) {
changed = true;
} else if (processInstanceId) {
changed = true;
} else if (state && state.currentValue) {
changed = true;
} else if (sort && sort.currentValue) {
changed = true;
} else if (name && name.currentValue) {
changed = true;
} else if (page && page.currentValue !== page.previousValue) {
changed = true;
} else if (size && size.currentValue !== size.previousValue) {
@@ -371,6 +380,8 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit
private createRequestNode() {
let requestNode = {
appDefinitionId: this.appId,
processDefinitionId: this.processDefinitionId,
processInstanceId: this.processInstanceId,
state: this.state,
sort: this.sort,
page: this.page,

2
lib/process-services/process-list/models/filter-process.model.ts
View File

@@ -49,6 +49,7 @@ export class FilterProcessRepresentationModel implements UserProcessInstanceFilt
export class ProcessFilterParamRepresentationModel implements ProcessFilterRequestRepresentation {
processDefinitionId?: number;
processInstanceId?: number|string;
appDefinitionId?: number;
state?: string;
sort?: string;
@@ -58,6 +59,7 @@ export class ProcessFilterParamRepresentationModel implements ProcessFilterReque
constructor(obj?: any) {
this.processDefinitionId = obj.processDefinitionId || null;
this.appDefinitionId = obj.appDefinitionId || null;
this.processInstanceId = obj.processInstanceId || null;
this.state = obj.state || null;
this.sort = obj.sort || null;
this.page = obj.page || null;