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-3986] ProcessListCloudComponent - Be able to filter process with all possible params (#4233)

Browse Source 
* [ADF-3986][ProcessListCloudComponent] Be able to filter process with all possible params* Added missing parameters* Added unit test the recent changes* Updated docs

* * Removed unwanted appVersion from process list

* * Removed unwanted properties

* * Reverted changes related status

* Update edit-task-filter-cloud.component.ts

* Fix the task and process filters value

* Rollback the process instance id

* * Added more process list properties in the demo

* * After rebase
* Used application query api.

* * Fixed failing unit test

* * After rebase

* * Fixed message

* * Fixed conflicts.

* * Fixed Lint error

* * Documentation conflicts fixed.
This commit is contained in:
siva kumar
2019-03-20 21:23:28 +05:30
committed by Eugenio Romano
parent dccc6b8127
commit c4bd7a93ab
14 changed files with 395 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html
View File

@@ -19,6 +19,9 @@
[id]="editedFilter.processInstanceId"
[status]="editedFilter.state"
[name]="editedFilter.processName"
[businessKey]="editedFilter.businessKey"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[sorting]="sortArray"
[selectionMode]="selectionMode"
[multiselect]="multiselect"

103
docs/process-services-cloud/components/edit-process-filter-cloud.component.md
View File

@@ -20,6 +20,8 @@ Shows Process Filter Details.
- [Details](#details)
- [Editing APS2 process filters](#editing-aps2-process-filters)
- [Filter properties](#filter-properties)
- [Sort properties](#sort-properties)
- [Action properties](#action-properties)
- [See also](#see-also)
## Basic Usage
@@ -80,28 +82,59 @@ given below:
| **_processInstanceId_** | Process instance ID |
| **_processName_** | Process name. |
| **_initiator_** | ID of the user who initiated the process |
| **_state_** | Execution state of the process. |
| **_status_** | Execution status of the process. |
| **_processDefinitionId_** | Process definition ID |
| **_processDefinitionKey_** | Process definition key |
| **_lastModifiedFrom_** | Finds processes modified _after_ this date |
| **_lastModifiedTo_** | Finds processes modified _before_ this date |
| **_sort_** | Field on which the filter results will be sorted (doesn't participate in the filtering itself). Can be "id", "name", "status" or "startDate". |
| **_lastModified_** | Date the process was last modified. If lastModified defined the component will show the range **_lastModifiedTo_**, **_lastModifiedFrom_**|
| **_sort_** | Field on which the filter results will be sorted. Can be "id", "name", "status", "startDate". |
| **_order_** | Sort ordering of the filter results (this doesn't participate in the filtering itself) |
By default, the **_state_**, **_sort_** and **_order_** properties are
By default, the **_status_**, **_sort_** and **_order_** properties are
displayed in the editor. However, you can also choose which properties
to show using the `filterProperties` array.
For example, the code below initializes the editor with the **_appName_**,
**_processInstanceId_**, **_startDate_** and **_lastModified_** properties:
**_processInstanceId_**, **_processName_** and **_lastModified_** properties:
```ts
import { UserProcessModel } from '@alfresco/adf-core';
export class SomeComponent implements OnInit {
filterProperties: string[] = [
"appName",
"processName"
"processInstanceId",
"lastModified"];
onFilterChange(filter: ProcessFilterCloudModel) {
console.log('On filter change: ', filter);
}
onAction($event: ProcessFilterAction) {
console.log('Clicked action: ', $event);
}
```
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="applicationName"
[filterProperties]="filterProperties">
</adf-cloud-edit-process-filter>
```
With this configuration, only the four listed properties will be shown.
### Sort properties
You can supply various _sort properties_ to sort the processes.
By default, the **_id_**, **_name_**, **_status_** and **_startDate_** properties are
displayed in the editor. However, you can also choose which sort properties
to show using the `sortProperties` array.
For example, the code below initializes the editor with the **_startDate_** and **_lastModified_** properties:
```ts
export class SomeComponent implements OnInit {
sortProperties: string[] = [
"startDate",
"lastModified"];
@@ -109,15 +142,59 @@ export class SomeComponent implements OnInit {
console.log('On filter change: ', filter);
}
onAction($event: ProcessFilterActionType) {
onAction($event: ProcessFilterAction) {
console.log('Clicked action: ', $event);
}
```
With this configuration, only the four listed properties will be shown.
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="applicationName"
[sortProperties]="sortProperties">
</adf-cloud-edit-process-filter>
```
**Note:** Currently, the `sort` property has a limited set of properties
to choose from: **_id_**, **_name_**, **_status_** and **_startDate_**.
With this configuration, only the two listed sort properties will be shown.
### Action properties
You can supply various _actions_ to apply on process filter.
| Name | Description |
| ---- | ----------- |
| **_save_** | Save process filter. |
| **_saveAs_** | Creates a new process filter. |
| **_delete_** | Delete process filter. |
By default, the **_save_**, **_saveAs_** and **_delete_** actions are
displayed in the editor. However, you can also choose which actions to
show using the `actions` array.
For example, the code below initializes the editor with the **_save_** and **_delete_** actions:
```ts
export class SomeComponent implements OnInit {
actions: string[] = ['save', 'delete'];
onFilterChange(filter: ProcessFilterCloudModel) {
console.log('On filter change: ', filter);
}
onAction($event: ProcessFilterAction) {
console.log('Clicked action: ', $event);
}
```
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="applicationName"
[actions]="actions">
</adf-cloud-edit-process-filter>
```
With this configuration, only the two actions will be shown.
## See also

6
docs/process-services-cloud/components/process-list-cloud.component.md
View File

@@ -51,13 +51,13 @@ when the process list is empty:
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| appName | `string` | "" | The name of the application. |
| appVersion | `string` | "" | The related application version. |
| businessKey | `string` | "" | Filter the tasks to display only the ones with this businessKey value. |
| id | `string` | "" | Filter the processes to display only the ones with this ID. |
| initiator | `string` | "" | Name of the initiator of the process. |
| lastModifiedFrom | `string` | "" | Filter the processes. Display only process with lastModifiedTo equal to the supplied date. |
| lastModifiedTo | `string` | "" | Filter the processes. Display only process with lastModifiedTo equal to the supplied date. |
| multiselect | `boolean` | false | Toggles multiple row selection and renders checkboxes at the beginning of each row |
| name | `string` | "" | Filter the processes to display only the ones with this name. |
| presetColumn | `string` | | Custom preset column schema in JSON format. |
| processDefinitionId | `string` | "" | Filter the processes to display only the ones with this process definition ID. |
| processDefinitionKey | `string` | "" | Filter the processes to display only the ones with this process definition key. |
| 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. |
@@ -146,7 +146,7 @@ information defined in `app.config.json` as in the example below:
```
These are all the available columns that can be displayed in this component:
**_appName_**, **_businessKey_**, **_description_**, **_id_**, **_initiator_**, **_lastModified_**, **_processName_**, **_parentId_**, **_processDefinitionId_**, **_processDefinitionKey_**, **_startDate_** and **_status_**.
**_appName_**, **_businessKey_**, **_description_**, **_id_**, **_initiator_**, **_lastModified_**, **_processName_**, **_parentId_**, **_processDefinitionId_**, **_processDefinitionKey_**, and **_status_**.
### Setting Sorting Order for the list

201
docs/process-services-cloud/edit-process-filter-cloud.component.md Normal file
View File

@@ -0,0 +1,201 @@
---
Title: Edit Process Filter Cloud component
Added: v3.0.0
Status: Experimental
Last reviewed: 2019-01-30
---
# [Edit Process Filter Cloud component](../../lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts "Defined in edit-process-filter-cloud.component.ts")
Shows Process Filter Details.
![edit-process-filter-cloud](../docassets/images/edit-process-filter-cloud.component.png)
## Contents
- [Basic Usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [Editing APS2 process filters](#editing-aps2-process-filters)
- [Filter properties](#filter-properties)
- [Sort properties](#sort-properties)
- [Action properties](#action-properties)
- [See also](#see-also)
## Basic Usage
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="appName"
[filterProperties]="filterProperties"s
(filterChange)="onFilterChange($event)"
(action)="onAction($event)">
</adf-cloud-edit-process-filter>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| actions | `string[]` | | List of sort actions. |
| appName | `string` | | The name of the application. |
| filterProperties | `string[]` | | List of process filter properties to display |
| id | `string` | | Id of the process instance filter. |
| showFilterActions | `boolean` | true | Toggles editing of process filter actions. |
| showTitle | `boolean` | true | Toggles editing of the process filter title. |
| sortProperties | `string[]` | | List of sort properties to display. |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| action | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterAction`](../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a filter action occurs i.e Save, SaveAs, Delete. |
| filterChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`ProcessFilterCloudModel`](../../lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts)`>` | Emitted when a process instance filter property changes. |
## Details
### Editing APS2 process filters
Use the `appName` and `id` properties to choose which process filter to edit:
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="appName">
</adf-cloud-edit-process-filter>
```
### Filter properties
You can supply various _filter properties_ to edit that will determine
which processes are found by a filter. The full set of properties is
given below:
| Name | Description |
| ---- | ----------- |
| **_appName_** | Name of the app |
| **_processInstanceId_** | Process instance ID |
| **_processName_** | Process name. |
| **_initiator_** | ID of the user who initiated the process |
| **_status_** | Execution status of the process. |
| **_processDefinitionId_** | Process definition ID |
| **_processDefinitionKey_** | Process definition key |
| **_lastModified_** | Date the process was last modified. If lastModified defined the component will show the range **_lastModifiedTo_**, **_lastModifiedFrom_**|
| **_sort_** | Field on which the filter results will be sorted. Can be "id", "name", "status", "startDate". |
| **_order_** | Sort ordering of the filter results (this doesn't participate in the filtering itself) |
By default, the **_status_**, **_sort_** and **_order_** properties are
displayed in the editor. However, you can also choose which properties
to show using the `filterProperties` array.
For example, the code below initializes the editor with the **_appName_**,
**_processInstanceId_**, **_processName_** and **_lastModified_** properties:
```ts
export class SomeComponent implements OnInit {
filterProperties: string[] = [
"processName"
"processInstanceId",
"lastModified"];
onFilterChange(filter: ProcessFilterCloudModel) {
console.log('On filter change: ', filter);
}
onAction($event: ProcessFilterAction) {
console.log('Clicked action: ', $event);
}
```
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="applicationName"
[filterProperties]="filterProperties">
</adf-cloud-edit-process-filter>
```
With this configuration, only the four listed properties will be shown.
### Sort properties
You can supply various _sort properties_ to sort the processes.
By default, the **_id_**, **_name_**, **_status_** and **_startDate_** properties are
displayed in the editor. However, you can also choose which sort properties
to show using the `sortProperties` array.
For example, the code below initializes the editor with the **_startDate_** and **_lastModified_** properties:
```ts
export class SomeComponent implements OnInit {
sortProperties: string[] = [
"startDate",
"lastModified"];
onFilterChange(filter: ProcessFilterCloudModel) {
console.log('On filter change: ', filter);
}
onAction($event: ProcessFilterAction) {
console.log('Clicked action: ', $event);
}
```
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="applicationName"
[sortProperties]="sortProperties">
</adf-cloud-edit-process-filter>
```
With this configuration, only the two listed sort properties will be shown.
### Action properties
You can supply various _actions_ to apply on process filter.
| Name | Description |
| ---- | ----------- |
| **_save_** | Save process filter. |
| **_saveAs_** | Creates a new process filter. |
| **_delete_** | Delete process filter. |
By default, the **_save_**, **_saveAs_** and **_delete_** actions are
displayed in the editor. However, you can also choose which actions to
show using the `actions` array.
For example, the code below initializes the editor with the **_save_** and **_delete_** actions:
```ts
export class SomeComponent implements OnInit {
actions: string[] = ['save', 'delete'];
onFilterChange(filter: ProcessFilterCloudModel) {
console.log('On filter change: ', filter);
}
onAction($event: ProcessFilterAction) {
console.log('Clicked action: ', $event);
}
```
```html
<adf-cloud-edit-process-filter
[id]="processFilterId"
[appName]="applicationName"
[actions]="actions">
</adf-cloud-edit-process-filter>
```
With this configuration, only the two actions will be shown.
## See also
- [Edit task filter cloud component](edit-task-filter-cloud.component.md)

4
lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts
View File

@@ -42,7 +42,7 @@ export class AppsProcessCloudService {
}
const api: Oauth2Auth = this.apiService.getInstance().oauth2Auth;
const path = this.getApplicationUrl();
const pathParams = {}, queryParams = {},
const pathParams = {}, queryParams = { status: status },
headerParams = {}, formParams = {}, bodyParam = {},
contentTypes = ['application/json'], accepts = ['application/json'];
@@ -58,7 +58,7 @@ export class AppsProcessCloudService {
);
}
private getApplicationUrl() {
private getApplicationUrl(): string {
return `${this.appConfigService.get('bpmHost')}/alfresco-deployment-service/v1/applications`;
}

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

@@ -138,6 +138,7 @@
"TITLE": "Customize your filter",
"LABEL": {
"APP_NAME": "ApplicationName",
"PROCESS_INS_ID": "ProcessInstanceId",
"STATUS": "Status",
"INITIATOR": "Initiator",
"ASSIGNMENT": "Assignee",
@@ -145,8 +146,6 @@
"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",

3
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
View File

@@ -41,7 +41,8 @@
(dateChange)="onDateChanged($event.value, processFilterProperty)"
[matDatepicker]="dateController"
placeholder="{{processFilterProperty.label | translate}}"
[formControlName]="processFilterProperty.key"
[(ngModel)]="dateFilter[processFilterProperty.key]"
[ngModelOptions]="{standalone: true}"
[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>

35
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts
View File

@@ -62,11 +62,15 @@ describe('EditProcessFilterCloudComponent', () => {
service = TestBed.get(ProcessFilterCloudService);
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(dialog, 'open').and.returnValue({
afterClosed() {
return of({
action: ProcessFilterDialogCloudComponent.ACTION_SAVE,
icon: 'icon',
name: 'fake-name'
});
}
});
getProcessFilterByIdSpy = spyOn(service, 'getProcessFilterById').and.returnValue(fakeFilter);
getRunningApplicationsSpy = spyOn(appsService, 'getDeployedApplicationsByStatus').and.returnValue(of(fakeApplicationInstance));
});
@@ -81,7 +85,7 @@ describe('EditProcessFilterCloudComponent', () => {
it('should fetch process instance filter by id', async(() => {
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
component.ngOnChanges({ 'id': processFilterIDchange });
fixture.detectChanges();
fixture.whenStable().then(() => {
fixture.detectChanges();
@@ -96,7 +100,7 @@ describe('EditProcessFilterCloudComponent', () => {
it('should display filter name as title', () => {
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
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');
@@ -113,7 +117,7 @@ describe('EditProcessFilterCloudComponent', () => {
beforeEach(() => {
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
component.ngOnChanges({ 'id': processFilterIDchange });
fixture.detectChanges();
});
@@ -249,7 +253,7 @@ describe('EditProcessFilterCloudComponent', () => {
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.ngOnChanges({ 'id': processFilterIDchange });
component.filterProperties = [];
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -272,7 +276,7 @@ describe('EditProcessFilterCloudComponent', () => {
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});
component.ngOnChanges({ 'id': processFilterIDchange });
fixture.detectChanges();
component.filterProperties = ['appName', 'processName'];
const appController = component.editProcessFilterForm.get('appName');
@@ -286,8 +290,8 @@ describe('EditProcessFilterCloudComponent', () => {
it('should able to filter filterProperties when input is defined', async(() => {
component.id = 'mock-process-filter-id';
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
let processFilterIdchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({ 'id': processFilterIdchange });
component.filterProperties = ['appName', 'processName'];
fixture.detectChanges();
fixture.whenStable().then(() => {
@@ -302,7 +306,7 @@ describe('EditProcessFilterCloudComponent', () => {
it('should display default sort properties', async(() => {
fixture.detectChanges();
let processFilterIdchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({ 'id': processFilterIdchange});
component.ngOnChanges({ 'id': processFilterIdchange });
fixture.detectChanges();
let expansionPanel = fixture.debugElement.nativeElement.querySelector('mat-expansion-panel-header');
expansionPanel.click();
@@ -340,7 +344,7 @@ describe('EditProcessFilterCloudComponent', () => {
beforeEach(() => {
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
component.ngOnChanges({ 'id': processFilterIDchange });
fixture.detectChanges();
});
@@ -436,10 +440,11 @@ describe('EditProcessFilterCloudComponent', () => {
}));
it('should filter actions when input actions are specified', async(() => {
fixture.detectChanges();
component.actions = ['save'];
fixture.detectChanges();
let processFilterIDchange = new SimpleChange(undefined, 'mock-process-filter-id', true);
component.ngOnChanges({'id': processFilterIDchange});
component.ngOnChanges({ 'id': processFilterIDchange });
fixture.detectChanges();
fixture.whenStable().then(() => {
expect(component.processFilterActions).toBeDefined();

44
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts
View File

@@ -15,16 +15,17 @@
* limitations under the License.
*/
import { Component, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
import { FormGroup, FormBuilder, AbstractControl } from '@angular/forms';
import { MatDialog } from '@angular/material';
import { MatDialog, DateAdapter } from '@angular/material';
import { debounceTime, filter } from 'rxjs/operators';
import moment from 'moment-es6';
import { Moment } from 'moment';
import { ApplicationInstanceModel } from '../../../app/models/application-instance.model';
import { AppsProcessCloudService } from '../../../app/services/apps-process-cloud.service';
import { ProcessFilterCloudModel, ProcessFilterProperties, ProcessFilterAction, ProcessFilterOptions } from '../models/process-filter-cloud.model';
import { TranslationService } from '@alfresco/adf-core';
import { TranslationService, UserPreferencesService, UserPreferenceValues } from '@alfresco/adf-core';
import { ProcessFilterCloudService } from '../services/process-filter-cloud.service';
import { ProcessFilterDialogCloudComponent } from './process-filter-dialog-cloud.component';
@@ -33,20 +34,20 @@ import { ProcessFilterDialogCloudComponent } from './process-filter-dialog-cloud
templateUrl: './edit-process-filter-cloud.component.html',
styleUrls: ['./edit-process-filter-cloud.component.scss']
})
export class EditProcessFilterCloudComponent implements OnChanges {
export class EditProcessFilterCloudComponent implements OnInit, OnChanges {
public static ACTION_SAVE = 'save';
public static ACTION_SAVE_AS = 'saveAs';
public static ACTION_DELETE = 'delete';
public static APPLICATION_NAME: string = 'appName';
public static APP_RUNNING_STATUS: string = 'Running';
public static APP_RUNNING_STATUS: string = 'RUNNING';
public static LAST_MODIFIED: string = 'lastModified';
public static SORT: string = 'sort';
public static ORDER: string = 'order';
public static DEFAULT_PROCESS_FILTER_PROPERTIES = ['status', 'sort', 'order'];
public static DEFAULT_PROCESS_FILTER_PROPERTIES = ['status', 'sort', 'order', 'lastModified'];
public static DEFAULT_SORT_PROPERTIES = ['id', 'name', 'status', 'startDate'];
public static DEFAULT_ACTIONS = ['save', 'saveAs', 'delete'];
public FORMAT_DATE: string = 'DD/MM/YYYY';
public DATE_FORMAT: string = 'DD/MM/YYYY';
/** The name of the application. */
@Input()
@@ -89,13 +90,18 @@ export class EditProcessFilterCloudComponent implements OnChanges {
status = [
{ label: 'ALL', value: '' },
{ label: 'CREATED', value: 'CREATED' },
{ label: 'RUNNING', value: 'RUNNING' },
{ label: 'COMPLETED', value: 'COMPLETED' }
{ label: 'SUSPENDED', value: 'SUSPENDED' },
{ label: 'CANCELLED', value: 'CANCELLED' },
{ label: 'COMPLETED', value: 'COMPLETED' },
{ label: 'DELETED', value: 'DELETED' }
];
directions = [{ label: 'ASC', value: 'ASC' }, { label: 'DESC', value: 'DESC' }];
applicationNames: any[] = [];
formHasBeenChanged = false;
dateFilter: any[] = [];
editProcessFilterForm: FormGroup;
processFilterProperties: ProcessFilterProperties[] = [];
processFilterActions: ProcessFilterAction[] = [];
@@ -104,10 +110,18 @@ export class EditProcessFilterCloudComponent implements OnChanges {
constructor(
private formBuilder: FormBuilder,
public dialog: MatDialog,
private dateAdapter: DateAdapter<Moment>,
private userPreferencesService: UserPreferencesService,
private translateService: TranslationService,
private processFilterCloudService: ProcessFilterCloudService,
private appsProcessCloudService: AppsProcessCloudService) { }
ngOnInit() {
this.userPreferencesService.select(UserPreferenceValues.Locale).subscribe((locale) => {
this.dateAdapter.setLocale(locale);
});
}
ngOnChanges(changes: SimpleChanges) {
const id = changes['id'];
if (id && id.currentValue !== id.previousValue) {
@@ -244,13 +258,7 @@ export class EditProcessFilterCloudComponent implements OnChanges {
onDateChanged(newDateValue: any, dateProperty: ProcessFilterProperties) {
if (newDateValue) {
let momentDate;
if (typeof newDateValue === 'string') {
momentDate = moment(newDateValue, this.FORMAT_DATE, true);
} else {
momentDate = newDateValue;
}
let momentDate = moment(newDateValue, this.DATE_FORMAT, true);
if (momentDate.isValid()) {
this.getPropertyController(dateProperty).setValue(momentDate.toDate());
@@ -492,12 +500,6 @@ export class EditProcessFilterCloudComponent implements OnChanges {
key: 'order',
value: currentProcessFilter.order || this.directions[0].value,
options: this.directions
}),
new ProcessFilterProperties({
label: 'ADF_CLOUD_EDIT_PROCESS_FILTER.LABEL.START_DATE',
type: 'date',
key: 'startDate',
value: ''
})
];
}

6
lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts
View File

@@ -23,14 +23,13 @@ export class ProcessFilterCloudModel {
index: number;
appName: string;
processName: string;
processInstanceId: string;
initiator: string;
status: string;
sort: string;
order: string;
processDefinitionId: string;
processDefinitionKey: string;
processInstanceId: string;
startDate: Date;
lastModified: Date;
lastModifiedTo: Date;
lastModifiedFrom: Date;
@@ -43,6 +42,7 @@ export class ProcessFilterCloudModel {
this.icon = obj.icon || null;
this.index = obj.index || null;
this.appName = obj.appName || null;
this.processInstanceId = obj.processInstanceId || null;
this.processName = obj.processName || null;
this.initiator = obj.initiator || null;
this.status = obj.status || null;
@@ -50,8 +50,6 @@ export class ProcessFilterCloudModel {
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;

12
lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts
View File

@@ -21,12 +21,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ProcessFiltersCloudComponent } from './components/process-filters-cloud.component';
import { MaterialModule } from '../../material.module';
import { LogService, StorageService, CoreModule } from '@alfresco/adf-core';
import { LogService, StorageService, CoreModule, MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
import { ProcessFilterCloudService } from './services/process-filter-cloud.service';
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';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material';
@NgModule({
imports: [
FormsModule,
@@ -42,6 +44,12 @@ import { AppListCloudModule } from './../../app/app-list-cloud.module';
declarations: [ProcessFiltersCloudComponent, EditProcessFilterCloudComponent, ProcessFilterDialogCloudComponent],
exports: [ProcessFiltersCloudComponent, EditProcessFilterCloudComponent, ProcessFilterDialogCloudComponent],
entryComponents: [ProcessFilterDialogCloudComponent],
providers: [ProcessFilterCloudService, LogService, StorageService]
providers: [
ProcessFilterCloudService,
LogService,
StorageService,
{ provide: DateAdapter, useClass: MomentDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MOMENT_DATE_FORMATS }
]
})
export class ProcessFiltersCloudModule { }

27
lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts
View File

@@ -178,6 +178,33 @@ describe('ProcessListCloudComponent', () => {
component.onRowClick(rowEvent);
});
describe('component changes', () => {
beforeEach(() => {
component.rows = fakeProcessCloudList.list.entries;
fixture.detectChanges();
});
it('should reload the process list when input parameters changed', () => {
const getProcessByRequestSpy = spyOn(processListCloudService, 'getProcessByRequest').and.returnValue(of(fakeProcessCloudList));
component.appName = 'mock-app-name';
component.status = 'mock-status';
component.initiator = 'mock-initiator';
const appNameChange = new SimpleChange(undefined, 'mock-app-name', true);
const statusChange = new SimpleChange(undefined, 'mock-status', true);
const initiatorChange = new SimpleChange(undefined, 'mock-initiator', true);
component.ngOnChanges({
'appName': appNameChange,
'assignee': initiatorChange,
'status': statusChange
});
fixture.detectChanges();
expect(component.isListEmpty()).toBeFalsy();
expect(getProcessByRequestSpy).toHaveBeenCalled();
});
});
describe('Injecting custom colums for tasklist - CustomTaskListComponent', () => {
let fixtureCustom: ComponentFixture<CustomTaskListComponent>;

17
lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts
View File

@@ -45,10 +45,6 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
@Input()
appName: string = '';
/** The related application version. */
@Input()
appVersion: string = '';
/** Name of the initiator of the process. */
@Input()
initiator: string = '';
@@ -73,10 +69,18 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
@Input()
status: string = '';
/** Filter the tasks to display only the ones with this businessKey value. */
/** Filter the processes to display only the ones with this businessKey value. */
@Input()
businessKey: string = '';
/** Filter the processes. Display only process with lastModifiedTo equal to the supplied date. */
@Input()
lastModifiedFrom: string = '';
/** Filter the processes. Display only process with lastModifiedTo equal to the supplied date. */
@Input()
lastModifiedTo: string = '';
/**
* Row selection mode. Can be "none", "single" or "multiple".
* For multiple mode, you can use Cmd (macOS) or Ctrl (Win) modifier
@@ -222,7 +226,6 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
private createRequestNode(): ProcessQueryCloudRequestModel {
let requestNode = {
appName: this.appName,
appVersion: this.appVersion,
maxItems: this.size,
skipCount: this.skipCount,
initiator: this.initiator,
@@ -232,6 +235,8 @@ export class ProcessListCloudComponent extends DataTableSchema implements OnChan
processDefinitionKey: this.processDefinitionKey,
status: this.status,
businessKey: this.businessKey,
lastModifiedFrom: this.lastModifiedFrom,
lastModifiedTo: this.lastModifiedTo,
sorting: this.sorting
};
return new ProcessQueryCloudRequestModel(requestNode);

2
lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-query-request.model.ts
View File

@@ -19,7 +19,6 @@ import { ProcessListCloudSortingModel } from './process-list-sorting.model';
export class ProcessQueryCloudRequestModel {
appName: string;
appVersion?: string;
description?: string;
initiator?: null;
id?: string;
@@ -38,7 +37,6 @@ export class ProcessQueryCloudRequestModel {
constructor(obj?: any) {
if (obj) {
this.appName = obj.appName;
this.appVersion = obj.appVersion;
this.description = obj.description;
this.initiator = obj.initiator;
this.id = obj.id;