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

View File

@@ -43,8 +43,6 @@ declare var componentHandler;
}) })
export class ActivitiDemoComponent implements AfterViewChecked { export class ActivitiDemoComponent implements AfterViewChecked {
currentChoice: string = 'task-list';
@ViewChild('activitiapps') @ViewChild('activitiapps')
activitiapps: ActivitiApps; activitiapps: ActivitiApps;
@@ -66,6 +64,15 @@ export class ActivitiDemoComponent implements AfterViewChecked {
@ViewChild('activitiprocessdetails') @ViewChild('activitiprocessdetails')
activitiprocessdetails: any; activitiprocessdetails: any;
@ViewChild('tabmain')
tabMain: any;
@ViewChild('tabheader')
tabHeader: any;
@Input()
appId: number;
layoutType: string; layoutType: string;
currentTaskId: string; currentTaskId: string;
currentProcessInstanceId: string; currentProcessInstanceId: string;
@@ -81,13 +88,6 @@ export class ActivitiDemoComponent implements AfterViewChecked {
dataTasks: ObjectDataTableAdapter; dataTasks: ObjectDataTableAdapter;
dataProcesses: ObjectDataTableAdapter; dataProcesses: ObjectDataTableAdapter;
@Input()
appId: number;
setChoice($event) {
this.currentChoice = $event.target.value;
}
isProcessListSelected() { isProcessListSelected() {
return this.currentChoice === 'process-list'; return this.currentChoice === 'process-list';
} }
@@ -134,6 +134,16 @@ export class ActivitiDemoComponent implements AfterViewChecked {
this.processFilter = null; this.processFilter = null;
this.currentProcessInstanceId = 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) { onTaskFilterClick(event: FilterRepresentationModel) {