Merge pull request #793 from Alfresco/dev-mvitale-784

FilterList is shown twice

demo-shell-ng2/app/components/activiti/activiti-demo.component.html

@@ -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">
+        <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>
     </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">
                 <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>

demo-shell-ng2/app/components/activiti/activiti-demo.component.ts

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

ng2-components/ng2-activiti-processlist/src/components/activiti-filters.component.ts

@@ -82,7 +82,7 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
 
     ngOnChanges(changes: SimpleChanges) {
         let appId = changes['appId'];
-        if (appId && appId.currentValue) {
+        if (appId && (appId.currentValue || appId.currentValue === null)) {
             this.load();
             return;
         }
@@ -93,7 +93,6 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
      * @param tasks
      */
     private load() {
-        this.resetFilter();
         if (this.appName) {
             this.filterByAppName();
         } else {
@@ -104,6 +103,7 @@ export class ActivitiProcessFilters implements OnInit, OnChanges {
     private filterByAppId(appId) {
         this.activiti.getProcessFilters(appId).subscribe(
             (res: FilterRepresentationModel[]) => {
+                this.resetFilter();
                 res.forEach((filter) => {
                     this.filterObserver.next(filter);
                 });

ng2-components/ng2-activiti-tasklist/src/components/activiti-filters.component.ts

@@ -82,7 +82,7 @@ export class ActivitiFilters implements OnInit, OnChanges {
 
     ngOnChanges(changes: SimpleChanges) {
         let appId = changes['appId'];
-        if (appId) {
+        if (appId && (appId.currentValue || appId.currentValue === null)) {
             this.load();
             return;
         }
@@ -93,7 +93,6 @@ export class ActivitiFilters implements OnInit, OnChanges {
      * @param tasks
      */
     private load() {
-        this.resetFilter();
         if (this.appName) {
             this.filterByAppName();
         } else {
@@ -104,6 +103,7 @@ export class ActivitiFilters implements OnInit, OnChanges {
     private filterByAppId(appId) {
         this.activiti.getTaskListFilters(appId).subscribe(
             (res: FilterRepresentationModel[]) => {
+                this.resetFilter();
                 res.forEach((filter) => {
                     this.filterObserver.next(filter);
                     this.selectFirstFilter();

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

@@ -15,13 +15,13 @@
             <activiti-people [people]="taskPeople"></activiti-people>
         </div>
         <div class="mdl-cell mdl-cell--4-col">
-            <activiti-comments [taskId]="taskId" #activiticomments></activiti-comments>
+            <activiti-comments [taskId]="taskDetails.id" #activiticomments></activiti-comments>
         </div>
         <div class="mdl-cell mdl-cell--4-col">
-            <activiti-checklist [taskId]="taskId" #activitichecklist></activiti-checklist>
+            <activiti-checklist [taskId]="taskDetails.id" #activitichecklist></activiti-checklist>
         </div>
     </div>
-    <activiti-form *ngIf="hasFormKey()" [taskId]="taskId"
+    <activiti-form *ngIf="hasFormKey()" [taskId]="taskDetails.id"
                    [showTitle]="showTitle"
                    [showRefreshButton]="showRefreshButton"
                    [showCompleteButton]="showCompleteButton"

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.html

@@ -10,9 +10,5 @@
             {{taskDetails?.dueDate ? taskDetails.dueDate : ('TASK_DETAILS.DUE.NONE' |translate) }}
 
         </div>
-        <div class="mdl-cell mdl-cell--4-col">
-            <span class="activiti-label">{{ 'TASK_DETAILS.LABELS.FORM' | translate }}</span>:
-            {{taskForm?.name ? taskForm.name : ('TASK_DETAILS.FORM.NONE' | translate) }}
-        </div>
     </div>
 </div>

ng2-components/ng2-activiti-tasklist/src/components/activiti-task-header.component.ts

@@ -15,10 +15,9 @@
  * limitations under the License.
  */
 
-import { Component, Input, OnInit, OnChanges } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { AlfrescoTranslationService, AlfrescoAuthenticationService } from 'ng2-alfresco-core';
 import { TaskDetailsModel } from '../models/task-details.model';
-import { FormModel, FormService } from 'ng2-activiti-form';
 
 declare let componentHandler: any;
 declare let __moduleName: string;
@@ -27,23 +26,19 @@ declare let __moduleName: string;
     selector: 'activiti-task-header',
     moduleId: __moduleName,
     templateUrl: './activiti-task-header.component.html',
-    styleUrls: ['./activiti-task-header.component.css'],
+    styleUrls: ['./activiti-task-header.component.css']
-    providers: [ FormService ]
 })
-export class ActivitiTaskHeader implements OnInit, OnChanges {
+export class ActivitiTaskHeader implements OnInit {
 
     @Input()
     taskDetails: TaskDetailsModel;
 
-    taskForm: FormModel;
-
     /**
      * Constructor
      * @param auth
      * @param translate
      */
     constructor(private auth: AlfrescoAuthenticationService,
-                private activitiForm: FormService,
                 private translate: AlfrescoTranslationService) {
 
         if (translate) {
@@ -52,29 +47,7 @@ export class ActivitiTaskHeader implements OnInit, OnChanges {
     }
 
     ngOnInit() {
-        if (this.taskDetails && this.taskDetails.formKey) {
+
-            this.load(this.taskDetails.id);
-        }
     }
 
-    ngOnChanges(change) {
-        if (this.taskDetails && this.taskDetails.formKey) {
-            this.load(this.taskDetails.id);
-        } else {
-            this.taskForm = null;
-        }
-    }
-
-    public load(taskId: string) {
-        if (taskId) {
-            this.activitiForm.getTaskForm(taskId).subscribe(
-                (response) => {
-                    this.taskForm = response;
-                },
-                (err) => {
-                    console.error(err);
-                }
-            );
-        }
-    }
 }