From dac1489ec178fd63106608ba3a676388896e7520 Mon Sep 17 00:00:00 2001
From: TerranceKhumalo <terrance.khumalo@absa.africa>
Date: Thu, 17 Apr 2025 23:59:01 +0200
Subject: [PATCH 1/2] Add export button and filename options to tree table
 component

---
 .../tree-table-page.component.html            |  2 +
 .../cps-tree-table.component.html             | 14 ++++
 .../cps-tree-table.component.ts               | 82 +++++++++++++++++++
 3 files changed, 98 insertions(+)

diff --git a/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html b/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html
index 4fe9d89f..4126d9b4 100644
--- a/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.html
+++ b/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
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html
index 51a45424..7b9abeee 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.html
+++ b/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"
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
index 7a740d53..e3a34d2d 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
+++ b/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;
+    });
+  }
 }

From 00bf0e338061755e072f8fbd6a34ca76dcbda6c4 Mon Sep 17 00:00:00 2001
From: TerranceKhumalo <terrance.khumalo@absa.africa>
Date: Tue, 22 Apr 2025 14:49:11 +0200
Subject: [PATCH 2/2] Removed CpsTreeTAbleExportFormat. Regenerate docs

---
 .../src/app/api-data/cps-notification.json    |  2 +-
 .../src/app/api-data/cps-table.json           | 12 ++---
 .../src/app/api-data/cps-tree-table.json      | 44 ++++++++++++++++---
 .../cps-tree-table.component.ts               |  1 -
 4 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/projects/composition/src/app/api-data/cps-notification.json b/projects/composition/src/app/api-data/cps-notification.json
index 93baf712..52ffc175 100644
--- a/projects/composition/src/app/api-data/cps-notification.json
+++ b/projects/composition/src/app/api-data/cps-notification.json
@@ -127,7 +127,7 @@
                         "optional": true,
                         "readonly": false,
                         "type": "number",
-                        "description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\nValue 0 means that the notification is persistent and will not be automatically closed."
+                        "description": "The duration (in milliseconds) that the notification will be displayed before automatically closing.\r\nValue 0 means that the notification is persistent and will not be automatically closed."
                     },
                     {
                         "name": "allowDuplicates",
diff --git a/projects/composition/src/app/api-data/cps-table.json b/projects/composition/src/app/api-data/cps-table.json
index 0474946d..b7f52c6f 100644
--- a/projects/composition/src/app/api-data/cps-table.json
+++ b/projects/composition/src/app/api-data/cps-table.json
@@ -107,7 +107,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "showRowEditButton",
@@ -115,14 +115,14 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "rowMenuItems",
                         "optional": true,
                         "readonly": false,
                         "type": "CpsMenuItem[]",
-                        "description": "Custom items to be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true."
+                        "description": "Custom items to be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true."
                     },
                     {
                         "name": "reorderableRows",
@@ -178,7 +178,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\nNote: This setting only takes effect if 'filterableByColumns' is true."
+                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\r\nNote: This setting only takes effect if 'filterableByColumns' is true."
                     },
                     {
                         "name": "sortMode",
@@ -570,7 +570,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "false",
-                        "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
+                        "description": "Determines whether columns are resizable.\r\nIn case of using a custom template for columns, it is also needed to add cpsTColResizable directive to th elements."
                     },
                     {
                         "name": "columnResizeMode",
@@ -578,7 +578,7 @@
                         "readonly": false,
                         "type": "\"expand\" | \"fit\"",
                         "default": "fit",
-                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
+                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\r\nNote: This setting only takes effect if 'resizableColumns' is true."
                     }
                 ]
             },
diff --git a/projects/composition/src/app/api-data/cps-tree-table.json b/projects/composition/src/app/api-data/cps-tree-table.json
index 45bcb753..cc6baa71 100644
--- a/projects/composition/src/app/api-data/cps-tree-table.json
+++ b/projects/composition/src/app/api-data/cps-tree-table.json
@@ -123,7 +123,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Remove' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "showRowEditButton",
@@ -131,14 +131,14 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
+                        "description": "Determines whether the 'Edit' button should be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set."
                     },
                     {
                         "name": "rowMenuItems",
                         "optional": true,
                         "readonly": false,
                         "type": "CpsMenuItem[]",
-                        "description": "Custom items to be displayed in the row menu.\nNote: This setting only takes effect if 'showRowMenu' is true."
+                        "description": "Custom items to be displayed in the row menu.\r\nNote: This setting only takes effect if 'showRowMenu' is true."
                     },
                     {
                         "name": "loading",
@@ -530,7 +530,39 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "true",
-                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\nNote: This setting only takes effect if 'filterableByColumns' is true."
+                        "description": "If true, automatically detects filter type based on values, otherwise sets 'text' filter type for all columns.\r\nNote: This setting only takes effect if 'filterableByColumns' is true."
+                    },
+                    {
+                        "name": "showExportBtn",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "boolean",
+                        "default": "false",
+                        "description": "Determines whether to show export button in the toolbar."
+                    },
+                    {
+                        "name": "exportBtnDisabled",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "boolean",
+                        "default": "false",
+                        "description": "Determines whether export button is disabled."
+                    },
+                    {
+                        "name": "exportFilename",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "export",
+                        "description": "Filename to use when exporting data (without extension)."
+                    },
+                    {
+                        "name": "exportOriginalData",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "any[]",
+                        "default": "[]",
+                        "description": "Original source data to use for export instead of processed tree table data."
                     },
                     {
                         "name": "renderDataAsHTML",
@@ -554,7 +586,7 @@
                         "readonly": false,
                         "type": "boolean",
                         "default": "false",
-                        "description": "Determines whether columns are resizable.\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
+                        "description": "Determines whether columns are resizable.\r\nIn case of using a custom template for columns, it is also needed to add cpsTTColResizable directive to th elements."
                     },
                     {
                         "name": "columnResizeMode",
@@ -562,7 +594,7 @@
                         "readonly": false,
                         "type": "\"expand\" | \"fit\"",
                         "default": "fit",
-                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\nNote: This setting only takes effect if 'resizableColumns' is true."
+                        "description": "Determines how the columns are resized. It can be 'fit' (total width of the table stays the same) or 'expand' (total width of the table changes when resizing columns).\r\nNote: This setting only takes effect if 'resizableColumns' is true."
                     }
                 ]
             },
diff --git a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
index e3a34d2d..212948de 100644
--- a/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
+++ b/projects/cps-ui-kit/src/lib/components/cps-tree-table/cps-tree-table.component.ts
@@ -54,7 +54,6 @@ 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.