feat(export): add onGrid Before/After ExportToFile Observable

- this could be useful if user want to display a spinner while downloading

Author: Ghislain Beaulac

src/app/examples/grid-grouping.component.html

@@ -38,7 +38,11 @@ <h2>{{title}}</h2>
         <button class="btn btn-default btn-xs" (click)="groupByDurationEffortDrivenPercent()">
             Group by duration then effort-driven then percent.
         </button>
+        <span [hidden]="!processing">
+            <i class="fa fa-refresh fa-spin fa-lg fa-fw"></i>
+        </span>
     </div>
+
     <angular-slickgrid gridId="grid2" (onDataviewCreated)="dataviewReady($event)" (onGridCreated)="gridReady($event)" [columnDefinitions]="columnDefinitions"
         [gridOptions]="gridOptions" [dataset]="dataset">
     </angular-slickgrid>

src/app/examples/grid-grouping.component.ts

@@ -1,10 +1,12 @@
-import { Component, OnInit } from '@angular/core';
-import { Aggregators, Column, FieldType, Formatter, Formatters, GridOption, Sorters  } from './../modules/angular-slickgrid';
+import { Component, Injectable, OnInit, OnDestroy } from '@angular/core';
+import { Aggregators, Column, ExportService, FieldType, Formatter, Formatters, GridOption, Sorters  } from './../modules/angular-slickgrid';
+import { Subscription } from 'rxjs/Subscription';
 
+@Injectable()
 @Component({
   templateUrl: './grid-grouping.component.html'
 })
-export class GridGroupingComponent implements OnInit {
+export class GridGroupingComponent implements OnInit, OnDestroy {
   title = 'Example 14: Grouping';
   subTitle = `
   <ul>
@@ -18,6 +20,20 @@ export class GridGroupingComponent implements OnInit {
   dataset: any[];
   gridObj: any;
   dataviewObj: any;
+  processing = false;
+  exportBeforeSub: Subscription;
+  exportAfterSub: Subscription;
+
+  constructor(private exportService: ExportService) {
+    // display a spinner while downloading
+    this.exportBeforeSub = this.exportService.onGridBeforeExportToFile.subscribe(() => this.processing = true);
+    this.exportAfterSub = this.exportService.onGridAfterExportToFile.subscribe(() => this.processing = false);
+  }
+
+  ngOnDestroy() {
+    this.exportBeforeSub.unsubscribe();
+    this.exportAfterSub.unsubscribe();
+  }
 
   ngOnInit(): void {
     this.columnDefinitions = [

src/app/modules/angular-slickgrid/services/export.service.ts

@@ -1,4 +1,5 @@
 import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
 import {
   CellArgs,
   CustomGridMenu,
@@ -14,8 +15,8 @@ import {
   HeaderMenuOnCommandArgs,
   HeaderMenuOnBeforeMenuShowArgs
 } from './../models/index';
-import { TranslateService } from '@ngx-translate/core';
 import { addWhiteSpaces, htmlEntityDecode } from './../services/utilities';
+import { Subject } from 'rxjs/Subject';
 import { TextEncoder } from 'text-encoding-utf-8';
 
 // using external non-typed js libraries
@@ -38,6 +39,8 @@ export class ExportService {
   private _gridOptions: GridOption;
   private _hasGroupedItems = false;
   private _exportOptions: ExportOption;
+  onGridBeforeExportToFile = new Subject<boolean>();
+  onGridAfterExportToFile = new Subject<{ options: any }>();
 
   constructor(private translate: TranslateService) { }
 
@@ -63,18 +66,24 @@ export class ExportService {
    * Example: exportToFile({ format: FileType.csv, delimiter: DelimiterType.comma })
    */
   exportToFile(options: ExportOption) {
+    this.onGridBeforeExportToFile.next(true);
     this._exportOptions = $.extend(true, {}, this._gridOptions.exportOptions, options);
 
     // get the CSV output from the grid data
     const dataOutput = this.getDataOutput();
 
     // trigger a download file
-    this.startDownloadFile({
-      filename: `${this._exportOptions.filename}.${this._exportOptions.format}`,
-      csvContent: dataOutput,
-      format: this._exportOptions.format,
-      useUtf8WithBom: this._exportOptions.useUtf8WithBom
-    });
+    // wrap it into a setTimeout so that the EventAggregator has enough time to start a pre-process like showing a spinner
+    setTimeout(() => {
+      const downloadOptions = {
+        filename: `${this._exportOptions.filename}.${this._exportOptions.format}`,
+        csvContent: dataOutput,
+        format: this._exportOptions.format,
+        useUtf8WithBom: this._exportOptions.useUtf8WithBom
+      };
+      this.startDownloadFile(downloadOptions);
+      this.onGridAfterExportToFile.next({ options: downloadOptions });
+    }, 0);
   }
 
   // -----------------------