inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3745] Updates for doc review (20-11-2018) (#3992)

Browse Source
This commit is contained in:
Andy Stark
2018-11-21 11:19:56 +00:00
committed by Eugenio Romano
parent 383b74151a
commit 0a394869f5
27 changed files with 119 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-06-08
Last reviewed: 2018-11-20
---
# Content Action component
@@ -104,7 +104,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 are 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:
@@ -161,7 +161,7 @@ type, and other details of the item just deleted:
#### System handler
This action simply execute one of the built-in actions described above:
This action simply executes one of the built-in actions described above:
```html
<adf-document-list [contentActions]="true"...>
@@ -366,7 +366,7 @@ The code above checks the node name and evaluates to `true` only if the correspo
node is called "For Sale.docx".
Note that if you want to preserve `this` context within the evaluator function then
the property should be declared as a lambda function:
you should declare it as a lambda function:
```ts
funcName = (parameters): boolean => {
@@ -377,10 +377,10 @@ funcName = (parameters): boolean => {
### Conditional disabled state
Similar to `visible` property, it is possible to control the `disabled` state with the following scenarios:
As with the `visible` property, you can control the `disabled` state with the following options:
- direct value of `boolean` type
- binding to a property of the `Function` type that evaluates condition and returns `boolean` value
- binding to a property of the `Function` type that evaluates a condition and returns a `boolean` value
#### Using direct value of boolean type
@@ -418,10 +418,10 @@ export class MyComponent {
}
```
Code above checks the node name, and evaluates to `true` only if corresponding node is called "custom".
The code above checks the node name, and evaluates to `true` only if the corresponding node is called "custom".
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 the `this` context within the evaluator function,
you should declare it as a lambda function:
```ts
funcName = (parameters): boolean => {
@@ -440,11 +440,11 @@ for details and examples.
### Error, Permission and Success callbacks
Defining error, permission and success callbacks are pretty much the same as doing it for the delete permission handling.
You can define error, permission and success callbacks in much the same way as for the delete permission handling.
- The error handler callback gets the error object which was raised
- The success callback's only parameter is the translatable success message string (could be used for showing in snackbar for example)
- The permissionEvent callback is the same as described above with the delete action
- The error handler callback gets the error object that was raised
- The success callback's only parameter is the translatable success message string (which could be shown in a snackbar, for example)
- The `permissionEvent` callback is the same as described above for the delete action
![Copy/move document action](../docassets/images/document-action-copymove.png)

2
docs/content-services/file-uploading-dialog.component.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-05-08
Last reviewed: 2018-11-20
---
# File Uploading Dialog Component

2
docs/content-services/folder-create.directive.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-05-03
Last reviewed: 2018-11-20
---
# Folder Create directive

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

@@ -1,7 +1,7 @@
---
Added: v2.3.0
Status: Active
Last reviewed: 2018-09-13
Last reviewed: 2018-11-20
---
# Inherit Permission directive

2
docs/content-services/node-download.directive.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.2.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-11-20
---
# Node Download directive

19
docs/content-services/node-lock.directive.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.2.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-11-20
---
# Node Lock directive
@@ -26,15 +26,18 @@ Locks a node.
## Details
When the decorated element (eg, div) is clicked, a dialog is shown to let you lock
When the user clicks the decorated element (eg, div), a dialog is shown to let them lock
or unlock a file (a folder cannot be locked).
There are two types of lock: indefinite lock and time lock.
If the time is not selected the user will lock the file it until will not unlock it
When a file is locked it can be locked and unlocked by default only by the user that creates the lock but you can also allow the other file owners to modify it
There are two types of lock that the user can choose from the dialog: indefinite lock and time lock. The time lock will expire at the specified time
but the indefinite lock remains in place until the user cancels it.
When a file is locked it can be locked and unlocked by default only by the user that creates the lock but you can also allow the other file owners to modify it:
![adf-lock](../docassets/images/lock-directive.png)
This calls the `openLockNodeDialog` method from the
[Content Node Dialog service](content-node-dialog.service.md) method when clicked,
and disables the target button if the provided node is not a file or the user doesn't
This directive calls the `openLockNodeDialog` method from the
[Content Node Dialog service](content-node-dialog.service.md)
when clicked.
It disables the target button if the provided node is not a file or the user doesn't
have permissions.

2
docs/content-services/permission-list.component.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.3.0
Status: Active
Last reviewed: 2018-09-13
Last reviewed: 2018-11-20
---
# Permission List Component

8
docs/core/card-item-types.service.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-05-08
Last reviewed: 2018-11-20
---
# Card Item Type service
@@ -13,7 +13,7 @@ Maps type names to field component types for the [Card View component](../core/c
### Methods
- **getComponentTypeResolver**(type: `string`, defaultValue: `Type<__type>` = `this.defaultValue`): `DynamicComponentResolveFunction`<br/>
Gets the currently active ComponentTypeResolver function for a field type.
Gets the currently active DynamicComponentResolveFunction for a field type.
- _type:_ `string` - The type whose resolver you want
- _defaultValue:_ `Type<__type>` - Default type returned for types that are not yet mapped
- **Returns** `DynamicComponentResolveFunction` - Resolver function
@@ -23,7 +23,7 @@ Maps type names to field component types for the [Card View component](../core/c
- _defaultValue:_ `Type<__type>` - Default type returned for field types that are not yet mapped.
- **Returns** `Type<__type>` - Component type
- **setComponentTypeResolver**(type: `string`, resolver: `DynamicComponentResolveFunction`, override: `boolean` = `true`)<br/>
Sets or optionally replaces a ComponentTypeResolver function for a field type.
Sets or optionally replaces a DynamicComponentResolveFunction for a field type.
- _type:_ `string` - The type whose resolver you want to set
- _resolver:_ `DynamicComponentResolveFunction` - The new resolver function
- _override:_ `boolean` - The new resolver will only replace an existing one if this parameter is true
@@ -32,7 +32,7 @@ Maps type names to field component types for the [Card View component](../core/c
The [Card View component](card-view.component.md) uses this service to find the component
type that is required to display a particular field type (text, date, etc). The service
maps a type name string to a corresponding `ComponentTypeResolver` function that takes a
maps a type name string to a corresponding `DynamicComponentResolveFunction` that takes a
model object as a parameter and returns the component type needed to display that model.
The default mapping is shown below:

5
docs/core/context-menu.directive.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-11-20
---
# Context Menu directive
@@ -53,4 +53,5 @@ export class MyComponent implements OnInit {
## Details
See **Demo Shell** or **DocumentList** implementation for more details and use cases.
See the [Demo Shell](../../demo-shell/README.md)
or [Document List component](../content-services/document-list.component.md) implementation for more details and use cases.

10
docs/core/form-field.component.md
View File

@@ -1,12 +1,12 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-05-08
Last reviewed: 2018-11-20
---
# Form field component
A form field in an APS form.
Represents a UI field in a form.
## Basic Usage
@@ -26,7 +26,7 @@ based on the field type or the metadata information.
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| field | [`FormFieldModel`](../core/form-field.model.md) | null | Contains all the necessary data needed to determine what UI Widget to use when rendering the field in the form. You would typically not create this data manually but instead create the form in APS and export it to get to all the [`FormFieldModel`](../core/form-field.model.md) definitions. |
| field | [`FormFieldModel`](../core/form-field.model.md) | null | Contains all the necessary data needed to determine what UI [`Widget`](../../e2e/pages/adf/process_services/widgets/widget.ts) to use when rendering the field in the form. You would typically not create this data manually but instead create the form in APS and export it to get to all the `FormFieldModel` definitions. |
## Details
@@ -37,8 +37,8 @@ uses `<adf-form-field>` components to render the form fields.
Forms defined in APS have the following default mappings for the form fields:
| APS [`Form`](../../lib/process-services/task-list/models/form.model.ts) Designer Widget | Field Type | Component Type |
| --------------------------------------------------------------------------------------- | ---------- | -------------- |
| _APS [Form](../../lib/process-services/task-list/models/form.model.ts) Designer_ [`Widget`](../../e2e/pages/adf/process_services/widgets/widget.ts) | Field Type | Component Type |
| --------------------------------------------------------------------------------------------------------------------------------------------------- | ---------- | -------------- |
| Text | text | [`TextWidgetComponent`](../../lib/core/form/components/widgets/text/text.widget.ts) |
| Multi-line text | multi-line-text | [`MultilineTextWidgetComponentComponent`](../../lib/core/form/components/widgets/multiline-text/multiline-text.widget.ts) |
| Number | integer | [`NumberWidgetComponent`](../../lib/core/form/components/widgets/number/number.widget.ts) |

3
docs/core/form-list.component.md
View File

@@ -1,11 +1,12 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-11-20
---
# Form List Component
Shows APS forms as a list.
Shows forms as a list.
## Basic Usage

24
docs/core/form-rendering.service.md
View File

@@ -1,19 +1,19 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-05-08
Last reviewed: 2018-11-20
---
# Form Rendering service
Maps an APS form field type string onto the corresponding form [widget component](../insights/widget.component.md) type.
Maps a form field type string onto the corresponding form [widget component](../insights/widget.component.md) type.
## Class members
### Methods
- **getComponentTypeResolver**(type: `string`, defaultValue: `Type<__type>` = `this.defaultValue`): `DynamicComponentResolveFunction`<br/>
Gets the currently active ComponentTypeResolver function for a field type.
Gets the currently active DynamicComponentResolveFunction for a field type.
- _type:_ `string` - The type whose resolver you want
- _defaultValue:_ `Type<__type>` - Default type returned for types that are not yet mapped
- **Returns** `DynamicComponentResolveFunction` - Resolver function
@@ -23,32 +23,32 @@ Maps an APS form field type string onto the corresponding form [widget component
- _defaultValue:_ `Type<__type>` - Default type returned for field types that are not yet mapped.
- **Returns** `Type<__type>` - Component type
- **setComponentTypeResolver**(type: `string`, resolver: `DynamicComponentResolveFunction`, override: `boolean` = `true`)<br/>
Sets or optionally replaces a ComponentTypeResolver function for a field type.
Sets or optionally replaces a DynamicComponentResolveFunction for a field type.
- _type:_ `string` - The type whose resolver you want to set
- _resolver:_ `DynamicComponentResolveFunction` - The new resolver function
- _override:_ `boolean` - The new resolver will only replace an existing one if this parameter is true
## Details
The [`Form`](../../lib/process-services/task-list/models/form.model.ts) Field component uses this service to choose which widget to use to render an instance of a
The [`Form`](../../lib/process-services/task-list/models/form.model.ts) Field component uses this service to choose which [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) to use to render an instance of a
form field. The [`Form`](../../lib/process-services/task-list/models/form.model.ts) Field model stores the field type name as a string (see the table below).
The [`Form`](../../lib/process-services/task-list/models/form.model.ts) Rendering service maintains a mapping between each type name and
a corresponding ComponentTypeResolver function. The function takes a [`FormFieldModel`](../core/form-field.model.md) object as its argument and
uses the data from the object to determine which widget should be used to render the field.
a corresponding `DynamicComponentResolveFunction`. The function takes a [`FormFieldModel`](../core/form-field.model.md) object as its argument and
uses the data from the object to determine which [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) should be used to render the field.
In some cases, the field type string alone is enough to determine the widget type and so the function
In some cases, the field type string alone is enough to determine the [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) type and so the function
just returns the type directly:
```ts
let customResolver: ComponentTypeResolver = () => CustomWidgetComponent;
let customResolver: DynamicComponentResolveFunction = () => CustomWidgetComponent;
formRenderingService.setComponentTypeResolver('text', customResolver, true);
```
In other cases, the function may need to choose the widget dynamically based on
In other cases, the function may need to choose the [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) dynamically based on
specific values in the form data:
```ts
let customResolver: ComponentTypeResolver = (field: FormFieldModel): Type<{}> => {
let customResolver: DynamicComponentResolveFunction = (field: FormFieldModel): Type<{}> => {
if (field) {
let params = field.params;
}
@@ -94,7 +94,7 @@ if you set the `override` parameter to 'true':
formRenderingService.setComponentTypeResolver('text', newResolver, true);
```
You would typically use this to replace an existing widget with your own custom version that
You would typically use this to replace an existing [widget](../../e2e/pages/adf/process_services/widgets/widget.ts) with your own custom version that
implements a modified layout or responds differently when the data is entered. See the
[Form Extensibility and Customisation](../user-guide/extensibility.md) guide for further details and examples
of this technique.

27
docs/core/header.component.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.5.0
Status: Experimental
Last reviewed: 2018-08-07
Status: Active
Last reviewed: 2018-11-20
---
# Header component
@@ -31,26 +31,25 @@ body of the element:
</adf-layout-header>
```
## Class members
### Properties
| Name | Type | Description |
| -- | -- | -- |
| title | `string` | Title of the application
| logo | `string` | Path to an image file for the application logo.
| redirectUrl | `string` \| `any[]` | The router link for the application logo.
| tooltip | `string` | The tooltip text for the application logo.
| color | `string` | Background color for the header. It can be any hex color code or the Material theme colors: 'primary', 'accent' or 'warn'.
| showSidenavToggle | `boolean` | Signals if the sidenav button will be displayed in the header or not. By default is true.
| position | `string` | 'start' | The side that the drawer is attached to 'start' or 'end' page |
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| color | `string` | | Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. |
| logo | `string` | | Path to an image file for the application logo. |
| position | `string` | "start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
| redirectUrl | `string \| any[]` | "/" | The router link for the application logo, when clicked. |
| showSidenavToggle | `boolean` | true | Toggles whether the sidenav button will be displayed in the header or not. |
| title | `string` | | Title of the application. |
| tooltip | `string` | | The tooltip text for the application logo. |
### Events
| Name | Type | Description |
| -- | -- | -- |
| clicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<boolean>` | Emitted when click on sidenav button
| ---- | ---- | ----------- |
| clicked | [`EventEmitter`](https://angular.io/api/core/EventEmitter)`<any>` | Emitted when the sidenav button is clicked. |
## Details

4
docs/core/highlight.directive.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-11-20
---
# Highlight directive
@@ -43,7 +43,7 @@ of that term in its content. For example:
</div>
```
...will result in the word "dance" being highlighted. Note that you must also
This will result in the word "dance" being highlighted. Note that you must also
specify `adf-highlight-selector`, a CSS selector that specifies which
elements can have their contents highlighted.

2
docs/core/node-delete.directive.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-11-20
---
# Node Delete directive

12
docs/core/node-permission.directive.md
View File

@@ -1,12 +1,12 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-11-20
---
# Node Permission directive
Selectively disables an HTML element or Angular component
Selectively disables an HTML element or Angular component.
## Contents
@@ -95,7 +95,9 @@ for example). You can also use it in much the same way as you would with an HTML
```
To enable your own component to work with this directive, you need to implement the
[`NodePermissionSubject`](../../lib/core/directives/node-permission.directive.ts) interface and also define it as an EXTENDIBLE_COMPONENT parent component,
[`NodePermissionSubject`](../../lib/core/directives/node-permission.directive.ts) interface and also define it as an
[`EXTENDIBLE_COMPONENT`](../../lib/core/interface/injection.tokens.ts)
parent component,
as described in the following sections.
### Implementing the NodePermissionSubject interface
@@ -118,7 +120,9 @@ The directive will look up the component in the dependency injection tree,
up to the `@Host()` component. The host component is typically the component that requests
the dependency. However, when this component is projected into a parent component, the
parent becomes the host. This means you must provide your component with forward referencing
as the `EXTENDIBLE_COMPONENT` and also provide your component as a `viewProvider`:
as the
[`EXTENDIBLE_COMPONENT`](../../lib/core/interface/injection.tokens.ts)
and also provide your component as a `viewProvider`:
```js
import { EXTENDIBLE_COMPONENT } from '@alfresco/adf-core';

2
docs/core/node.service.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-09-13
Last reviewed: 2018-11-20
---
# Node Service

2
docs/core/pagination.component.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-16
Last reviewed: 2018-11-20
---
# Pagination Component

2
docs/core/sidebar-action-menu.component.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.1.0
Status: Active
Last reviewed: 2018-09-14
Last reviewed: 2018-11-20
---
# Sidebar action menu component

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

@@ -1,7 +1,7 @@
---
Added: v2.3.0
Status: Active
Last reviewed: 2018-09-14
Last reviewed: 2018-11-20
---
# Sidenav Layout component
@@ -102,9 +102,11 @@ The contents of the 3 regions can be injected through Angular's template transcl
in the usage example above.
Desktop layout (screen width greater than the `stepOver` value):
![Sidenav on desktop](../docassets/images/sidenav-layout.png)
Mobile layout (screen width less than the `stepOver` value):
![Sidenav on mobile](../docassets/images/sidenav-layout-mobile.png)
### Template context

2
docs/core/text-mask.component.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-11-20
---
# Text Mask directive

2
docs/core/upload.directive.md
View File

@@ -1,7 +1,7 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-04-10
Last reviewed: 2018-11-20
---
# Upload Directive

6
docs/core/user-preferences.service.md
View File

@@ -1,12 +1,12 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-09-14
Last reviewed: 2018-11-20
---
# User Preferences Service
Stores preferences for components.
Stores preferences for the app and for individual components.
## Class members
@@ -99,7 +99,7 @@ The service also provides quick access to a set of the "known" properties used a
## User Preference onChange Stream
Whenever a property is set with the user preference service, an `onChange` event is sent with the
Whenever a property is set with the [user preferences service,](../core/user-preferences.service.md) an `onChange` event is sent with the
whole set of user properties. This is useful when a component needs to react to a property change:
```ts

4
docs/process-services/attach-form.component.md
View File

@@ -1,12 +1,12 @@
---
Added: v2.0.0
Status: Active
Last reviewed: 2018-09-14
Last reviewed: 2018-11-20
---
# Attach Form component
This component can be used when there is no form attached to a task and we want to add one.
This component can be used when there is no form attached to a task and you want to add one.
## Basic Usage

21
lib/core/layout/components/header/header.component.ts
View File

@@ -24,15 +24,34 @@ import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } fro
host: { class: 'adf-layout-header' }
})
export class HeaderLayoutComponent implements OnInit {
/** Title of the application. */
@Input() title: string;
/** Path to an image file for the application logo. */
@Input() logo: string;
/** The router link for the application logo, when clicked. */
@Input() redirectUrl: string | any[] = '/';
/** The tooltip text for the application logo. */
@Input() tooltip: string;
/**
* Background color for the header. It can be any hex color code or one
* of the Material theme colors: 'primary', 'accent' or 'warn'.
*/
@Input() color: string;
/**
* Toggles whether the sidenav button will be displayed in the header
* or not.
*/
@Input() showSidenavToggle: boolean = true;
/** Emitted when the sidenav button is clicked. */
@Output() clicked = new EventEmitter<any>();
/** The side that the drawer is attached to 'start' | 'end' page */
/** The side of the page that the drawer is attached to (can be 'start' or 'end') */
@Input() position = 'start';
toggleMenu() {

4
lib/core/services/dynamic-component-mapper.service.ts
View File

@@ -32,7 +32,7 @@ export abstract class DynamicComponentMapper {
protected types: { [key: string]: DynamicComponentResolveFunction } = {};
/**
* Gets the currently active ComponentTypeResolver function for a field type.
* Gets the currently active DynamicComponentResolveFunction for a field type.
* @param type The type whose resolver you want
* @param defaultValue Default type returned for types that are not yet mapped
* @returns Resolver function
@@ -45,7 +45,7 @@ export abstract class DynamicComponentMapper {
}
/**
* Sets or optionally replaces a ComponentTypeResolver function for a field type.
* Sets or optionally replaces a DynamicComponentResolveFunction for a field type.
* @param type The type whose resolver you want to set
* @param resolver The new resolver function
* @param override The new resolver will only replace an existing one if this parameter is true

2
tools/doc/doctool.config.json
View File

@@ -51,11 +51,13 @@
"UserRepresentation": "https://github.com/Alfresco/alfresco-js-api/blob/development/src/alfresco-activiti-rest-api/docs/UserRepresentation.md"
},
"typeNameExceptions": {
"content.widget": "ContentWidgetComponent",
"datatable.component": "DataTableComponent",
"tasklist.service": "TaskListService",
"text-mask.component": "InputMaskDirective",
"card-item-types.service": "CardItemTypeService",
"create-task-attachment.component": "AttachmentComponent",
"header.component": "HeaderLayoutComponent",
"process-list.component": "ProcessInstanceListComponent",
"inherited-button.directive": "InheritPermissionDirective",
"node-share.directive": "NodeSharedDirective",