inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-2824] Doc review and minor changes to review checker tool (#3466)

Browse Source
This commit is contained in:
Andy Stark 2018-06-11 09:48:02 +01:00 committed by Eugenio Romano
parent 3281891dcd
commit d152c367aa
29 changed files with 336 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/content-services/breadcrumb.component.md
View File

@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-03-12
Last reviewed: 2018-06-08
---
# Breadcrumb Component
@ -36,10 +36,15 @@ Indicates the current position within a navigation hierarchy.
| Name | Type | Description |
| -- | -- | -- |
| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the user clicks on a breadcrumb. |
| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PathElementEntity`](../../lib/content-services/document-list/models/document-library.model.ts)`>` | Emitted when the user clicks on a breadcrumb. |
## Details
The `maxItems` property sets the maximum number of "crumbs" in the breadcrumb trail. If
the actual path contains more nodes than this then the earliest items in the path will be
removed and kept in a menu as with the
[Dropdown breadcrumb component](../content-services/dropdown-breadcrumb.component.md).
### Using the transform function
The function supplied in the `transform` property lets you modify the Node object that the component

50
docs/content-services/content-action.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Content Action component
@ -107,7 +108,7 @@ export class MyView {
## Details
The document actions are rendered on a dropdown menu for each items of content. You can use the
`target` property to choose whether the action applies to folders , documents or both. (By default the actions arre applied to both)
`target` property to choose whether the action applies to folders, documents or both. (By default the actions are applied to both)
A number of built-in actions are defined to handle common use cases:
@ -127,7 +128,7 @@ function in the same action. The `execute` function is passed a [`NodeMinimalEnt
parameter (see the [Document Library model](document-library.model.md) page for more
information) which contains full details of the item that the action is operating on. For
example, with `handler="delete"` you could use `execute` to show a message with the name,
type and other details of the item just deleted:
type, and other details of the item just deleted:
```html
<content-actions>
@ -184,7 +185,7 @@ This action simply execute one of the built-in actions described above:
#### Custom handler
If you specify a custom handler it will be executed at any click of the action:
If you specify a custom handler it will be executed whenever the action is selected:
```html
<adf-document-list [contentActions]="true"...>
@ -211,11 +212,11 @@ export class MyComponent {
#### System handler combined with custom handler
If you specify both system handler and your own custom handler with
`(execute)="myCustomActionAfterDelete($event)"`, your handler will run after a system handler completes
successfully. A system operation is considered successful if there are no permission or
network-related errors for the system request. You can avoid permission errors simply by disabling
an item for users who don't have permission to use it (set `disableWithNoPermission="true"`).
If you specify both a system handler and your own custom handler with
`(execute)="myCustomActionAfterDelete($event)"`, your handler will run after the system handler
completes successfully. A system operation is considered successful if there are no permission
or network-related errors for the system request. You can avoid permission errors simply
by disablingan item for users who don't have permission to use it (set `disableWithNoPermission="true"`).
```html
<adf-document-list ...>
@ -323,13 +324,14 @@ allow the item being copied/moved to be the destination if it is itself a folder
### Conditional visibility
The `<content-action>` component allows you to control visibility with the help of the `visible` property and supports three major scenarios:
The Content-action component allows you to control visibility with the help of the `visible`
property which can receive its value in three main ways:
- direct value of `boolean` type
- binding to a property of the `boolean` type
- binding to a property of the `Function` type that evaluates condition and returns `boolean` value
- direct `boolean` value
- binding to a `boolean` property
- binding to a `Function` property that evaluates the condition and returns a `boolean` value
#### Using direct value of boolean type
#### Using direct boolean value
```html
<content-action
@ -340,7 +342,7 @@ The `<content-action>` component allows you to control visibility with the help
</content-action>
```
#### Using a property of the boolean type
#### Binding to a boolean property
```html
<content-action
@ -351,7 +353,8 @@ The `<content-action>` component allows you to control visibility with the help
</content-action>
```
The markup above relies on the `showCustomDownloadAction` property declared at your component class level:
The markup above relies on the `showCustomDownloadAction` property declared in your
component class:
```ts
export class MyComponent {
@ -362,7 +365,7 @@ export class MyComponent {
}
```
#### Using a property of the Function type
#### Binding to a Function property
```html
<content-action
@ -373,7 +376,8 @@ export class MyComponent {
</content-action>
```
The code above relies on the `canDownloadNode` property of a `Function` type declared at your component class level:
The code above relies on the `canDownloadNode` property (of `Function` type) declared in
your component class:
```ts
export class MyComponent {
@ -387,10 +391,11 @@ export class MyComponent {
}
```
Code above checks the node name, and evaluates to `true` only if corresponding node is called "For Sale.docx".
The code above checks the node name and evaluates to `true` only if the corresponding
node is called "For Sale.docx".
Please note that if you want to preserve `this` context within the evaluator function,
its property should be declared as a lambda one:
Note that if you want to preserve `this` context within the evaluator function then
the property should be declared as a lambda function:
```ts
funcName = (parameters): boolean => {
@ -495,13 +500,8 @@ Defining error, permission and success callbacks are pretty much the same as doi
![Copy/move document action](../docassets/images/document-action-copymove.png)
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
## See also
- [Document list component](document-list.component.md)
- [Document actions service](document-actions.service.md)
- [Folder actions service](folder-actions.service.md)
<!-- seealso end -->

9
docs/content-services/dropdown-breadcrumb.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Dropdown Breadcrumb Component
@ -35,7 +36,13 @@ Indicates the current position within a navigation hierarchy using a dropdown me
| Name | Type | Description |
| -- | -- | -- |
| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the user clicks on a breadcrumb. |
| navigate | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<`[`PathElementEntity`](../../lib/content-services/document-list/models/document-library.model.ts)`>` | Emitted when the user clicks on a breadcrumb. |
## Details
Although this component inherits the `maxItems` property from the [Breadcrumb component,](../content-services/breadcrumb.component.md) the
"crumbs" are _always_ shown on a menu. By contrast, the Breadcrumb component only falls back
to a menu when its maximum number of nodes is exceeded.
## See also

10
docs/content-services/inherited-button.directive.md
View File

@ -1,6 +1,7 @@
---
Added: v2.3.0
Status: Active
Last reviewed: 2018-06-08
---
# Inherit Permission directive
@ -22,15 +23,16 @@ Update the current node by adding/removing the inherited permissions.
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| nodeId | `string` | | nodeId where to add/remove inherited permissions |
| nodeId | `string` | | ID of the node to add/remove inherited permissions |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| updated | [`EventEmitter<MinimalNodeEntryEntity>`](../content-services/document-library.model.md) | Emitted when the node is updated. |
| updated | [`EventEmitter<MinimalNodeEntryEntity>`](../content-services/document-library.model.md) | Emitted when the node is updated |
## Details
This directive switches on/off the inheritance on the permission based on what is set on the node entity.
So if the node has inherited permissions, this will remove them viceversa if the node does not have the inherited permission this will add them.
This directive switches inheritance of permissions on or off depending on what is set in
the node entity. So if the node has inherited permissions, this will remove them and
vice versa. If the node does not have inherited permissions then this will add them.

66
docs/core/boilerplate.component.md
View File

@ -1,66 +0,0 @@
# Boilerplate component
Shows how to write a Markdown file for a component.
![Screenshot goes here if necessary](../docassets/images/adf-toolbar-01.png)
<!-- Most doc files don't need a table of contents. Delete this part unless
you have added about five subsections in the Details part.
-->
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
<!-- Delete any Basic Usage parts that you don't need (eg, some components don't
have any properties). -->
```html
<adf-document-list
#documentList
[currentFolderId]="'-my-'"
[contextMenuActions]="true"
[contentActions]="true">
</adf-document-list>
```
### Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| prop1 | string | 'hello' | The property description in the table should be no more than a few sentences. Add extra description in the Details section if you need to. |
| prop2 | boolean | true | Prop tables should have name, type, default and description, in that order. Leave default value blank if appropriate. |
### Events
| Name | Description |
| ---- | ----------- |
| someEvent | Keep description short for the table. Usually starts with "Emitted when..." |
| anotherEvent | Emitted when the user double-clicks a list node |
## Details
**Note: This is not a real component!**
Copy the contents of this file when you create a new component doc and edit or remove bits of it
as necessary. Usually, the title should be derived from the Angular name with the kebab-case expanded
(so "task-details.component" becomes "Task Details component") but there is no need to stick to this
if it looks wrong to you.
### Subsection
You don't need to make subsections in the Details part but add them if they help with the
explanation. Add them as level 3 headings in the Details part only - to keep the consistency
of the docs, you shouldn't normally add any new level 1 or 2 sections to the Markdown.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

43
docs/core/boilerplate.service.md
View File

@ -1,43 +0,0 @@
# Boilerplate service
Shows how to write a Markdown file for a service.
## Methods
`someMethod(value: string = '')`<br/>
Shows how to document a method.
`anotherMethod(value: string = '')`<br/>
Shows how to document a method.
## Properties
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| prop1 | string | 'hello' | Many services don't need a properties table. Delete this section if you don't need it. |
| prop2 | boolean | true | Prop tables should have name, type, default and description, in that order. Leave default blank if appropriate. |
## Details
**Note: This is not a real component!**
Copy the contents of this file when you create a new service doc and edit or remove bits of it
as necessary. Usually, the title should be derived from the Angular name with the kebab-case expanded
(so "page-title.service" becomes "Page Title service") but there is no need to stick to this
if it looks wrong to you.
The main difference between service and component docs is that services usually have methods. Replace
the method signature and description with your own text but keep the &lt;br> at the end of the
signature line.
### Subsection
You don't need to make subsections in the Details part but add them if they help with the
explanation. Add them as level 3 headings in the Details part only - to keep the consistency
of the docs, you shouldn't normally add any new level 1 or 2 sections to the Markdown.
<!-- Don't edit the See also section. Edit seeAlsoGraph.json and run config/generateSeeAlso.js -->
<!-- seealso start -->
<!-- seealso end -->

32
docs/core/buttons-menu.component.md
View File

@ -1,16 +1,18 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-04-24
Last reviewed: 2018-06-08
---
# Buttons Menu Component
Displays buttons on a responsive menu. This way the html doesn't need to
Displays buttons on a responsive menu.
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
## Basic Usage
In order to use this component, you will have to place the buttons that you want to have in your menu inside this component's html tags.
Place the buttons for the menu inside this component's HTML tags.
They must use the following structure:
```html
@ -24,7 +26,8 @@ They must use the following structure:
</adf-buttons-action-menu>
```
Notice that they need an icon and a label for the button inside a span tag. They also make use of the Angular material directive `mat-menu-item`.
Notice that the buttons have an icon and a label for the button inside a `<span>` tag.
They also make use of the Angular material directive `mat-menu-item`.
```html
<button mat-menu-item (click)="event()">
@ -32,21 +35,20 @@ Notice that they need an icon and a label for the button inside a span tag. They
<span> label </span>
</button>
```
## Class members
### Properties
| Name | Type | Description |
| -- | -- | -- |
| isMenuEmpty | boolean | If the menu has no buttons it won't be displayed. |
## Details
This component is fully responsive and it will display two different layouts regarding the screen size.
This component is fully responsive and it will display one of two different layouts
depending on the screen size:
**Desktop View**
#### Desktop View
![adf-buttons-menu-desktop](../docassets/images/adf-buttons-menu-desktop.png)
#### Mobile View
**Mobile View**
![adf-buttons-menu-mobile](../docassets/images/adf-buttons-menu-mobile.png)
The component has a property called `isMenuEmpty` that you can access from code. If this is
set to true then the component will not show an empty menu with no buttons defined.

44
docs/core/empty-content.component.md
View File

@ -1,22 +1,44 @@
---
Added: v2.4.0
Status: Active
Last reviewed:
Last reviewed: 2018-06-08
---
# Empty Content Component
Provides a generic "Empty Content" UI and can used as a placeholder for components that need to show different content when being empty.
Provides a generic "Empty Content" placeholder for components.
## Properties
![Favorites screen](../docassets/images/empty-content-favorites.png)
| Name | Type | Description |
| ---- | ---- | ----------- |
| icon | string | Material Icon to use |
| title | string | String or Resource Key for the title |
| subtitle | string | String or Resource Key for the subtitle |
## Basic usage
## Examples
```html
<adf-document-list>
<empty-folder-content>
<ng-template>
<adf-empty-content
icon="star_rate"
title="APP.BROWSE.FAVORITES.EMPTY_STATE.TITLE"
subtitle="APP.BROWSE.FAVORITES.EMPTY_STATE.TEXT">
</adf-empty-folder>
</ng-template>
</empty-folder-content>
</adf-document-list>
```
## Class members
### Properties
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| icon | `string` | "cake" | Material Icon to use |
| subtitle | `string` | "" | String or Resource Key for the title |
| title | `string` | "" | String or Resource Key for the subtitle |
## Details
### Usage examples
```html
<adf-document-list>
@ -52,3 +74,7 @@ You can also use multiple lines instead of the subtitle section:
```
![Trashcan screen](../docassets/images/empty-content-trashcan.png)
## See also
- [Error content component](error-content.component.md)

7
docs/core/info-drawer-layout.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Info drawer layout component
@ -29,12 +30,16 @@ Displays a sidebar-style information panel.
## Details
As the name suggests, this is basically just a layout with CSS styling. There are three regions where you can add your own content, as shown in the example:
As the name suggests, this is basically just a layout with CSS styling. There are three
regions where you can add your own content, as shown in the example:
- info-drawer-title
- info-drawer-buttons
- info-drawer-content
See the [Info drawer layout component](../core/info-drawer-layout.component.md) for an alternative approach that uses tabs to
structure the content of the info drawer.
## See also
- [Info drawer component](info-drawer.component.md)

15
docs/core/info-drawer-tab.md
View File

@ -1,5 +1,13 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-06-08
---
# Info Drawer Tab component
Renders tabs in a [Info drawer component](../core/info-drawer.component.md).
![Info drawer screenshot](../docassets/images/label-tab.png)
## Basic usage
@ -46,6 +54,11 @@ Render tab with icon instead of labels:
| label | `string` | '' | Tab label. |
| icon | `string` | null | The material design icon. |
## Details
See the [Info drawer component](../core/info-drawer.component.md) page for details of how to use this subcomponent.
## See also
- [Info drawer layout component](info-drawer.component.md)
- [Info drawer component](info-drawer.component.md)
- [Info drawer layout component](info-drawer-layout.component.md)

6
docs/core/info-drawer.component.md
View File

@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-06-08
---
# Info Drawer component
@ -47,11 +47,11 @@ Displays a sidebar-style information panel with tabs.
## Details
This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the `adf-info-drawer-tab` subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
This is a variant of the [Info Drawer Layout component](info-drawer-layout.component.md) that displays information in tabs. You can use the Info drawer tab subcomponent to add tabs (as shown in the example) and the `currentTab` output property to select the currently active tab.
You can also customize the three regions (title, buttons and content) as with the [Info Drawer Layout component](../core/info-drawer-layout.component.md).
## See also
- [Info drawer layout component](info-drawer-layout.component.md)
- [Info drawer layout component](info-drawer-tab.component.md)
- [Info drawer tab component](info-drawer-tab.component.md)

104
docs/core/log.service.md
View File

@ -1,11 +1,12 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Log Service
Provide a log functionality for your ADF application.
Provides log functionality.
## Basic Usage
@ -31,9 +32,73 @@ export class AppComponent {
}
```
```ts
import { LogService } from '@alfresco/adf-core';
@Component({...})
export class AppComponent {
constructor(logService: LogService, myIntegrationService: MyIntegrationService)) {
logService.onMessage.subscribe((message) => {
myIntegrationService.send(message.text,message.type);
});
}
}
```
## Class members
### Methods
- **assert**(test?: `boolean` = `null`, message?: `string` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message if a boolean test fails.
- _test:_ `boolean` - (Optional) Test value (typically a boolean expression)
- _message:_ `string` - (Optional) Message to show if test is false
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **debug**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "DEBUG" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **error**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "ERROR" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **getLogLevel**(level: `string` = `null`): [`LogLevelsEnum`](../../lib/core/models/log-levels.model.ts)<br/>
Converts a log level name string into its numeric equivalent.
- _level:_ `string` - Level name
- **Returns** [`LogLevelsEnum`](../../lib/core/models/log-levels.model.ts) - Numeric log level
- **group**(groupTitle?: `string` = `null`, optionalParams: `any[]` = `null`)<br/>
Starts an indented group of log messages.
- _groupTitle:_ `string` - (Optional) Title shown at the start of the group
- _optionalParams:_ `any[]` - Interpolation values for the title in "printf" format
- **groupEnd**()<br/>
Ends a indented group of log messages.
- **info**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "INFO" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **log**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at any level from "TRACE" upwards.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **messageBus**(text: `string` = `null`, logLevel: `string` = `null`)<br/>
Triggers notification callback for log messages.
- _text:_ `string` - Message text
- _logLevel:_ `string` - Log level for the message
- **trace**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "TRACE" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
- **warn**(message?: `any` = `null`, optionalParams: `any[]` = `null`)<br/>
Logs a message at the "WARN" level.
- _message:_ `any` - (Optional) Message to log
- _optionalParams:_ `any[]` - Interpolation values for the message in "printf" format
## Details
### Log levels
The [log service](../core/log.service.md) provide 6 level of logs:
There are 6 levels of logs that you can use:
| Name | Level |
| ---- | ----- |
@ -44,9 +109,10 @@ The [log service](../core/log.service.md) provide 6 level of logs:
| ERROR | 1 |
| SILENT | 0 |
You can configure the log level setting the **_logLevel_** properties in the **app.config.json**. By default the level is TRACE.
You can set the default log level using the **_logLevel_** property in `app.config.json`.
The factory setting for this property is `TRACE`.
If you want set for example the log to warning:
For example, you can set the default log level to `WARNING` as follows:
**app.config.json**
@ -58,9 +124,10 @@ If you want set for example the log to warning:
### Log message bus
The logservice provide also an [`Observable`](http://reactivex.io/documentation/observable.html) **_onMessage_** where you can subscribe and recive all the logs:
The messagge object recived form the bus is composed:
The [log service](../core/log.service.md) also provides an
[`Observable`](http://reactivex.io/documentation/observable.html) called `_onMessage_`
that you can subscribe to if you want to receive all the log messages.
The message object passed as a parameter to the `onMessage` handler has the following format:
```ts
{
@ -69,21 +136,10 @@ The messagge object recived form the bus is composed:
}
```
## Usage
### Using the log to feed analytics
```ts
import { LogService } from '@alfresco/adf-core';
@Component({...})
export class AppComponent {
constructor(logService: LogService, myIntegrationService: MyIntegrationService)) {
logService.onMessage.subscribe((message) => {
myIntegrationService.send(message.text,message.type);
});
}
}
```
You can pass the log output to an analytics system to collect error and assertion data
from apps as they run. This can help you spot which problems users are running into most
often and the situations in which they occur. See the tutorial about
[integrating the log service with analytics](https://community.alfresco.com/community/application-development-framework/blog/2018/05/01/how-to-integrate-adf-log-service-with-mixpanel-analytics-service)
on the Alfresco Community site for further information.

1
docs/core/notification.service.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Notification Service

1
docs/core/shared-links-api.service.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Shared Links Api service

62
docs/core/sidenav-layout.component.md
View File

@ -1,7 +1,7 @@
---
Added: v2.3.0
Status: Active
Last reviewed: 2018-04-11
Last reviewed: 2018-06-08
---
# Sidenav Layout component
@ -21,8 +21,6 @@ Displays the standard three-region ADF application layout.
- [Details](#details)
- [Public attributes](#public-attributes)
- [Events](#events-1)
- [Template context](#template-context)
- [menuOpenState$](#menuopenstate)
- [Preserving the menu state](#preserving-the-menu-state)
@ -70,15 +68,15 @@ Displays the standard three-region ADF application layout.
| -- | -- | -- | -- |
| expandedSidenav | `boolean` | true | Should the navigation region be expanded initially? |
| hideSidenav | `boolean` | false | Toggles showing/hiding the navigation region |
| sidenavMax | `number` | | ( |
| sidenavMin | `number` | | ( |
| stepOver | `number` | | ( |
| sidenavMax | `number` | | Maximum size of the navigation region |
| sidenavMin | `number` | | Minimum size of the navigation region |
| stepOver | `number` | | Screen size at which display switches from small screen to large screen configuration |
### Events
| Name | Type | Description |
| -- | -- | -- |
| expanded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | |
| expanded | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when the menu toggle and the collapsed/expanded state of the sideNav changes |
## Details
@ -106,18 +104,6 @@ Desktop layout (screen width greater than the `stepOver` value):
Mobile layout (screen width less than the `stepOver` value):
![Sidenav on mobile](../docassets/images/sidenav-layout-mobile.png)
### Public attributes
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| menuOpenState$ | Observable&lt;boolean> | true | Another way to listen to menu open/closed state |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| expanded | `EventEmitter<boolean>` | Emmitted when the menu toggle and the collapsed/expanded state of the sideNav changes |
### Template context
Each template is given a context containing the following methods:
@ -130,26 +116,38 @@ Each template is given a context containing the following methods:
### menuOpenState$
Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is the menuOpenState$ observable, which is driven by a BehaviorSubject at the background. The value emitted on this observable is the opposite of the isMenuMinimized template variable.
Beside the template context's **isMenuMinimized** variable, another way to listen to the component's menu's open/closed state is with the `menuOpenState$` observable, which is driven by a `BehaviorSubject` in the background. The value emitted by this observable is the opposite of the `isMenuMinimized` template variable.
| Name | Type | Default | Description |
| ---- | ---- | ------- | ----------- |
| menuOpenState$ | Observable&lt;boolean> | true | Another way to listen to menu open/closed state |
Every time the menu state is changed, the following values are emitted:
- true, if the menu got into opened state
- false, if the menu git into closed state
- true, if the menu changed to the opened state
- false, if the menu changed to the closed state
### Preserving the menu state
It is possible to preserve the state of the menu between sessions. This require to first set a property in the appConfig.json file.
You can preserve the state of the menu between sessions. To do this, you first need to
set a property in the `app.config.json` file:
"sideNav" : {
"preserveState" : true
}
```json
"sideNav" : {
"preserveState" : true
}
```
If this property is set, the collapsed/expanded state will be stored in the local storage, and it will be restored with page reload or the next time the user visits the app.
Beside this, it is also possible to set the default value in the appConfig.json file:
When this property is set, the collapsed/expanded state will be stored in the local storage
and restored when the page is reloaded or when the user next uses the app.
"sideNav" : {
"expandedSidenav" : true
}
You can also set the default state in the `app.config.json` file:
By default the collapsed/exapnded state should be read from the application configuration file, but only if there is no value for the collapsed/expanded state in the local storage.
```json
"sideNav" : {
"expandedSidenav" : true
}
```
Note that if `preserveState` is set then the current state of the sidenav (set by the user)
will override this default setting.

52
docs/core/sorting-picker.component.md
View File

@ -1,11 +1,16 @@
---
Added: v2.4.0
Status: Active
Last reviewed: 2018-06-08
---
# Sorting Picker Component
Provides an ability to pick one of the predefined sorting definitions and define sorting direction:
Selects from a set of predefined sorting definitions and directions.
![Sorting Picker](../docassets/images/sorting-picker.png)
## Basic Usage
```html
<adf-sorting-picker
@ -16,11 +21,30 @@ Provides an ability to pick one of the predefined sorting definitions and define
</adf-sorting-picker>
```
![Sorting Picker](../docassets/images/sorting-picker.png)
## Class members
## Options format
### Properties
You can bind a collection of any objects that expose the following properties:
| Name | Type | Default value | Description |
| -- | -- | -- | -- |
| ascending | `boolean` | true | Current sorting direction |
| options | `Array<object>` | \[] | Available sorting options |
| selected | `string` | | Currently selected option key |
### Events
| Name | Type | Description |
| -- | -- | -- |
| change | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<object>` | Raised each time sorting key or direction gets changed. |
## Details
The picker shows the user a menu of sorting options (which could be data columns to sort on
alphabetical vs numerical search, etc) and the choice of ascending vs descending sort order.
Note that picker only implements the menu, so you are responsible for implementing the sorting
options yourself.
The `options` property contains an array of any objects that expose the following properties:
```ts
{
@ -29,15 +53,13 @@ You can bind a collection of any objects that expose the following properties:
}
```
## Properties
The `key` is an identifying value and the `label` is the text that the user will see in the
picker. The selected `key` is reported by the `change` event, which passes an object like the
following as its parameter:
| Name | Type | Default Value | Description |
| options | `Array<{key: string, label: string}>` | `[]` | Available sorting options. |
| selected | `string` | | Currently selected option key. |
| ascending | `boolean` | true | Current sorting direction. |
## Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| change | `EventEmitter<{ key: string, ascending: boolean }>` | Raised each time sorting key or direction gets changed. |
```ts
{
key: string,
ascending: boolean
}
```

1
docs/core/start-form.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Start Form component

1
docs/core/toolbar-divider.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Toolbar Divider Component

1
docs/core/toolbar-title.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Toolbar Title Component

26
docs/core/toolbar.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Toolbar Component
@ -53,7 +54,8 @@ Simple container for headers, titles, actions and breadcrumbs.
### Custom title
You can use any HTML layout or Angular component as a content of the Title section by using the special `<adf-toolbar-title>` component instead of the "title" attribute:
You can use any HTML layout or Angular component as the content of the title section by
using the `<adf-toolbar-title>` subcomponent instead of the "title" attribute:
```html
<adf-toolbar>
@ -64,8 +66,6 @@ You can use any HTML layout or Angular component as a content of the Title secti
</adf-toolbar>
```
The toolbar should now look similar to the following:
![](../docassets/images/adf-toolbar-02.png)
### Divider
@ -83,8 +83,9 @@ You can divide groups of elements with a visual separator `<adf-toolbar-divider>
### Spacer
You can provide a separate element with `adf-toolbar--spacer` class name
to fill the empty space and move the content to the right of the toolbar if needed:
You can split the toolbar into separate sections at the left and right of the screen
with the `adf-toolbar--spacer` CSS class. In the following example, the toolbar title
element is rendered to the left but all the buttons are pushed to the right side:
```html
<adf-toolbar>
@ -100,12 +101,11 @@ to fill the empty space and move the content to the right of the toolbar if need
</adf-toolbar>
```
In the example above, the toolbar title element is rendered to the left,
but all the buttons are pushed to the right side.
### Dropdown menu
You can use the following example to create a dropdown menu:
The following example shows how to create a dropdown menu. The code is based
on the `<mat-menu>` component from the `@angular/material` library
but you could also use your own custom menu components:
```html
<adf-toolbar title="Toolbar">
@ -131,11 +131,10 @@ You can use the following example to create a dropdown menu:
</adf-toolbar>
```
The code above is based on the `<mat-menu>` component from the `@angular/material` library. You can use any custom menu component as well.
![](../docassets/images/adf-toolbar-03.png)
Once you click the menu button you should see the following menu items as defined earlier:
With the menu set up like this, you would see the following menu items as defined earlier
when you click the menu button:
![](../docassets/images/adf-toolbar-04.png)
@ -143,7 +142,8 @@ Once you click the menu button you should see the following menu items as define
Besides the default color you can use 'primary', 'accent', or 'warn' values:
Depending on the overall application theme the colors of the toolbar should change.
You might also want to change colors to follow your application's color
[theme](../user-guide/theming.md):
For example:

1
docs/core/translation.service.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-07
---
# Translation service

41
docs/process-services/apps-list.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Apps List Component
@ -17,9 +18,7 @@ Shows all available apps.
</adf-apps>
```
## Passing custom no-apps template
If we intend to show a custom template if there are no apps present
You can also show a custom template if there are no apps present:
```html
<adf-apps
@ -48,24 +47,9 @@ If we intend to show a custom template if there are no apps present
## Details
### How filter the activiti apps
If you want to show some specific apps you can specify them through the filtersAppId parameters
```html
<adf-apps
[filtersAppId]="'[
{defaultAppId: 'tasks'},
{deploymentId: '15037'},
{name : 'my app name'}]'">
</adf-apps>
```
In this specific case only the Tasks app, the app with deploymentId 15037 and the app with "my app name" will be shown.
![how-filter-apps](../docassets/images/how-filter-apps.png)
You can use inside the filter one of the following property
You can specify a restricted list of apps using the `filtersAppId` property. This array
contains a list of objects containing the property values you are interested in. You can
use any of the following properties as filters:
```json
{
@ -77,3 +61,18 @@ You can use inside the filter one of the following property
"tenantId": "number"
}
```
For example, if you set `filtersAppId` as follows:
```html
<adf-apps
[filtersAppId]="'[
{defaultAppId: 'tasks'},
{deploymentId: '15037'},
{name : 'my app name'}]'">
</adf-apps>
```
...then only the Tasks app, the app with `deploymentId` 15037 and the app with "my app name" will be shown.
![how-filter-apps](../docassets/images/how-filter-apps.png)

13
docs/process-services/process-instance-header.component.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
---
# Process Instance Details Header component
@ -25,13 +26,15 @@ Sub-component of the process details component, which renders some general infor
| -- | -- | -- | -- |
| processInstance | [`ProcessInstance`](../../lib/process-services/process-list/models/process-instance.model.ts) | | (**required**) Full details of the process instance to display information about. |
## Customise the properties showed
## Details
By default all the properties are showed :
### Choosing which properties are displayed
By default all the properties are displayed:
**_status_**, **_ended_**, **_category_**, **_businessKey_**, **_assignee_**, **_created_**,**_id_**, **_description_**.
It is possible to customise the showed properties via "app.config.json".
This is how the configuration looks like:
You can customize which properties are displayed using a setting in `app.config.json`.
The configuration looks like the following sample:
```json
"adf-process-instance-header": {
@ -41,4 +44,4 @@ This is how the configuration looks like:
}
```
In this way only the listed properties will be showed.
Only the items in the `properties` array will be displayed.

1
docs/process-services/task-filter.service.md
View File

@ -1,6 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-07
---
# Task Filter Service

39
docs/process-services/task-filters.component.md
View File

@ -1,29 +1,13 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-07
---
# Task Filters component
Shows all available filters.
## Contents
- [Basic Usage](#basic-usage)
- [Class members](#class-members)
- [Properties](#properties)
- [Events](#events)
- [Details](#details)
- [How filter the activiti task filters](#how-filter-the-activiti-task-filters)
- [FilterParamsModel](#filterparamsmodel)
- [How to create an accordion menu with the task filter](#how-to-create-an-accordion-menu-with-the-task-filter)
- [See also](#see-also)
## Basic Usage
```html
@ -51,7 +35,9 @@ Shows all available filters.
## Details
### How filter the activiti task filters
### Filtering APS task filters
Use the `filterParam` property to restrict the range of filters that are shown:
```html
<adf-task-filters
@ -59,17 +45,9 @@ Shows all available filters.
</adf-task-filters>
```
You can use inside the filterParam one of the properties from [`FilterParamsModel`](../../lib/process-services/task-list/models/filter.model.ts) (see below).
You can use properties from [`FilterParamsModel`](../../lib/process-services/task-list/models/filter.model.ts)
as the value of `filterParam` as shown in the table below:
### FilterParamsModel
```json
{
"id": "number",
"name": "string",
"index": "number"
}
```
| Name | Type | Description |
| ---- | ---- | ----------- |
@ -79,8 +57,9 @@ You can use inside the filterParam one of the properties from [`FilterParamsMode
### How to create an accordion menu with the task filter
The task filter often works well as an item in an accordion menu. See the [Accordion component](../core/accordion.component.md)
page for an example of how to do set this up.
The task filter often works well as an item in an accordion menu. See the
[Accordion component](../core/accordion.component.md)
page for an example of how to set this up.
## See also

1
package.json
View File

@ -119,6 +119,7 @@
"file-loader": "0.11.1",
"fork-ts-checker-webpack-plugin": "0.2.3",
"fs-extra": "^4.0.2",
"graphql-request": "^1.6.0",
"happypack": "4.0.0",
"html-loader": "0.4.4",
"html-webpack-plugin": "2.28.0",

10
tools/doc/reviewChecker.js
View File

@ -1,5 +1,5 @@
"use strict";
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", { value: true });
var path = require("path");
var fs = require("fs");
var process = require("process");
@ -14,14 +14,14 @@ var stoplist_1 = require("./stoplist");
var adf20StartDate = "2017-11-20";
var commitWeight = 0.1;
var scoreTimeBase = 60;
var rootFolder = ".";
var stoplistFilePath = path.resolve("..", "tools", "doc", "commitStoplist.json");
var libFolder = "lib";
var stoplistFilePath = path.resolve("tools", "doc", "commitStoplist.json");
var angFilePattern = /(component)|(directive)|(model)|(pipe)|(service)|(widget)/;
var srcData = {};
var stoplist = new stoplist_1.Stoplist(stoplistFilePath);
var docsFolderPath = path.resolve("..", "docs");
var docsFolderPath = path.resolve("docs");
var libFolders = ["core", "content-services", "process-services", "insights"];
libsearch(srcData, path.resolve(rootFolder));
libsearch(srcData, path.resolve(libFolder));
/*
let keys = Object.keys(srcData);

8
tools/doc/reviewChecker.ts
View File

@ -19,19 +19,19 @@ const adf20StartDate = "2017-11-20";
const commitWeight = 0.1;
const scoreTimeBase = 60;
const rootFolder = ".";
const stoplistFilePath = path.resolve("..", "tools", "doc", "commitStoplist.json");
const libFolder = "lib";
const stoplistFilePath = path.resolve("tools", "doc", "commitStoplist.json");
const angFilePattern = /(component)|(directive)|(model)|(pipe)|(service)|(widget)/;
let srcData = {};
let stoplist = new Stoplist(stoplistFilePath);
let docsFolderPath = path.resolve("..", "docs");
let docsFolderPath = path.resolve("docs");
let libFolders = ["core", "content-services", "process-services", "insights"];
libsearch(srcData, path.resolve(rootFolder));
libsearch(srcData, path.resolve(libFolder));
/*
let keys = Object.keys(srcData);

2
tools/doc/stoplist.js
View File

@ -1,5 +1,5 @@
"use strict";
exports.__esModule = true;
Object.defineProperty(exports, "__esModule", { value: true });
var fs = require("fs");
/* "Stoplist" of regular expressions to match against strings. */
var Stoplist = /** @class */ (function () {