[ADF-3745] Clarified Edit process/task filter cloud component docs (#4228)

* [ADF-3745] Initial review of edit proc filter cloud docs

* [ADF-3745] Updated page ordering

* [ADF-3745] Updated info about sort property

* [ADF-3745] Added edit task cloud component docs

* [ADF-3745] Fixed small typos
This commit is contained in:
Andy Stark 2019-01-31 09:30:16 +00:00 committed by Eugenio Romano
parent 16e7a6954d
commit f77764bc21
4 changed files with 90 additions and 55 deletions

View File

@ -2,19 +2,24 @@
Title: Edit Process Filter Cloud component Title: Edit Process Filter Cloud component
Added: v3.0.0 Added: v3.0.0
Status: Experimental Status: Experimental
Last reviewed: 2019-01-08 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") # [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. Shows Process Filter Details.
![edit-process-filter-cloud](../docassets/images/edit-process-filter-cloud.component.png)
## Basic Usage ## Basic Usage
```html ```html
<adf-cloud-edit-process-filter <adf-cloud-edit-process-filter
[id]="processFilterId" [id]="processFilterId"
[appName]="applicationName"> [appName]="applicationName"
[filterProperties]="filterProperties"
(filterChange)="onFilterChange($event)"
(action)="onAction($event)">
</adf-cloud-edit-process-filter> </adf-cloud-edit-process-filter>
``` ```
@ -34,14 +39,14 @@ Shows Process Filter Details.
| Name | Type | Description | | 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 an filter action occurs i.e Save, SaveAs, Delete. | | 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. |
| 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 an process instance filter property changes. | | 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 ## Details
### Editing APS2 process filter ### Editing APS2 process filters
Use the application name and process filter id property to edit process filter properties: Use the `appName` and `id` properties to choose which process filter to edit:
```html ```html
<adf-cloud-edit-process-filter <adf-cloud-edit-process-filter
@ -49,14 +54,33 @@ Use the application name and process filter id property to edit process filter p
[appName]="applicationName"> [appName]="applicationName">
</adf-cloud-edit-process-filter> </adf-cloud-edit-process-filter>
``` ```
By default these below properties are displayed:
**_state_**, **_sort_**, **_order_**. ### Filter properties
However, you can also choose which properties to show using an input property You can supply various *filter properties* to edit that will determine
`filterProperties`: which processes are found by a filter. The full set of properties is
given below:
Populate the filterProperties in the component class: | Name | Description |
| -- | -- |
| **_appName_** | Name of the app |
| **_initiator_** | ID of the user who initiated the process |
| **_state_** | Execution state of the process. |
| **_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) |
| **_processDefinitionId_** | Process definition ID |
| **_processDefinitionKey_** | Process definition key |
| **_processInstanceId_** | Process instance ID |
| **_startDate_** | Date the process was started |
| **_lastModified_** | Date the process was last modified |
| **_lastModifiedFrom_** | Finds processes modified *after* this date |
| **_lastModifiedTo_** | Finds processes modified *before* this date |
By default, the **_state_**, **_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 ```ts
import { UserProcessModel } from '@alfresco/adf-core'; import { UserProcessModel } from '@alfresco/adf-core';
@ -67,7 +91,7 @@ export class SomeComponent implements OnInit {
"appName", "appName",
"processInstanceId", "processInstanceId",
"startDate", "startDate",
"startedAfter"]; "lastModified"];
onFilterChange(filter: ProcessFilterCloudModel) { onFilterChange(filter: ProcessFilterCloudModel) {
console.log('On filter change: ', filter); console.log('On filter change: ', filter);
@ -80,19 +104,9 @@ export class SomeComponent implements OnInit {
With this configuration, only the four listed properties will be shown. With this configuration, only the four listed properties will be shown.
```html **Note:** Currently, the `sort` property has a limited set of properties
<adf-cloud-edit-process-filter to choose from: **_id_**, **_name_**, **_status_** and **_startDate_**.
[id]="processFilterId"
[appName]="applicationName"
[filterProperties]="filterProperties"
(filterChange)="onFilterChange($event)"
(action)="onAction($event)">
</adf-cloud-edit-process-filter>
```
## See also
All Available properties are: - [Edit task filter cloud component](edit-task-filter-cloud.component.md)
**_appName_**, **_initiator_**, **_state_**, **_sort_**, **_order_**, **_processDefinitionId_**, **_processDefinitionKey_**, **_processInstanceId_**, **_startDate_**, **_lastModified_**, **_lastModifiedFrom_**, **_lastModifiedTo_**.
![edit-process-filter-cloud](../docassets/images/edit-process-filter-cloud.component.png)

View File

@ -2,19 +2,24 @@
Title: Edit Task Filter Cloud component Title: Edit Task Filter Cloud component
Added: v3.0.0 Added: v3.0.0
Status: Experimental Status: Experimental
Last reviewed: 2019-01-08 Last reviewed: 2019-01-30
--- ---
# [Edit Task Filter Cloud component](../../lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.ts "Defined in edit-task-filter-cloud.component.ts") # [Edit Task Filter Cloud component](../../lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filter-cloud.component.ts "Defined in edit-task-filter-cloud.component.ts")
Edits Task Filter Details. Edits Task Filter Details.
![edit-task-filter-cloud](../docassets/images/edit-task-filter-cloud.component.png)
## Basic Usage ## Basic Usage
```html ```html
<adf-cloud-edit-task-filter <adf-cloud-edit-task-filter
[id]="taskFilterId" [id]="taskFilterId"
[appName]="applicationName"> [appName]="applicationName"
[filterProperties]="filterProperties"
(filterChange)="onFilterChange($event)"
(action)="onAction($event)">
</adf-cloud-edit-task-filter> </adf-cloud-edit-task-filter>
``` ```
@ -35,13 +40,13 @@ Edits Task Filter Details.
| Name | Type | Description | | Name | Type | Description |
| ---- | ---- | ----------- | | ---- | ---- | ----------- |
| action | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterActionType`](../../lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts)`>` | Emitted when a filter action occurs (i.e Save, Save As, Delete). | | action | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`FilterActionType`](../../lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts)`>` | Emitted when a filter action occurs (i.e Save, Save As, Delete). |
| filterChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskFilterCloudModel`](../../lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts)`>` | Emitted when an task filter property changes. | | filterChange | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`TaskFilterCloudModel`](../../lib/process-services-cloud/src/lib/task/task-filters/models/filter-cloud.model.ts)`>` | Emitted when a task filter property changes. |
## Details ## Details
### Editing APS2 task filter ### Editing APS2 task filters
Use the `appName` and `id` properties to edit task filter properties: Use the `appName` and `id` properties to choose which task filter to edit:
```html ```html
<adf-cloud-edit-task-filter <adf-cloud-edit-task-filter
@ -50,14 +55,39 @@ Use the `appName` and `id` properties to edit task filter properties:
</adf-cloud-edit-task-filter> </adf-cloud-edit-task-filter>
``` ```
By default these below properties are displayed: ### Filter properties
**_state_**, **_assignment_**, **_sort_**, **_order_**. You can supply various *filter properties* to edit that will determine
which tasks are found by a filter. The full set of properties is
given below:
However, you can also choose which properties to show using the | Name | Description |
`filterProperties` input property: | -- | -- |
| **_appName_** | Name of the app |
| **_initiator_** | ID of the user who initiated the process |
| **_state_** | Execution state of the task. |
| **_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) |
| **_assignment_** | User the task is assigned to |
| **_taskName_** | Name of the task |
| **_parentTaskId_** | ID of the task's parent task |
| **_priority_** | Task priority |
| **_standAlone_** | Standalone status of the task |
| **_owner_** | User ID of the task's owner |
| **_processDefinitionId_** | Process definition ID |
| **_processDefinitionKey_** | Process definition key |
| **_processInstanceId_** | Process instance ID |
| **_startDate_** | Date the task was started |
| **_lastModified_** | Date the task was last modified |
| **_lastModifiedFrom_** | Finds tasks modified *after* this date |
| **_lastModifiedTo_** | Finds tasks modified *before* this date |
Populate the `filterProperties` in the component class:
By default, the **_state_**, **_assignment_**, **_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
**_lastModifiedTo_** properties:
```ts ```ts
import { UserProcessModel } from '@alfresco/adf-core'; import { UserProcessModel } from '@alfresco/adf-core';
@ -67,7 +97,7 @@ export class SomeComponent implements OnInit {
filterProperties: string[] = [ filterProperties: string[] = [
"appName", "appName",
"processInstanceId", "processInstanceId",
"createdDateTo", "startDate",
"lastModifiedTo"]; "lastModifiedTo"];
onFilterChange(filter: TaskFilterCloudModel) { onFilterChange(filter: TaskFilterCloudModel) {
@ -81,18 +111,9 @@ export class SomeComponent implements OnInit {
With this configuration, only the four listed properties will be shown. With this configuration, only the four listed properties will be shown.
```html **Note:** Currently, the `sort` property has a limited set of properties
<adf-cloud-edit-task-filter to choose from: **_id_**, **_name_**, **_status_** and **_startDate_**.
[id]="taskFilterId"
[appName]="applicationName"
[filterProperties]="filterProperties"
(filterChange)="onFilterChange($event)"
(action)="onAction($event)">
</adf-cloud-edit-task-filter>
```
The available properties are: ## See also
**_appName_**, **_state_**, **_assignment_**, **_sort_**, **_order_**, **_processDefinitionId_**, **_processInstanceId_**, **_taskName_**, **_parentTaskId_**, **_priority_**, **_standAlone_**, **_lastModifiedFrom_**, **_lastModifiedTo_**, **_owner_**. - [Edit process filter cloud component](edit-process-filter-cloud.component.md)
![edit-task-filter-cloud](../docassets/images/edit-task-filter-cloud.component.png)

View File

@ -61,11 +61,11 @@ export class EditProcessFilterCloudComponent implements OnChanges {
@Input() @Input()
showTitle = true; showTitle = true;
/** Emitted when an process instance filter property changes. */ /** Emitted when a process instance filter property changes. */
@Output() @Output()
filterChange: EventEmitter<ProcessFilterCloudModel> = new EventEmitter(); filterChange: EventEmitter<ProcessFilterCloudModel> = new EventEmitter();
/** Emitted when an filter action occurs i.e Save, SaveAs, Delete. */ /** Emitted when a filter action occurs i.e Save, SaveAs, Delete. */
@Output() @Output()
action: EventEmitter<ProcessFilterActionType> = new EventEmitter(); action: EventEmitter<ProcessFilterActionType> = new EventEmitter();

View File

@ -63,7 +63,7 @@ export class EditTaskFilterCloudComponent implements OnChanges {
@Input() @Input()
showTitle = true; showTitle = true;
/** Emitted when an task filter property changes. */ /** Emitted when a task filter property changes. */
@Output() @Output()
filterChange: EventEmitter<TaskFilterCloudModel> = new EventEmitter(); filterChange: EventEmitter<TaskFilterCloudModel> = new EventEmitter();