Show the TaskList when an app is select

This commit is contained in:
mauriziovitale84
2016-09-21 14:32:23 +01:00
parent 37202780fe
commit dda8adbf5f
2 changed files with 30 additions and 20 deletions

View File

@@ -1,20 +1,20 @@
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
<header class="mdl-layout__header">
<!-- Tabs -->
<div class="mdl-layout__tab-bar mdl-js-ripple-effect">
<a href="#scroll-tab-0" class="mdl-layout__tab is-active">APPS</a>
<a href="#scroll-tab-1" class="mdl-layout__tab">TASK LIST</a>
<a href="#scroll-tab-2" class="mdl-layout__tab">PROCESS LIST</a>
<a href="#scroll-tab-3" class="mdl-layout__tab">REPORT</a>
<div class="mdl-layout__tab-bar mdl-js-ripple-effect" #tabheader>
<a id="apps-header" href="#apps" class="mdl-layout__tab is-active">APPS</a>
<a id="tasks-header" href="#tasks" class="mdl-layout__tab">TASK LIST</a>
<a id="processes-header" href="#processes" class="mdl-layout__tab">PROCESS LIST</a>
<a id="report-header" href="#report" class="mdl-layout__tab">REPORT</a>
</div>
</header>
<main class="mdl-layout__content activiti">
<section class="mdl-layout__tab-panel is-active" id="scroll-tab-0">
<main class="mdl-layout__content activiti" #tabmain>
<section class="mdl-layout__tab-panel is-active" id="apps">
<div class="page-content">
<activiti-apps [layoutType]="layoutType" (appClick)="onAppClick($event)" #activitiapps></activiti-apps>
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-1">
<section class="mdl-layout__tab-panel" id="tasks">
<div class="page-content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col task-column mdl-shadow--2dp">
@@ -24,7 +24,7 @@
</div>
<div class="mdl-cell mdl-cell--3-col task-column mdl-shadow--2dp">
<span>Task List</span>
<activiti-tasklist *ngIf="isTaskListSelected()" [taskFilter]="taskFilter" [data]="dataTasks"
<activiti-tasklist [taskFilter]="taskFilter" [data]="dataTasks"
(rowClick)="onTaskRowClick($event)" (onSuccess)="onSuccessTaskList($event)"
#activititasklist></activiti-tasklist>
</div>
@@ -36,7 +36,7 @@
</div>
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-2">
<section class="mdl-layout__tab-panel" id="processes">
<div class="page-content">
<div class="page-content">
<div class="mdl-grid">
@@ -61,7 +61,7 @@
</div>
</div>
</section>
<section class="mdl-layout__tab-panel" id="scroll-tab-3">
<section class="mdl-layout__tab-panel" id="report">
<div class="page-content"><!-- Your content goes here --></div>
</section>
</main>

View File

@@ -43,8 +43,6 @@ declare var componentHandler;
})
export class ActivitiDemoComponent implements AfterViewChecked {
currentChoice: string = 'task-list';
@ViewChild('activitiapps')
activitiapps: ActivitiApps;
@@ -66,6 +64,15 @@ export class ActivitiDemoComponent implements AfterViewChecked {
@ViewChild('activitiprocessdetails')
activitiprocessdetails: any;
@ViewChild('tabmain')
tabMain: any;
@ViewChild('tabheader')
tabHeader: any;
@Input()
appId: number;
layoutType: string;
currentTaskId: string;
currentProcessInstanceId: string;
@@ -81,13 +88,6 @@ export class ActivitiDemoComponent implements AfterViewChecked {
dataTasks: ObjectDataTableAdapter;
dataProcesses: ObjectDataTableAdapter;
@Input()
appId: number;
setChoice($event) {
this.currentChoice = $event.target.value;
}
isProcessListSelected() {
return this.currentChoice === 'process-list';
}
@@ -134,6 +134,16 @@ export class ActivitiDemoComponent implements AfterViewChecked {
this.processFilter = null;
this.currentProcessInstanceId = null;
this.changeTab('apps','tasks');
}
changeTab(origin: string, destination: string) {
this.tabMain.nativeElement.children[origin].classList.remove('is-active');
this.tabMain.nativeElement.children[destination].classList.add('is-active');
this.tabHeader.nativeElement.children[`${origin}-header`].classList.remove('is-active');
this.tabHeader.nativeElement.children[`${destination}-header`].classList.add('is-active');
}
onTaskFilterClick(event: FilterRepresentationModel) {