Add export button and filename options to tree table component

Author: TerranceKhumalo-absa

projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html

@@ -13,6 +13,8 @@
         sortMode="multiple"
         [resizableColumns]="true"
         [columnResizeMode]="'expand'"
+        [showExportBtn]="true"
+        [exportFilename]="'virtual-tree-data'"
         toolbarTitle="Tree table with a paginator, resizable columns, multiple sorting and individual filtering">
         <ng-template #header>
           <th

projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html

@@ -117,6 +117,20 @@
             (clicked)="onClickActionBtn()">
           </cps-button>
         </div>
+        <div
+          *ngIf="showExportBtn"
+          class="cps-treetable-tbar-export-btn ml-2"
+          [ngClass]="{ 'btn-disabled': exportBtnDisabled }">
+          <cps-button
+            label="Export"
+            [disabled]="exportBtnDisabled"
+            color="prepared"
+            type="solid"
+            icon="export"
+            [size]="toolbarSize"
+            (clicked)="onExportData()">
+          </cps-button>
+        </div>
         <div
           *ngIf="showColumnsToggleBtn && columns.length > 0"
           class="cps-treetable-tbar-coltoggle-btn"

projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts

@@ -54,6 +54,7 @@ import { CpsTreeTableColumnResizableDirective } from './directives/cps-tree-tabl
 export function treeTableFactory(tableComponent: CpsTreeTableComponent) {
   return tableComponent.primengTreeTable;
 }
+export type CpsTreeTableExportFormat = 'csv' | 'xlsx' | 'json';
 
 /**
  * CpsTreeTableSize is used to define the size of the tree table.
@@ -519,6 +520,30 @@ export class CpsTreeTableComponent
    */
   @Input() autoColumnFilterType = true;
 
+  /**
+   * Determines whether to show export button in the toolbar.
+   * @group Props
+   */
+  @Input() showExportBtn = false;
+
+  /**
+   * Determines whether export button is disabled.
+   * @group Props
+   */
+  @Input() exportBtnDisabled = false;
+
+  /**
+   * Filename to use when exporting data (without extension).
+   * @group Props
+   */
+  @Input() exportFilename = 'export';
+
+  /**
+   * Original source data to use for export instead of processed tree table data.
+   * @group Props
+   */
+  @Input() exportOriginalData: any[] = [];
+
   /**
    * If set to true, row data are rendered using innerHTML.
    * @group Props
@@ -1377,4 +1402,61 @@ export class CpsTreeTableComponent
     if (selection && !Array.isArray(selection)) selection = [selection];
     this.rowsSelected.emit(selection);
   }
+
+  onExportData() {
+    if (this.exportBtnDisabled) return;
+    this.exportJSON();
+  }
+
+  exportJSON() {
+    try {
+      const exportData = this.getExportData();
+      const jsonString = JSON.stringify(exportData, null, 2);
+      const blob = new Blob([jsonString], {
+        type: 'application/json;charset=utf-8'
+      });
+
+      const downloadLink = this.document.createElement('a');
+      downloadLink.href = URL.createObjectURL(blob);
+      downloadLink.download = `${this.exportFilename}.json`;
+      downloadLink.click();
+    } catch (error) {
+      console.error('Error exporting JSON:', error);
+    }
+  }
+
+  getExportData(): any[] {
+    // If original data is provided, use it directly for export
+    if (this.exportOriginalData && this.exportOriginalData.length > 0) {
+      return this.exportOriginalData;
+    }
+
+    // Create a deep copy of the tree data without circular references
+    return this.removeCircularReferences(this.primengTreeTable?.value || []);
+  }
+
+  private removeCircularReferences(nodes: any[]): any[] {
+    return nodes.map((node) => {
+      const cleanNode: any = {};
+
+      // Copy all properties except 'parent' to avoid circular references
+      Object.keys(node).forEach((key) => {
+        if (key !== 'parent') {
+          if (
+            key === 'children' &&
+            Array.isArray(node.children) &&
+            node.children.length > 0
+          ) {
+            // Recursively clean children
+            cleanNode.children = this.removeCircularReferences(node.children);
+          } else {
+            // Copy other properties as is
+            cleanNode[key] = node[key];
+          }
+        }
+      });
+
+      return cleanNode;
+    });
+  }
 }