nosu
/
taskana
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

TSK-1467: update tabs toggle workbasket report

This commit is contained in:
Chi Nguyen 2020-12-17 12:21:39 +01:00 committed by Mustapha Zorgati
parent 2e4743ef63
commit 43fbe91a6b
7 changed files with 22 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

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

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

@ -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();
});
});

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

@ -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);
}
}

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

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

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

@ -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;
showMonitorQueryDueDate: Boolean;
selectedComponent: WorkbasketReports;
ngOnInit() {}
@ -18,23 +21,12 @@ export class WorkbasketReportComponent implements OnInit {
this.metaInformation = metaInformation;
}
queryChanged(monitorQueryType: QueryType) {
this.switchGraphicShowed(monitorQueryType);
selectComponent(component) {
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;
}
}
}

5
web/src/app/monitor/monitor.module.ts
View File

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