demo app improvements (#1796)

- fix navigation within process details
- fix ‘create task’ button name (was ‘start task’ previously)
- put ‘create task’ and ‘start process’ buttons to proper places in
layout
This commit is contained in:
Denys Vuika
2017-03-31 15:44:54 +01:00
committed by Mario Romano
parent d25d070229
commit 8272b08f6a
7 changed files with 113 additions and 78 deletions

View File

@@ -10,7 +10,6 @@
.task-column { .task-column {
background-color: #f5f5f5; background-color: #f5f5f5;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
border-right: solid 2px rgb(144, 143, 143);
} }
.list-column { .list-column {
@@ -20,3 +19,8 @@
.mdl-layout__header { .mdl-layout__header {
z-index: 1; z-index: 1;
} }
.list-buttons {
text-align: right;
margin-bottom: 5px;
}

View File

@@ -19,29 +19,34 @@
<div class="page-content"> <div class="page-content">
<div class="mdl-grid"> <div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp"> <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
<span><h5>Task Filters</h5></span> <activiti-filters
<hr> [appId]="appId"
<activiti-start-task [appId]="appId" (onSuccess)="onStartTaskSuccess($event)"></activiti-start-task> (filterClick)="onTaskFilterClick($event)"
<activiti-filters [appId]="appId" (filterClick)="onTaskFilterClick($event)" (onSuccess)="onSuccessTaskFilterList($event)"
(onSuccess)="onSuccessTaskFilterList($event)" #activitifilter>
#activitifilter></activiti-filters> </activiti-filters>
</div> </div>
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column"> <div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp list-column">
<span><h5>Task List</h5></span> <div class="list-buttons">
<hr> <activiti-start-task
<activiti-tasklist *ngIf="taskFilter?.hasFilter()" [appId]="taskFilter.appId" [appId]="appId"
[processDefinitionKey]="taskFilter.filter.processDefinitionKey" (onSuccess)="onStartTaskSuccess($event)">
[name]="taskFilter.filter.name" </activiti-start-task>
[assignment]="taskFilter.filter.assignment" </div>
[state]="taskFilter.filter.state" <activiti-tasklist
[sort]="taskFilter.filter.sort" [appId]="taskFilter?.appId"
[data]="dataTasks" [processDefinitionKey]="taskFilter?.filter?.processDefinitionKey"
[landingTaskId]="currentTaskId" [name]="taskFilter?.filter?.name"
(rowClick)="onTaskRowClick($event)" [assignment]="taskFilter?.filter?.assignment"
(onSuccess)="onSuccessTaskList($event)" [state]="taskFilter?.filter?.state"
(row-click)="onRowClick($event)" [sort]="taskFilter?.filter?.sort"
(row-dblclick)="onRowDblClick($event)" [data]="dataTasks"
#activititasklist> [landingTaskId]="currentTaskId"
(rowClick)="onTaskRowClick($event)"
(onSuccess)="onSuccessTaskList($event)"
(row-click)="onRowClick($event)"
(row-dblclick)="onRowDblClick($event)"
#activititasklist>
<!-- Custom column definition demo --> <!-- Custom column definition demo -->
<!-- <!--
<data-columns> <data-columns>
@@ -71,18 +76,22 @@
<div class="page-content"> <div class="page-content">
<div class="mdl-grid"> <div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp"> <div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
<span><h5>Process Filters</h5></span> <activiti-process-instance-filters
<hr> [appId]="appId"
<button type="button" (click)="navigateStartProcess()" class="mdl-button" (filterClick)="onProcessFilterClick($event)"
data-automation-id="btn-start-process">Start Process (onSuccess)="onSuccessProcessFilterList($event)">
</button> </activiti-process-instance-filters>
<activiti-process-instance-filters [appId]="appId"
(filterClick)="onProcessFilterClick($event)"
(onSuccess)="onSuccessProcessFilterList($event)"></activiti-process-instance-filters>
</div> </div>
<div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()"> <div class="mdl-cell mdl-cell--3-col task-column list-column mdl-shadow--2dp" *ngIf="processFilter && !isStartProcessMode()">
<span><h5>Process List</h5></span> <div class="list-buttons">
<hr> <button
md-raised-button
data-automation-id="btn-start-process"
(click)="navigateStartProcess()">
<md-icon>add</md-icon>
<span>START PROCESS</span>
</button>
</div>
<activiti-process-instance-list <activiti-process-instance-list
*ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId" *ngIf="processFilter?.hasFilter()" [appId]="processFilter.appId"
[processDefinitionKey]="processFilter.filter.processDefinitionKey" [processDefinitionKey]="processFilter.filter.processDefinitionKey"
@@ -104,8 +113,6 @@
<div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()" <div class="mdl-cell task-column mdl-shadow--2dp" *ngIf="!isStartProcessMode()"
[class.mdl-cell--7-col]="processFilter && !isStartProcessMode()" [class.mdl-cell--7-col]="processFilter && !isStartProcessMode()"
[class.mdl-cell--10-col]="!processFilter || isStartProcessMode()"> [class.mdl-cell--10-col]="!processFilter || isStartProcessMode()">
<span><h5>Process Details</h5></span>
<hr>
<activiti-process-instance-details <activiti-process-instance-details
[processInstanceId]="currentProcessInstanceId" [processInstanceId]="currentProcessInstanceId"
(processCancelled)="processCancelled()" (processCancelled)="processCancelled()"
@@ -113,8 +120,6 @@
</activiti-process-instance-details> </activiti-process-instance-details>
</div> </div>
<div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()"> <div class="mdl-cell mdl-cell--10-col task-column mdl-shadow--2dp" *ngIf="isStartProcessMode()">
<span><h5>Start Process</h5></span>
<hr>
<activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process> <activiti-start-process [appId]="appId" (start)="onStartProcessInstance($event)"></activiti-start-process>
</div> </div>
</div> </div>
@@ -138,13 +143,14 @@
</analytics-report-list> </analytics-report-list>
</div> </div>
<div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp"> <div class="mdl-cell mdl-cell--8-col task-column mdl-shadow--2dp">
<activiti-analytics *ngIf="report" <activiti-analytics
[appId]="appId" *ngIf="report"
[reportId]="report.id" [appId]="appId"
[hideParameters]="false" [reportId]="report.id"
(editReport)="onEditReport($event)" [hideParameters]="false"
(reportSaved)="onReportSaved()" (editReport)="onEditReport($event)"
(reportDeleted)="onReportDeleted()"> (reportSaved)="onReportSaved()"
(reportDeleted)="onReportDeleted()">
</activiti-analytics> </activiti-analytics>
</div> </div>
</div> </div>
@@ -155,9 +161,10 @@
</div> </div>
<div *ngIf="fileShowed"> <div *ngIf="fileShowed">
<alfresco-viewer [(showViewer)]="fileShowed" <alfresco-viewer
[blobFile]="content" [(showViewer)]="fileShowed"
[displayName]="contentName" [blobFile]="content"
[overlayMode]="true"> [displayName]="contentName"
[overlayMode]="true">
</alfresco-viewer> </alfresco-viewer>
</div> </div>

View File

@@ -58,13 +58,13 @@ export class ActivitiDemoComponent implements AfterViewInit {
activitifilter: ActivitiFilters; activitifilter: ActivitiFilters;
@ViewChild(ActivitiTaskList) @ViewChild(ActivitiTaskList)
activititasklist: ActivitiTaskList; taskList: ActivitiTaskList;
@ViewChild(ActivitiProcessFilters) @ViewChild(ActivitiProcessFilters)
activitiprocessfilter: ActivitiProcessFilters; activitiprocessfilter: ActivitiProcessFilters;
@ViewChild(ActivitiProcessInstanceListComponent) @ViewChild(ActivitiProcessInstanceListComponent)
activitiprocesslist: ActivitiProcessInstanceListComponent; processList: ActivitiProcessInstanceListComponent;
@ViewChild(ActivitiProcessInstanceDetails) @ViewChild(ActivitiProcessInstanceDetails)
activitiprocessdetails: ActivitiProcessInstanceDetails; activitiprocessdetails: ActivitiProcessInstanceDetails;
@@ -155,10 +155,8 @@ export class ActivitiDemoComponent implements AfterViewInit {
this.sub.unsubscribe(); this.sub.unsubscribe();
} }
onTaskFilterClick(event: FilterRepresentationModel) { onTaskFilterClick(filter: FilterRepresentationModel) {
if (event) { this.applyTaskFilter(filter);
this.taskFilter = event;
}
} }
onReportClick(event: any) { onReportClick(event: any) {
@@ -166,7 +164,14 @@ export class ActivitiDemoComponent implements AfterViewInit {
} }
onSuccessTaskFilterList(event: any) { onSuccessTaskFilterList(event: any) {
this.taskFilter = this.activitifilter.getCurrentFilter(); this.applyTaskFilter(this.activitifilter.getCurrentFilter());
}
applyTaskFilter(filter: FilterRepresentationModel) {
this.taskFilter = filter;
if (filter && this.taskList) {
this.taskList.hasCustomDataSource = false;
}
} }
onStartTaskSuccess(event: any) { onStartTaskSuccess(event: any) {
@@ -175,7 +180,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
} }
onSuccessTaskList(event: FilterRepresentationModel) { onSuccessTaskList(event: FilterRepresentationModel) {
this.currentTaskId = this.activititasklist.getCurrentId(); this.currentTaskId = this.taskList.getCurrentId();
} }
onProcessFilterClick(event: FilterProcessRepresentationModel) { onProcessFilterClick(event: FilterProcessRepresentationModel) {
@@ -188,7 +193,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
} }
onSuccessProcessList(event: any) { onSuccessProcessList(event: any) {
this.currentProcessInstanceId = this.activitiprocesslist.getCurrentId(); this.currentProcessInstanceId = this.processList.getCurrentId();
} }
onTaskRowClick(taskId) { onTaskRowClick(taskId) {
@@ -236,15 +241,15 @@ export class ActivitiDemoComponent implements AfterViewInit {
processCancelled(data: any) { processCancelled(data: any) {
this.currentProcessInstanceId = null; this.currentProcessInstanceId = null;
this.activitiprocesslist.reload(); this.processList.reload();
} }
onSuccessNewProcess(data: any) { onSuccessNewProcess(data: any) {
this.activitiprocesslist.reload(); this.processList.reload();
} }
onFormCompleted(form) { onFormCompleted(form) {
this.activititasklist.reload(); this.taskList.reload();
this.currentTaskId = null; this.currentTaskId = null;
} }
@@ -256,7 +261,7 @@ export class ActivitiDemoComponent implements AfterViewInit {
onTaskCreated(data: any) { onTaskCreated(data: any) {
this.currentTaskId = data.parentTaskId; this.currentTaskId = data.parentTaskId;
this.activititasklist.reload(); this.taskList.reload();
} }
ngAfterViewInit() { ngAfterViewInit() {
@@ -282,15 +287,17 @@ export class ActivitiDemoComponent implements AfterViewInit {
onProcessDetailsTaskClick(event: TaskDetailsEvent) { onProcessDetailsTaskClick(event: TaskDetailsEvent) {
event.preventDefault(); event.preventDefault();
this.activeTab = 'tasks'; this.activeTab = 'tasks';
let processTaskDataRow = new ObjectDataRow({
id: event.value.id, const taskId = event.value.id;
const processTaskDataRow = new ObjectDataRow({
id: taskId,
name: event.value.name || 'No name', name: event.value.name || 'No name',
created: event.value.created created: event.value.created
}); });
this.activitifilter.selectFilter(null); this.activitifilter.selectFilter(null);
this.dataTasks.setRows([processTaskDataRow]); this.taskList.setCustomDataSource([processTaskDataRow]);
this.activititasklist.selectTask(event.value.id); this.taskList.selectTask(taskId);
this.currentTaskId = event.value.id; this.currentTaskId = taskId;
} }
private resetProcessFilters() { private resetProcessFilters() {

View File

@@ -1,5 +1,6 @@
<button type="button" (click)="showDialog()" class="mdl-button" id="start-task-button"> <button md-raised-button (click)="showDialog()" id="start-task-button">
{{'START_TASK.BUTTON'|translate}} <md-icon>add</md-icon>
<span>{{'START_TASK.BUTTON'|translate}}</span>
</button> </button>
<dialog class="mdl-dialog" id="start-task-dialog" #dialog> <dialog class="mdl-dialog" id="start-task-dialog" #dialog>

View File

@@ -21,7 +21,6 @@ import { TaskDetailsModel } from '../models/task-details.model';
import { ActivitiTaskListService } from './../services/activiti-tasklist.service'; import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
import { Form } from '../models/form.model'; import { Form } from '../models/form.model';
declare let componentHandler: any;
declare let dialogPolyfill: any; declare let dialogPolyfill: any;
@Component({ @Component({

View File

@@ -36,8 +36,6 @@ import {
import { ActivitiTaskListService } from './../services/activiti-tasklist.service'; import { ActivitiTaskListService } from './../services/activiti-tasklist.service';
import { TaskQueryRequestRepresentationModel } from '../models/filter.model'; import { TaskQueryRequestRepresentationModel } from '../models/filter.model';
declare let componentHandler: any;
@Component({ @Component({
selector: 'activiti-tasklist', selector: 'activiti-tasklist',
moduleId: module.id, moduleId: module.id,
@@ -46,6 +44,8 @@ declare let componentHandler: any;
}) })
export class ActivitiTaskList implements OnChanges, AfterContentInit { export class ActivitiTaskList implements OnChanges, AfterContentInit {
private requestNode: TaskQueryRequestRepresentationModel;
@ContentChild(DataColumnListComponent) columnList: DataColumnListComponent; @ContentChild(DataColumnListComponent) columnList: DataColumnListComponent;
@Input() @Input()
@@ -69,8 +69,6 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
@Input() @Input()
landingTaskId: string; landingTaskId: string;
requestNode: TaskQueryRequestRepresentationModel;
@Input() @Input()
data: DataTableAdapter; data: DataTableAdapter;
@@ -85,6 +83,16 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
currentInstanceId: string; currentInstanceId: string;
/**
* Toggles custom data source mode.
* When enabled the component reloads data from it's current source instead of the server side.
* This allows generating and displaying custom data sets (i.e. filtered out content).
*
* @type {boolean}
* @memberOf ActivitiTaskList
*/
hasCustomDataSource: boolean = false;
private defaultSchemaColumn: DataColumn[] = [ private defaultSchemaColumn: DataColumn[] = [
{ type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true }, { type: 'text', key: 'name', title: 'Name', cssClass: 'full-width name-column', sortable: true },
{ type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true } { type: 'text', key: 'created', title: 'Created', cssClass: 'hidden', sortable: true }
@@ -106,7 +114,7 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
* Setup html-based (html definitions) or code behind (data adapter) schema. * Setup html-based (html definitions) or code behind (data adapter) schema.
* If component is assigned with an empty data adater the default schema settings applied. * If component is assigned with an empty data adater the default schema settings applied.
*/ */
setupSchema() { setupSchema(): void {
let schema: DataColumn[] = []; let schema: DataColumn[] = [];
if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) { if (this.columnList && this.columnList.columns && this.columnList.columns.length > 0) {
@@ -130,6 +138,13 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
} }
} }
setCustomDataSource(rows: ObjectDataRow[]): void {
if (this.data) {
this.data.setRows(rows);
this.hasCustomDataSource = true;
}
}
private isPropertyChanged(changes: SimpleChanges): boolean { private isPropertyChanged(changes: SimpleChanges): boolean {
let changed: boolean = false; let changed: boolean = false;
@@ -158,9 +173,11 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
return changed; return changed;
} }
public reload() { reload(): void {
this.requestNode = this.createRequestNode(); if (!this.hasCustomDataSource) {
this.load(this.requestNode); this.requestNode = this.createRequestNode();
this.load(this.requestNode);
}
} }
private load(requestNode: TaskQueryRequestRepresentationModel) { private load(requestNode: TaskQueryRequestRepresentationModel) {
@@ -209,7 +226,7 @@ export class ActivitiTaskList implements OnChanges, AfterContentInit {
/** /**
* Select the task given in input if present * Select the task given in input if present
*/ */
selectTask(taskIdToSelect: string) { selectTask(taskIdToSelect: string): void {
if (!this.isListEmpty()) { if (!this.isListEmpty()) {
let rows = this.data.getRows(); let rows = this.data.getRows();
if (rows.length > 0) { if (rows.length > 0) {

View File

@@ -62,7 +62,7 @@
} }
}, },
"START_TASK": { "START_TASK": {
"BUTTON": "Start Task", "BUTTON": "CREATE TASK",
"DIALOG": { "DIALOG": {
"TITLE": "Start Task", "TITLE": "Start Task",
"LABEL": { "LABEL": {