Export only displayed data

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

@@ -94,7 +94,6 @@ export interface TableRow<T extends Entity> {
 })
 export class EntitySubrecordComponent<T extends Entity> implements OnChanges {
   @Input() isLoading: boolean;
-
   @Input() clickMode: "popup" | "navigate" | "none" = "popup";
 
   @Input() showInactive = false;
@@ -115,6 +114,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.
@@ -266,6 +268,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

@@ -129,6 +129,7 @@ <h2>{{ listName }}</h2>
     [filter]="filterObj"
     [defaultSort]="listConfig?.defaultSort"
     [showInactive]="showInactive"
+    (filteredRecordsChange)="filteredData = $event"
   ></app-entity-subrecord>
 </ng-template>
 
@@ -183,7 +184,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,
@@ -55,6 +56,7 @@ import { DisableEntityOperationDirective } from "../../permissions/permission-di
  */
 @RouteTarget("EntityList")
 @Component({
+  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: "app-entity-list",
   templateUrl: "./entity-list.component.html",
   styleUrls: ["./entity-list.component.scss"],
@@ -114,6 +116,7 @@ export class EntityListComponent<T extends Entity>
 
   filterObj: DataFilter<T>;
   filterString = "";
+  filteredData = [];
 
   get selectedColumnGroupIndex(): number {
     return this.selectedColumnGroupIndex_;
@@ -259,10 +262,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,
     });