119612: UI warning that only first part of configured items will be exported

Author: Jens Vannerum

src/app/shared/search/search-export-csv/search-export-csv.component.html

@@ -1,7 +1,20 @@
+<ng-template #tipContent>
+    <div class="tooltip-content">
+        <p class="m-0">{{tooltipMsg | translate}}</p>
+    </div>
+</ng-template>
+
+<ng-template #tipContentWarning>
+    <div class="tooltip-content">
+        <p class="m-0">{{tooltipMsg | translate}}</p>
+        <p class="m-0 text-warning">{{exportLimitExceededMsg}}</p>
+    </div>
+</ng-template>
+
 <button *ngIf="shouldShowButton$ | async"
    class="export-button btn btn-dark btn-sm"
-   [ngbTooltip]="tooltipMsg | translate"
+   [ngbTooltip]="(shouldShowWarning$ | async) ? tipContentWarning : tipContent"
    (click)="export()"
    [title]="tooltipMsg |translate" [attr.aria-label]="tooltipMsg |translate">
     <i class="fas fa-file-export fa-fw"></i>
-</button>
+</button>

src/app/shared/search/search-export-csv/search-export-csv.component.ts

@@ -21,10 +21,12 @@ import {
   switchMap,
 } from 'rxjs/operators';
 
+import { ConfigurationDataService } from '../../../core/data/configuration-data.service';
 import { AuthorizationDataService } from '../../../core/data/feature-authorization/authorization-data.service';
 import { FeatureID } from '../../../core/data/feature-authorization/feature-id';
 import { ScriptDataService } from '../../../core/data/processes/script-data.service';
 import { RemoteData } from '../../../core/data/remote-data';
+import { ConfigurationProperty } from '../../../core/shared/configuration-property.model';
 import { getFirstCompletedRemoteData } from '../../../core/shared/operators';
 import { getProcessDetailRoute } from '../../../process-page/process-page-routing.paths';
 import { Process } from '../../../process-page/processes/process.model';
@@ -53,6 +55,11 @@ export class SearchExportCsvComponent implements OnInit {
    */
   @Input() searchConfig: PaginatedSearchOptions;
 
+  /**
+   * The total number of items in the search results which can be exported
+   */
+  @Input() total: number;
+
   /**
    * Observable used to determine whether the button should be shown
    */
@@ -63,12 +70,18 @@ export class SearchExportCsvComponent implements OnInit {
    */
   tooltipMsg = 'metadata-export-search.tooltip';
 
+  exportLimitExceededKey = 'metadata-export-search.submit.error.limit-exceeded';
+
+  exportLimitExceededMsg = '';
+
+  shouldShowWarning$: Observable<boolean>;
+
   constructor(private scriptDataService: ScriptDataService,
               private authorizationDataService: AuthorizationDataService,
               private notificationsService: NotificationsService,
               private translateService: TranslateService,
               private router: Router,
-  ) {
+              private configurationService: ConfigurationDataService) {
   }
 
   ngOnInit(): void {
@@ -78,6 +91,25 @@ export class SearchExportCsvComponent implements OnInit {
       map((canExecute: boolean) => canExecute),
       startWith(false),
     );
+    this.shouldShowWarning$ = this.itemExceeds();
+  }
+
+  /**
+   * Checks if the export limit has been exceeded and updates the tooltip accordingly
+   */
+  private itemExceeds(): Observable<boolean> {
+    return this.configurationService.findByPropertyName('metadataexport.max.items').pipe(
+      getFirstCompletedRemoteData(),
+      map((response: RemoteData<ConfigurationProperty>) => {
+        const limit = Number(response.payload?.values?.[0]);
+        if (response.hasSucceeded && limit < this.total) {
+          this.exportLimitExceededMsg = this.translateService.instant(this.exportLimitExceededKey, { limit: response.payload?.values?.[0] });
+          return true;
+        } else {
+          return false;
+        }
+      }),
+    );
   }
 
   /**

src/app/shared/search/search-results/search-results.component.html

@@ -1,6 +1,7 @@
 <div class="d-flex justify-content-between">
     <h1 *ngIf="!disableHeader">{{ (configuration ? configuration + '.search.results.head' : 'search.results.head') | translate }}</h1>
-    <ds-search-export-csv *ngIf="showCsvExport" [searchConfig]="searchConfig"></ds-search-export-csv>
+    <ds-search-export-csv *ngIf="showCsvExport" [total]="searchResults?.payload?.totalElements"
+                          [searchConfig]="searchConfig"></ds-search-export-csv>
 </div>
 <div *ngIf="searchResults && searchResults?.hasSucceeded && !searchResults?.isLoading && searchResults?.payload?.page.length > 0" @fadeIn>
     <ds-viewable-collection

src/assets/i18n/en.json5

@@ -6763,4 +6763,6 @@
   "register-page.registration.aria.label": "Enter your e-mail address",
 
   "forgot-email.form.aria.label": "Enter your e-mail address",
+
+  "metadata-export-search.submit.error.limit-exceeded": "Only the first {{limit}} items will be exported",
 }