TSK-1467: Update report table to split rows into chunks

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

@@ -36,6 +36,7 @@
                 </div>
             </div>
         </ng-container>
+        <button mat-flat-button color="accent" (click)="addRows()">Add more rows</button>
     </div>
     <div class="table-footer">
         <ng-container *ngFor="let row of reportData.sumRow; let i = index">
@@ -61,4 +62,5 @@
             </div>
         </ng-container>
     </div>
+
 </div>

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;