mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ADF-3977] EditProcessComponent - Be able to change the sort and actions (#4250)
* [ADF-3883] Improve edit-process-filter-cloud by adding inputs to control filters, sort and actions * Provided an input to pass sort properties * Provided an input to pass filter actions * Provided a way to configure sort properties and actions * * Updated unit tests to the recent changes * Fixed order should be visible if sort as been added to the config * Fixed if lastModified if defined the component should show the range lastModifiedTo lastModifiedFrom * Updated doc * * Removed ProcessFilterActionType* Renamed state to status* Refactored edit-process-filter * Updated doc * * After rebase * * Fixed editProcessFilter e2e tests. * * Removed unwanted comment * * After rebase * * After rebase * * After rebase
This commit is contained in:
siva kumar
committed by
Eugenio Romano
Eugenio Romano
parent
2b5b915d55
commit
bc5208b767
@@ -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
|
||||
@@ -40,17 +42,19 @@ Shows Process Filter Details.
|
||||
|
||||
| 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)`<`[`ProcessFilterActionType`](../../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. |
|
||||
| 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
|
||||
@@ -78,23 +82,21 @@ 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 |
|
||||
| **_lastModified_** | Date the process was last modified. If lastModified defined the component will show the range **_lastModifiedTo_**, **_lastModifiedFrom_**|
|
||||
| **_startDate_** | Date the process was started |
|
||||
| **_sort_** | Field on which the filter results will be sorted (doesn't participate in the filtering itself). Can be "id", "name", "status" or "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:
|
||||
|
||||
```ts
|
||||
import { UserProcessModel } from '@alfresco/adf-core';
|
||||
|
||||
export class SomeComponent implements OnInit {
|
||||
|
||||
filterProperties: string[] = [
|
||||
@@ -107,15 +109,94 @@ export class SomeComponent implements OnInit {
|
||||
console.log('On filter change: ', filter);
|
||||
}
|
||||
|
||||
onAction($event: ProcessFilterActionType) {
|
||||
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.
|
||||
|
||||
**Note:** Currently, the `sort` property has a limited set of properties
|
||||
to choose from: **_id_**, **_name_**, **_status_** and **_startDate_**.
|
||||
### 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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user