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-1549] Added docs for Login, Search, Social and Tag (#2355)

Browse Source
This commit is contained in:
Andy Stark
2017-09-20 14:59:45 +01:00
committed by Eugenio Romano
parent 77e75757a6
commit 526ef72ed2
19 changed files with 515 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
docs/like.component.md Normal file
View File

@@ -0,0 +1,33 @@
# ADF Like component
![Custom columns](../docassets/images/social1.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-like [nodeId]="nodeId"></adf-like>
```
### Properties
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| nodeId | string | | The identifier of a node.|
### Events
| Name | Description |
| --- | --- |
| changeVote | Raised when vote gets changed |

232
docs/login.component.md Normal file
View File

@@ -0,0 +1,232 @@
# Login component
Authenticates to Alfresco Content Services and Alfresco Process Services.
![Login component](../docassets/images/custom-footer.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
* [Handling events](#handling-events)
* [Change footer content](#change-footer-content)
* [Change header content](#change-header-content)
* [Extra content](#extra-content)
* [Custom logo and background](#custom-logo-and-background)
* [Customize Validation rules](#customize-validation-rules)
* [Controlling form submit execution behaviour](#controlling-form-submit-execution-behaviour)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage
```html
<adf-login
providers="ECM"
successRoute="/home">
</adf-login>
```
### Properties
| Name | Type | Default Value | Description |
| --- | --- | --- | --- |
| providers | string | | Possible valid values are ECM, BPM or ALL. The default behaviour of this component will log in only in the ECM . If you want to log in in both systems the correct value to use is ALL. |
| successRoute | string | | Route to redirect to upon successful login. |
| disableCsrf | boolean | false | To prevent the CSRF Token from being submitted. Only for Alfresco Process Services call |
| needHelpLink | string | | It will change the url of the NEED HELP link in the footer |
| registerLink | string | | It will change the url of the REGISTER link in the footer |
| logoImageUrl | string | \<ADF logo image> | To change the logo image with a customised image |
| copyrightText | string | \<ADF copyright string> | The copyright text below the login box |
| backgroundImageUrl | string | \<ADF background image> | To change the background image with a customised image |
| fieldsValidation | { [key: string]: any; }, extra?: { [key: string]: any; } | | Use it to customise the validation rules of the login form |
| showRememberMe | boolean | false | Toggle `Remember me` checkbox visibility |
| showLoginActions | boolean | false | Toggle extra actions visibility (`Need Help`, `Register`, etc.) |
### Events
| Name | Description |
| --- | --- |
| onSuccess | Raised when the login is done |
| onError | Raised when the login fails |
| executeSubmit | Raised when the form is submitted |
## Details
### Handling events
**app.component.html**
```html
<adf-login
providers="ALL"
(onSuccess)="mySuccessMethod($event)"
(onError)="myErrorMethod($event)">
</adf-login>
```
**app.component.ts**
```ts
export class AppComponent {
mySuccessMethod($event) {
console.log('Success Login EventEmitt called with: ' + $event.value);
}
myErrorMethod($event) {
console.log('Error Login EventEmitt called with: ' + $event.value);
}
}
```
### Change footer content
![Login with custom footer](../docassets/images/custom-footer.png)
You can replace the entire content in the footer of the login component with your custom content.
```html
<adf-login ...>
<login-footer><template>My custom HTML for the footer</template></login-footer>
</adf-login>`
```
### Change header content
![Login with custom header](../docassets/images/custom-header.png)
You can replace the entire content in the header of the login component with your custom content.
```html
<adf-login ...>
<login-header><template>My custom HTML for the header</template></login-header>
</adf-login>`
```
### Extra content
You can put additional html content between `alfresco-login` tags to get it rendered as part of the login dialog.
This becomes handy in case you need to extend it with custom input fields handled by your application or parent component:
```html
<adf-login ...>
<div>
<div>Your extra content</div>
</div>
</adf-login>
```
Here's an example of custom content:
![Login with custom content](../docassets/images/login-extra-content.png)
### Custom logo and background
It is possible changing logo and background images to custom values.
```html
<adf-login
[backgroundImageUrl]="'http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg'"
[logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'">
</adf-login>
```
Should give you something like the following:
![Login with custom logo and background](../docassets/images/custom-login.png)
Alternatively you can bind to your component properties and provide values dynamically if needed:
```html
<adf-login
[backgroundImageUrl]="myCustomBackground"
[logoImageUrl]="myCustomLogo">
</adf-login>
```
### Customize Validation rules
If needed it is possible to customise the validation rules of the login
form. You can add/modify the default rules of the login form.
**MyCustomLogin.component.html**
```html
<adf-login
[fieldsValidation]="customValidation"
#alfrescologin>
</adf-login>
```
**MyCustomLogin.component.ts**
```ts
export class MyCustomLogin {
@ViewChild('alfrescologin')
alfrescologin: any;
customValidation: any;
constructor(public router: Router) {
this.customValidation = {
username: ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(10)])],
password: ['', Validators.required]
};
}
ngOnInit() {
this.alfrescologin.addCustomValidationError('username', 'minlength', 'Username must be at least 8 characters.');
this.alfrescologin.addCustomValidationError('username', 'maxlength', 'Username must not be longer than 11 characters.');
}
}
```
### Controlling form submit execution behaviour
If absolutely needed it is possible taking full control over form
submit execution by means of `executeSubmit` event.
This event is fired on form submit.
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 without suppressing default one.
**MyCustomLogin.component.html**
```html
<adf-login
(executeSubmit)="validateForm($event)"
#alfrescologin>
</adf-login>
```
**MyCustomLogin.component.ts**
```ts
export class MyCustomLogin {
validateForm(event: any) {
let values = event.values;
// check if the username is in the blacklist
if (values.controls['username'].value === 'invalidUsername') {
this.alfrescologin.addCustomFormError('username', 'the
username is in blacklist');
event.preventDefault();
}
}
}
```
**Please note that if `event.preventDefault()` is not called then default behaviour
will also be executed after your custom code.**

23
docs/rating.component.md Normal file
View File

@@ -0,0 +1,23 @@
# ADF Rating component
![Custom columns](../docassets/images/social2.png)
## Basic Usage
```html
<adf-rating
[nodeId]="'74cd8a96-8a21-47e5-9b3b-a1b3e296787d'">
</adf-rating>
```
### Properties
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| nodeId | string | | The identifier of a node |
### Events
| Name | Description |
| --- | --- |
| changeVote | Raised when vote gets changed |

66
docs/search-control.component.md Normal file
View File

@@ -0,0 +1,66 @@
# Search component
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage
```html
<adf-search-control
[searchTerm]="searchTerm"
inputType="search"
(searchChange)="onSearchChange($event);"
(searchSubmit)="onSearchSubmit($event);"
(fileSelect)="onSearchResultSelect($event);">
</adf-search-control>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| searchTerm | string | | Search term to pre-populate the field with |
| inputType | string | "text" | Type of the input field to render, e.g. "search" or "text" (default) |
| expandable | boolean | true | Whether to use an expanding search control, if false then a regular input is used. |
| autocomplete | boolean | true | Whether the browser should offer field auto-completion for the input field to the user. |
| highlight | boolean | false | Use the true value if you want to see the searched word highlighted. |
| liveSearchEnabled | boolean | true | Whether find-as-you-type suggestions should be offered for matching content items. Set to false to disable. |
| liveSearchRoot | string | "-root-" | NodeRef or node name where the search should start. |
| liveSearchResultType | string | | Node type to filter live search results by, e.g. 'cm:content'. |
| liveSearchMaxResults | number | 5 | Maximum number of results to show in the live search. |
| liveSearchResultSort | string | | Criteria to sort live search results by, must be one of "name" , "modifiedAt" or "createdAt" |
### Events
| Name | Description |
| --- | --- |
| searchChange | Emitted when the search term is changed. The search term is provided in the 'value' property of the returned object. If the term is less than three characters in length then the term is truncated to an empty string. |
| searchSubmit | Emitted when the search form is submitted. The search term is provided in the 'value' property of the returned object. |
| fileSelect | Emitted when a file item from the list of find-as-you-type results is selected |
| expand | Emitted when the expanded state of the control changes based on focus events and the content of the input control |
## Details
```html
<adf-search-control
[searchTerm]="searchTerm"
inputType="search"
(searchChange)="onSearchChange($event);"
(searchSubmit)="onSearchSubmit($event);"
(fileSelect)="onSearchResultSelect($event);">
</adf-search-control>
```
Example of a component that uses the search control. In this example the search term is simply logged to the console
but instead the component could emit an event to be consumed upstream, or it could trigger a change inside a search
results component embedded inside the same component.

54
docs/search.component.md Normal file
View File

@@ -0,0 +1,54 @@
# Search Results component
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic usage](#basic-usage)
* [Properties](#properties)
* [Events](#events)
- [Details](#details)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic usage
```html
<adf-search
[searchTerm]="searchTerm">
</adf-search>
```
### Properties
| Name | Type | Default | Description |
| --- | --- | --- | --- |
| searchTerm | string | | Search term to use when executing the search. Updating this value will run a new search and update the results |
| rootNodeId | string | "-root-" | NodeRef or node name where the search should start. |
| resultType | string | | Node type to filter search results by, e.g. 'cm:content', 'cm:folder' if you want only the files. |
| maxResults | number | 20 | Maximum number of results to show in the search. |
| resultSort | string | | Criteria to sort search results by, must be one of "name" , "modifiedAt" or "createdAt" |
| navigationMode | string | "dblclick" | Event used to initiate a navigation action to a specific result, one of "click" or "dblclick" |
| navigate | boolean | true | Allow documentlist to navigate or not. For more information see documentlist component's documentation |
### Events
| Name | Description |
| --- | --- |
| preview | Emitted when user acts upon files with either single or double click (depends on `navigation-mode`), recommended for Viewer components integration |
| nodeDbClick | Emitted when user acts upon files or folders with double click **only when `navigation-mode` is set to false**, giving more freedom then just simply previewing the file |
| resultsLoad | Emitted when search results have fully loaded |
## Details
```html
<adf-search
[searchTerm]="searchTerm">
</adf-search>
```
Example of a component that displays search results, using the Angular2 router to supply a 'q' parameter containing the
search term. If no router is present on the page or if the router does not provide such parameter then an empty
results page will be shown.

28
docs/tag-actions.component.md Normal file
View File

@@ -0,0 +1,28 @@
# Alfresco Tag Node Actions List component
![Custom columns](../docassets/images/tag3.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-tag-node-actions-list
[nodeId]="nodeId">
</adf-tag-node-actions-list>
```
### Properties
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| nodeId | string | | The identifier of a node |

3
docs/tag-list.component.md Normal file
View File

@@ -0,0 +1,3 @@
# Alfresco Tag List component
![Custom columns](../docassets/images/tag2.png)

28
docs/tag-node-list.component.md Normal file
View File

@@ -0,0 +1,28 @@
# Alfresco Tag Node List component
![Custom columns](../docassets/images/tag1.png)
<!-- markdown-toc start - Don't edit this section. npm run toc to generate it-->
<!-- toc -->
- [Basic Usage](#basic-usage)
* [Properties](#properties)
<!-- tocstop -->
<!-- markdown-toc end -->
## Basic Usage
```html
<adf-tag-node-list
[nodeId]="nodeId">
</adf-tag-node-list>
```
### Properties
| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| nodeId | string | | The identifier of a node |