feat(grid): added export progress visualization in toolbar #7738

IgniteUI · Aug 14, 2020 · e0be81e · e0be81e
1 parent 4966d67
commit e0be81e
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 1 deletion.
diff --git a/...igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss b/...igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-component.scss
@@ -23,6 +23,10 @@
         @extend %igx-grid-toolbar__actions !optional;
     }
 
+    @include e(export-progress){
+        @extend %igx-grid-toolbar__export-progress !optional;
+    }
+
     @include e(adv-filter, $m: 'filtered') {
         @extend %igx-grid-toolbar__adv-filter--filtered !optional;
     }

diff --git a/...cts/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/...cts/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -134,6 +134,7 @@
 
     %igx-grid-toolbar {
         display: flex;
+        flex-wrap: wrap;
         align-items: center;
         justify-content: flex-end;
         grid-row: 1;
@@ -253,6 +254,10 @@
         }
     }
 
+    %igx-grid-toolbar__export-progress {
+        flex-basis: 100%;
+    }
+
     %igx-grid-toolbar__adv-filter--filtered {
         border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important;
 

diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.html
@@ -41,6 +41,7 @@
             </igx-column-actions>
         </igx-drop-down>
     </div>
+
     <div *ngIf="grid.columnPinning">
         <button igxButton="outlined" [displayDensity]="grid.displayDensity" #columnPinningButton name="btnColumnPinning" igxRipple
             (click)="toggleColumnPinningUI()">
@@ -65,7 +66,7 @@
 
     <div class="igx-grid-toolbar__dropdown" *ngIf="shouldShowExportButton" id="btnExport">
         <button igxButton="outlined" [displayDensity]="grid.displayDensity" igxRipple #btnExport
-                (click)="exportClicked()">
+                (click)="exportClicked()" [disabled]="isExporting">
             <span class="igx-grid-toolbar__button-space">
                 <igx-icon fontSet="material">import_export</igx-icon>
                 <span>{{ getExportText() }}</span>
@@ -83,3 +84,7 @@
         </igx-drop-down>
     </div>
 </div>
+
+<div class="igx-grid-toolbar__export-progress" *ngIf="isExporting">
+    <igx-linear-bar [indeterminate]="true"></igx-linear-bar>
+</div>
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts
@@ -74,6 +74,7 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
     }
 
     private _filterColumnsPrompt = this.grid.resourceStrings.igx_grid_toolbar_actions_filter_prompt;
+    private _isExporting = false;
 
     /**
      * @hidden
@@ -186,6 +187,13 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
         return (this.grid != null && (this.grid.exportExcel || this.grid.exportCsv));
     }
 
+    /**
+     * @hidden @internal
+     */
+    public get isExporting(): boolean {
+        return this._isExporting;
+    }
+
     /**
      * Returns whether the `IgxGridComponent` renders an Excel export button.
      * ```typescript
@@ -315,6 +323,11 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      * ```
      */
     public exportToExcelClicked() {
+        this._isExporting = true;
+        this.excelExporter.onExportEnded.subscribe((args: any) => {
+            this._isExporting = false;
+            this.cdr.detectChanges();
+        });
         this.performExport(this.excelExporter, 'excel');
     }
 
@@ -325,10 +338,17 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements After
      * ```
      */
     public exportToCsvClicked() {
+        this._isExporting = true;
+        this.csvExporter.onExportEnded.subscribe((args: any) => {
+            this._isExporting = false;
+            this.cdr.detectChanges();
+        });
         this.performExport(this.csvExporter, 'csv');
     }
 
     private performExport(exp: IgxBaseExporter, exportType: string) {
+        this.t1 = performance.now();
+
         this.exportClicked();
 
         const fileName = 'ExportedData';