diff --git a/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html index c81c7c78d2..4ba5203f11 100644 --- a/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html +++ b/demo-shell/src/app/components/app-layout/cloud/processes-cloud-demo.component.html @@ -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" diff --git a/docs/process-services-cloud/components/edit-process-filter-cloud.component.md b/docs/process-services-cloud/components/edit-process-filter-cloud.component.md index 82e6a7171b..2d877cbe22 100644 --- a/docs/process-services-cloud/components/edit-process-filter-cloud.component.md +++ b/docs/process-services-cloud/components/edit-process-filter-cloud.component.md @@ -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 + + +``` + +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 + + +``` -**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 + + +``` + +With this configuration, only the two actions will be shown. ## See also diff --git a/docs/process-services-cloud/components/process-list-cloud.component.md b/docs/process-services-cloud/components/process-list-cloud.component.md index 366247aaea..0c5794cb8b 100644 --- a/docs/process-services-cloud/components/process-list-cloud.component.md +++ b/docs/process-services-cloud/components/process-list-cloud.component.md @@ -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 diff --git a/docs/process-services-cloud/edit-process-filter-cloud.component.md b/docs/process-services-cloud/edit-process-filter-cloud.component.md new file mode 100644 index 0000000000..86b3e1d94c --- /dev/null +++ b/docs/process-services-cloud/edit-process-filter-cloud.component.md @@ -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 + + +``` + +## 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 + + +``` + +### 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 + + +``` + +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 + + +``` + +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 + + +``` + +With this configuration, only the two actions will be shown. + +## See also + +- [Edit task filter cloud component](edit-task-filter-cloud.component.md) diff --git a/lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts b/lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts index 4010d3e957..3784d22f04 100644 --- a/lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts +++ b/lib/process-services-cloud/src/lib/app/services/apps-process-cloud.service.ts @@ -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`; } diff --git a/lib/process-services-cloud/src/lib/i18n/en.json b/lib/process-services-cloud/src/lib/i18n/en.json index a0f0665cd2..671168543d 100644 --- a/lib/process-services-cloud/src/lib/i18n/en.json +++ b/lib/process-services-cloud/src/lib/i18n/en.json @@ -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", diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html index 9b97456690..f506e6ccb6 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html @@ -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"> diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts index 394a263de6..4bb7e34ec4 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.spec.ts @@ -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(); diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts index 96e985fc32..1d6a247a3f 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.ts @@ -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, + 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: '' }) ]; } diff --git a/lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts b/lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts index b0c120aec8..0a580d0ee9 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts +++ b/lib/process-services-cloud/src/lib/process/process-filters/models/process-filter-cloud.model.ts @@ -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; diff --git a/lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts b/lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts index 99efb0ba5f..0f4d2c848e 100644 --- a/lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts +++ b/lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts @@ -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 { } diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts index de7fc7f58b..d3ee8c3b38 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts @@ -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; diff --git a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts index 196b233cd2..7ac2a3c7c6 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.ts @@ -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); diff --git a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-query-request.model.ts b/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-query-request.model.ts index 6612f911f2..3a702933af 100644 --- a/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-query-request.model.ts +++ b/lib/process-services-cloud/src/lib/process/process-list/models/process-cloud-query-request.model.ts @@ -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;