diff --git a/docIndex.md b/docIndex.md index b9ced80ce7..b413027c85 100644 --- a/docIndex.md +++ b/docIndex.md @@ -280,25 +280,25 @@ for more information about installing and using the source code. - [Create task attachment component](docs/create-task-attachment.component.md) - [People search component](docs/people-search.component.md) - [People component](docs/people.component.md) +- [Start task component](docs/start-task.component.md) - [Task attachment list component](docs/task-attachment-list.component.md) - [Task audit directive](docs/task-audit.directive.md) - [Task details component](docs/task-details.component.md) - [Task filters component](docs/task-filters.component.md) - [Task header component](docs/task-header.component.md) - [Tasklist component](docs/tasklist.component.md) +- [Task details model](docs/task-details.model.md) **Undocumented** - [Comment list component](ng2-components/ng2-activiti-tasklist/src/components/comment-list.component.ts) - [No task detail template directive](ng2-components/ng2-activiti-tasklist/src/components/no-task-detail-template.directive.ts) - [People list component](ng2-components/ng2-activiti-tasklist/src/components/people-list.component.ts) -- [Start task component](ng2-components/ng2-activiti-tasklist/src/components/start-task.component.ts) - [Comment model](ng2-components/ng2-activiti-tasklist/src/models/comment.model.ts) - [Filter model](ng2-components/ng2-activiti-tasklist/src/models/filter.model.ts) - [Form model](ng2-components/ng2-activiti-tasklist/src/models/form.model.ts) - [Icon model](ng2-components/ng2-activiti-tasklist/src/models/icon.model.ts) - [Start task model](ng2-components/ng2-activiti-tasklist/src/models/start-task.model.ts) -- [Task details model](ng2-components/ng2-activiti-tasklist/src/models/task-details.model.ts) - [Task list model](ng2-components/ng2-activiti-tasklist/src/models/task-list.model.ts) - [User event model](ng2-components/ng2-activiti-tasklist/src/models/user-event.model.ts) - [User model](ng2-components/ng2-activiti-tasklist/src/models/user.model.ts) @@ -322,6 +322,8 @@ for more information about installing and using the source code. - [Context menu directive](docs/context-menu.directive.md) - [Data column component](docs/data-column.component.md) - [Pagination component](docs/pagination.component.md) +- [Toolbar divider component](docs/toolbar-divider.component.md) +- [Toolbar title component](docs/toolbar-title.component.md) - [Toolbar component](docs/toolbar.component.md) - [Card view component](docs/card-view.component.md) - [Node permission directive](docs/node-permission.directive.md) @@ -332,6 +334,7 @@ for more information about installing and using the source code. - [Notification service](docs/notification.service.md) - [Renditions service](docs/renditions.service.md) - [Translation service](docs/translation.service.md) +- [Upload service](docs/upload.service.md) - [User preferences service](docs/user-preferences.service.md) **Undocumented** @@ -345,8 +348,6 @@ for more information about installing and using the source code. - [Mdl menu directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-menu.directive.ts) - [Mdl textfield directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-textfield.directive.ts) - [Mdl upgrade element directive](ng2-components/ng2-alfresco-core/src/components/material/mdl-upgrade-element.directive.ts) -- [Toolbar divider component](ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-divider.component.ts) -- [Toolbar title component](ng2-components/ng2-alfresco-core/src/components/toolbar/toolbar-title.component.ts) - [Card view content proxy directive](ng2-components/ng2-alfresco-core/src/components/view/card-view-content-proxy.directive.ts) - [Card view dateitem component](ng2-components/ng2-alfresco-core/src/components/view/card-view-dateitem.component.ts) - [Card view item dispatcher component](ng2-components/ng2-alfresco-core/src/components/view/card-view-item-dispatcher.component.ts) @@ -383,7 +384,6 @@ for more information about installing and using the source code. - [Storage service](ng2-components/ng2-alfresco-core/src/services/storage.service.ts) - [Thumbnail service](ng2-components/ng2-alfresco-core/src/services/thumbnail.service.ts) - [Translate loader service](ng2-components/ng2-alfresco-core/src/services/translate-loader.service.ts) -- [Upload service](ng2-components/ng2-alfresco-core/src/services/upload.service.ts) [(Back to Contents)](#contents) @@ -530,13 +530,12 @@ Contains components for uploading files to Content Services. See the library's [README file](ng2-components/ng2-alfresco-upload/README.md) for more information about installing and using the source code. - + **Documented** -- [Upload button component](ng2-components/ng2-alfresco-upload/README.md) -- [Upload drag area component](ng2-components/ng2-alfresco-upload/README.md) -- [File uploading dialog component](ng2-components/ng2-alfresco-upload/README.md) -- [Upload service](ng2-components/ng2-alfresco-upload/README.md) +- [File uploading dialog component](docs/file-uploading-dialog.component.md) +- [Upload button component](docs/upload-button.component.md) +- [Upload drag area component](docs/upload-drag-area.component.md) **Undocumented** @@ -554,10 +553,10 @@ Contains the User Info component and other related items. See the library's [README file](ng2-components/ng2-alfresco-userinfo/README.md) for more information about installing and using the source code. - + **Documented** -- [User info component](ng2-components/ng2-alfresco-userinfo/README.md) +- [User info component](docs/user-info.component.md) **Undocumented** @@ -576,10 +575,10 @@ Contains the Viewer component and other related items. See the library's [README file](ng2-components/ng2-alfresco-viewer/README.md) for more information about installing and using the source code. - + **Documented** -- [Viewer component](ng2-components/ng2-alfresco-viewer/README.md) +- [Viewer component](docs/viewer.component.md) **Undocumented** @@ -602,8 +601,8 @@ Contains the Webscript component. See the library's [README file](ng2-components/ng2-alfresco-webscript/README.md) for more information about installing and using the source code. - + **Documented** -- [Webscript component](ng2-components/ng2-alfresco-webscript/README.md) +- [Webscript component](docs/webscript.component.md) \ No newline at end of file diff --git a/docassets/images/HTML.png b/docassets/images/HTML.png new file mode 100644 index 0000000000..b64090bb2a Binary files /dev/null and b/docassets/images/HTML.png differ diff --git a/docassets/images/adf-start-task.png b/docassets/images/adf-start-task.png new file mode 100644 index 0000000000..e9ccecce86 Binary files /dev/null and b/docassets/images/adf-start-task.png differ diff --git a/docassets/images/datatable.png b/docassets/images/datatable.png new file mode 100644 index 0000000000..aea7fbbb4a Binary files /dev/null and b/docassets/images/datatable.png differ diff --git a/docassets/images/renditions.png b/docassets/images/renditions.png new file mode 100644 index 0000000000..02198cbf85 Binary files /dev/null and b/docassets/images/renditions.png differ diff --git a/docassets/images/upload-disable-button.png b/docassets/images/upload-disable-button.png new file mode 100644 index 0000000000..344e330228 Binary files /dev/null and b/docassets/images/upload-disable-button.png differ diff --git a/docassets/images/upload-notification-message.png b/docassets/images/upload-notification-message.png new file mode 100644 index 0000000000..762f3fab0f Binary files /dev/null and b/docassets/images/upload-notification-message.png differ diff --git a/docs/file-uploading-dialog.component.md b/docs/file-uploading-dialog.component.md new file mode 100644 index 0000000000..ac59e7a0b4 --- /dev/null +++ b/docs/file-uploading-dialog.component.md @@ -0,0 +1,31 @@ +# File Uploading Dialog Component + +Shows a dialog listing all the files uploaded with the Upload Button or Drag Area components. + + + + + +- [Basic Usage](#basic-usage) + * [Properties](#properties) +- [Details](#details) + + + + + +## Basic Usage + +```html + +``` + +### Properties + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| position | string | 'right' | Dialog position. Accepted values are 'left' or 'right' | + +## Details + +This component should be used in combination with upload button or drag-and-drop area. diff --git a/docs/start-task.component.md b/docs/start-task.component.md new file mode 100644 index 0000000000..8dcc9cbfe1 --- /dev/null +++ b/docs/start-task.component.md @@ -0,0 +1,39 @@ +# Start Task Component + +Creates/Starts new task for the specified app + +![adf-start-task](../docassets/images/adf-start-task.png) + + + + + +- [Basic Usage](#basic-usage) + * [Properties](#properties) + * [Events](#events) + + + + + +## Basic Usage + +```html + + +``` + +### Properties + +| Name | Type | Description | +| --- | --- | --- | +| appId | string | (**required**): The id of the app. | + +### Events + +| Name | Description | +| --- | --- | +| success | Raised when the task is successfully created | +| cancel | Raised when the cancel button is pressed by the user | +| error | Raised if there is an error during task creation | diff --git a/docs/task-details.model.md b/docs/task-details.model.md new file mode 100644 index 0000000000..9e3928a6e1 --- /dev/null +++ b/docs/task-details.model.md @@ -0,0 +1,11 @@ +# TaskDetailsModel + +```json +{ + "id": "string", + "assignee": "User", + "dueDate": "data", + "endDate": "string", + "description": "string" +} +``` diff --git a/docs/toolbar-divider.component.md b/docs/toolbar-divider.component.md new file mode 100644 index 0000000000..fc1f1a0a44 --- /dev/null +++ b/docs/toolbar-divider.component.md @@ -0,0 +1,24 @@ +# Toolbar Divider Component + +Divides groups of elements in a Toolbar with a visual separator. + + + + + +- [Basic Usage](#basic-usage) + + + + + +## Basic Usage + +```html + + + + + + +``` \ No newline at end of file diff --git a/docs/toolbar-title.component.md b/docs/toolbar-title.component.md new file mode 100644 index 0000000000..b14b719a97 --- /dev/null +++ b/docs/toolbar-title.component.md @@ -0,0 +1,31 @@ +# Toolbar Title Component + +Supplies custom HTML to be included in a Toolbar component title. + +![](../docassets/images/adf-toolbar-02.png) + + + + + +- [Basic Usage](#basic-usage) +- [Details](#details) + + + + + +## Basic Usage + +```html + + + + + ... + +``` + +## Details + +You can use this component to include any HTML or Angular components in the Toolbar title section. diff --git a/docs/upload-button.component.md b/docs/upload-button.component.md new file mode 100644 index 0000000000..38523786f0 --- /dev/null +++ b/docs/upload-button.component.md @@ -0,0 +1,96 @@ +# Upload Button Component + + + + + +- [Basic Usage](#basic-usage) + * [Properties](#properties) + * [Events](#events) +- [Details](#details) + * [How to show notification message with no permission](#how-to-show-notification-message-with-no-permission) + * [How to disable the button when the delete permission is missing](#how-to-disable-the-button-when-the-delete-permission-is-missing) + + + + + +## Basic Usage + +```html + + + +``` + +### Properties + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| disabled | boolean | false | Toggle component disabled state if there is no node permission checking | +| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** | +| uploadFolders | boolean | false | Allow/disallow upload folders (only for Chrome) | +| multipleFiles | boolean | false | Allow/disallow multiple files | +| acceptedFilesType | string | * | array of allowed file extensions , example: ".jpg,.gif,.png,.svg" | +| **(deprecated)** currentFolderPath | string | '/Sites/swsdp/documentLibrary' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** | +| **(deprecated)** rootFolderId | string | '-root-' | The ID of the root folder node. **Deprecated in 1.6.2: use parentId instead.** | +| parentId | string | empty | The ID of the root. It can be the nodeId if you are using the upload for the Content Service or taskId/processId for the Process Service. | +| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created | +| staticTitle | string | (predefined) | define the text of the upload button | +| **(deprecated)** disableWithNoPermission ***use node permission directive from core instead*** | boolean | false | If the value is true and the user doesn't have the permission to delete the node the button will be disabled | +| tooltip | string | | Custom tooltip | + +### Events + +| Name | Description | +| --- | --- | +| onSuccess | Raised when the file is uploaded | + +## Details + +### How to show notification message with no permission + +You can show a notification error when the user doesn't have the right permission to perform the action. +The UploadButtonComponent provides the event permissionEvent that is raised when the delete permission is missing +You can subscribe to this event from your component and use the NotificationService to show a message. + +```html + + +``` + +```ts +export class MyComponent { + + onUploadPermissionFailed(event: any) { + this.notificationService.openSnackMessage( + `you don't have the ${event.permission} permission to ${event.action} the ${event.type} `, 4000 + ); + } + +} +``` + +![Upload notification message](../docassets/images/upload-notification-message.png) + +### How to disable the button when the delete permission is missing + +You can easily disable the button when the user doesn't have the permission to perform the action. +The UploadButtonComponent provides the property disableWithNoPermission that can be true. In this way the button should be disabled if the delete permission is missing for the node. + +```html + + +``` + +![Upload disable button](../docassets/images/upload-disable-button.png) diff --git a/docs/upload-drag-area.component.md b/docs/upload-drag-area.component.md new file mode 100644 index 0000000000..9fa874bfe5 --- /dev/null +++ b/docs/upload-drag-area.component.md @@ -0,0 +1,53 @@ +# Upload Drag Area Component + +Adds a drag and drop area to upload files to Alfresco. + + + + + +- [Basic Usage](#basic-usage) + * [Properties](#properties) + * [Events](#events) + + + + + +## Basic Usage + +```html + +
+ DRAG HERE +
+
+ +``` + +```ts +export class AppComponent { + + public onSuccess(event: Object): void { + console.log('File uploaded'); + } + +} +``` + +### Properties + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| disabled | boolean | false | Toggle component disabled state | +| **(deprecated)** enabled | boolean | true | Toggle component enabled state | +| **(deprecated)** showNotificationBar | boolean | true | Hide/show notification bar. **Deprecated in 1.6.0: use UploadService events and NotificationService api instead.** | +| rootFolderId | string | '-root-' | The ID of the root folder node. | +| **(deprecated)** currentFolderPath | string | '/' | define the path where the files are uploaded. **Deprecated in 1.6.0: use rootFolderId instead.** | +| versioning | boolean | false | Versioning false is the default uploader behaviour and it renames the file using an integer suffix if there is a name clash. Versioning true to indicate that a major version should be created | + +### Events + +| Name | Description | +| --- | --- | +| onSuccess | Raised when the file is uploaded | diff --git a/docs/upload.service.md b/docs/upload.service.md new file mode 100644 index 0000000000..d655870793 --- /dev/null +++ b/docs/upload.service.md @@ -0,0 +1,60 @@ +# Upload Service + +Provides access to various APIs related to file upload features. + + + + + +- [Basic Usage](#basic-usage) + * [Events](#events) +- [Details](#details) + * [Ignore list configuration](#ignore-list-configuration) + + + + + +## Basic Usage + +### Events + +| Name | Type | Description | +| --- | --- | --- | +| queueChanged | FileModel[] | Raised every time the file queue changes. | +| fileUpload | FileUploadEvent | Raised every time a File model changes its state. | +| fileUploadStarting | FileUploadEvent | Raised when upload starts. | +| fileUploadCancelled | FileUploadEvent | Raised when upload gets cancelled by user. | +| fileUploadProgress | FileUploadEvent | Raised during file upload process and contains the current progress for the particular File model. | +| fileUploadAborted | FileUploadEvent | Raised when file upload gets aborted by the server. | +| fileUploadError | FileUploadEvent | Raised when an error occurs to file upload. | +| fileUploadComplete | FileUploadCompleteEvent | Raised when file upload is complete. | +| fileUploadDelete | FileUploadDeleteEvent | Raised when uploaded file is removed from server. | +| fileDeleted | string | This can be invoked when a file is deleted from an external source to upload the file dialog status. | + +## Details + +### Ignore list configuration + +Is possible add an ignore list for files that you don't want to allow upload on your CS. +The configuration of this service is saved in the ***app.config.json file***.If you want more details about the configuration service follow this [link](https://github.com/Alfresco/alfresco-ng2-components/tree/master/ng2-components/ng2-alfresco-core#appconfigservice). +In the example below you can see how filtered out the : '.git', '.DS_Store' and 'desktop.ini'. + +**app.config.json** + +```json +{ + "ecmHost": "http://localhost:3000/ecm", + "bpmHost": "http://localhost:3000/bpm", + "application": { + "name": "Alfresco" + }, + "files": { + "excluded": [".DS_Store", "desktop.ini", ".git"] + } +} +``` + +Note: +- Standard glob patterns work. +- You can end patterns with a forward slash / to specify a directory. diff --git a/docs/user-info.component.md b/docs/user-info.component.md new file mode 100644 index 0000000000..07e4158624 --- /dev/null +++ b/docs/user-info.component.md @@ -0,0 +1,34 @@ +# Alfresco User Info component + + + + + +- [Basic usage](#basic-usage) + * [Properties](#properties) +- [Details](#details) + + + + + +## Basic usage + +```html + +``` + +### Properties + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| ecmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for ECM users | +| bpmBackgroundImage | string | (alfresco image) | Custom path for the background banner image for BPM users | +| menuPositionX | string | | Custom choice for opening the menu bottom : `before` or `after` | +| menuPositionY | string | | Custom choice for opening the menu bottom : `above` or `below` | +| fallBackThumbnailImage | string | (alfresco image) | Fallback image for profile when thumbnail is missing| + +## Details + +This will show a round icon with user and on click some user information. +If user is logged in with ECM and BPM the ECM image will be shown. diff --git a/docs/viewer.component.md b/docs/viewer.component.md new file mode 100644 index 0000000000..8278a88e65 --- /dev/null +++ b/docs/viewer.component.md @@ -0,0 +1,157 @@ +# Alfresco Viewer component + +See it live: [Viewer Quickstart](https://embed.plnkr.co/iTuG1lFIXfsP95l6bDW6/) + + + + + +- [Basic usage](#basic-usage) + * [Properties](#properties) +- [Details](#details) + * [Supported file formats](#supported-file-formats) + * [PDF Conversion](#pdf-conversion) + * [Configuring PDF.js library](#configuring-pdfjs-library) + * [Custom extension handler](#custom-extension-handler) + + + + + +## Basic usage + +Using with node id: + +```html + + +``` + +Using with file url: + +```html + + +``` + +### Properties + +| Attribute | Options | Default | Description | +| --- | --- | --- | --- | +| fileNodeId | string | | Node Id of the file to load | +| urlFile | string | | If you want to load an external file that does not come from ECM you can use this Url where to load the file | +| urlBlob | Blob | | If you want to load a Blob File | +| overlayMode | boolean | false | If `true` show the Viewer full page over the present content otherwise will fit the parent div | +| showViewer | boolean | true | Hide or show the viewer | +| showToolbar | boolean | true | Hide or show the toolbars | +| displayName | string | | You can specify the name of the file | + +## Details + +### Supported file formats + +| Type | Extension | +| --- | --- | +| Media | wav, Mp3, Mp4, WebM, Ogv | +| Images | png, jpg, jpeg, gif, bmp | +| Text | pdf, txt | + +### PDF Conversion + +![Rendition](../docassets/images/renditions.png) + +Note for unsupported extensions the viewer will offer the possibility to convert to PDF if that kind of extension is supported by the [content service renditions service](https://community.alfresco.com/docs/DOC-5879-rendition-service) + +### Configuring PDF.js library + +In order to configure your webpack-enabled application with the PDF.js library please follow the next steps. + +Install pdfjs-dist + +```sh +npm install pdfjs-dist +``` + +Update `vendors.ts` by appending the following: + +```ts +// PDF.js +require('pdfjs-dist/web/compatibility.js'); +const pdfjsLib = require('pdfjs-dist'); +pdfjsLib.PDFJS.workerSrc = './pdf.worker.js'; +require('pdfjs-dist/web/pdf_viewer.js'); +``` + +The code above enables the "viewer" component and "compatibility" mode for all the browsers. +It also configures the web worker for PDF.js library to render PDF files in the background. + +Update the `plugins` section of the `webpack.common.js` file with the next lines: + +```js +new CopyWebpackPlugin([ + ... + { + from: 'node_modules/pdfjs-dist/build/pdf.worker.js', + to: 'pdf.worker.js' + } +]) +``` + +The Viewer component now should be able displaying PDF files. + +### Custom extension handler + +If you want to handle other file formats that are not yet supported by the ng2-alfresco-viewer you can define your own custom handler. + +Below you can find an example with the use of `extension-viewer` if you can handle 3d files + +```html + + + + + + + +``` + +Note: you need adding `ng2-3d-editor` dependency to your `package.json` file to make the example above work. + +It is possible to define multiple `extension-viewer` templates: + +```html + + + + + + + + + + +``` diff --git a/docs/webscript.component.md b/docs/webscript.component.md new file mode 100644 index 0000000000..d33900a3cc --- /dev/null +++ b/docs/webscript.component.md @@ -0,0 +1,175 @@ +# Alfresco Webscript Get component + + + + + +- [Basic usage](#basic-usage) + * [Properties](#properties) +- [Details](#details) + * [Webscript View HTML example](#webscript-view-html-example) + * [Webscript View DATATABLE example](#webscript-view-datatable-example) + * [Webscript View JSON example](#webscript-view-json-example) + + + + + +## Basic usage + +```html + + +``` + +Another example: + +**app.component.html** + +```html + + +``` + +**app.component.ts** + +```ts +export class AppComponent { + scriptPath: string = 'sample/folder/Company%20Home'; + contextRoot: string = 'alfresco'; + servicePath: string = 'service'; +} +``` + +### Properties + +| Attribute | Type | Default | Description | +| --- | --- | --- | --- | +| scriptPath | string | | (**mandatory**) path to Web Script (as defined by Web Script) | +| scriptArgs | Object | | arguments to pass to Web Script | +| contextRoot | string | | path where application is deployed | +| scriptPath | string | alfresco | path to Web Script (as defined by Web Script) | +| contentType | string | service | path where Web Script service is mapped default value | +| contentType | string | TEXT | how to handle the data received from the web script JSON , HTML , DATATABLE or TEXT | +| onSuccess | event | | You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application | +| showData | booleann | true | render the webscript data | + +**contentType** {string} +***data*** {string} data containing the plain value you get from the webscipt as an output parameter + +## Details + +### Webscript View HTML example + +This sample demonstrates how to implement a Webscript component that renders the HTML contents that come from a webscript +This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here: + +```http://localhost:8080/alfresco/service/sample/folder/Company%20Home``` + +```html + + +``` + +![Custom columns](../docassets/images/HTML.png) + +### Webscript View DATATABLE example + +This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript + +```http://localhost:8080/alfresco/service/sample/folder/DATATABLE``` + +```html + + +``` + +If you want to show the result from a webscript inside a ng2-alfresco-datatable you have to return from the GET of the webscript the datastructure below: +subdivide in data and schema + +```ts +data: [], +schema: [] +``` + +this is an example: + +```ts +data: [ + {id: 1, name: 'Name 1'}, + {id: 2, name: 'Name 2'} +], +schema: [{ + type: 'text', + key: 'id', + title: 'Id', + sortable: true +}, { + type: 'text', + key: 'name', + title: 'Name', + sortable: true +}] +``` + +or you can send just the array data and the component will create a schema for you: + +```ts +data: [ + {id: 1, name: 'Name 1'}, + {id: 2, name: 'Name 2'} +]] +``` + +that will render the following table + +![Custom columns](../docassets/images/datatable.png) + +### Webscript View JSON example + +This sample demonstrates how to implement a Webscript component that renders the JSON contents that come from a webscript +This sample Web Scripts reside in your Alfresco Server. You can access the folder webscript here: + +```http://localhost:8080/alfresco/service/sample/folder/JSON%EXAMPLE``` + +```html + + +``` + +You can get the plain data from the webscript through the **onSuccess** event parameter and use it as you need in your application + +```ts +logDataExample(data) { + console.log('You webscript data are here' + data); +} +``` \ No newline at end of file