mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
#805 display form name in task header
- add support for displaying form name in task header (only when form loaded) - fix live reload for task-details component (demo shell) - code improvements (including type-safe events)
This commit is contained in:
Denys Vuika
parent
903c313615
commit
5aaa2d6682
@ -8,6 +8,7 @@
|
||||
"node_modules/ng2-alfresco-upload/dist/**/*.{html,css,js}",
|
||||
"node_modules/ng2-alfresco-viewer/dist/**/*.{html,css,js}",
|
||||
"node_modules/ng2-alfresco-webscript/dist/**/*.{html,css,js}",
|
||||
"node_modules/ng2-activiti-form/dist/**/*.{html,css,js}"
|
||||
"node_modules/ng2-activiti-form/dist/**/*.{html,css,js}",
|
||||
"node_modules/ng2-activiti-tasklist/dist/**/*.{html,css,js}"
|
||||
]
|
||||
}
|
||||
|
||||
@ -9,7 +9,7 @@
|
||||
</div>
|
||||
<div *ngIf="taskDetails">
|
||||
<h2 class="mdl-card__title-text">{{taskDetails.name}}</h2>
|
||||
<activiti-task-header [taskDetails]="taskDetails" #activitiheader></activiti-task-header>
|
||||
<activiti-task-header [taskDetails]="taskDetails" [formName]="taskFormName" #activitiheader></activiti-task-header>
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--4-col">
|
||||
<activiti-people [people]="taskPeople" [readOnly]="readOnlyForm"
|
||||
@ -30,11 +30,11 @@
|
||||
[showCompleteButton]="showFormCompleteButton"
|
||||
[showSaveButton]="showFormSaveButton"
|
||||
[readOnly]="readOnlyForm"
|
||||
(formSaved)='formSavedEmitter($event)'
|
||||
(formCompleted)='formCompletedEmitter($event)'
|
||||
(formLoaded)='formLoadedEmitter($event)'
|
||||
(onError)='onErrorEmitter($event)'
|
||||
(executeOutcome)='executeOutcomeEmitter($event)'
|
||||
(formSaved)='onFormSaved($event)'
|
||||
(formCompleted)='onFormCompleted($event)'
|
||||
(formLoaded)='onFormLoaded($event)'
|
||||
(onError)='onFormError($event)'
|
||||
(executeOutcome)='onExecuteFormOutcome($event)'
|
||||
#activitiForm>
|
||||
</activiti-form>
|
||||
<button type="button" class="mdl-button" *ngIf="!hasFormKey() && isTaskActive()" (click)="onComplete()">
|
||||
|
||||
@ -20,11 +20,9 @@ import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-a
|
||||
import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
|
||||
import { TaskDetailsModel } from '../models/task-details.model';
|
||||
import { User } from '../models/user.model';
|
||||
import { FormModel, FormService } from 'ng2-activiti-form';
|
||||
import { FormService, FormModel, FormOutcomeEvent } from 'ng2-activiti-form';
|
||||
import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
|
||||
|
||||
declare let componentHandler: any;
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-task-details',
|
||||
moduleId: module.id,
|
||||
@ -61,23 +59,22 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
|
||||
showFormRefreshButton: boolean = true;
|
||||
|
||||
@Output()
|
||||
formSaved = new EventEmitter();
|
||||
formSaved: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||
|
||||
@Output()
|
||||
formCompleted = new EventEmitter();
|
||||
formCompleted: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||
|
||||
@Output()
|
||||
formLoaded = new EventEmitter();
|
||||
formLoaded: EventEmitter<FormModel> = new EventEmitter<FormModel>();
|
||||
|
||||
@Output()
|
||||
onError = new EventEmitter();
|
||||
onError: EventEmitter<any> = new EventEmitter<any>();
|
||||
|
||||
@Output()
|
||||
executeOutcome = new EventEmitter();
|
||||
executeOutcome: EventEmitter<FormOutcomeEvent> = new EventEmitter<FormOutcomeEvent>();
|
||||
|
||||
taskDetails: TaskDetailsModel;
|
||||
|
||||
taskForm: FormModel;
|
||||
taskFormName: string = null;
|
||||
|
||||
taskPeople: User[] = [];
|
||||
|
||||
@ -142,8 +139,8 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
|
||||
* @param taskId
|
||||
*/
|
||||
loadDetails(taskId: string) {
|
||||
this.taskForm = null;
|
||||
this.taskPeople = [];
|
||||
this.taskFormName = null;
|
||||
if (taskId) {
|
||||
this.activitiTaskList.getTaskDetails(taskId).subscribe(
|
||||
(res: TaskDetailsModel) => {
|
||||
@ -194,61 +191,34 @@ export class ActivitiTaskDetails implements OnInit, OnChanges {
|
||||
*/
|
||||
onComplete() {
|
||||
this.activitiTaskList.completeTask(this.taskId).subscribe(
|
||||
(res) => {
|
||||
console.log(res);
|
||||
this.formCompleted.emit(res);
|
||||
}
|
||||
(res) => this.formCompleted.emit(null)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit the form saved event
|
||||
* @param data
|
||||
*/
|
||||
formSavedEmitter(data: any) {
|
||||
this.formSaved.emit(data);
|
||||
onFormSaved(form: FormModel) {
|
||||
this.formSaved.emit(form);
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit the form completed event
|
||||
* @param data
|
||||
*/
|
||||
formCompletedEmitter(data: any) {
|
||||
this.formCompleted.emit(data);
|
||||
if (this.isShowNextTask()) {
|
||||
onFormCompleted(form: FormModel) {
|
||||
this.formCompleted.emit(form);
|
||||
if (this.showNextTask) {
|
||||
this.loadNextTask(this.taskDetails.processInstanceId, this.taskDetails.processDefinitionId);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit the form loaded event
|
||||
* @param data
|
||||
*/
|
||||
formLoadedEmitter(data: any) {
|
||||
this.formLoaded.emit(data);
|
||||
onFormLoaded(form: FormModel) {
|
||||
this.taskFormName = null;
|
||||
if (form && form.name) {
|
||||
this.taskFormName = form.name;
|
||||
}
|
||||
this.formLoaded.emit(form);
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit the error event of the form
|
||||
* @param data
|
||||
*/
|
||||
onErrorEmitter(err: any) {
|
||||
this.onError.emit(err);
|
||||
onFormError(error: any) {
|
||||
this.onError.emit(error);
|
||||
}
|
||||
|
||||
/**
|
||||
* Emit the execute outcome of the form
|
||||
* @param data
|
||||
*/
|
||||
executeOutcomeEmitter(data: any) {
|
||||
this.executeOutcome.emit(data);
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the showNexTask value
|
||||
* @returns {boolean}
|
||||
*/
|
||||
isShowNextTask(): boolean {
|
||||
return this.showNextTask;
|
||||
onExecuteFormOutcome(event: FormOutcomeEvent) {
|
||||
this.executeOutcome.emit(event);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,10 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.activiti-label {
|
||||
font-weight: bolder;
|
||||
}
|
||||
.activiti-task-header__label {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.activiti-task-header__value {
|
||||
color: rgb(68,138,255);
|
||||
}
|
||||
|
||||
@ -1,14 +1,16 @@
|
||||
<div *ngIf="taskDetails">
|
||||
<div class="mdl-grid">
|
||||
<div class="mdl-cell mdl-cell--4-col">
|
||||
<span class="activiti-label">{{ 'TASK_DETAILS.LABELS.ASSIGNEE' | translate }}</span>:
|
||||
{{taskDetails.assignee.lastName }}
|
||||
<span class="activiti-task-header__label">{{ 'TASK_DETAILS.LABELS.ASSIGNEE' | translate }}: </span>
|
||||
<span class="activiti-task-header__value">{{taskDetails.assignee.lastName }}</span>
|
||||
</div>
|
||||
<div class="mdl-cell mdl-cell--4-col">
|
||||
<span class="activiti-label">
|
||||
{{ 'TASK_DETAILS.LABELS.DUE' | translate }}</span>:
|
||||
{{taskDetails?.dueDate ? taskDetails.dueDate : ('TASK_DETAILS.DUE.NONE' |translate) }}
|
||||
|
||||
<span class="activiti-task-header__label">{{ 'TASK_DETAILS.LABELS.DUE' | translate }}: </span>
|
||||
<span class="activiti-task-header__value">{{taskDetails?.dueDate ? taskDetails.dueDate : ('TASK_DETAILS.DUE.NONE' |translate) }}</span>
|
||||
</div>
|
||||
<div *ngIf="formName" class="mdl-cell mdl-cell--4-col">
|
||||
<span class="activiti-task-header__label">{{ 'TASK_DETAILS.LABELS.FORM' | translate }}: </span>
|
||||
<span class="activiti-task-header__value">{{formName}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -19,8 +19,6 @@ import { Component, Input } from '@angular/core';
|
||||
import { AlfrescoTranslationService } from 'ng2-alfresco-core';
|
||||
import { TaskDetailsModel } from '../models/task-details.model';
|
||||
|
||||
declare let componentHandler: any;
|
||||
|
||||
@Component({
|
||||
selector: 'activiti-task-header',
|
||||
moduleId: module.id,
|
||||
@ -29,19 +27,15 @@ declare let componentHandler: any;
|
||||
})
|
||||
export class ActivitiTaskHeader {
|
||||
|
||||
@Input()
|
||||
formName: string = 'No form';
|
||||
|
||||
@Input()
|
||||
taskDetails: TaskDetailsModel;
|
||||
|
||||
/**
|
||||
* Constructor
|
||||
* @param auth
|
||||
* @param translate
|
||||
*/
|
||||
constructor(private translate: AlfrescoTranslationService) {
|
||||
|
||||
if (translate) {
|
||||
translate.addTranslationFolder('node_modules/ng2-activiti-tasklist/src');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user