Merge branch 'master' into 392-update-to-angular-18

AbsaOSS · Aug 5, 2024 · 82961c8 · 82961c8
2 parents 94b5b7f + f06882d
commit 82961c8
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 34 deletions.
diff --git a/projects/composition/src/app/api-data/cps-table.json b/projects/composition/src/app/api-data/cps-table.json
@@ -107,15 +107,22 @@
                         "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."
+                        "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."
                     },
                     {
                         "name": "showRowEditButton",
                         "optional": false,
                         "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."
+                        "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."
+                    },
+                    {
+                        "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."
                     },
                     {
                         "name": "reorderableRows",

diff --git a/projects/composition/src/app/api-data/cps-tree-table.json b/projects/composition/src/app/api-data/cps-tree-table.json
@@ -123,15 +123,22 @@
                         "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."
+                        "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."
                     },
                     {
                         "name": "showRowEditButton",
                         "optional": false,
                         "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."
+                        "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."
+                    },
+                    {
+                        "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."
                     },
                     {
                         "name": "loading",

diff --git a/projects/composition/src/app/pages/table-page/table-page.component.html b/projects/composition/src/app/pages/table-page/table-page.component.html
@@ -182,8 +182,10 @@
         [bordered]="false"
         [sortable]="true"
         [showExportBtn]="true"
+        [showRowMenu]="true"
+        [rowMenuItems]="customRowMenuItems"
         exportFilename="table_6"
-        toolbarTitle="Borderless table with export button, without highlightning on rows hover">
+        toolbarTitle="Borderless table with export button, without highlightning on rows hover. Row menu is shown and has custom items.">
         <ng-template #header>
           <th cpsTColSortable="a">A</th>
           <th cpsTColSortable="b">B</th>

diff --git a/projects/composition/src/app/pages/table-page/table-page.component.ts b/projects/composition/src/app/pages/table-page/table-page.component.ts
@@ -12,7 +12,8 @@ import {
   CpsButtonToggleOption,
   CpsTableSize,
   CpsTabChangeEvent,
-  CpsColumnFilterMatchMode
+  CpsColumnFilterMatchMode,
+  CpsMenuItem
 } from 'cps-ui-kit';
 import { ComponentDocsViewerComponent } from '../../components/component-docs-viewer/component-docs-viewer.component';
 
@@ -374,6 +375,23 @@ export class TablePageComponent implements OnInit {
 
   componentData = ComponentData;
 
+  customRowMenuItems: CpsMenuItem[] = [
+    {
+      title: 'Custom menu item',
+      icon: 'heart',
+      action: (row: any) => {
+        console.log('Custom menu item clicked', row);
+      }
+    },
+    {
+      title: 'Edit row',
+      icon: 'edit',
+      action: (row: any) => {
+        this.onEditRowButtonClicked(row);
+      }
+    }
+  ];
+
   ngOnInit(): void {
     this._genVirtualData();
     this.selCols = this.colsWithFilterType;

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
@@ -214,7 +214,9 @@
         [rowHover]="false"
         [bordered]="false"
         [sortable]="true"
-        toolbarTitle="Borderless tree table without highlightning on rows hover">
+        [showRowMenu]="true"
+        [rowMenuItems]="customRowMenuItems"
+        toolbarTitle="Borderless tree table without highlightning on rows hover. Row menu is shown and has custom items.">
         <ng-template #header>
           <th cpsTTColSortable="name">Name</th>
           <th cpsTTColSortable="size">Size</th>

diff --git a/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts b/projects/composition/src/app/pages/tree-table-page/tree-table-page.component.ts
@@ -12,7 +12,8 @@ import {
   CpsButtonToggleComponent,
   CpsTreeTableHeaderSelectableDirective,
   CpsButtonToggleOption,
-  CpsTreeTableSize
+  CpsTreeTableSize,
+  CpsMenuItem
 } from 'cps-ui-kit';
 
 import ComponentData from '../../api-data/cps-tree-table.json';
@@ -513,6 +514,23 @@ export class TreeTablePageComponent implements OnInit {
     }
   ];
 
+  customRowMenuItems: CpsMenuItem[] = [
+    {
+      title: 'Custom menu item',
+      icon: 'heart',
+      action: (_) => {
+        console.log('Custom menu item clicked');
+      }
+    },
+    {
+      title: 'Edit row',
+      icon: 'edit',
+      action: (_) => {
+        this.onEditRowButtonClicked();
+      }
+    }
+  ];
+
   ngOnInit(): void {
     this.selCols = this.colsWithFilterType;
     this._genVirtualData();

diff --git a/...c/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.ts b/...c/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.ts
@@ -44,6 +44,20 @@ export class TableRowMenuComponent implements OnInit {
     return this._showRowRemoveButton;
   }
 
+  /**
+   * Custom items to be displayed in the menu.
+   * @group Props
+   */
+  @Input()
+  set customItems(value: CpsMenuItem[] | undefined) {
+    this._customRowMenuItems = value;
+    this.initializeItems();
+  }
+
+  get customItems(): CpsMenuItem[] | undefined {
+    return this._customRowMenuItems;
+  }
+
   /**
    * Determines whether the 'Edit' button should be displayed in the menu.
    * @group Props
@@ -60,6 +74,7 @@ export class TableRowMenuComponent implements OnInit {
 
   private _showRowRemoveButton = true;
   private _showRowEditButton = true;
+  private _customRowMenuItems?: CpsMenuItem[];
 
   items: CpsMenuItem[] = [];
 
@@ -68,26 +83,29 @@ export class TableRowMenuComponent implements OnInit {
   }
 
   initializeItems() {
-    this.items = [];
-
-    if (this.showRowEditButton) {
-      this.items.push({
-        title: 'Edit',
-        icon: 'edit',
-        action: (event: any) => {
-          this.editRowBtnClicked.emit(event);
-        }
-      });
-    }
+    if (this._customRowMenuItems) {
+      this.items = this._customRowMenuItems;
+    } else {
+      this.items = [];
+      if (this.showRowEditButton) {
+        this.items.push({
+          title: 'Edit',
+          icon: 'edit',
+          action: (event: any) => {
+            this.editRowBtnClicked.emit(event);
+          }
+        });
+      }
 
-    if (this.showRowRemoveButton) {
-      this.items.push({
-        title: 'Remove',
-        icon: 'remove',
-        action: (event: any) => {
-          this.removeRowBtnClicked.emit(event);
-        }
-      });
+      if (this.showRowRemoveButton) {
+        this.items.push({
+          title: 'Remove',
+          icon: 'remove',
+          action: (event: any) => {
+            this.removeRowBtnClicked.emit(event);
+          }
+        });
+      }
     }
   }
 }
diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html
@@ -315,7 +315,8 @@
           (editRowBtnClicked)="onEditRowClicked(item)"
           (removeRowBtnClicked)="onRemoveRowClicked(item)"
           [showRowRemoveButton]="showRowRemoveButton"
-          [showRowEditButton]="showRowEditButton">
+          [showRowEditButton]="showRowEditButton"
+          [customItems]="rowMenuItems">
         </table-row-menu>
       </td>
     </tr>

diff --git a/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts b/projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts
@@ -174,18 +174,25 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
 
   /**
    * Determines whether the 'Remove' button should be displayed in the row menu.
-   * Note: This setting only takes effect if 'showRowMenu' is true.
+   * Note: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set.
    * @group Props
    */
   @Input() showRowRemoveButton = true;
 
   /**
    * Determines whether the 'Edit' button should be displayed in the row menu.
-   * Note: This setting only takes effect if 'showRowMenu' is true.
+   * Note: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set.
    * @group Props
    */
   @Input() showRowEditButton = true;
 
+  /**
+   * Custom items to be displayed in the row menu.
+   * Note: This setting only takes effect if 'showRowMenu' is true.
+   * @group Props
+   */
+  @Input() rowMenuItems?: CpsMenuItem[];
+
   /**
    * Determines whether the table should have re-orderable rows.
    * @group Props

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
@@ -303,7 +303,8 @@
           (editRowBtnClicked)="onEditRowClicked(rowNode.node)"
           (removeRowBtnClicked)="onRemoveRowClicked(rowNode.node)"
           [showRowRemoveButton]="showRowRemoveButton"
-          [showRowEditButton]="showRowEditButton">
+          [showRowEditButton]="showRowEditButton"
+          [customItems]="rowMenuItems">
         </table-row-menu>
       </td>
     </tr>

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
@@ -35,7 +35,7 @@ import { AngleDoubleRightIcon } from 'primeng/icons/angledoubleright';
 import { cloneDeep, isEqual } from 'lodash-es';
 import { CpsInputComponent } from '../cps-input/cps-input.component';
 import { CpsButtonComponent } from '../cps-button/cps-button.component';
-import { CpsMenuComponent } from '../cps-menu/cps-menu.component';
+import { CpsMenuComponent, CpsMenuItem } from '../cps-menu/cps-menu.component';
 import { CpsIconComponent } from '../cps-icon/cps-icon.component';
 import { CpsSelectComponent } from '../cps-select/cps-select.component';
 import { CpsLoaderComponent } from '../cps-loader/cps-loader.component';
@@ -204,18 +204,25 @@ export class CpsTreeTableComponent
 
   /**
    * Determines whether the 'Remove' button should be displayed in the row menu.
-   * Note: This setting only takes effect if 'showRowMenu' is true.
+   * Note: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set.
    * @group Props
    */
   @Input() showRowRemoveButton = true;
 
   /**
    * Determines whether the 'Edit' button should be displayed in the row menu.
-   * Note: This setting only takes effect if 'showRowMenu' is true.
+   * Note: This setting only takes effect if 'showRowMenu' is true and 'rowMenuItems' is not set.
    * @group Props
    */
   @Input() showRowEditButton = true;
 
+  /**
+   * Custom items to be displayed in the row menu.
+   * Note: This setting only takes effect if 'showRowMenu' is true.
+   * @group Props
+   */
+  @Input() rowMenuItems?: CpsMenuItem[];
+
   /**
    * When enabled, a loader component is displayed.
    * @group Props