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

more control over task details header (#1688)

Browse Source 
- toggle task details header
- toggle visibility of involve/comments/checklist
- readme updates
This commit is contained in:
Denys Vuika
2017-03-04 17:29:48 +00:00
committed by Mario Romano
parent 4d8abee892
commit 861393de60
6 changed files with 133 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
ng2-components/ng2-activiti-tasklist/README.md
View File

@@ -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: `<activiti-tasklist [appId]="appId" [state]="state" [assignment]="assignment" [data]="dataTasks"></activiti-tasklist>`
template: `
<activiti-tasklist
[appId]="appId"
[state]="state"
[assignment]="assignment"
[data]="dataTasks">
</activiti-tasklist>
`
})
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
<activiti-task-details [taskId]="taskId"></activiti-task-details>
```
#### 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:
</activiti-task-details>
```
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.

4
ng2-components/ng2-activiti-tasklist/index.ts
View File

@@ -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

19
ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.css
View File

@@ -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;
}

76
ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.html
View File

@@ -1,6 +1,5 @@
<div *ngIf="!taskDetails">
<template *ngIf="noTaskDetailsTemplateComponent" ngFor [ngForOf]="[data]"
[ngForTemplate]="noTaskDetailsTemplateComponent">
<template *ngIf="noTaskDetailsTemplateComponent" ngFor [ngForOf]="[data]" [ngForTemplate]="noTaskDetailsTemplateComponent">
{{ 'TASK_DETAILS.MESSAGES.NONE' | translate }}
</template>
<div *ngIf="!noTaskDetailsTemplateComponent">
@@ -8,44 +7,61 @@
</div>
</div>
<div *ngIf="taskDetails">
<h2 class="mdl-card__title-text">{{taskDetails.name}}</h2>
<activiti-task-header
<div *ngIf="showHeader">
<h2 class="activiti-task-details__header" (click)="toggleHeaderContent()">
<md-icon *ngIf="!showHeaderContent">expand_more</md-icon>
<md-icon *ngIf="showHeaderContent">expand_less</md-icon>
<span>{{taskDetails.name || 'No name'}}</span>
</h2>
<activiti-task-header *ngIf="showHeaderContent"
[taskDetails]="taskDetails"
[formName]="taskFormName"
(claim)="onClaimTask($event)"></activiti-task-header>
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--4-col">
<activiti-people [iconImageUrl]="peopleIconImageUrl" [people]="taskPeople" [readOnly]="readOnlyForm"
[taskId]="taskDetails.id"></activiti-people>
</div>
<div class="mdl-cell mdl-cell--4-col">
<activiti-comments [readOnly]="readOnlyForm" [taskId]="taskDetails.id"
#activiticomments></activiti-comments>
</div>
<div class="mdl-cell mdl-cell--4-col">
<activiti-checklist [readOnly]="readOnlyForm" [taskId]="taskDetails.id" [assignee]="taskDetails?.assignee?.id"
(checklistTaskCreated)="onChecklistTaskCreated($event)" #activitichecklist></activiti-checklist>
(claim)="onClaimTask($event)">
</activiti-task-header>
<div *ngIf="showHeaderContent" class="mdl-grid">
<div *ngIf="showInvolvePeople" class="mdl-cell mdl-cell--4-col">
<activiti-people
[iconImageUrl]="peopleIconImageUrl"
[people]="taskPeople"
[readOnly]="readOnlyForm"
[taskId]="taskDetails.id">
</activiti-people>
</div>
<div *ngIf="showComments" class="mdl-cell mdl-cell--4-col">
<activiti-comments #activiticomments
[readOnly]="readOnlyForm"
[taskId]="taskDetails.id">
</activiti-comments>
</div>
<div *ngIf="showChecklist" class="mdl-cell mdl-cell--4-col">
<activiti-checklist #activitichecklist
[readOnly]="readOnlyForm"
[taskId]="taskDetails.id"
[assignee]="taskDetails?.assignee?.id"
(checklistTaskCreated)="onChecklistTaskCreated($event)">
</activiti-checklist>
</div>
</div>
</div>
<div *ngIf="isAssignedToMe()">
<activiti-form *ngIf="hasFormKey()" [taskId]="taskDetails.id"
[showTitle]="showFormTitle"
[showRefreshButton]="showFormRefreshButton"
[showCompleteButton]="showFormCompleteButton"
[showSaveButton]="showFormSaveButton"
[readOnly]="readOnlyForm"
(formSaved)='onFormSaved($event)'
(formCompleted)='onFormCompleted($event)'
(formLoaded)='onFormLoaded($event)'
(onError)='onFormError($event)'
(executeOutcome)='onFormExecuteOutcome($event)'
#activitiForm>
<activiti-form *ngIf="hasFormKey()" #activitiForm
[taskId]="taskDetails.id"
[showTitle]="showFormTitle"
[showRefreshButton]="showFormRefreshButton"
[showCompleteButton]="showFormCompleteButton"
[showSaveButton]="showFormSaveButton"
[readOnly]="readOnlyForm"
(formSaved)='onFormSaved($event)'
(formCompleted)='onFormCompleted($event)'
(formLoaded)='onFormLoaded($event)'
(onError)='onFormError($event)'
(executeOutcome)='onFormExecuteOutcome($event)'>
</activiti-form>
</div>
<div *ngIf="!isAssignedToMe()">
{{ 'TASK_DETAILS.MESSAGES.CLAIM' | translate }}
</div>
<button type="button" class="mdl-button" *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">
<button md-raised-button class="activiti-task-details__action-button" *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">
{{ 'TASK_DETAILS.BUTTON.COMPLETE' | translate }}
</button>
<dialog class="mdl-dialog error-dialog" #errorDialog>

19
ng2-components/ng2-activiti-tasklist/src/components/activiti-task-details.component.ts
View File

@@ -46,6 +46,21 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
@Input()
showNextTask: boolean = true;
@Input()
showHeader: boolean = true;
@Input()
showHeaderContent: boolean = true;
@Input()
showInvolvePeople: boolean = true;
@Input()
showComments: boolean = true;
@Input()
showChecklist: boolean = true;
@Input()
showFormTitle: boolean = true;
@@ -250,4 +265,8 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
onClaimTask(taskId: string) {
this.loadDetails(taskId);
}
toggleHeaderContent() {
this.showHeaderContent = !this.showHeaderContent;
}
}