diff --git a/web/src/app/monitor/components/report-table/report-table.component.html b/web/src/app/monitor/components/report-table/report-table.component.html index e393e6c96..92d6c1e5b 100644 --- a/web/src/app/monitor/components/report-table/report-table.component.html +++ b/web/src/app/monitor/components/report-table/report-table.component.html @@ -36,6 +36,7 @@ +
+ diff --git a/web/src/app/monitor/components/report-table/report-table.component.ts b/web/src/app/monitor/components/report-table/report-table.component.ts index a8b9833ab..ee15d059d 100644 --- a/web/src/app/monitor/components/report-table/report-table.component.ts +++ b/web/src/app/monitor/components/report-table/report-table.component.ts @@ -1,17 +1,50 @@ -import { Component, Input } from '@angular/core'; +import { Component, Input, OnChanges, OnInit } from '@angular/core'; import { ReportData } from 'app/monitor/models/report-data'; +import { ReportRow } from '../../models/report-row'; @Component({ selector: 'taskana-monitor-report-table', templateUrl: './report-table.component.html', styleUrls: ['./report-table.component.scss'] }) -export class ReportTableComponent { - currentExpHeaders = 0; - +export class ReportTableComponent implements OnChanges { @Input() reportData: ReportData; + fullReportData: ReportData; + fullRowsData: ReportRow[][]; + currentExpHeaders = 0; + + ngOnChanges() { + this.fullReportData = { ...this.reportData }; + this.fullRowsData = this.fullReportData.rows?.reduce((resultArray: ReportRow[][], item, index) => { + const itemsPerChunk = 20; + if (this.fullReportData.rows.length > itemsPerChunk) { + const chunkIndex = Math.floor(index / itemsPerChunk); + + if (!resultArray[chunkIndex]) { + resultArray[chunkIndex] = []; // start a new chunk + } + + resultArray[chunkIndex].push(item); + } else { + return [this.fullReportData.rows]; + } + return resultArray; + }, []); + if (this.fullRowsData) { + this.reportData.rows = this.fullRowsData[0]; + this.fullRowsData.splice(0, 1); + } + } + + addRows() { + if (typeof this.fullRowsData !== 'undefined' && this.fullRowsData[0]) { + this.reportData.rows = [...this.reportData.rows, ...this.fullRowsData[0]]; + this.fullRowsData.splice(0, 1); + } + } + toggleFold(indexNumber: number, sumRow: boolean = false) { let rows = sumRow ? this.reportData.sumRow : this.reportData.rows; let index = indexNumber;