From 36625c1af6e602e0212153d3aa688e3dd9ec7e86 Mon Sep 17 00:00:00 2001 From: Andy Stark <30621568+therealandeeee@users.noreply.github.com> Date: Thu, 22 Mar 2018 09:34:26 +0000 Subject: [PATCH] [ADF-2451] Reviewed component docs (#3108) * [ADF-2451] Reviewed component docs * [ADF-2451] Reviewed component docs * [ADF-2451] Renamed node share directive doc fileand rebuilt index --- docs/README.md | 4 +- docs/content-services/README.md | 2 +- ...e.directive.md => node-share.directive.md} | 0 docs/core/README.md | 2 +- docs/core/form.component.md | 242 ++++++------ docs/core/node-delete.directive.md | 5 +- docs/core/sites.service.md | 4 + docs/core/thumbnail.service.md | 35 +- docs/process-services/README.md | 1 + .../process-attachment-list.component.md | 15 +- .../process-filter.service.md | 214 ++--------- .../process-filters.component.md | 1 + .../process-list.component.md | 65 ++-- docs/process-services/task-filter.service.md | 353 +++--------------- .../process-services/task-header.component.md | 14 +- lib/core/services/sites.service.ts | 3 + .../components/process-list.component.ts | 2 +- .../services/process-filter.service.ts | 40 +- .../task-list/services/task-filter.service.ts | 42 ++- 19 files changed, 363 insertions(+), 681 deletions(-) rename docs/content-services/{share.directive.md => node-share.directive.md} (100%) diff --git a/docs/README.md b/docs/README.md index 4554e48624..325e53d0b5 100644 --- a/docs/README.md +++ b/docs/README.md @@ -59,7 +59,7 @@ for more information about installing and using the source code. | [Datatable component](core/datatable.component.md) | Displays data as a table with customizable columns and presentation. | [Source](../lib/core/datatable/components/datatable/datatable.component.ts) | | [Form field component](core/form-field.component.md) | A form field in an APS form. | [Source](../lib/core/form/components/form-field/form-field.component.ts) | | [Form list component](core/form-list.component.md) | Shows APS forms as a list. | [Source](../lib/core/form/components/form-list.component.ts) | -| [Form component](core/form.component.md) | Shows a Form from APS (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)) | [Source](../lib/core/form/components/form.component.ts) | +| [Form component](core/form.component.md) | Shows a Form from APS | [Source](../lib/core/form/components/form.component.ts) | | [Start form component](core/start-form.component.md) | Displays the Start Form for a process. | [Source](../lib/core/form/components/start-form.component.ts) | | [Text mask component](core/text-mask.component.md) | Implements text field input masks. | [Source](../lib/core/form/components/widgets/text/text-mask.component.ts) | | [Info drawer layout component](core/info-drawer-layout.component.md) | Displays a sidebar-style information panel. | [Source](../lib/core/info-drawer/info-drawer-layout.component.ts) | @@ -211,6 +211,7 @@ for more information about installing and using the source code. | Name | Description | Source link | | ---- | ----------- | ----------- | | [Node download directive](content-services/node-download.directive.md) | Allows folders and/or files to be downloaded. Multiple nodes are packed as a '.ZIP' archive. | [Source](../lib/content-services/directives/node-download.directive.ts) | +| [Node share directive](content-services/node-share.directive.md) | Create and manage public shared links for files | [Source](../lib/content-services/directives/node-share.directive.ts) | | [Folder create directive](content-services/folder-create.directive.md) | Allows folders to be created. | [Source](../lib/content-services/folder-directive/folder-create.directive.ts) | | [Folder edit directive](content-services/folder-edit.directive.md) | Allows folders to be edited. | [Source](../lib/content-services/folder-directive/folder-edit.directive.ts) | | [File draggable directive](core/file-draggable.directive.md) | Provide drag-and-drop features for an element such as a `div`. | [Source](../lib/content-services/upload/directives/file-draggable.directive.ts) | @@ -273,6 +274,7 @@ for more information about installing and using the source code. | [Task filters component](process-services/task-filters.component.md) | Shows all available filters. | [Source](../lib/process-services/task-list/components/task-filters.component.ts) | | [Task header component](process-services/task-header.component.md) | Shows all the information related to a task. | [Source](../lib/process-services/task-list/components/task-header.component.ts) | | [Task list component](process-services/task-list.component.md) | Renders a list containing all the tasks matched by the parameters specified. | [Source](../lib/process-services/task-list/components/task-list.component.ts) | +| [Task standalone component](process-services/task-standalone.component.md) | This component can be used when there is no form attached to a task. | [Source](../lib/process-services/task-list/components/task-standalone.component.ts) | ## Directives diff --git a/docs/content-services/README.md b/docs/content-services/README.md index c18201bf79..dcbaf8897c 100644 --- a/docs/content-services/README.md +++ b/docs/content-services/README.md @@ -39,10 +39,10 @@ for more information about installing and using the source code. | Name | Description | Source link | | ---- | ----------- | ----------- | | [Node download directive](node-download.directive.md) | Allows folders and/or files to be downloaded. Multiple nodes are packed as a '.ZIP' archive. | [Source](../../lib/content-services/directives/node-download.directive.ts) | +| [Node share directive](node-share.directive.md) | Create and manage public shared links for files | [Source](../../lib/content-services/directives/node-share.directive.ts) | | [Folder create directive](folder-create.directive.md) | Allows folders to be created. | [Source](../../lib/content-services/folder-directive/folder-create.directive.ts) | | [Folder edit directive](folder-edit.directive.md) | Allows folders to be edited. | [Source](../../lib/content-services/folder-directive/folder-edit.directive.ts) | | [File draggable directive](file-draggable.directive.md) | Provide drag-and-drop features for an element such as a `div`. | [Source](../../lib/content-services/upload/directives/file-draggable.directive.ts) | -| [Share Directive](share.directive.md) | Proide a pop up that generat a public linlk to share a file | [Source](../../lib/content-services/upload/directives/share.directive.ts) | ## Models diff --git a/docs/content-services/share.directive.md b/docs/content-services/node-share.directive.md similarity index 100% rename from docs/content-services/share.directive.md rename to docs/content-services/node-share.directive.md diff --git a/docs/core/README.md b/docs/core/README.md index 174687f8a2..659f87393e 100644 --- a/docs/core/README.md +++ b/docs/core/README.md @@ -18,7 +18,7 @@ for more information about installing and using the source code. | [Datatable component](datatable.component.md) | Displays data as a table with customizable columns and presentation. | [Source](../../lib/core/datatable/components/datatable/datatable.component.ts) | | [Form field component](form-field.component.md) | A form field in an APS form. | [Source](../../lib/core/form/components/form-field/form-field.component.ts) | | [Form list component](form-list.component.md) | Shows APS forms as a list. | [Source](../../lib/core/form/components/form-list.component.ts) | -| [Form component](form.component.md) | Shows a Form from APS (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)) | [Source](../../lib/core/form/components/form.component.ts) | +| [Form component](form.component.md) | Shows a Form from APS | [Source](../../lib/core/form/components/form.component.ts) | | [Start form component](start-form.component.md) | Displays the Start Form for a process. | [Source](../../lib/core/form/components/start-form.component.ts) | | [Text mask component](text-mask.component.md) | Implements text field input masks. | [Source](../../lib/core/form/components/widgets/text/text-mask.component.ts) | | [Info drawer layout component](info-drawer-layout.component.md) | Displays a sidebar-style information panel. | [Source](../../lib/core/info-drawer/info-drawer-layout.component.ts) | diff --git a/docs/core/form.component.md b/docs/core/form.component.md index 436f10b58e..c3bbc1fa07 100644 --- a/docs/core/form.component.md +++ b/docs/core/form.component.md @@ -1,10 +1,14 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-03-21 --- + # Form component -Shows a Form from APS (see it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)) +Shows a Form from APS + +(See it live: [Form Quickstart](https://embed.plnkr.co/YSLXTqb3DtMhVJSqXKkE/)) ## Contents @@ -15,12 +19,10 @@ Shows a Form from APS (see it live: [Form Quickstart](https://embed.plnkr.co/YSL - [Details](#details) + - [Displaying a form](#displaying-a-form) - [Custom empty form template](#custom-empty-form-template) - [Controlling outcome execution behaviour](#controlling-outcome-execution-behaviour) - [Field Validators](#field-validators) - -- [Other documentation](#other-documentation) - - [Common scenarios](#common-scenarios) - [See also](#see-also) @@ -33,75 +35,6 @@ Shows a Form from APS (see it live: [Form Quickstart](https://embed.plnkr.co/YSL ``` -**Display form instance by task id:** - -```html - - -``` - -For an existing Task both form and values will be fetched and displayed. - -**Display form definition by form id:** - -```html - - -``` - -Only form definition will be fetched. - -**Display form definition by form name:** - -```html - - -``` - -**Display form definition by ECM nodeId:** - -In this case the metadata of the node are showed in an activiti Form. -If there is no form definied in activiti for the type of the node, -a new form will be automaticaly created in Activiti. - -```html - - -``` - -**Display form definition by form name, and store the form field as metadata:** - -The param nameNode is optional. - -```html - - -``` - -**Display form definition by ECM nodeId:** - -In this case the metadata of the node are shown in an activiti Form, -and store the form field as metadata. The param nameNode is optional. - -```html - - -``` - ### Properties | Name | Type | Default value | Description | @@ -130,17 +63,17 @@ and store the form field as metadata. The param nameNode is optional. | Name | Type | Description | | ---- | ---- | ----------- | -| formSaved | `EventEmitter` | Emitted when the form is submitted with the `Save` or custom outcomes. | -| formCompleted | `EventEmitter` | Emitted when the form is submitted with the `Complete` outcome. | -| formContentClicked | `EventEmitter` | Emitted when form content is clicked. | -| formLoaded | `EventEmitter` | Emitted when the form is loaded or reloaded. | -| formDataRefreshed | `EventEmitter` | Emitted when form values are refreshed due to a data property change. | +| formSaved | `EventEmitter` | Emitted when the form is submitted with the `Save` or custom outcomes. | +| formCompleted | `EventEmitter` | Emitted when the form is submitted with the `Complete` outcome. | +| formContentClicked | `EventEmitter` | Emitted when form content is clicked. | +| formLoaded | `EventEmitter` | Emitted when the form is loaded or reloaded. | +| formDataRefreshed | `EventEmitter` | Emitted when form values are refreshed due to a data property change. | | executeOutcome | `EventEmitter` | Emitted when any outcome is executed. Default behaviour can be prevented via `event.preventDefault()`. | -| onError | `EventEmitter` | Emitted when any error occurs. | +| onError | `EventEmitter` | Emitted when any error occurs. | ## Details -All `form*` events receive an instance of the `FormModel` as event argument for ease of development: +All `formXXX` events receive a `FormModel` instance as their argument: **MyView.component.html** @@ -159,9 +92,82 @@ onFormSaved(form: FormModel) { } ``` +### Displaying a form + +There are various ways to display a form. The common scenarios are detailed below. + +#### Displaying a form instance by task id + +```html + + +``` + +For an existing Task both the form and its values will be fetched and displayed. + +#### Displaying a form definition by form id + +```html + + +``` + +In this case, only the form definition will be fetched. + +#### Displaying a form definition by form name + +```html + + +``` + +#### Displaying a form definition by ACS nodeId + +```html + + +``` + +Here, the node metadata is shown in an APS form. +If there is no form defined in APS for the type of node being used then +APS will automatically create a new form. + +#### Displaying a form definition by form name, storing the form fields as metadata + +```html + + +``` + +The `nameNode` parameter is optional. + +#### Displaying a form definition by ECM nodeId + +```html + + +``` + +Here, the node metadata is shown in an APS Form, +with the form fields themselves saved as metadata. The `nameNode` parameter is optional. + ### Custom empty form template -You can add a template that will be show if no form definition has been found +You can add a template that will be shown when no form definition is found: ```html @@ -175,13 +181,14 @@ You can add a template that will be show if no form definition has been found ### Controlling outcome execution behaviour -If absolutely needed it is possible taking full control over form outcome execution by means of `executeOutcome` event. -This event is fired upon each outcome execution, both system and custom ones. +In unusual circumstances, you may need to take complete control of form outcome execution. +You can do this by implementing the `executeOutcome` event, which is emitted for both system +outcomes and custom ones. -You can prevent default behaviour by calling `event.preventDefault()`. -This allows for example having custom form validation scenarios and/or additional validation summary presentation. - -Alternatively you may want just running additional code on outcome execution without suppressing default one. +Note that by default, the code in your `executeOutcome` handler is executed _before_ the default +behavior but you can switch the default behavior off using `event.preventDefault()`. +You might want to do this, for example, to provide custom form validation or to show a summary +of the form validation before it is submitted. **MyView.component.html** @@ -217,32 +224,28 @@ export class MyView { } ``` -There are two additional functions that can be of a great value when controlling outcomes: +There are two other functions that can be very useful when you need to control form outcomes: -- `saveTaskForm()` - saves current form -- `completeTaskForm(outcome?: string)` - save and complete form with a given outcome name - -**Please note that if `event.preventDefault()` is not called then default outcome behaviour -will also be executed after your custom code.** +- `saveTaskForm()` - Saves the current form +- `completeTaskForm(outcome?: string)` Saves and completes the form with a given outcome name ### Field Validators You can supply a set of validator objects to the form using the `fieldValidators` -property. Each validator implements checks for a particular type of data (eg, a +property. Each validator implements a check for a particular type of data (eg, a date validator might check that the date in the field falls between 1980 and 2017). ADF supplies a standard set of validators that handle most common cases but you can also implement your own custom validators to replace or extend the set. See the -[FormFieldValidator](form-field-validator.interface.md) class for full details and examples. - -## Other documentation +[Form Field Validator](form-field-validator.interface.md) interface for full details and examples. ### Common scenarios -#### Render form by using form definition JSON +#### Rendering a form using form definition JSON -Please give a look to the [demo-form](../docassets/demo-form.json) as a sample of form definition JSON. +See the [demo-form](../docassets/demo-form.json) file for an example of form definition JSON. -The component below with the form definition JSON assigned to the variable `formDefinitionJSON`, shows how a form is rendered by using form definition JSON. +The component below (with the JSON assigned to the `formDefinitionJSON` property), shows how a +form definition is rendered: ```ts @Component({ @@ -267,9 +270,15 @@ export class SampleFormComponent implements OnInit { } ``` -#### Changing field value based on another field +#### Changing a field value based on another field -Create a simple Form with a dropdown widget (id: `type`), and a multiline text (id: `description`). +A common scenario is to set the contents of one form field based on the value of another. You +could use this, say, to provide two alternative ways of entering the same information or to set +up default values that can be edited. + +You can implement this in ADF using the `formFieldValueChanged` event of the +[Form service](form.service.md). For example, if you had a form with a dropdown widget (id: `type`) +and a multiline text (id:`description`), you could synchronize their values as follows: ```ts formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => { @@ -284,15 +293,18 @@ formService.formFieldValueChanged.subscribe((e: FormFieldEvent) => { }); ``` -You subscribe to the `formFieldValueChanged` event and check whether event is raised for the `type` widget, then you search for a `description` widget and assign its value to some simple text. +The code shown above subscribes to the `formFieldValueChanged` event to check whether an event +is emitted for the `type` widget. Then it finds the `description` widget and assigns some text +to its `value` property. -The result should be as following: +The result should look like the following: ![](../docassets/images/form-service-sample-01.png) -#### Listen all form Events +#### Responding to all form events -If you want to listen all the events fired in the form you can subscribe to this Subject : +Subscribe to the `formEvents` event of the [Form service](form.service.md) to get notification +of all form events: ```ts formService.formEvents.subscribe((event: Event) => { @@ -301,17 +313,14 @@ formService.formEvents.subscribe((event: Event) => { }); ``` -#### Customize form outcomes (buttons) styles +#### Customizing the styles of form outcome buttons -If you want custtomize the outcoumes style of your form you can do it using plain css selectors. -Any outcome has an Id that is composed in the following way: +You can use normal CSS selectors to style the outcome buttons of your form. +Every outcome has an CSS id value following a simple pattern: + adf-form-OUTCOME_NAME -``` - adf-form-YOUR_OUTCAME_NAME -``` - -Using the CSS you can target any outcome ID and change the style as in this example: +In the CSS, you can target any outcome ID and change the style as in this example: ```css #adf-form-complete { @@ -333,11 +342,10 @@ Using the CSS you can target any outcome ID and change the style as in this exam ![](../docassets/images/form-style-sample.png) - - ## See also -- [FormFieldValidator](form-field-validator.interface.md) +- [Form Field Validator interface](form-field-validator.interface.md) - [Extensibility](../user-guide/extensibility.md) - [Form rendering service](form-rendering.service.md) - [Form field model](form-field.model.md) +- [Form service](form.service.md) diff --git a/docs/core/node-delete.directive.md b/docs/core/node-delete.directive.md index bc56bfe1bc..5ad39a4355 100644 --- a/docs/core/node-delete.directive.md +++ b/docs/core/node-delete.directive.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-03-21 --- + # Node Delete directive Deletes multiple files and folders. @@ -36,7 +38,8 @@ Deletes multiple files and folders. ## Details -Note it the file is already in the trashcan so is a DeletedNodeEntity the performing of this action will delete the file premanently +Note that if a target item is already in the trashcan (and is therefore a `DeletedNodeEntity`) then +this action will delete the file permanently. ## See also diff --git a/docs/core/sites.service.md b/docs/core/sites.service.md index 2ad4b3bd73..34e278096e 100644 --- a/docs/core/sites.service.md +++ b/docs/core/sites.service.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-03-21 --- + # Sites service Accesses and manipulates sites from a Content Services repository. @@ -25,6 +27,8 @@ Accesses and manipulates sites from a Content Services repository. - `getSiteMembers(siteId: string): Observable` Gets a list of all a site's members. - `siteId` - ID of the target site +- `getEcmCurrentLoggedUserName(): string` + Gets the username of the user currently logged into ACS. ## Details diff --git a/docs/core/thumbnail.service.md b/docs/core/thumbnail.service.md index ed0b90b4b5..dd3e3a6e9b 100644 --- a/docs/core/thumbnail.service.md +++ b/docs/core/thumbnail.service.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-03-21 --- + # Thumbnail service Retrieves an SVG thumbnail image to represent a document type. @@ -26,24 +28,25 @@ and icons is shown in the table below: | Document | Icon | Types | | -------- | ---- | ----- | -| Compressed archive | ![Archive thumbnail](docassets/images/ft_ic_archive.png) | 'application/x-compressed', 'application/x-zip-compressed', 'application/zip' | -| Text | ![Text thumbnail](docassets/images/ft_ic_document.png) | 'text/plain', 'application/json', 'application/x-javascript', 'application/vnd.apple.pages' | -| Bitmap/raster image | ![Bitmap thumbnail](docassets/images/ft_ic_raster_image.png) | 'image/png', 'image/jpeg', 'image/gif' | -| MP4 video | ![MP4 thumbnail](docassets/images/ft_ic_video.png) | 'video/mp4' | -| SVG vector image | ![SVG thumbnail](docassets/images/ft_ic_vector_image.png) | 'image/svg+xml' | -| HTML file | ![HTML thumbnail](docassets/images/ft_ic_website.png) | 'text/html' | -| PDF file | ![PDF thumbnail](docassets/images/ft_ic_pdf.png) | 'application/pdf' | -| Folder | ![Folder thumbnail](docassets/images/ft_ic_folder.png) | | -| Disabled folder | ![Disabled folder thumbnail](docassets/images/ft_ic_folder_disable.png) | | -| Excel spreadsheet | ![Spreadsheet thumbnail](docassets/images/ft_ic_ms_excel.png) | 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template' | -| PowerPoint slideshow | ![PowerPoint thumbnail](docassets/images/ft_ic_ms_powerpoint.png) | 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow' | -| Word document | ![Word thumbnail](docassets/images/ft_ic_ms_word.png) | 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.wordprocessingml.template' | -| Keynote presentation | ![Keynote thumbnail](docassets/images/ft_ic_presentation.png) | 'application/vnd.apple.keynote' | -| Numbers spreadsheet | ![Numbers thumbnail](docassets/images/ft_ic_spreadsheet.png) | 'application/vnd.apple.numbers' | +| Compressed archive | ![Archive thumbnail](../docassets/images/ft_ic_archive.png) | 'application/x-compressed', 'application/x-zip-compressed', 'application/zip' | +| Text | ![Text thumbnail](../docassets/images/ft_ic_document.png) | 'text/plain', 'application/json', 'application/x-javascript', 'application/vnd.apple.pages' | +| Bitmap/raster image | ![Bitmap thumbnail](../docassets/images/ft_ic_raster_image.png) | 'image/png', 'image/jpeg', 'image/gif' | +| MP4 video | ![MP4 thumbnail](../docassets/images/ft_ic_video.png) | 'video/mp4' | +| SVG vector image | ![SVG thumbnail](../docassets/images/ft_ic_vector_image.png) | 'image/svg+xml' | +| HTML file | ![HTML thumbnail](../docassets/images/ft_ic_website.png) | 'text/html' | +| PDF file | ![PDF thumbnail](../docassets/images/ft_ic_pdf.png) | 'application/pdf' | +| Folder | ![Folder thumbnail](../docassets/images/ft_ic_folder.png) | | +| Disabled folder | ![Disabled folder thumbnail](../docassets/images/ft_ic_folder_disable.png) | | +| Excel spreadsheet | ![Spreadsheet thumbnail](../docassets/images/ft_ic_ms_excel.png) | 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'application/vnd.openxmlformats-officedocument.spreadsheetml.template' | +| PowerPoint slideshow | ![PowerPoint thumbnail](../docassets/images/ft_ic_ms_powerpoint.png) | 'application/vnd.ms-powerpoint', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'application/vnd.openxmlformats-officedocument.presentationml.template', 'application/vnd.openxmlformats-officedocument.presentationml.slideshow' | +| Word document | ![Word thumbnail](../docassets/images/ft_ic_ms_word.png) | 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document', 'application/vnd.openxmlformats-officedocument.wordprocessingml.template' | +| Keynote presentation | ![Keynote thumbnail](../docassets/images/ft_ic_presentation.png) | 'application/vnd.apple.keynote' | +| Numbers spreadsheet | ![Numbers thumbnail](../docassets/images/ft_ic_spreadsheet.png) | 'application/vnd.apple.numbers' | -## Mat-icon +### Mat-icon -All the MIME types ADF icon are now registered into the MatIconRegistry, this will allow you to use all the icon through the mat-icon tag: +All the ADF icons for MIME types are now registered into the MatIconRegistry, so you can use all +the icons via the <mat-icon> tag: ```javascript import { ThumbnailService } from '@alfresco/adf-core'; diff --git a/docs/process-services/README.md b/docs/process-services/README.md index a4eb666104..441a8c84a8 100644 --- a/docs/process-services/README.md +++ b/docs/process-services/README.md @@ -34,6 +34,7 @@ for more information about installing and using the source code. | [Task filters component](task-filters.component.md) | Shows all available filters. | [Source](../../lib/process-services/task-list/components/task-filters.component.ts) | | [Task header component](task-header.component.md) | Shows all the information related to a task. | [Source](../../lib/process-services/task-list/components/task-header.component.ts) | | [Task list component](task-list.component.md) | Renders a list containing all the tasks matched by the parameters specified. | [Source](../../lib/process-services/task-list/components/task-list.component.ts) | +| [Task standalone component](task-standalone.component.md) | This component can be used when there is no form attached to a task. | [Source](../../lib/process-services/task-list/components/task-standalone.component.ts) | ## Directives diff --git a/docs/process-services/process-attachment-list.component.md b/docs/process-services/process-attachment-list.component.md index 24173011c7..3df3f64d25 100644 --- a/docs/process-services/process-attachment-list.component.md +++ b/docs/process-services/process-attachment-list.component.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-03-21 --- + # Process Attachment List component Displays attached documents on a specified process instance @@ -17,10 +19,6 @@ Displays attached documents on a specified process instance ``` -If the List is empty, a default no content template is displayed. - -![default-no-content-template-sample](../docassets/images/default-no-content-template.png) - Make sure to override the UploadService with the ProcessUploadService ```ts @@ -57,7 +55,10 @@ export class MyCustomProcessAttachmentComponent { ### How to Add Drag and Drop Functionality -If we want user to be able to upload attachments for empty lists, We can wrap our component with upload drag area component. In that case, We should also pass a custom _no content template_ as shown below with our component urging the user to drag files to upload whenever the list is empty. +You can wrap the attachment list with an +[Upload Drag Area component](../content-services/upload-drag-area.component.md) +to let the user upload attachments to empty lists. When you do this, you can also supply +a custom _no content template_ (using <adf-empty-list>) to invite the user to add their attachments: @@ -85,3 +86,7 @@ If we want user to be able to upload attachments for empty lists, We can wrap ou If the List is empty, the custom no-content template we passed is displayed. ![custom-no-content-drag-drop-template-sample](../docassets/images/custom-no-content-drag-drop-template.png) + +A default template will be used if you don't supply a custom one to override it: + +![default-no-content-template-sample](../docassets/images/default-no-content-template.png) \ No newline at end of file diff --git a/docs/process-services/process-filter.service.md b/docs/process-services/process-filter.service.md index 4f111682e6..fbc7014da7 100644 --- a/docs/process-services/process-filter.service.md +++ b/docs/process-services/process-filter.service.md @@ -1,62 +1,44 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-03-21 --- + # Process Filter Service Manage Process Filters, which are pre-configured Process Instance queries. -## Importing - -```ts -import { ProcessFilterService, FilterProcessRepresentationModel } from '@alfresco/adf-process-services'; - -export class SomePageComponent implements OnInit { - - constructor(private processFilterService: ProcessFilterService) { - } -``` - ## Methods -#### createDefaultFilters(appId: number): Observable`` +- `getProcessFilters(appId: number): Observable` + Gets all filters defined for a Process App. + - `appId` - ID of the target app +- `getProcessFilterById(filterId: number, appId?: number): Observable` + Retrieves the process filter by ID. + - `filterId` - ID of the filter + - `appId` - (Optional) ID of the target app +- `getProcessFilterByName(filterName: string, appId?: number): Observable` + Retrieves the process filter by name. + - `filterName` - Name of the filter + - `appId` - (Optional) ID of the target app +- `createDefaultFilters(appId: number): Observable` + Creates and returns the default filters for an app. + - `appId` - ID of the target app +- `getRunningFilterInstance(appId: number): FilterProcessRepresentationModel` + Creates and returns a filter that matches "running" process instances. + - `appId` - ID of the target app +- `addProcessFilter(filter: FilterProcessRepresentationModel): Observable` + Adds a filter. + - `filter` - The filter to add +- `callApiProcessFilters(appId?: number): any` + Calls `getUserProcessInstanceFilters` from the Alfresco JS API. + - `appId` - (Optional) ID of the target app -Create and return the default filters for a Process App: +## Details -```ts -const processAppId = 2; -this.processFilterService.createDefaultFilters(processAppId) - .subscribe( filters => { - console.log('filters: ', filters); -}, error => { - console.log('Error: ', error); -}); -``` - -The response is an array of `FilterProcessRepresentationModel` objects: - - filters: - 0: { - appId: 2 - filter: - name: "" - sort: "created-desc" - state: "running" - icon: "glyphicon-random" - id: null - index: undefined - name: "Running" - recent: true - } - 1: {id: null, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …} - 2: {id: null, appId: 2, name: "All", recent: true, icon: "glyphicon-th", …} - -These filters can now be used to get matching process instances for Process App with ID 2, -such as 'Running', 'Completed', and 'All' . - -#### getProcessFilters(appId: number): Observable`` - -Get all filters defined for a Process App: +The methods of this service generally return an instance of +`FilterProcessRepresentationModel` or an array of instances. For example, you +could use `getProcessFilters` as follows: ```ts const processAppId = 2; @@ -70,133 +52,19 @@ this.processFilterService.getProcessFilters(processAppId) The response is an array of `FilterProcessRepresentationModel` objects: - filters: - 0: {id: 15, appId: 2, name: "Running", recent: true, icon: "glyphicon-random", …} - 1: {id: 14, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …} - 2: {id: 13, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …} - 3: {id: 3003, appId: 2, name: "Running", recent: false, icon: "glyphicon-random", …} - 4: {id: 3004, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …} - 5: {id: 3005, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …} - + filters: + 0: {id: 15, appId: 2, name: "Running", recent: true, icon: "glyphicon-random", …} + 1: {id: 14, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …} + 2: {id: 13, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …} + 3: {id: 3003, appId: 2, name: "Running", recent: false, icon: "glyphicon-random", …} + 4: {id: 3004, appId: 2, name: "Completed", recent: false, icon: "glyphicon-ok-sign", …} + 5: {id: 3005, appId: 2, name: "All", recent: false, icon: "glyphicon-th", …} -In this example I had run the `createDefaultFilters` method ones and that created the duplicate of -the default filters. +You can use the returned filters to get matching process instances for the process app with ID 2, +such as 'Running', 'Completed', 'All', etc. -These filters can now be used to get matching process instances for Process App with ID 2, -such as 'Running', 'Completed', and 'All' . -#### getProcessFilterById(filterId: number, appId?: number): Observable`` +## See also -Get a specific Process Filter based on its ID, optionally pass in Process App ID to improve performance -when searching for filter: - -```ts -const processAppId = 2; -const filterId = 3003; -this.processFilterService.getProcessFilterById(filterId, processAppId) - .subscribe( (filter: FilterProcessRepresentationModel) => { - console.log('filter: ', filter); -}, error => { - console.log('Error: ', error); -}); -``` - -The response is a `FilterProcessRepresentationModel` object: - - appId: 2 - filter: {sort: "created-desc", name: "", state: "running"} - icon: "glyphicon-random" - id: 3003 - name: "Running" - recent: false - -The filter can now be used to get 'Running' process instances for Process App with ID 2. - -#### getProcessFilterByName(filterName: string, appId?: number): Observable`` - -Get a specific Process Filter based on its name, optionally pass in Process App ID to improve performance -when searching for filter: - -```ts -const processAppId = 2; -const filterName = 'Running'; -this.processFilterService.getProcessFilterByName(filterName, processAppId) - .subscribe( (filter: FilterProcessRepresentationModel) => { - console.log('filter: ', filter); -}, error => { - console.log('Error: ', error); -}); -``` - -The response is a `FilterProcessRepresentationModel` object: - - appId: 2 - filter: {sort: "created-desc", name: "", state: "running"} - icon: "glyphicon-random" - id: 15 - name: "Running" - recent: true - -If there are several filters with the same name for the Process App, then you get back the -first one found matching the name. - -The filter can now be used to get 'Running' process instances for Process App with ID 2. - -#### addProcessFilter(filter: FilterProcessRepresentationModel): Observable`` - -Add a new Process Instance filter: - -```ts -const processAppId = 2; -const filterName = 'RunningAsc'; -const filterRunningAsc = new FilterProcessRepresentationModel({ - 'name': filterName, - 'appId': processAppId, - 'recent': true, - 'icon': 'glyphicon-random', - 'filter': { 'sort': 'created-asc', 'name': 'runningasc', 'state': 'running' } -}); -this.processFilterService.addProcessFilter(filterRunningAsc) - .subscribe( (filterResponse: FilterProcessRepresentationModel) => { - console.log('filterResponse: ', filterResponse); -}, error => { - console.log('Error: ', error); -}); -``` - -The response is a `FilterProcessRepresentationModel` object: - - appId: 2 - icon: "glyphicon-random" - id: 3008 - name: "RunningAsc" - recent: false - -The filter can now be used to get 'Running' process instances for -Process App with ID 2 in created date ascending order. - -See also the `getRunningFilterInstance` method. - -#### getRunningFilterInstance(appId: number): FilterProcessRepresentationModel - -Convenience method to create and return a filter that matches `running` process instances -for passed in Process App ID: - -```ts -const processAppId = 2; -const runningFilter: FilterProcessRepresentationModel = this.processFilterService.getRunningFilterInstance(processAppId); -console.log('Running filter', runningFilter); -``` - -The response is a `FilterProcessRepresentationModel` object: - - appId: 2 - filter: {sort: "created-desc", name: "", state: "running"} - icon: "glyphicon-random" - id: null - index: undefined - name: "Running" - recent: true - -The filter can now be used to get 'Running' process instances for -Process App with ID 2 in created date ascending order. +- [Process Filters component](process-filters.component.md) +- [Task Filter service](task-filter.service.md) diff --git a/docs/process-services/process-filters.component.md b/docs/process-services/process-filters.component.md index 3eb7be3094..329d2af51a 100644 --- a/docs/process-services/process-filters.component.md +++ b/docs/process-services/process-filters.component.md @@ -74,4 +74,5 @@ page for an example of how to do set this up. ## See also +- [Process Filter service](process-filter.service.md) - [Filter model](filter.model.md) diff --git a/docs/process-services/process-list.component.md b/docs/process-services/process-list.component.md index bdeb482bbb..441ba94eed 100644 --- a/docs/process-services/process-list.component.md +++ b/docs/process-services/process-list.component.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-03-21 --- + # Process Instance List Renders a list containing all the process instances matched by the parameters specified. @@ -17,9 +19,34 @@ Renders a list containing all the process instances matched by the parameters sp ``` -You can also use custom schema declaration as shown below: +### Properties -define custom schema in the app.config.json as shown below json format. +| Name | Type | Default | Description | +| ---- | ---- | ------- | ----------- | +| appId | number | | The id of the app. | +| processDefinitionKey | string | | The processDefinitionKey of the process. | +| presetColumn | string | | Name of a custom schema to fetch from `app.config.json`. | +| state | string | | Define state of the processes. Possible values are `running`, `completed` and `all` | +| sort | string | | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` | +| name | string | | The name of the list. | +| page | number | 0 | The page of the processes to fetch. | +| size | number | 25 | The number of processes to fetch. | +| data | DataTableAdapter | | Data source to define the datatable. | +| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row. | +| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. | + +### Events + +| Name | Description | +| ---- | ----------- | +| rowClick | Emitted when a row in the process list is clicked | +| success | Emitted when the list of process instances has been loaded successfully from the server | +| error | Emitted when an error is encountered loading the list of process instances from the server | + +## Details + +You can define a custom schema for the list in the `app.config.json` file and access it with the +`presetColumn` property as shown below: ```json "adf-process-list": { @@ -50,7 +77,9 @@ define custom schema in the app.config.json as shown below json format. ``` -You can also use both HTML-based and app.config.json custom schema declaration at same time like shown below: +You can also define the schema in the HTML using the +[Data column component](../core/data-column.component.md). You can combine this with schema +information defined in `app.config.json` as in the example below: ```json "adf-process-list": { @@ -93,7 +122,7 @@ You can also use both HTML-based and app.config.json custom schema declaration a ### Pagination strategy -adf-process-instance-list also supports pagination and the same can be used as shown below. +The Process Instance List also supports pagination: ```html ``` -### Properties - -| Name | Type | Default | Description | -| ---- | ----------- | --- | --- | -| appId | number | | The id of the app. | -| processDefinitionKey | string | | The processDefinitionKey of the process. | -| presetColumn | string | | The presetColumn of the custom schema to fetch. | -| state | string | | Define state of the processes. Possible values are `running`, `completed` and `all` | -| sort | string | | Define sort of the processes. Possible values are `created-desc`, `created-asc`, `ended-desc`, `ended-asc` | -| name | string | | The name of the list. | -| page | number | 0 | The page of the processes to fetch. | -| size | number | 25 | The number of processes to fetch. | -| data | DataTableAdapter | | Data source to define the datatable. | -| multiselect | boolean | false | Toggles multiple row selection, renders checkboxes at the beginning of each row. | -| selectionMode | string | 'single' | Row selection mode. Can be none, `single` or `multiple`. For `multiple` mode you can use Cmd (macOS) or Ctrl (Win) modifier key to toggle selection for multiple rows. | - -### Events - -| Name | Description | -| ---- | ----------- | -| rowClick | Emitted when a row in the process list is clicked | -| success | Emitted when the list of process instances has been loaded successfully from the server | -| error | Emitted when an error is encountered loading the list of process instances from the server | - ## See also - [Data column component](../core/data-column.component.md) -- [DataTableAdapter](../core/datatable-adapter.interface.md) -- [Pagination component](../core/pagination.component.md) \ No newline at end of file +- [Data Table Adapter interface](../core/datatable-adapter.interface.md) +- [Pagination component](../core/pagination.component.md) diff --git a/docs/process-services/task-filter.service.md b/docs/process-services/task-filter.service.md index 7a9240b3f2..75f1cc3a78 100644 --- a/docs/process-services/task-filter.service.md +++ b/docs/process-services/task-filter.service.md @@ -2,66 +2,50 @@ Added: v2.0.0 Status: Active --- + # Task Filter Service Manage Task Filters, which are pre-configured Task Instance queries. -## Importing - -```ts -import { TaskFilterService, FilterRepresentationModel } from '@alfresco/adf-process-services'; - -export class SomePageComponent implements OnInit { - - constructor(private taskFilterService: TaskFilterService) { - } -``` - ## Methods -#### createDefaultFilters(appId: number): Observable`` -Create and return the default task filters for a Process App: +- `createDefaultFilters(appId: number): Observable` + Creates and returns the default filters for a process app. + - `appId` - ID of the target app +- `getTaskListFilters(appId?: number): Observable` + Gets all task filters for a process app. + - `appId` - (Optional) Optional ID for a specific app +- `getTaskFilterById(filterId: number, appId?: number): Observable` + Gets a task filter by ID. + - `filterId` - ID of the filter + - `appId` - (Optional) ID of the app for the filter +- `getTaskFilterByName(taskName: string, appId?: number): Observable` + Gets a task filter by name. + - `taskName` - Name of the filter + - `appId` - (Optional) ID of the app for the filter +- `addFilter(filter: FilterRepresentationModel): Observable` + Adds a new task filter + - `filter` - The new filter to add +- `callApiTaskFilters(appId?: number): any` + Calls `getUserTaskFilters` from the Alfresco JS API. + - `appId` - (Optional) ID of the target app +- `getInvolvedTasksFilterInstance(appId: number): FilterRepresentationModel` + Creates and returns a filter for "Involved" task instances. + - `appId` - ID of the target app +- `getMyTasksFilterInstance(appId: number): FilterRepresentationModel` + Creates and returns a filter for "My Tasks" task instances. + - `appId` - ID of the target app +- `getQueuedTasksFilterInstance(appId: number): FilterRepresentationModel` + Creates and returns a filter for "Queued Tasks" task instances. + - `appId` - ID of the target app +- `getCompletedTasksFilterInstance(appId: number): FilterRepresentationModel` + Creates and returns a filter for "Completed" task instances. + - `appId` - ID of the target app -```ts -const processAppId = 2; -this.taskFilterService.createDefaultFilters(processAppId).subscribe( (filters: FilterRepresentationModel[]) => { - console.log('Task filters: ', filters); -}, error => { - console.log('Error: ', error); -}); -``` +## Details -The response is an array of `FilterRepresentationModel` objects: - -``` -filters: - 0: { - appId: 2 - filter : { - assignment: "involved" - dueAfter: null - dueBefore: null - name: null - processDefinitionId: null - processDefinitionKey: null - sort: "created-desc" - state: "open" - } - icon: "glyphicon-align-left" - id: null - index: undefined - name: "Involved Tasks" - recent: false - 1: {id: null, appId: 2, name: "My Tasks", recent: false, icon: "glyphicon-inbox", …} - 2: {id: null, appId: 2, name: "Queued Tasks", recent: false, icon: "glyphicon-record", …} - 3: {id: null, appId: 2, name: "Completed Tasks", recent: true, icon: "glyphicon-ok-sign", …} -``` - -These filters can now be used to get matching Task Instances for Process App with ID 2, -such as 'Involved Tasks', 'My Tasks', 'Queued Tasks', and 'Completed Tasks'. - -#### getTaskListFilters(appId?: number): Observable`` -Get all task filters defined for a Process App: +The methods of this service generally return an instance of `FilterRepresentationModel` or +an array of instances. For example, you could use `getTaskListFilters` as follows: ```ts const processAppId = 2; @@ -74,256 +58,31 @@ this.taskFilterService.getTaskListFilters(processAppId).subscribe( (filters: Fil The response is an array of `FilterRepresentationModel` objects: -``` -filters: - 0: {id: 10, appId: 2, name: "Involved Tasks", recent: true, icon: "glyphicon-align-left", …} - 1: {id: 9, appId: 2, name: "My Tasks", recent: false, icon: "glyphicon-inbox", …} - 2: {id: 11, appId: 2, name: "Queued Tasks", recent: false, icon: "glyphicon-record", …} - 3: {id: 12, appId: 2, name: "Completed Tasks", recent: false, icon: "glyphicon-ok-sign", …} - 4: {id: 4004, appId: 2, name: "Completed Tasks", recent: false, icon: "glyphicon-ok-sign", …} - 5: {id: 4005, appId: 2, name: "My Tasks", recent: false, icon: "glyphicon-inbox", …} - 6: {id: 4006, appId: 2, name: "Queued Tasks", recent: false, icon: "glyphicon-record", …} - 7: {id: 4007, appId: 2, name: "Involved Tasks", recent: false, icon: "glyphicon-align-left", …} -``` -In this example I had run the `createDefaultFilters` method once, and that created the duplicate of -the default filters. + filters: + 0: {id: 10, appId: 2, name: "Involved Tasks", recent: true, icon: "glyphicon-align-left", …} + 1: {id: 9, appId: 2, name: "My Tasks", recent: false, icon: "glyphicon-inbox", …} + 2: {id: 11, appId: 2, name: "Queued Tasks", recent: false, icon: "glyphicon-record", …} + 3: {id: 12, appId: 2, name: "Completed Tasks", recent: false, icon: "glyphicon-ok-sign", …} + 4: {id: 4004, appId: 2, name: "Completed Tasks", recent: false, icon: "glyphicon-ok-sign", …} + 5: {id: 4005, appId: 2, name: "My Tasks", recent: false, icon: "glyphicon-inbox", …} + 6: {id: 4006, appId: 2, name: "Queued Tasks", recent: false, icon: "glyphicon-record", …} + 7: {id: 4007, appId: 2, name: "Involved Tasks", recent: false, icon: "glyphicon-align-left", …} -These filters can now be used to get matching Task Instances for Process App with ID 2, +These filters can now be used to get matching task instances for the process app with ID 2, such as 'Involved Tasks', 'My Tasks', 'Queued Tasks', and 'Completed Tasks'. -If you want to return all filters regardless of Process App, and filter out duplicates, -then you can just leave out the Process App number: +### Importing ```ts -this.taskFilterService.getTaskListFilters().subscribe( (filters: FilterRepresentationModel[]) => { - console.log('Task filters: ', filters); -}, error => { - console.log('Error: ', error); -}); +import { TaskFilterService, FilterRepresentationModel } from '@alfresco/adf-process-services'; + +export class SomePageComponent implements OnInit { + + constructor(private taskFilterService: TaskFilterService) { + } ``` -#### getTaskFilterById(filterId: number, appId?: number): Observable`` -Get a specific Task Filter based on its ID, optionally pass in Process App ID to improve performance -when searching for filter: +## See also -```ts -const processAppId = 2; -const taskFilterId = 4007; -this.taskFilterService.getTaskFilterById(taskFilterId, processAppId).subscribe( (filter: FilterRepresentationModel) => { - console.log('Task filter: ', filter); -}, error => { - console.log('Error: ', error); -}); -``` - -The response is a `FilterRepresentationModel` object: - -``` -Task filter: - appId: 2 - filter: - assignment: "involved" - sort: "created-desc" - state: "open" - icon: "glyphicon-align-left" - id: 4007 - name: "Involved Tasks" - recent: false -``` - -The filter can now be used to get 'Involved Tasks' Task Instances for Process App with ID 2. - -#### getTaskFilterByName(taskName: string, appId?: number): Observable`` -Get a specific Task Filter based on its name, optionally pass in Process App ID to improve performance -when searching for filter: - -```ts -const processAppId = 2; -const taskFilterName = 'Completed Tasks'; -this.taskFilterService.getTaskFilterByName(taskFilterName, processAppId).subscribe( (filter: FilterRepresentationModel) => { - console.log('Task filter: ', filter); -}, error => { - console.log('Error: ', error); -}); -``` - -The response is a `FilterRepresentationModel` object: - -``` -appId: 2 -filter: {sort: "created-desc", name: "", state: "completed", assignment: "involved"} -icon: "glyphicon-ok-sign" -id: 12 -name: "Completed Tasks" -recent: false -``` -If there are several filters with the same name for the Process App, then you get back the -first one found matching the name. - -The filter can now be used to get 'Completed Tasks' Task Instances for Process App with ID 2. - -#### addFilter(filter: FilterRepresentationModel): Observable`` -Add a new Task Instance filter: - -```ts -const processAppId = 2; -const filterName = 'InvolvedAsc'; -const filterInvolvedAsc = new FilterRepresentationModel({ - 'name': filterName, - 'appId': processAppId, - 'recent': false, - 'icon': 'glyphicon-align-left', - 'filter': { 'assignment': 'involved', 'sort': 'created-asc', 'state': 'open' } -}); - -this.taskFilterService.addFilter(filterInvolvedAsc).subscribe( (filterResponse: FilterRepresentationModel) => { - console.log('Task filter: ', filterResponse); -}, error => { - console.log('Error: ', error); -}); -``` - -The response is a `FilterRepresentationModel` object: - -``` -appId: 2 -icon: "glyphicon-align-left" -id: 4008 -name: "InvolvedAsc" -recent: false -``` - -The filter can now be used to get 'Involved' Task Instances for -Process App with ID 2 in created date ascending order. - -#### getRunningFilterInstance(appId: number): FilterProcessRepresentationModel -Convenience method to create and return a filter that matches `involved` Task Instances -for passed in Process App ID: - -```ts -const processAppId = 2; -const involvedFilter: FilterRepresentationModel = this.taskFilterService.getInvolvedTasksFilterInstance(processAppId); -console.log('Involved filter', involvedFilter); -``` - -The response is a `FilterRepresentationModel` object: - -``` -appId: 2 -filter: - assignment: "involved" - dueAfter: null - dueBefore: null - name: null - processDefinitionId: null - processDefinitionKey: null - sort: "created-desc" - state: "open" -icon: "glyphicon-align-left" -id: null -index: undefined -name: "Involved Tasks" -recent: false -``` - -Use the `addFilter` to add this filter to a Process App. - -#### getMyTasksFilterInstance(appId: number): FilterProcessRepresentationModel -Convenience method to create and return a filter that matches `My Tasks` Task Instances -for passed in Process App ID: - -```ts -const processAppId = 2; -const myTasksFilter: FilterRepresentationModel = this.taskFilterService.getMyTasksFilterInstance(processAppId); -console.log('My Tasks filter', myTasksFilter); -``` - -The response is a `FilterRepresentationModel` object: - -``` -appId: 2 -filter: - assignment: "assignee" - dueAfter: null - dueBefore: null - name: null - processDefinitionId: null - processDefinitionKey: null - sort: "created-desc" - state: "open" -icon: "glyphicon-inbox" -id: null -index: undefined -name: "My Tasks" -recent: false -``` - -Use the `addFilter` to add this filter to a Process App. - -#### getQueuedTasksFilterInstance(appId: number): FilterProcessRepresentationModel -Convenience method to create and return a filter that matches `Queued Tasks` Task Instances -for passed in Process App ID: - -```ts -const processAppId = 2; -const queuedTasksFilter: FilterRepresentationModel = this.taskFilterService.getQueuedTasksFilterInstance(processAppId); -console.log('Queued Tasks filter', queuedTasksFilter); -``` - -The response is a `FilterRepresentationModel` object: - -``` -appId: 2 -filter: - assignment: "candidate" - dueAfter: null - dueBefore: null - name: null - processDefinitionId: null - processDefinitionKey: null - sort: "created-desc" - state: "open" -icon: "glyphicon-record" -id: null -index: undefined -name: "Queued Tasks" -recent: false -``` - -Use the `addFilter` to add this filter to a Process App. - -#### getCompletedTasksFilterInstance(appId: number): FilterProcessRepresentationModel -Convenience method to create and return a filter that matches `Completed Tasks` Task Instances -for passed in Process App ID: - -```ts -const processAppId = 2; -const completedTasksFilter: FilterRepresentationModel = this.taskFilterService.getCompletedTasksFilterInstance(processAppId); -console.log('Completed Tasks filter', completedTasksFilter); -``` - -The response is a `FilterRepresentationModel` object: - -``` -appId: 2 -filter: - assignment: "involved" - dueAfter: null - dueBefore: null - name: null - processDefinitionId: null - processDefinitionKey: null - sort: "created-desc" - state: "completed" -icon: "glyphicon-ok-sign" -id: null -index: undefined -name: "Completed Tasks" -recent: true -``` - -Use the `addFilter` to add this filter to a Process App. - - - - \ No newline at end of file +- [Task Filters component](task-filters.component.md) +- [Process Filter service](process-filter.service.md) diff --git a/docs/process-services/task-header.component.md b/docs/process-services/task-header.component.md index 83a413b435..cdc6adcf4e 100644 --- a/docs/process-services/task-header.component.md +++ b/docs/process-services/task-header.component.md @@ -1,7 +1,9 @@ --- Added: v2.0.0 Status: Active +Last reviewed: 2018-03-21 --- + # Task Header component Shows all the information related to a task. @@ -32,14 +34,14 @@ Shows all the information related to a task. ## Details -The purpose of the component is to populate the local variable called `properties` (array of CardViewModel), with all the information that we want to display. +The component populates an internal array of +[CardViewModel](../core/card-view.component.md) with the information that we want to display. + +By default all properties are displayed: -## Customise the property showed -By default all the property are showed : ***assignee***, ***status***, ***priority***, ***dueDate***, ***category***, ***parentName***, ***created-by***, ***created***, ***id***, ***description***, ***formName***. -It is possible to customise the showed property via the "app.config.json". -This is how the configuration looks like: +However, you can also choose which properties to show using a configuration in `app.config.json`: ```json @@ -50,7 +52,7 @@ This is how the configuration looks like: }, ``` -In this way only the listed property will be showed. +With this configuration, only the four listed properties will be shown. ## See also diff --git a/lib/core/services/sites.service.ts b/lib/core/services/sites.service.ts index feaa6b3db6..48819af69f 100644 --- a/lib/core/services/sites.service.ts +++ b/lib/core/services/sites.service.ts @@ -81,6 +81,9 @@ export class SitesService { return this.getSite(siteId, { relations: ['members'] }); } + /** + * Gets the username of the user currently logged into ACS. + */ getEcmCurrentLoggedUserName(): string { return this.apiService.getInstance().ecmAuth.username; } diff --git a/lib/process-services/process-list/components/process-list.component.ts b/lib/process-services/process-list/components/process-list.component.ts index ddb5a2e2bb..147efa0701 100644 --- a/lib/process-services/process-list/components/process-list.component.ts +++ b/lib/process-services/process-list/components/process-list.component.ts @@ -89,7 +89,7 @@ export class ProcessInstanceListComponent implements OnChanges, AfterContentInit @Input() size: number = PaginationComponent.DEFAULT_PAGINATION.maxItems; - /** The presetColumn of the custom schema to fetch. */ + /** Name of a custom schema to fetch from `app.config.json`. */ @Input() presetColumn: string; diff --git a/lib/process-services/process-list/services/process-filter.service.ts b/lib/process-services/process-list/services/process-filter.service.ts index 4a87eebd19..685901efb3 100644 --- a/lib/process-services/process-list/services/process-filter.service.ts +++ b/lib/process-services/process-list/services/process-filter.service.ts @@ -27,6 +27,10 @@ export class ProcessFilterService { constructor(private alfrescoApiService: AlfrescoApiService) { } + /** + * Gets all filters defined for a Process App. + * @param appId ID of the target app + */ getProcessFilters(appId: number): Observable { return Observable.fromPromise(this.callApiProcessFilters(appId)) .map((response: any) => { @@ -41,9 +45,9 @@ export class ProcessFilterService { } /** - * Retrieve the process filter by id - * @param filterId - number - The id of the filter - * @param appId - string - optional - The id of app + * Retrieves the process filter by ID. + * @param filterId ID of the filter + * @param appId ID of the target app */ getProcessFilterById(filterId: number, appId?: number): Observable { return Observable.fromPromise(this.callApiProcessFilters(appId)) @@ -53,9 +57,9 @@ export class ProcessFilterService { } /** - * Retrieve the process filter by name - * @param filterName - string - The name of the filter - * @param appId - string - optional - The id of app + * Retrieves the process filter by name. + * @param filterName Name of the filter + * @param appId ID of the target app */ getProcessFilterByName(filterName: string, appId?: number): Observable { return Observable.fromPromise(this.callApiProcessFilters(appId)) @@ -65,8 +69,8 @@ export class ProcessFilterService { } /** - * Create and return the default filters - * @param appId + * Creates and returns the default filters for an app. + * @param appId ID of the target app */ public createDefaultFilters(appId: number): Observable { let runningFilter = this.getRunningFilterInstance(appId); @@ -107,6 +111,10 @@ export class ProcessFilterService { }); } + /** + * Creates and returns a filter that matches "running" process instances. + * @param appId ID of the target app + */ public getRunningFilterInstance(appId: number): FilterProcessRepresentationModel { return new FilterProcessRepresentationModel({ 'name': 'Running', @@ -118,8 +126,8 @@ export class ProcessFilterService { } /** - * Return a static Completed filter instance - * @param appId + * Returns a static Completed filter instance. + * @param appId ID of the target app */ private getCompletedFilterInstance(appId: number): FilterProcessRepresentationModel { return new FilterProcessRepresentationModel({ @@ -132,8 +140,8 @@ export class ProcessFilterService { } /** - * Return a static All filter instance - * @param appId + * Returns a static All filter instance. + * @param appId ID of the target app */ private getAllFilterInstance(appId: number): FilterProcessRepresentationModel { return new FilterProcessRepresentationModel({ @@ -146,8 +154,8 @@ export class ProcessFilterService { } /** - * Add a filter - * @param filter - FilterProcessRepresentationModel + * Adds a filter. + * @param filter The filter to add */ addProcessFilter(filter: FilterProcessRepresentationModel): Observable { return Observable.fromPromise(this.alfrescoApiService.getInstance().activiti.userFiltersApi.createUserProcessInstanceFilter(filter)) @@ -157,6 +165,10 @@ export class ProcessFilterService { }).catch(err => this.handleProcessError(err)); } + /** + * Calls `getUserProcessInstanceFilters` from the Alfresco JS API. + * @param appId ID of the target app + */ callApiProcessFilters(appId?: number) { if (appId) { return this.alfrescoApiService.getInstance().activiti.userFiltersApi.getUserProcessInstanceFilters({ appId: appId }); diff --git a/lib/process-services/task-list/services/task-filter.service.ts b/lib/process-services/task-list/services/task-filter.service.ts index f106483858..a88c7f377c 100644 --- a/lib/process-services/task-list/services/task-filter.service.ts +++ b/lib/process-services/task-list/services/task-filter.service.ts @@ -35,8 +35,8 @@ export class TaskFilterService { } /** - * Create and return the default filters - * @param appId + * Creates and returns the default filters for a process app. + * @param appId ID of the target app */ public createDefaultFilters(appId: number): Observable { let involvedTasksFilter = this.getInvolvedTasksFilterInstance(appId); @@ -85,7 +85,8 @@ export class TaskFilterService { } /** - * Retrieve all the Tasks filters + * Gets all task filters for a process app. + * @param appId Optional ID for a specific app */ getTaskListFilters(appId?: number): Observable { return Observable.fromPromise(this.callApiTaskFilters(appId)) @@ -100,9 +101,9 @@ export class TaskFilterService { } /** - * Retrieve the Tasks filter by id - * @param filterId - number - The id of the filter - * @param appId - string - optional - The id of app + * Gets a task filter by ID. + * @param filterId ID of the filter + * @param appId ID of the app for the filter */ getTaskFilterById(filterId: number, appId?: number): Observable { return Observable.fromPromise(this.callApiTaskFilters(appId)) @@ -112,8 +113,9 @@ export class TaskFilterService { } /** - * Retrieve the Tasks filter by name - * @param taskName - string - The name of the filter + * Gets a task filter by name. + * @param taskName Name of the filter + * @param appId ID of the app for the filter */ getTaskFilterByName(taskName: string, appId?: number): Observable { return Observable.fromPromise(this.callApiTaskFilters(appId)) @@ -123,8 +125,8 @@ export class TaskFilterService { } /** - * Add a filter - * @param filter - FilterRepresentationModel + * Adds a new task filter + * @param filter The new filter to add */ addFilter(filter: FilterRepresentationModel): Observable { return Observable.fromPromise(this.apiService.getInstance().activiti.userFiltersApi.createUserTaskFilter(filter)) @@ -134,6 +136,10 @@ export class TaskFilterService { }).catch(err => this.handleError(err)); } + /** + * Calls `getUserTaskFilters` from the Alfresco JS API. + * @param appId ID of the target app + */ callApiTaskFilters(appId?: number) { if (appId) { return this.apiService.getInstance().activiti.userFiltersApi.getUserTaskFilters({appId: appId}); @@ -143,8 +149,8 @@ export class TaskFilterService { } /** - * Return a static Involved filter instance - * @param appId + * Creates and returns a filter for "Involved" task instances. + * @param appId ID of the target app */ getInvolvedTasksFilterInstance(appId: number): FilterRepresentationModel { return new FilterRepresentationModel({ @@ -157,8 +163,8 @@ export class TaskFilterService { } /** - * Return a static My task filter instance - * @param appId + * Creates and returns a filter for "My Tasks" task instances. + * @param appId ID of the target app */ getMyTasksFilterInstance(appId: number): FilterRepresentationModel { return new FilterRepresentationModel({ @@ -171,8 +177,8 @@ export class TaskFilterService { } /** - * Return a static Queued filter instance - * @param appId + * Creates and returns a filter for "Queued Tasks" task instances. + * @param appId ID of the target app */ getQueuedTasksFilterInstance(appId: number): FilterRepresentationModel { return new FilterRepresentationModel({ @@ -185,8 +191,8 @@ export class TaskFilterService { } /** - * Return a static Completed filter instance - * @param appId + * Creates and returns a filter for "Completed" task instances. + * @param appId ID of the target app */ getCompletedTasksFilterInstance(appId: number): FilterRepresentationModel { return new FilterRepresentationModel({