feat(*): allow to export only displayed, filtered data (#2059)

closes #1361

Co-authored-by: Sebastian Leidig <sebastian@aam-digital.com>

src/app/core/common-components/entity-subrecord/entity-subrecord/entity-subrecord.component.ts

@@ -99,7 +99,6 @@ export interface TableRow<T extends Entity> {
 })
 export class EntitySubrecordComponent<T extends Entity> implements OnChanges {
   @Input() isLoading: boolean;
-
   @Input() clickMode: "popup" | "navigate" | "none" = "popup";
 
   /** outputs an event containing an array of currently selected records (checkmarked by the user) */
@@ -124,6 +123,9 @@ export class EntitySubrecordComponent<T extends Entity> implements OnChanges {
   /** data to be displayed, can also be used as two-way-binding */
   @Input() records: T[] = [];
 
+  /** output the currently displayed records, whenever filters for the user change */
+  @Output() filteredRecordsChange = new EventEmitter<T[]>();
+
   /**
    * factory method to create a new instance of the displayed Entity type
    * used when the user adds a new entity to the list.
@@ -275,6 +277,9 @@ export class EntitySubrecordComponent<T extends Entity> implements OnChanges {
       this.sortDefault();
     }
 
+    this.filteredRecordsChange.emit(
+      this.recordsDataSource.filteredData.map((item) => item.record),
+    );
     this.listenToEntityUpdates();
   }
 

src/app/core/entity-list/entity-list/entity-list.component.html

@@ -130,6 +130,7 @@ <h2>{{ listName }}</h2>
     [defaultSort]="listConfig?.defaultSort"
     (selectedRecordsChange)="selectedRows = $event"
     [showInactive]="showInactive"
+    (filteredRecordsChange)="filteredData = $event"
   ></app-entity-subrecord>
 </ng-template>
 
@@ -184,7 +185,25 @@ <h2>{{ listName }}</h2>
       aria-label="download csv"
       icon="download"
     ></fa-icon>
-    <span i18n="Download list contents as CSV"> Download CSV </span>
+    <span i18n="Download list contents as CSV"> Download all data (.csv) </span>
+  </button>
+
+  <button
+    mat-menu-item
+    [appExportData]="filteredData"
+    format="csv"
+    [exportConfig]="listConfig?.exportConfig"
+    [filename]="listName.replace(' ', '')"
+    angulartics2On="click"
+    [angularticsCategory]="entityConstructor?.ENTITY_TYPE"
+    angularticsAction="list_csv_export"
+  >
+    <fa-icon
+      class="color-accent standard-icon-with-text"
+      aria-label="download csv"
+      icon="download"
+    ></fa-icon>
+    <span i18n="Download list contents as CSV"> Download current (.csv) </span>
   </button>
 
   <button

src/app/core/entity-list/entity-list/entity-list.component.ts

@@ -1,5 +1,6 @@
 import {
   AfterViewInit,
+  ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Input,
@@ -57,6 +58,7 @@ import { MatTooltipModule } from "@angular/material/tooltip";
  */
 @RouteTarget("EntityList")
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: "app-entity-list",
   templateUrl: "./entity-list.component.html",
   styleUrls: ["./entity-list.component.scss"],
@@ -119,6 +121,7 @@ export class EntityListComponent<T extends Entity>
 
   filterObj: DataFilter<T>;
   filterString = "";
+  filteredData = [];
 
   get selectedColumnGroupIndex(): number {
     return this.selectedColumnGroupIndex_;
@@ -265,10 +268,13 @@ export class EntityListComponent<T extends Entity>
   }
 
   applyFilter(filterValue: string) {
+    // TODO: turn this into one of our filter types, so that all filtering happens the same way (and we avoid accessing internal datasource of sub-component here)
     filterValue = filterValue.trim();
     filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
     this.entityTable.recordsDataSource.filter = filterValue;
-
+    this.filteredData = this.entityTable.recordsDataSource.filteredData.map(
+      (x) => x.record,
+    );
     this.analyticsService.eventTrack("list_filter_freetext", {
       category: this.entityConstructor?.ENTITY_TYPE,
     });