TSK-1467: update tabs toggle workbasket report

web/src/app/monitor/components/workbasket-report-query-switcher/workbasket-report-query-switcher.component.html

@@ -1,15 +0,0 @@
-<div class="btn-group" role="group" aria-label="select chart type">
-  <div class="btn-group" role="group">
-    <button type="button" class="btn btn-default"
-            [ngClass]="selectedChartType === monitorQueryDueDateType ? 'selected' : ''"
-            (click)="switch(monitorQueryDueDateType)">Due date
-    </button>
-  </div>
-  <div class="btn-group" role="group">
-    <button type="button" class="btn btn-default"
-            [ngClass]="selectedChartType === monitorQueryPlannedDateType ? 'selected' : ''"
-            (click)="switch(monitorQueryPlannedDateType)">Planned date
-    </button>
-  </div>
-</div>
-

web/src/app/monitor/components/workbasket-report-query-switcher/workbasket-report-query-switcher.component.scss

@@ -1,6 +0,0 @@
-@import '../../../../theme/colors';
-
-.btn.selected {
-  background-color: $blue;
-  color: white;
-}

web/src/app/monitor/components/workbasket-report-query-switcher/workbasket-report-query-switcher.component.spec.ts

@@ -1,24 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { WorkbasketReportQuerySwitcherComponent } from './workbasket-report-query-switcher.component';
-
-describe('WorkbasketReportQuerySwitcherComponent', () => {
-  let component: WorkbasketReportQuerySwitcherComponent;
-  let fixture: ComponentFixture<WorkbasketReportQuerySwitcherComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [WorkbasketReportQuerySwitcherComponent]
-    }).compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(WorkbasketReportQuerySwitcherComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

web/src/app/monitor/components/workbasket-report-query-switcher/workbasket-report-query-switcher.component.ts

@@ -1,26 +0,0 @@
-import { Component, EventEmitter, OnInit, Output } from '@angular/core';
-import { QueryType } from '../../models/query-type';
-
-@Component({
-  selector: 'taskana-monitor-workbasket-report-query-switcher',
-  templateUrl: './workbasket-report-query-switcher.component.html',
-  styleUrls: ['./workbasket-report-query-switcher.component.scss']
-})
-export class WorkbasketReportQuerySwitcherComponent implements OnInit {
-  @Output()
-  queryChanged = new EventEmitter<QueryType>();
-
-  selectedChartType: QueryType;
-  monitorQueryPlannedDateType = QueryType.PlannedDate;
-  monitorQueryDueDateType = QueryType.DueDate;
-
-  ngOnInit() {
-    this.selectedChartType = QueryType.DueDate;
-    this.queryChanged.emit(QueryType.DueDate);
-  }
-
-  switch(queryType: QueryType) {
-    this.selectedChartType = queryType;
-    this.queryChanged.emit(queryType);
-  }
-}

web/src/app/monitor/components/workbasket-report/workbasket-report.component.html

@@ -1,13 +1,17 @@
 <div class="panel panel-default">
   <div class="panel-heading">
     <h4 *ngIf="metaInformation">{{getTitle()}} ({{metaInformation?.date | date : 'dd.MM.yyyy HH:mm:ss'}})</h4>
-    <taskana-monitor-workbasket-report-query-switcher
-      (queryChanged)="queryChanged($event)"></taskana-monitor-workbasket-report-query-switcher>
-  </div>
-  <div class="panel-body">
-    <taskana-monitor-workbasket-report-due-date [ngClass]="showMonitorQueryDueDate ? '' : 'hidden'"
-                                                (metaInformation)="getMetaInformation($event)"></taskana-monitor-workbasket-report-due-date>
-    <taskana-monitor-workbasket-report-planned-date [ngClass]="showMonitorQueryPlannedDate ? '' : 'hidden'"
-                                                    (metaInformation)="getMetaInformation($event)"></taskana-monitor-workbasket-report-planned-date>
   </div>
+  <mat-tab-group class="panel-body" animationDuration="0ms" (selectedIndexChange)="selectComponent($event)" >
+    <mat-tab label="Due Date">
+      <taskana-monitor-workbasket-report-due-date
+        (metaInformation)="getMetaInformation($event)">
+      </taskana-monitor-workbasket-report-due-date>
+    </mat-tab>
+    <mat-tab label="Planned Date">
+      <taskana-monitor-workbasket-report-planned-date
+        (metaInformation)="getMetaInformation($event)">
+      </taskana-monitor-workbasket-report-planned-date>
+    </mat-tab>
+  </mat-tab-group>
 </div>

web/src/app/monitor/components/workbasket-report/workbasket-report.component.ts

@@ -1,6 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { MetaInfoData } from '../../models/meta-info-data';
 import { QueryType } from '../../models/query-type';
+enum WorkbasketReports {
+  DUE_DATE,
+  PLANNED_DATE
+}
 
 @Component({
   selector: 'taskana-monitor-workbasket-report',
@@ -9,8 +13,7 @@ import { QueryType } from '../../models/query-type';
 })
 export class WorkbasketReportComponent implements OnInit {
   metaInformation: MetaInfoData;
-  showMonitorQueryPlannedDate: Boolean;
+  selectedComponent: WorkbasketReports;
-  showMonitorQueryDueDate: Boolean;
 
   ngOnInit() {}
 
@@ -18,23 +21,12 @@ export class WorkbasketReportComponent implements OnInit {
     this.metaInformation = metaInformation;
   }
 
-  queryChanged(monitorQueryType: QueryType) {
+  selectComponent(component) {
-    this.switchGraphicShowed(monitorQueryType);
+    this.selectedComponent = component;
   }
-
   getTitle(): string {
-    return this.showMonitorQueryPlannedDate
+    return this.selectedComponent
       ? 'Tasks grouped by workbasket, querying by planned date'
       : 'Tasks grouped by workbasket, querying by due date';
   }
-
-  private switchGraphicShowed(monitorQueryType: QueryType) {
-    if (monitorQueryType === QueryType.PlannedDate) {
-      this.showMonitorQueryPlannedDate = true;
-      this.showMonitorQueryDueDate = false;
-    } else if (monitorQueryType === QueryType.DueDate) {
-      this.showMonitorQueryPlannedDate = false;
-      this.showMonitorQueryDueDate = true;
-    }
-  }
 }

web/src/app/monitor/monitor.module.ts

@@ -22,7 +22,7 @@ import { MonitorService } from './services/monitor.service';
 import { WorkbasketReportComponent } from './components/workbasket-report/workbasket-report.component';
 import { WorkbasketReportPlannedDateComponent } from './components/workbasket-report-planned-date/workbasket-report-planned-date.component';
 import { WorkbasketReportDueDateComponent } from './components/workbasket-report-due-date/workbasket-report-due-date.component';
-import { WorkbasketReportQuerySwitcherComponent } from './components/workbasket-report-query-switcher/workbasket-report-query-switcher.component';
+import { MatButtonModule } from '@angular/material/button';
 
 const MODULES = [
   CommonModule,
@@ -43,14 +43,13 @@ const DECLARATIONS = [
   WorkbasketReportComponent,
   WorkbasketReportPlannedDateComponent,
   WorkbasketReportDueDateComponent,
-  WorkbasketReportQuerySwitcherComponent,
   TaskReportComponent,
   ClassificationReportComponent
 ];
 
 @NgModule({
   declarations: DECLARATIONS,
-  imports: MODULES,
+  imports: [MODULES, MatButtonModule],
   providers: [MonitorService, MapToIterable]
 })
 export class MonitorModule {}