diff --git a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html index 5a6c2285d3..3dad9954e2 100644 --- a/demo-shell-ng2/app/components/activiti/activiti-demo.component.html +++ b/demo-shell-ng2/app/components/activiti/activiti-demo.component.html @@ -41,11 +41,11 @@ #activititasklist>
-
Task Details
 -
- + +
diff --git a/ng2-components/ng2-activiti-tasklist/README.md b/ng2-components/ng2-activiti-tasklist/README.md index a3941d24c3..f8bc2b183e 100644 --- a/ng2-components/ng2-activiti-tasklist/README.md +++ b/ng2-components/ng2-activiti-tasklist/README.md @@ -117,8 +117,8 @@ This component renders a list containing all the tasks matched by the parameters Usage example of this component : **main.ts** -```ts +```ts import { NgModule, Component } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; @@ -129,34 +129,35 @@ import { ObjectDataTableAdapter, DataSorting } from 'ng2-alfresco-datatable'; @Component({ selector: 'alfresco-app-demo', - template: `` + template: ` + + + ` }) class MyDemoApp { dataTasks: ObjectDataTableAdapter; - appId: string = '1'; - assignment: string = 'assignee'; - state: string = 'open'; - constructor(private authService: AlfrescoAuthenticationService, private settingsService: AlfrescoSettingsService) { + constructor(private authService: AlfrescoAuthenticationService, + private settingsService: AlfrescoSettingsService) { settingsService.bpmHost = 'http://localhost:9999'; this.authService.login('admin', 'admin').subscribe( - ticket => { - console.log(ticket); - }, - error => { - console.log(error); - }); + ticket => console.log(ticket), + error => console.log(error) + ); this.dataTasks = new ObjectDataTableAdapter([], [ - {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, - {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true} - ] - ); + {type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true}, + {type: 'text', key: 'started', title: 'Started', cssClass: 'hidden', sortable: true} + ]); this.dataTasks.setSorting(new DataSorting('started', 'desc')); } } @@ -170,12 +171,9 @@ class MyDemoApp { declarations: [MyDemoApp], bootstrap: [MyDemoApp] }) -export class AppModule { -} +export class AppModule {} platformBrowserDynamic().bootstrapModule(AppModule); - - ``` #### Events @@ -216,6 +214,24 @@ The component shows the details of the task id passed in input ``` +#### Properties + +| Name | Type | Default | Description | +| --- | --- | --- | --- | +| `taskId` | string | | (**required**) The id of the task details that we are asking for. | +| `showNextTask` | boolean | true | Automatically render the next one, when the task is completed. | +| `showFormTitle` | boolean | true | Toggle rendering of the form title. | +| `readOnlyForm` | boolean | false | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. | +| `showFormRefreshButton` | true | optional | Toggle rendering of the `Refresh` button. | +| `showFormSaveButton` | true | optional | Toggle rendering of the `Save` outcome button. | +| `showFormCompleteButton` | true | optional | Toggle rendering of the Form `Complete` outcome button | +| `peopleIconImageUrl` | string | | Define a custom people icon image | +| `showHeader` | boolean | true | Toggle task details Header component | +| `showHeaderContent` | boolean | true | Toggle collapsed/expanded state of the Header component | +| `showInvolvePeople` | boolean | true | Toggle `Involve People` feature for Header component | +| `showComments` | boolean | true | Toggle `Comments` feature for Header component | +| `showChecklist` | boolean | true | Toggle `Checklist` feature for Header component | + #### Events | Name | Description | @@ -227,25 +243,13 @@ The component shows the details of the task id passed in input | `executeOutcome` | Invoked when any outcome is executed, default behaviour can be prevented via `event.preventDefault()` | | `onError` | Invoked at any error | -#### Options - -| Name | Type | Required | Description | -| --- | --- | --- | --- | -| `taskId` | {string} | required | The id of the task details that we are asking for. | -| `showNextTask` | {boolean} | optional | Automatically render the next one, when the task is completed. | -| `showFormTitle` | {boolean} | optional | Toggle rendering of the form title. | -| `readOnlyForm` | {boolean} | optional | Toggle readonly state of the form. Enforces all form widgets render readonly if enabled. | -| `showFormRefreshButton` | {boolean} | optional | Toggle rendering of the `Refresh` button. | -| `showFormSaveButton` | {boolean} | optional | Toggle rendering of the `Save` outcome button. | -| `showFormCompleteButton` | {boolean} | optional | Toggle rendering of the Form `Complete` outcome button | -| `peopleIconImageUrl` | {string} | optional | Define a custom people icon image | - ### Custom 'empty Activiti Task Details' template By default the Activiti Task Details provides the following message for the empty task details: -'No Tasks' - +``` +No Tasks +``` This can be changed by adding the following custom html template: @@ -260,6 +264,8 @@ This can be changed by adding the following custom html template: ``` +Note that can put any HTML content as part of the template, includuing other Angualr components. + ## Basic usage example Activiti Apps The component shows all the available apps. diff --git a/ng2-components/ng2-activiti-tasklist/index.ts b/ng2-components/ng2-activiti-tasklist/index.ts index a7f9116871..0d30f02947 100644 --- a/ng2-components/ng2-activiti-tasklist/index.ts +++ b/ng2-components/ng2-activiti-tasklist/index.ts @@ -21,6 +21,7 @@ import { DataTableModule } from 'ng2-alfresco-datatable'; import { ActivitiFormModule } from 'ng2-activiti-form'; import { ActivitiPeopleService } from './src/services/activiti-people.service'; import { ActivitiTaskListService } from './src/services/activiti-tasklist.service'; +import { MaterialModule } from '@angular/material'; import { ActivitiApps, @@ -63,7 +64,8 @@ export const ACTIVITI_TASKLIST_PROVIDERS: any[] = [ imports: [ CoreModule, DataTableModule, - ActivitiFormModule + ActivitiFormModule, + MaterialModule ], declarations: [ ...ACTIVITI_TASKLIST_DIRECTIVES diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css index 67959204ff..ba63d41ff3 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css @@ -5,3 +5,22 @@ .error-dialog h3 { margin: 16px 0; } + +.activiti-task-details__header { + align-self: flex-end; + display: flex; + font-size: 24px; + font-weight: 300; + line-height: normal; + overflow: hidden; + margin: 0; + cursor: pointer; + user-select: none; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; +} + +.activiti-task-details__action-button { + text-transform: uppercase; +} diff --git a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html index 46be6220d5..28c74fdd1b 100644 --- a/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html +++ b/ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html @@ -1,6 +1,5 @@
-