feat(export): add grouped header title (from pre-header) into exports

ghiscoding · Apr 28, 2020 · 465becb · 465becb
1 parent 3308195
commit 465becb
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 8 deletions.
diff --git a/.vscode/launch.json b/.vscode/launch.json
@@ -16,7 +16,7 @@
       "sourceMapPathOverrides": {
         "webpack:///../common/*": "${webRoot}/packages/common/*",
         "webpack:///../excel-export/*": "${webRoot}/packages/excel-export/*",
-        "webpack:///../export/*": "${webRoot}/packages/export/*",
+        "webpack:///../file-export/*": "${webRoot}/packages/file-export/*",
         "webpack:///../vanilla-bundle/*": "${webRoot}/packages/vanilla-bundle/*",
         "webpack:///./src/*": "${webRoot}/packages/web-demo-vanilla-bundle/src/*"
       }

diff --git a/packages/excel-export/src/excelExport.service.ts b/packages/excel-export/src/excelExport.service.ts
@@ -37,6 +37,7 @@ export class ExcelExportService {
   private _dataView: any;
   private _grid: any;
   private _locales: Locale;
+  private _groupedColumnHeaders: KeyTitlePair[];
   private _columnHeaders: KeyTitlePair[];
   private _groupedHeaders: KeyTitlePair[];
   private _hasGroupedItems = false;
@@ -254,7 +255,10 @@ export class ExcelExportService {
       columnHeaderStyleId = this._stylesheet.createFormat(columnHeaderStyle).id;
     }
 
-    // get all column headers (it might include a "Group by" title at A1 cell)
+    // get all Grouped Column Header Titles when defined (from pre-header row)
+    outputData.push(this.getColumnGroupedHeaderTitlesData(columns, { style: columnHeaderStyleId }));
+
+    // get all Column Header Titles (it might include a "Group by" title at A1 cell)
     // also style the headers, defaults to Bold but user could pass his own style
     outputData.push(this.getColumnHeaderData(columns, { style: columnHeaderStyleId }));
 
@@ -288,10 +292,34 @@ export class ExcelExportService {
     return columnStyles;
   }
 
+  /**
+   * Get all Grouped Header Titles and their keys, translate the title when required, and format them in Bold
+   * @param {Array<object>} columns of the grid
+   */
+  private getColumnGroupedHeaderTitlesData(columns: Column[], metadata: ExcelMetadata): Array<ExcelCellFormat> {
+    let outputGroupedHeaderTitles: Array<ExcelCellFormat> = [];
+
+    // get all Column Header Titles
+    this._groupedColumnHeaders = this.getColumnGroupedHeaderTitles(columns) || [];
+    if (this._groupedColumnHeaders && Array.isArray(this._groupedColumnHeaders) && this._groupedColumnHeaders.length > 0) {
+      // add the header row + add a new line at the end of the row
+      outputGroupedHeaderTitles = this._groupedColumnHeaders.map((header) => ({ value: header.title, metadata }));
+    }
+
+    // do we have a Group by title? If so, just add an empty string since the "Group By" text will be added on next row
+    const groupedHeaderTitle = this.getGroupColumnTitle();
+    if (groupedHeaderTitle) {
+      outputGroupedHeaderTitles.unshift({ value: '', metadata });
+    }
+
+    return outputGroupedHeaderTitles;
+  }
+
   /** Get all column headers and format them in Bold */
   private getColumnHeaderData(columns: Column[], metadata: ExcelMetadata): Array<ExcelCellFormat> {
     let outputHeaderTitles: Array<ExcelCellFormat> = [];
 
+    // get all Column Header Titles
     this._columnHeaders = this.getColumnHeaders(columns) || [];
     if (this._columnHeaders && Array.isArray(this._columnHeaders) && this._columnHeaders.length > 0) {
       // add the header row + add a new line at the end of the row
@@ -328,6 +356,38 @@ export class ExcelExportService {
     return null;
   }
 
+  /**
+ * Get all Grouped Header Titles and their keys, translate the title when required.
+ * @param {Array<object>} columns of the grid
+ */
+  private getColumnGroupedHeaderTitles(columns: Column[]): KeyTitlePair[] {
+    if (!columns || !Array.isArray(columns) || columns.length === 0) {
+      return [];
+    }
+    const groupedColumnHeaders: KeyTitlePair[] = [];
+
+    // Populate the Grouped Column Header, pull the columnGroup(Key) defined
+    columns.forEach((columnDef) => {
+      let groupedHeaderTitle = '';
+      if ((columnDef.columnGroupKey || columnDef.columnGroupKey) && this._gridOptions.enableTranslate && this.translaterService && this.translaterService.translate && this.translaterService.getCurrentLocale && this.translaterService.getCurrentLocale()) {
+        groupedHeaderTitle = this.translaterService.translate((columnDef.columnGroupKey || columnDef.columnGroupKey));
+      } else {
+        groupedHeaderTitle = columnDef.columnGroup || '';
+      }
+      const skippedField = columnDef.excludeFromExport || false;
+
+      // if column width is 0px, then we consider that field as a hidden field and should not be part of the export
+      if ((columnDef.width === undefined || columnDef.width > 0) && !skippedField) {
+        groupedColumnHeaders.push({
+          key: (columnDef.field || columnDef.id) as string,
+          title: groupedHeaderTitle || ''
+        });
+      }
+    });
+
+    return groupedColumnHeaders;
+  }
+
   /**
    * Get all header titles and their keys, translate the title when required.
    * @param columns of the grid

diff --git a/packages/file-export/src/fileExport.service.ts b/packages/file-export/src/fileExport.service.ts
@@ -28,6 +28,7 @@ export class FileExportService {
   private _lineCarriageReturn = '\n';
   private _dataView: any;
   private _grid: any;
+  private _groupedColumnHeaders: KeyTitlePair[];
   private _columnHeaders: KeyTitlePair[];
   private _groupedHeaders: KeyTitlePair[];
   private _hasGroupedItems = false;
@@ -191,13 +192,21 @@ export class FileExportService {
       this._hasGroupedItems = false;
     }
 
-    // get all column headers
+    // get all Grouped Column Header Titles when defined (from pre-header row)
+    if (this._gridOptions.createPreHeaderPanel && this._gridOptions.showPreHeaderPanel) {
+      this._groupedColumnHeaders = this.getColumnGroupedHeaderTitles(columns) || [];
+      if (this._groupedColumnHeaders && Array.isArray(this._groupedColumnHeaders) && this._groupedColumnHeaders.length > 0) {
+        // add the header row + add a new line at the end of the row
+        const outputGroupedHeaderTitles = this._groupedColumnHeaders.map((header) => `${this._exportQuoteWrapper}${header.title}${this._exportQuoteWrapper}`);
+        outputDataString += (outputGroupedHeaderTitles.join(this._delimiter) + this._lineCarriageReturn);
+      }
+    }
+
+    // get all Column Header Titles
     this._columnHeaders = this.getColumnHeaders(columns) || [];
     if (this._columnHeaders && Array.isArray(this._columnHeaders) && this._columnHeaders.length > 0) {
       // add the header row + add a new line at the end of the row
-      const outputHeaderTitles = this._columnHeaders.map((header) => {
-        return this._exportQuoteWrapper + header.title + this._exportQuoteWrapper;
-      });
+      const outputHeaderTitles = this._columnHeaders.map((header) => `${this._exportQuoteWrapper}${header.title}${this._exportQuoteWrapper}`);
       outputDataString += (outputHeaderTitles.join(this._delimiter) + this._lineCarriageReturn);
     }
 
@@ -236,9 +245,41 @@ export class FileExportService {
     return outputDataStrings.join(lineCarriageReturn);
   }
 
+  /**
+   * Get all Grouped Header Titles and their keys, translate the title when required.
+   * @param {Array<object>} columns of the grid
+   */
+  private getColumnGroupedHeaderTitles(columns: Column[]): KeyTitlePair[] {
+    if (!columns || !Array.isArray(columns) || columns.length === 0) {
+      return [];
+    }
+    const groupedColumnHeaders: KeyTitlePair[] = [];
+
+    // Populate the Grouped Column Header, pull the columnGroup(Key) defined
+    columns.forEach((columnDef) => {
+      let groupedHeaderTitle = '';
+      if ((columnDef.columnGroupKey || columnDef.columnGroupKey) && this._gridOptions.enableTranslate && this.translaterService && this.translaterService.translate && this.translaterService.getCurrentLocale && this.translaterService.getCurrentLocale()) {
+        groupedHeaderTitle = this.translaterService.translate((columnDef.columnGroupKey || columnDef.columnGroupKey));
+      } else {
+        groupedHeaderTitle = columnDef.columnGroup || '';
+      }
+      const skippedField = columnDef.excludeFromExport || false;
+
+      // if column width is 0px, then we consider that field as a hidden field and should not be part of the export
+      if ((columnDef.width === undefined || columnDef.width > 0) && !skippedField) {
+        groupedColumnHeaders.push({
+          key: (columnDef.field || columnDef.id) as string,
+          title: groupedHeaderTitle || ''
+        });
+      }
+    });
+
+    return groupedColumnHeaders;
+  }
+
   /**
    * Get all header titles and their keys, translate the title when required.
-   * @param columns of the grid
+   * @param {Array<object>} columns of the grid
    */
   private getColumnHeaders(columns: Column[]): KeyTitlePair[] {
     if (!columns || !Array.isArray(columns) || columns.length === 0) {
@@ -256,7 +297,7 @@ export class FileExportService {
       }
       const skippedField = columnDef.excludeFromExport || false;
 
-      // if column width is 0, then we consider that field as a hidden field and should not be part of the export
+      // if column width is 0px, then we consider that field as a hidden field and should not be part of the export
       if ((columnDef.width === undefined || columnDef.width > 0) && !skippedField) {
         columnHeaders.push({
           key: (columnDef.field || columnDef.id) as string,

diff --git a/packages/web-demo-vanilla-bundle/src/examples/example08.ts b/packages/web-demo-vanilla-bundle/src/examples/example08.ts
@@ -45,6 +45,7 @@ export class Example08 {
       enableAutoResize: false,
       gridHeight: 275,
       gridWidth: 800,
+      enableExport: true,
       enableCellNavigation: true,
       enableColumnReorder: false,
       enableSorting: true,