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-2463] Moved core components to subfolder (#3062)

Browse Source
This commit is contained in:
Andy Stark
2018-03-12 16:24:40 +00:00
committed by Eugenio Romano
parent f3459e1221
commit 333e8ee89c
35 changed files with 69 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
docs/core/accordion-group.component.md Normal file
View File

@@ -0,0 +1,59 @@
---
Added: v2.0.0
Status: Active
---
# Accordion Group component
Adds a collapsible panel to an accordion menu.
![Accordion menu screenshot](../docassets/images/accordion-menu.png)
## Basic Usage
```html
<adf-accordion>
<adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'" [headingIconTooltip]="'Group Tooltip'">
<my-list></my-list>
</adf-accordion-group>
</adf-accordion>
```
```ts
@Component({
selector: 'my-component'
})
export class MyComponent implements OnInit {
titleHeading: string;
constructor() {
this.titleHeading = 'My Group';
}
}
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| heading | `string` | | Title heading for the group. |
| headingIcon | `string` | | The material design icon. |
| headingIconTooltip | `string` | | Tooltip message to be shown for headingIcon |
| hasAccordionIcon | `boolean` | `true` | Should the (expanded) accordion icon be shown? |
| isOpen | `boolean` | | Is this group currently open? |
| isSelected | `boolean` | | Is this group currently selected? |
### Events
| Name | Type | Description |
| ---- | ---- | ----------- |
| headingClick | `EventEmitter<any>` | Emitted when the heading is clicked. |
## Details
Place one or more accordion groups within an [Accordion component](accordion.component.md) to define a menu.
## See also
- [Accordion component](accordion.component.md)

69
docs/core/accordion.component.md Normal file
View File

@@ -0,0 +1,69 @@
---
Added: v2.0.0
Status: Active
---
# Accordion Component
Creates a collapsible accordion menu.
![Accordion menu screenshot](../docassets/images/accordion-menu.png)
## Basic Usage
```html
<adf-accordion>
<adf-accordion-group [heading]="titleHeading" [isSelected]="true" [headingIcon]="'assignment'">
<my-list></my-list>
</adf-accordion-group>
</adf-accordion>
```
```ts
@Component({
selector: 'my-component'
})
export class MyComponent implements OnInit {
titleHeading: string;
constructor() {
this.titleHeading = 'My Group';
}
}
```
## Details
An accordion menu contains several panels of content, only one of which is visible at any time. The
hidden panels are collapsed down to just the title and pushed together (like the bellows of an accordion)
while the visible panel fills the remaining space in the menu.
Use one or more [Accordion Group](accordion-group.component.md) subcomponents to define the panels and set their
properties (title, selection status, etc).
### Example
You can use an accordion menu to wrap a [process filter](../process-filters.component.md), as shown in
the following example:
```html
<adf-accordion>
<adf-accordion-group
[heading]="'Processes'"
[isSelected]="true"
[headingIcon]="'assessment'">
<adf-process-instance-filters
[appId]="appId"
(filterClick)="onProcessFilterClick($event)"
(success)="onSuccessProcessFilterList($event)">
</adf-process-instance-filters>
</adf-accordion-group>
</adf-accordion>
```
![how-create-accordion-menu](../docassets/images/how-to-create-accordion-menu.png)
## See also
- [Accordion group component](accordion-group.component.md)

100
docs/core/app-config.service.md Normal file
View File

@@ -0,0 +1,100 @@
---
Added: v2.0.0
Status: Active
---
# App Config service
Supports app configuration settings, stored server side.
## Details
The `AppConfigService` service provides support for loading and accessing global application configuration settings that you store on the server side in the form of a JSON file.
You may need this service when deploying your ADF-based application to production servers.
There can be more than one server running web apps with different settings, like different addresses for Alfresco Content/Process services.
Or there is a need to change global settings for all the clients.
The service is already pre-configured to look for the "app.config.json" file in the application root address.
That allows deploying ADF-based web applications to multiple servers together with different settings files, for example having development, staging or production environments.
Example of the default settings file content:
**app.config.json**
```json
{
"ecmHost": "http://localhost:3000/ecm",
"bpmHost": "http://localhost:3000/bpm",
"application": {
"name": "Alfresco"
}
}
```
Please note that settings above are default ones coming with the server.
You can override the values in your custom `app.config.json` file if needed.
You can also change the path or name of the configuration file when importing the CoreModule in your main application.
```ts
...
@NgModule({
imports: [
...
CoreModule.forRoot({
appConfigFile: 'app.production.config.json'
})
],
...
}
export class AppModule { }
```
Below is a simple example of using the AppConfigService in practice.
**app.component.ts**
```ts
import { AppConfigService } from '@alfresco/adf-core';
@Component({...})
export class AppComponent {
constructor(appConfig: AppConfigService) {
// get nested properties by the path
console.log(appConfig.get('application.name'));
// use generics for type safety
let version: number = appConfig.get<number>('version');
console.log(version);
}
}
```
Your custom components can also benefit from the `AppConfigService`,
you can put an unlimited number of settings and optionally a nested JSON hierarchy.
### Variable substitution in configuration strings
The `AppConfigService` also supports a limited set of variable substitutions to greatly simplify certain scenarios.
```json
{
"ecmHost": "http://{hostname}:{port}/ecm",
"bpmHost": "http://{hostname}:{port}/bpm",
"application": {
"name": "Alfresco"
}
}
```
The supported variables are:
| Variable name | Runtime value |
| ------------- | ------------- |
| hostname | `location.hostname` |
| port | `location.port` |

25
docs/core/bpm-user.model.md Normal file
View File

@@ -0,0 +1,25 @@
---
Added: v2.0.0
Status: Active
---
# Bpm User model
Contains information about a Process Services user.
## Details
Instances of this class are returned by the methods of the
[Bpm User service](bpm-user.service.md). It implements the
`UserRepresentation` interface, which is defined in the
[Alfresco JS API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/UserRepresentation.md).
Note that the Typescript class for this model is in active development;
it is likely to change and so its properties are not listed here. For the
latest version of the class, see the
[source file](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/userinfo/models/bpm-user.model.ts).
## See also
- [Bpm user service](bpm-user.service.md)
- [Ecm user model](ecm-user.model.md)
- [People process service](people-process.service.md)

31
docs/core/bpm-user.service.md Normal file
View File

@@ -0,0 +1,31 @@
---
Added: v2.0.0
Status: Active
---
# Bpm User service
Gets information about the current Process Services user.
## Methods
`getCurrentUserInfo(): Observable<BpmUserModel>`<br/>
Gets information about the current user.
`getCurrentUserProfileImage(): string`<br/>
Returns the current user's profile image as a URL.
## Details
The class returned by `getCurrentUserInfo` is detailed
in the [Bpm User model docs](bpm-user.model.md).
See the
[getProfile](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/ProfileApi.md#getProfile)
and
[getProfilePictureUrl](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/ProfileApi.md#getProfilePictureUrl)
methods in the Alfresco JS API for more information about the REST calls used by this service.
## See also
- [Ecm user service](ecm-user.service.md)
- [Bpm user model](bpm-user.model.md)

28
docs/core/comment-process.model.md Normal file
View File

@@ -0,0 +1,28 @@
---
Added: v2.0.0
Status: Active
---
# Comment Process model
Represents a comment added to a Process Services task or process instance.
## Details
Instances of this class are returned by the methods of the
[Comment Process service](comment-process.service.md). See the Comments API
methods in the
[Alfresco JS API docs](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api)
for more information.
```ts
class CommentProcessModel implements CommentRepresentation {
id: number;
message: string;
created: Date;
createdBy: LightUserRepresentation;
}
```
## See also
- [Comment process service](comment-process.service.md)

32
docs/core/comment-process.service.md Normal file
View File

@@ -0,0 +1,32 @@
---
Added: v2.0.0
Status: Active
---
# Comment Process service
Adds and retrieves comments for task and process instances in Process Services.
## Methods
`addTaskComment(taskId: string, message: string): Observable<CommentProcessModel>`<br/>
Adds a comment to a task.
`getTaskComments(taskId: string): Observable<CommentProcessModel[]>`<br/>
Gets all comments that have been added to a task.
`addProcessInstanceComment(processInstanceId: string, message: string): Observable<CommentProcessModel>`<br/>
Adds a comment to a process instance.
`getProcessInstanceComments(processInstanceId: string): Observable<CommentProcessModel[]>`<br/>
Gets all comments that have been added to a process instance.
## Details
See the [Comment Process model](comment-process.model.md) for more information about the
comments returned by the methods of this service. Also, the Comments API section of the
[Alfresco JS API docs](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-activiti-rest-api)
has further details about the underlying REST API.
## See also
- [Comment process model](comment-process.model.md)

86
docs/core/content.service.md Normal file
View File

@@ -0,0 +1,86 @@
---
Added: v2.0.0
Status: Active
---
# Content service
Accesses app-generated data objects via URLs and file downloads.
## Methods
- `downloadBlob(blob: Blob, fileName: string)`
Invokes content download for a Blob with a file name.
- `blob` - Content to download.
- `fileName` - Name of the resulting file.
- `downloadData(data: any, fileName: string)`
Invokes content download for a data array with a file name.
- `data` - Data to download.
- `fileName` - Name of the resulting file.
- `downloadJSON(json: any, fileName)`
Invokes content download for a JSON object with a file name.
- `json` - JSON object to download.
- `fileName` - Name of the resulting file.
- `createTrustedUrl(blob: Blob): string`
Creates a trusted object URL from the Blob. WARNING: calling this method with untrusted user data exposes your application to XSS security risks!
- `blob` - Data to wrap into object URL
- `getDocumentThumbnailUrl(node: any, attachment?: boolean, ticket?: string): string`
Get thumbnail URL for the given document node.
- `node` - Node to get URL for.
- `attachment` - (Optional) Retrieve content as an attachment for download
- `ticket` - (Optional) Custom ticket to use for authentication
- `getContentUrl(node: any, attachment?: boolean, ticket?: string): string`
Get content URL for the given node.
- `node` - nodeId or node to get URL for.
- `attachment` - (Optional) Retrieve content as an attachment for download
- `ticket` - (Optional) Custom ticket to use for authentication
- `getNodeContent(nodeId: string): Observable<any>`
Get content for the given node.
- `nodeId` - ID of the target node
- `createFolder(relativePath: string, name: string, parentId?: string): Observable<FolderCreatedEvent>`
Create a folder
- `relativePath` - Location to create the folder
- `name` - Folder name
- `parentId` - (Optional) Node ID of parent folder
- `hasPermission(node: any, permission: PermissionsEnum | string): boolean`
Check if the user has permissions on that node
- `node` - Node to check allowableOperations
- `permission` - Create, delete, update, updatePermissions, !create, !delete, !update, !updatePermissions
- `hasAllowableOperations(node: any): boolean`
Check if the node has the properties allowableOperations
- `node` - Node to check allowableOperations
## Details
Use the Content service to deliver data to the user from `Blob` objects.
The [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) class
(implemented in the browser, not ADF) represents an array of bytes that you can
use to construct and store data in any binary format you choose.
The user can access a Blob either by downloading the byte array as a file or in
some cases by viewing it directly in the browser via a special URL that references
the Blob. For example, you could use the Blob interface to construct an image in the
[PNG format](https://en.wikipedia.org/wiki/Portable_Network_Graphics). Since
PNG is a format the browser can display, you could use the Blob's URL in an
&lt;img> element to view the image within the page. Alternatively, you could let
the user download it as a PNG file.
The `downloadBlob` method starts a download of the Blob data to the `filename`
within the user's downloads folder. The other `downloadXXX` methods do the same
but first convert the supplied data to a Blob before downloading; see the
[Blob reference page](https://developer.mozilla.org/en-US/docs/Web/API/Blob)
for details of how a Blob's contents are assembled from the constructor arguments.
Use `createdTrustedUrl` to generate a URL string for a Blob. The URL refers to
the Blob as though it were a file but it is actually an object stored in memory,
so it does not persist across browser sessions. This URL can be used much like any
other, so you could use it for the `src` attribute of an &lt;img> element or the
`href` of a download link. Note that while the URL is 'trusted', the data it contains
is not necessarily trustworthy unless you can vouch for it yourself; be careful that
the data doesn't expose your app to
[Cross Site Scripting](https://en.wikipedia.org/wiki/Cross-site_scripting)
attacks.
## See also
- [Cookie service](cookie.service.md)
- [Storage service](storage.service.md)

38
docs/core/cookie.service.md Normal file
View File

@@ -0,0 +1,38 @@
---
Added: v2.0.0
Status: Active
---
# Cookie service
Stores key-value data items as browser cookies.
## Methods
- `isEnabled(): boolean`
Checks if cookies are enabled.
- `getItem(key: string): string`
Retrieves a cookie by its key.
- `key` - Key to identify the cookie
- `setItem(key: string, data: string, expiration: Date | null, path: string | null)`
Set a cookie.
- `key` - Key to identify the cookie
- `data` - Data value to set for the cookie
- `expiration` - Expiration date of the data
- `path` - "Pathname" to store the cookie
## Details
This service uses browser [cookies](https://en.wikipedia.org/wiki/HTTP_cookie)
to store data in the form of key-value pairs. An optional `expiration` date can be
supplied for the cookie and a `path` can be used to reduce the chances of name
clashes with cookies from other sources.
Cookies have a storage size limit that varies between browsers but is often around
4KB. Consider using [web storage](storage.service.md) if you need to store data
beyond this size.
## See also
- [Content service](content.service.md)
- [Storage service](storage.service.md)

27
docs/core/discovery-api.service.md Normal file
View File

@@ -0,0 +1,27 @@
---
Added: v2.0.0
Status: Active
---
# Discovery Api service
Gets version and license information for Process Services and Content Services.
## Methods
- `getEcmProductInfo(): any`
Gets product information for Content Services.
- `getBpmProductInfo(): any`
Gets product information for Process Services.
## Details
The product license and version information is returned using the
classes defined in the [Product Version model](product-version.model.md).
See the
[Alfresco JS API docs](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-discovery-rest-api)
to learn more about the REST API used by this service.
## See also
- [Product version model](product-version.model.md)

25
docs/core/ecm-user.model.md Normal file
View File

@@ -0,0 +1,25 @@
---
Added: v2.0.0
Status: Active
---
# Ecm User model
Contains information about a Content Services user.
## Details
Instances of this class are returned by the methods of the
[Ecm User service](ecm-user.service.md). It implements the `Person`
interface, which is defined in the
[Alfresco JS API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/Person.md).
Note that the Typescript class for this model is in active development;
it is likely to change and so its properties are not listed here. For the
latest version of the class, see the
[source file](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/userinfo/models/ecm-user.model.ts).
## See also
- [Ecm user service](ecm-user.service.md)
- [People content service](people-content.service.md)
- [Bpm user model](bpm-user.model.md)

35
docs/core/ecm-user.service.md Normal file
View File

@@ -0,0 +1,35 @@
---
Added: v2.0.0
Status: Active
---
# Ecm User service
Gets information about a Content Services user.
## Methods
- `getUserInfo(userName: string): Observable<EcmUserModel>`
Gets information about a user identified by their username.
- `userName` - Target username
- `getCurrentUserInfo(): Observable<EcmUserModel>`
Gets information about the user who is currently logged-in.
- `getUserProfileImage(avatarId: string): string`
Returns a profile image as a URL.
- `avatarId` - Target avatar
## Details
The class returned by `getUserInfo` and `getCurrentUserInfo` is detailed
in the [Ecm User model docs](ecm-user.model.md). The `avatarId` passed to
`getUserProfileImage` is available as a field of the `EcmUserModel` instance
returned for a particular person.
See the
[getPerson](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PeopleApi.md#getPerson)
method in the Alfresco JS API for more information about the REST calls used by this service.
## See also
- [Bpm user service](bpm-user.service.md)
- [Ecm user model](ecm-user.model.md)

22
docs/core/file-size.pipe.md Normal file
View File

@@ -0,0 +1,22 @@
---
Added: v2.0.0
Status: Active
---
# File Size pipe
Converts a number of bytes to the equivalent in KB, MB, etc.
## Basic Usage
```HTML
<div>
File Size: {{ sizeInBytes | adfFileSize:"2" }}
</div>
```
## Details
The pipe chooses the largest unit that is less than the total number of bytes and
divides the total by this number. This ensures that the number of units is greater
than 1 (eg, you will see "512 Bytes" rather than "0.5KB"). The pipe parameter indicates
the number of decimal places to use for the value, defaulting to 2 decimal places.

46
docs/core/highlight-transform.service.md Normal file
View File

@@ -0,0 +1,46 @@
---
Added: v2.0.0
Status: Active
---
# Highlight Transform service
Adds HTML to a string to highlight chosen sections.
## Methods
- `highlight(text: string, search: string, wrapperClass: string = 'highlight'): HightlightTransformResult`
Searches for `search` string(s) within `text` and highlights all occurrences.
- `text` - Text to search within
- `search` - Text pattern to search for
- `wrapperClass` - CSS class used to provide highlighting style
## Details
A typical use case for this service is to display the results from a search engine.
An excerpt of a retrieved document can be shown with the matching search terms
highlighted to indicate where they were found.
The service works by adding HTML &lt;span> elements around all sections of text
that match the `search` string. You can specify multiple search strings at once by
separating them with spaces, so passing "Apple Banana Cherry" in `search` will
highlight any of those words individually. The &lt;span> element includes a
`class` attribute which defaults to "highlight" but you can pass any class name
you like using the `wrapperClass` parameter.
The resulting text with HTML highlighting is returned within a `HightlightTransformResult`
object:
```ts
interface HightlightTransformResult {
text: string;
changed: boolean;
}
```
The `changed` flag will be false if the search string was not found (ie, no highlighting
took place) and true otherwise.
## See also
- [Text highlight pipe](text-highlight.pipe.md)
- [Highlight directive](highlight.directive.md)

69
docs/core/highlight.directive.md Normal file
View File

@@ -0,0 +1,69 @@
---
Added: v2.0.0
Status: Active
---
# Highlight directive
Adds highlighting to selected sections of an HTML element's content.
## Basic Usage
```HTML
<div
[adf-highlight]="dance"
adf-highlight-selector=".highlightable"
adf-highlight-class="greenHighlight"
>
<div class="highlightable">You can dance if you want to</div>
</div>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| selector | `string` | `''` | Class selector for highlightable elements. |
| search | `string` | `''` | Text to highlight. |
| classToApply | `string` | `'adf-highlight'` | CSS class used to apply highlighting. |
## Details
Add `adf-highlight` with a search term to an element to highlight occurrences
of that term in its content. For example:
```HTML
<div [adf-highlight]="'dance'" adf-highlight-selector=".highlightable">
<div class="highlightable">
You can dance if you want to
</div>
</div>
```
...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.
If the search string contain spaces then each section between the spaces will
be treated as a separate item to highlight. For example, you could use this to
highlight all occurrences of words in a list.
The highlighting works by adding an HTML &lt;span> element around the
selected text. The &lt;span> includes a CSS class; this defaults to
"adf-highlight" but you can supply your own class using the `adf-highlight-class`
property:
```HTML
<div
[adf-highlight]="'dance'"
adf-highlight-selector=".highlightable"
adf-highlight-class="myGreenHighlight">
<div class="highlightable">
You can dance if you want to
</div>
</div>
```
## See also
- [Text highlight pipe](text-highlight.pipe.md)
- [Highlight transform service](highlight-transform.service.md)

24
docs/core/mime-type-icon.pipe.md Normal file
View File

@@ -0,0 +1,24 @@
---
Added: v2.0.0
Status: Active
---
# Mime Type Icon pipe
Retrieves an icon to represent a MIME type.
## Basic Usage
```HTML
<div>
<img src='{{ "image/jpeg" | adfMimeTypeIcon }}' />
</div>
```
## Details
The pipe takes a MIME type as input and returns the URL of an SVG file that
symbolizes that type (see the [Thumbnail service](thumbnail.service.md) for the mapping between types and icons). The pipe will return a "miscellaneous" icon when no specific mapping is defined.
## See also
- [Thumbnail service](thumbnail.service.md)

28
docs/core/node-name-tooltip.pipe.md Normal file
View File

@@ -0,0 +1,28 @@
---
Added: v2.0.0
Status: Active
---
# Node Name Tooltip pipe
Formats the tooltip for a Node.
## Basic Usage
```html
<data-column
key="name"
title="APP.DOCUMENT_LIST.COLUMNS.NAME">
<ng-template let-value="value" let-context>
<span title="{{ context?.row?.obj | adfNodeNameTooltip }}">{{ value }}</span>
</ng-template>
</data-column>
```
## Details
The tooltip is formatted according to the following rules:
- if the _title_ and _description_ are missing, then the tooltip shows the _name_;
- if the _title_ is missing, then the tooltip shows the _name_ and _description_;
- if the _description_ is missing, then the tooltip shows the _name_ and _title_;
- if _name_ and _title_, _name_ and _description_, or _title_ and _description_ are the same, then only a single line is displayed.

58
docs/core/notification.service.md Normal file
View File

@@ -0,0 +1,58 @@
---
Added: v2.0.0
Status: Active
---
# Notification Service
Shows a notification message with optional feedback.
![Notification Service screenshot](docassets/images/NotiService.png)
## Methods
- `openSnackMessage(message: string, millisecondsDuration?: number): MatSnackBarRef<any>`
Opens a snackbar notification to show a message.
- `message` - The message to show
- `millisecondsDuration` - (Optional) Time before notification disappears after being shown
- `openSnackMessageAction(message: string, action: string, millisecondsDuration?: number): MatSnackBarRef<any>`
Opens a snackbar notification with a message and a response button.
- `message` - The message to show
- `action` - Caption for the response button
- `millisecondsDuration` - (Optional) Time before the notification disappears (unless the button is clicked)
## Details
The Notification Service is implemented on top of the Angular Material Design snackbar.
Use this service to show a notification message, and optionally get feedback from it.
```ts
import { NotificationService } from '@alfresco/adf-core';
export class MyComponent implements OnInit {
constructor(private notificationService: NotificationService) {
}
ngOnInit() {
this.notificationService.openSnackMessage('test', 200000).afterDismissed().subscribe(() => {
console.log('The snack-bar was dismissed');
});
}
}
```
```ts
import { NotificationService } from '@alfresco/adf-core';
export class MyComponent implements OnInit {
constructor(private notificationService: NotificationService) {
}
ngOnInit() {
this.notificationService.openSnackMessageAction('Do you want to report this issue?', 'send', 200000).afterDismissed().subscribe(() => {
console.log('The snack-bar was dismissed');
});
}
}
```

26
docs/core/page-title.service.md Normal file
View File

@@ -0,0 +1,26 @@
---
Added: v2.0.0
Status: Active
---
# Page Title service
Sets the page title.
## Methods
- `setTitle(value: string = '')`
Sets the page title.
- `value` - The new title
## Details
If an application name is supplied in the app config file then this will
be concatenated with the `value` parameter when `setTitle` is called, giving
a result of the form "PageName - AppName" (see
[App Config service](app-config.service.md) for more information). If `value`
is not supplied then just the app name is used; this will default to
"Alfresco ADF Application" when no app name set in the config file.
## See also
- [App config service](app-config.service.md)

32
docs/core/people-content.service.md Normal file
View File

@@ -0,0 +1,32 @@
---
Added: v2.0.0
Status: Active
---
# People Content service
Gets information about a Content Services user.
## Methods
- `getPerson(personId: string): Observable<any>`
Gets information about a user identified by their username.
- `personId` - ID of the target user
- `getCurrentPerson(): Observable<any>`
Gets information about the user who is currently logged-in.
## Details
The class returned by `getPerson` and `getCurrentPerson` is detailed
in the [Ecm User model docs](ecm-user.model.md). The `avatarId` passed to
`getUserProfileImage` is available as a field of the `EcmUserModel` instance
returned for a particular person.
See the
[getPerson](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/PeopleApi.md#getPerson)
method in the Alfresco JS API for more information about the REST calls used by this service.
## See also
- [People process service](people-process.service.md)
- [Ecm user model](ecm-user.model.md)

49
docs/core/people-process.service.md Normal file
View File

@@ -0,0 +1,49 @@
---
Added: v2.0.0
Status: Active
---
# People Process service
Gets information about Process Services users.
## Methods
- `getWorkflowUsers(taskId?: string, searchWord?: string): Observable<UserProcessModel[]>`
Gets information about users across all tasks.
- `taskId` - (Optional) ID of the task
- `searchWord` - (Optional) Filter text to search for
- `getUserImage(user: UserProcessModel): string`
Gets the profile picture URL for the specified user.
- `user` - The target user
- `involveUserWithTask(taskId: string, idToInvolve: string): Observable<UserProcessModel[]>`
Sets a user to be involved with a task.
- `taskId` - ID of the target task
- `idToInvolve` - ID of the user to involve
- `removeInvolvedUser(taskId: string, idToRemove: string): Observable<UserProcessModel[]>`
Removes a user who is currently involved with a task.
- `taskId` - ID of the target task
- `idToRemove` - ID of the user to remove
## Details
Use `getWorkflowUsers` to find users across all tasks, optionally filtering by the `searchWord`
in the task name. The `taskId` parameter, if used, specifies a task to be _excluded_ from the
results. You would typically use this feature to find new users to assign to a task, in which
case you would want to exclude users already assigned to that task.
The [User Process model](user-process.model.md) class used by the methods is seen throughout
ADF's Process Services features. Note that for `involveUserWithTask` and `removeInvolvedUser`,
null data is returned rather than usable details about users.
You can find more information about the REST API methods used by this service in the
[Task Actions API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/TaskActionsApi.md#involveUser)
(for `involveUserWithTask` and `removeInvolvedUser`), the
[User Workflow API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/UsersWorkflowApi.md#getUsers)
(for `getWorkflowUsers`) and the
[User API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-activiti-rest-api/docs/UserApi.md#getuserprofilepictureurl)(for `getUserImage`).
## See also
- [User process model](user-process.model.md)
- [Bpm user model](bpm-user.model.md)
- [People content service](people-content.service.md)

76
docs/core/product-version.model.md Normal file
View File

@@ -0,0 +1,76 @@
---
Added: v2.0.0
Status: Active
---
# Product Version model
Contains version and license information classes for Alfresco products.
## Details
The classes in this model contain details about the version and license
status of Process Services and Content Services. You can access this
information from ADF using the [Discovery Api service](discovery-api.service.md).
See also the
[Alfresco JS API docs](https://github.com/Alfresco/alfresco-js-api/tree/master/src/alfresco-discovery-rest-api)
to learn more about the REST architecture that the service is based on.
```ts
class BpmProductVersionModel {
edition: string;
majorVersion: string;
revisionVersion: string;
minorVersion: string;
type: string;
}
class EcmProductVersionModel {
edition: string;
version: VersionModel;
license: LicenseModel;
status: VersionStatusModel;
modules: VersionModuleModel[] = [];
}
class VersionModel {
major: string;
minor: string;
patch: string;
hotfix: string;
schema: number;
label: string;
display: string;
}
class LicenseModel {
issuedAt: string;
expiresAt: string;
remainingDays: number;
holder: string;
mode: string;
isClusterEnabled: boolean;
isCryptodocEnabled: boolean;
}
class VersionStatusModel {
isReadOnly: boolean;
isAuditEnabled: boolean;
isQuickShareEnabled: boolean;
isThumbnailGenerationEnabled: boolean;
}
class VersionModuleModel {
id: string;
title: string;
description: string;
version: string;
installDate: string;
installState: string;
versionMin: string;
versionMax: string;
}
```
## See also
- [Discovery api service](discovery-api.service.md)

25
docs/core/shared-links-api.service.md Normal file
View File

@@ -0,0 +1,25 @@
---
Added: v2.0.0
Status: Active
---
# Shared Links Api service
Finds shared links to Content Services items.
## Methods
- `getSharedLinks(options: any = {}): Observable<NodePaging>`
Gets shared links available to the current user.
- `options` - Options supported by JSAPI
## Details
Content Services allows users to generate URLs that can be shared with
other people, even if they don't have a Content Services account. These
URLs are known as _shared links_.
Use `getSharedLinks` to find all the shared links that are available to
the current user. You can supply a number of `options` to refine the
search; see the
[Alfresco JS API](https://github.com/Alfresco/alfresco-js-api/blob/master/src/alfresco-core-rest-api/docs/SharedlinksApi.md#findsharedlinks)
for more information.

44
docs/core/storage.service.md Normal file
View File

@@ -0,0 +1,44 @@
---
Added: v2.0.0
Status: Active
---
# Storage service
Stores items in the form of key-value pairs.
## Methods
- `getItem(key: string): string`
Gets an item.
- `key` - Key to identify the item
- `setItem(key: string, data: string)`
Stores an item
- `key` - Key to identify the item
- `data` - Data to store
- `clear()`
Removes all currently stored items.
- `removeItem(key: string)`
Removes a single item.
- `key` - Key to identify the item
- `hasItem(key: string): boolean`
Is any item currently stored under `key`?
- `key` - Key identifying item to check
## Details
The service will check to see if
[web storage](https://developer.mozilla.org/en-US/docs/Web/API/Storage/LocalStorage)
is available on the browser. If it is available then the service will use it to
store the key-value items persistently. Web storage can be used in a similar way to
[cookies](cookie.service.md) but with a much higher size limit (several MB for
web storage compared to a few KB for cookies). However, cookies are
more widely supported by browsers and can be set to expire after a certain date.
If local storage is not available then non-persistent memory storage within the app is
used instead.
## See also
- [Cookie service](cookie.service.md)
- [Content service](content.service.md)

27
docs/core/text-highlight.pipe.md Normal file
View File

@@ -0,0 +1,27 @@
---
Added: v2.0.0
Status: Active
---
# Text Highlight pipe
Adds highlighting to words or sections of text that match a search string.
## Basic Usage
```HTML
<div>
Some rude words have been detected in your summary: {{ summary | highlight:rudeWordList }}
</div>
```
## Details
The pipe's parameter is a string to search for in the text. Any occurrences of the string will
be highlighted with added HTML (see the
[Highlight Transform service](highlight-transform.service.md) for more information about how
this is implemented). The parameter can contain spaces, in which case each separate "word" in the string will be highlighted individually.
## See also
- [Highlight directive](highlight.directive.md)
- [Highlight transform service](highlight-transform.service.md)

64
docs/core/thumbnail.service.md Normal file
View File

@@ -0,0 +1,64 @@
---
Added: v2.0.0
Status: Active
---
# Thumbnail service
Retrieves an SVG thumbnail image to represent a document type.
## Methods
- `getDocumentThumbnailUrl(node: any): string`
Gets a thumbnail URL for the given document node.
- `node` - Node to get URL for.
- `getMimeTypeIcon(mimeType: string): string`
Gets a thumbnail URL for a MIME type.
- `mimeType` - MIME type for the thumbnail
- `getDefaultMimeTypeIcon(): string`
Gets a "miscellaneous" thumbnail URL for types with no other icon defined.
## Details
The service can locate a thumbnail icon (in SVG format) for either
a document node or a MIME type. The default mapping between types
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' |
## 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:
```javascript
import { ThumbnailService } from '@alfresco/adf-core';
constructor(public thumbnailService: ThumbnailService) {
}‍‍‍‍‍‍‍‍
```
```html
MP4 <mat-icon svgIcon="video/mp4"></mat-icon>
PDF <mat-icon svgIcon="application/pdf"></mat-icon>
GIF <mat-icon svgIcon="image/gif"></mat-icon>
.....
```
## See also
- [Mime type icon pipe](mime-type-icon.pipe.md)

21
docs/core/time-ago.pipe.md Normal file
View File

@@ -0,0 +1,21 @@
---
Added: v2.0.0
Status: Active
---
# Time Ago pipe
Converts a recent past date into a number of days ago.
## Basic Usage
```HTML
<div>
Last modified: {{ date | adfTimeAgo }}
</div>
```
## Details
The pipe finds the difference between the input date and the current date. If it
is less than seven days then then the date will be formatted as "X days ago".
Otherwise, the usual full date format is used.

176
docs/core/upload.directive.md Normal file
View File

@@ -0,0 +1,176 @@
---
Added: v2.0.0
Status: Active
---
# Upload Directive
Allows your components or common HTML elements reacting on File drag and drop in order to upload content.
## Basic usage
The directive itself does not do any file management process,
but collects information on dropped files and raises corresponding events instead.
```html
<div style="width:100px; height:100px"
[adf-upload]="true"
[adf-upload-data]="{ some: 'data' }">
Drop files here...
</div>
```
It is possible controlling when upload behaviour is enabled/disabled by binding directive to a `boolean` value or expression:
```html
<div [adf-upload]="true">...</div>
<div [adf-upload]="allowUpload">...</div>
<div [adf-upload]="isUploadEnabled()">...</div>
```
You can decorate any element including buttons, for example:
```html
<button [adf-upload]="true" [multiple]="true" [accept]="'image/*'">
Upload photos
</button>
```
### Properties
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| enabled | `boolean` | `true` | Enables/disables uploading. |
| data | `any` | | Data to upload. |
| mode | `string[]` | `['drop']` | Upload mode. Can be "drop" (receives dropped files) or "click" (clicking opens a file dialog). Both modes can be active at once. |
| multiple | `boolean` | | Toggles multiple file uploads. |
| accept | `string` | | (Click mode only) MIME type filter for files to accept. |
| directory | `boolean` | | (Click mode only) Toggles uploading of directories. |
## Details
Used by attaching to an element or component.
### Modes
Directive supports several modes:
- **drop** mode, where decorated element acts like a drop zone for files (**default** mode)
- **click** mode, where decorated element invokes File Dialog to select files or folders.
It is also possible combining modes together.
```html
<div [adf-upload]="true" mode="['click']">...</div>
<div [adf-upload]="true" mode="['drop']">...</div>
<div [adf-upload]="true" mode="['click', 'drop']">...</div>
```
#### Click mode
For the click mode you can provide additional attributes for the File Dialog:
- **directory**, enables directory selection
- **multiple**, enables multiple file/folder selection
- **accept**, filters the content accepted
```html
<div style="width: 50px; height: 50px; background-color: brown"
[adf-upload]="true"
[multiple]="true"
[accept]="'image/*'">
</div>
<div style="width: 50px; height: 50px; background-color: blueviolet"
[adf-upload]="true"
[multiple]="true"
[directory]="true">
</div>
```
#### Drop mode
For the moment upload directive supports only Files (single or multiple).
Support for Folders and `accept` filters is subject to implement.
### Events
Once a single or multiple files are dropped on the decorated element the `upload-files` [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) is raised.
The DOM event is configured to have `bubbling` enabled, so any component up the component tree can handle, process or prevent it:
```html
<div (upload-files)="onUploadFiles($event)">
<div [adf-upload]="true"></div>
</div>
```
```ts
onUploadFiles(e: CustomEvent) {
console.log(e.detail.files);
// your code
}
```
Please note that event will be raised only if valid [Files](https://developer.mozilla.org/en-US/docs/Web/API/File) were dropped onto the decorated element.
The `upload-files` event is cancellable, so you can stop propagation of the drop event to upper levels in case it has been already handled by your code:
```ts
onUploadFiles(e: CustomEvent) {
e.stopPropagation();
e.preventDefault();
// your code
}
```
It is also possible attaching arbitrary data to each event in order to access it from within external event handlers.
A typical scenario is data tables where you may want to handle also the data row and/or underlying data to be accessible upon files drop.
You may be using `adf-upload-data` to bind custom values or objects for every event raised:
```html
<div [adf-upload]="true" [adf-upload-data]="dataRow"></div>
<div [adf-upload]="true" [adf-upload-data]="'string value'"></div>
<div [adf-upload]="true" [adf-upload-data]="{ name: 'custom object' }"></div>
<div [adf-upload]="true" [adf-upload-data]="getUploadData()"></div>
```
As part of the `details` property of the [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) you can get access to the following:
```ts
detail: {
sender: UploadDirective, // directive that raised given event
data: any, // arbitrary data associated (bound)
files: File[] // dropped files
}
```
### Styling
The decorated element gets `adf-upload__dragging` CSS class name in the class list every time files are dragged over it.
This allows changing look and feel of your components in case additional visual indication is required,
for example you may want drawing a dashed border around the table row on drag:
```html
<table>
<tr [adf-upload]="true">
...
</tr>
</table>
```
```css
.adf-upload__dragging > td:first-child {
border-left: 1px dashed rgb(68,138,255);
}
.adf-upload__dragging > td {
border-top: 1px dashed rgb(68,138,255);
border-bottom: 1px dashed rgb(68,138,255);
}
.adf-upload__dragging > td:last-child {
border-right: 1px dashed rgb(68,138,255);
}
```

25
docs/core/user-initial.pipe.md Normal file
View File

@@ -0,0 +1,25 @@
---
Added: v2.0.0
Status: Active
---
# User Initial pipe
Takes the name fields of a UserProcessModel object and extracts and formats the initials.
## Basic Usage
```HTML
<div>
Project Leader: {{ user | usernameInitials:"initialsClass" }}
</div>
```
## Details
The pipe gets the initial characters of the user's first and last names and
concatenates them. The results are returned in an HTML &lt;div> element.
The first pipe parameter specifies an optional CSS class to add to the &lt;div>
element (eg, a background color is commonly used to emphasise initials). The
second parameter is an optional delimiter to add between the initials.
Both parameters default to empty strings.

22
docs/core/user-process.model.md Normal file
View File

@@ -0,0 +1,22 @@
---
Added: v2.0.0
Status: Active
---
# User Process model
Represents a Process Services user.
## Details
This class contains basic information about a Process Services user and
is used throughout ADF to identify and list users (eg, to assign them to
a task or to list them in search results).
Note that the Typescript class for this model is in active development;
it is likely to change and so its properties are not listed here. For the
latest version of the class, see the
[source file](https://github.com/Alfresco/alfresco-ng2-components/blob/development/lib/core/models/user-process.model.ts).
## See also
- [People process service](people-process.service.md)