#332 tree table columns toggling breaks the layout when bringing a co…

…lumn back, #314 Provide icon to table and treetable action buttons (#361) * sidebar menu page - fix selected item * fix treetable layout breaking after bringing columns back * added actionBtnIcon and additionalBtnOnSelectIcon props * use icons * gen api
AbsaOSS · Mar 28, 2024 · 9ac4c24 · 9ac4c24
1 parent 2da0f48
commit 9ac4c24
Show file tree

Hide file tree

Showing 8 changed files with 139 additions and 75 deletions.
diff --git a/projects/composition/src/app/api-data/cps-table.json b/projects/composition/src/app/api-data/cps-table.json
@@ -389,6 +389,14 @@
                         "default": "Select action",
                         "description": "AdditionalBtnOnSelect title."
                     },
+                    {
+                        "name": "additionalBtnOnSelectIcon",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "AdditionalBtnOnSelect icon."
+                    },
                     {
                         "name": "additionalBtnOnSelectDisabled",
                         "optional": false,
@@ -413,6 +421,14 @@
                         "default": "Action",
                         "description": "Action button title."
                     },
+                    {
+                        "name": "actionBtnIcon",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Action button icon."
+                    },
                     {
                         "name": "actionBtnDisabled",
                         "optional": false,

diff --git a/projects/composition/src/app/api-data/cps-tree-table.json b/projects/composition/src/app/api-data/cps-tree-table.json
@@ -405,6 +405,14 @@
                         "default": "Select action",
                         "description": "AdditionalBtnOnSelect title."
                     },
+                    {
+                        "name": "additionalBtnOnSelectIcon",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "AdditionalBtnOnSelect icon."
+                    },
                     {
                         "name": "additionalBtnOnSelectDisabled",
                         "optional": false,
@@ -429,6 +437,14 @@
                         "default": "Action",
                         "description": "Action button title."
                     },
+                    {
+                        "name": "actionBtnIcon",
+                        "optional": false,
+                        "readonly": false,
+                        "type": "string",
+                        "default": "",
+                        "description": "Action button icon."
+                    },
                     {
                         "name": "actionBtnDisabled",
                         "optional": false,

diff --git a/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.ts b/projects/composition/src/app/pages/sidebar-menu-page/sidebar-menu-page.component.ts
@@ -27,30 +27,30 @@ export class SidebarMenuPageComponent {
     {
       title: 'Favourites',
       icon: 'star',
-      url: '/sidebar-menu'
+      url: '/sidebar-menu/examples'
     },
     {
       title: 'Categories disabled',
       icon: 'book',
-      url: '/ghi',
+      url: '/',
       disabled: true
     },
     {
       title: 'Access menu',
-      icon: 'access-menu',
+      icon: 'access-lock',
       items: [
-        { title: 'Requests', desc: 'Apply for access', url: '/jkl' },
+        { title: 'Requests', desc: 'Apply for access', url: '/' },
         {
           title: 'Approval',
           desc: 'Approve or reject access requests',
-          url: '/mno'
+          url: '/'
         }
       ]
     },
     {
       title: 'Community menu',
       icon: 'users',
-      items: [{ title: 'Questions', desc: 'See all questions', url: '/pqr' }]
+      items: [{ title: 'Questions', desc: 'See all questions', url: '/' }]
     },
     {
       title: 'Bookmarks menu disabled',
@@ -60,7 +60,7 @@ export class SidebarMenuPageComponent {
         {
           title: 'Disabled cat',
           desc: 'This is not visible',
-          url: '/stu'
+          url: '/'
         }
       ]
     }

diff --git a/...onents/cps-table/components/internal/table-column-filter/table-column-filter.component.ts b/...onents/cps-table/components/internal/table-column-filter/table-column-filter.component.ts
@@ -25,6 +25,7 @@ import { CpsMenuComponent } from '../../../../cps-menu/cps-menu.component';
 import { CpsIconComponent } from '../../../../cps-icon/cps-icon.component';
 import { CpsSelectComponent } from '../../../../cps-select/cps-select.component';
 import { TableColumnFilterConstraintComponent } from '../table-column-filter-constraint/table-column-filter-constraint.component';
+import { Subscription } from 'rxjs';
 
 /**
  * TableColumnFilterComponent is an internal filter component in table and treetable.
@@ -198,7 +199,8 @@ export class TableColumnFilterComponent implements OnInit, OnDestroy {
   @ViewChild('columnFilterMenu')
   columnFilterMenu!: CpsMenuComponent;
 
-  _tableInstance: Table | TreeTable;
+  private _tableInstance: Table | TreeTable;
+  private _onFilterSub?: Subscription;
 
   isFilterApplied = false;
 
@@ -219,9 +221,11 @@ export class TableColumnFilterComponent implements OnInit, OnDestroy {
     if (this.matchModes.length > 0) {
       this.filterMatchModeOptions[this.type] = this.matchModes;
     }
-    this._tableInstance?.onFilter?.subscribe((value) =>
+
+    this._onFilterSub = this._tableInstance?.onFilter?.subscribe((value) =>
       this._updateFilterApplied(value)
     );
+
     if (!this._tableInstance.filters[<string>this.field]) {
       this._initFieldFilterConstraint();
     }
@@ -241,6 +245,10 @@ export class TableColumnFilterComponent implements OnInit, OnDestroy {
     );
   }
 
+  ngOnDestroy(): void {
+    this._onFilterSub?.unsubscribe();
+  }
+
   private _updateFilterApplied(value: any) {
     const fieldFilter = value.filters[<string>this.field];
     if (fieldFilter) {
@@ -259,7 +267,7 @@ export class TableColumnFilterComponent implements OnInit, OnDestroy {
   }
 
   private _initFieldFilterConstraint() {
-    const defaultMatchMode = this.getDefaultMatchMode();
+    const defaultMatchMode = this._getDefaultMatchMode();
     if (this._tableInstance instanceof Table) {
       this._tableInstance.filters[<string>this.field] = [
         {
@@ -276,6 +284,58 @@ export class TableColumnFilterComponent implements OnInit, OnDestroy {
     }
   }
 
+  private _getDefaultMatchMode(): string {
+    const getMatchMode = (val: CpsColumnFilterMatchMode) => {
+      if (this.type in this.filterMatchModeOptions) {
+        return this.filterMatchModeOptions[this.type].includes(val)
+          ? val
+          : this.filterMatchModeOptions[this.type][0];
+      } else {
+        return val;
+      }
+    };
+
+    switch (this.type) {
+      case 'text':
+        return getMatchMode(CpsColumnFilterMatchMode.STARTS_WITH);
+      case 'number':
+        return getMatchMode(CpsColumnFilterMatchMode.EQUALS);
+      case 'date':
+        return getMatchMode(CpsColumnFilterMatchMode.DATE_IS);
+      case 'category':
+        return this.singleSelection
+          ? CpsColumnFilterMatchMode.IS
+          : CpsColumnFilterMatchMode.IN;
+      default:
+        return getMatchMode(CpsColumnFilterMatchMode.CONTAINS);
+    }
+  }
+
+  private _getDefaultOperator(): string | undefined {
+    return this._tableInstance.filters
+      ? (<FilterMetadata[]>(
+          this._tableInstance.filters[<string>(<string>this.field)]
+        ))[0].operator
+      : this.operator;
+  }
+
+  private _updateSortIconColor(color: string) {
+    const unsortedUp =
+      this.elementRef?.nativeElement?.parentElement?.querySelector(
+        '.sort-unsorted-arrow-up'
+      );
+    if (unsortedUp) {
+      unsortedUp.style.borderBottomColor = color;
+    }
+    const unsortedDown =
+      this.elementRef?.nativeElement?.parentElement?.querySelector(
+        '.sort-unsorted-arrow-down'
+      );
+    if (unsortedDown) {
+      unsortedDown.style.borderTopColor = color;
+    }
+  }
+
   onCloseClick() {
     this.hide();
   }
@@ -291,8 +351,8 @@ export class TableColumnFilterComponent implements OnInit, OnDestroy {
   addConstraint() {
     (<FilterMetadata[]>this._tableInstance.filters[<string>this.field]).push({
       value: null,
-      matchMode: this.getDefaultMatchMode(),
-      operator: this.getDefaultOperator()
+      matchMode: this._getDefaultMatchMode(),
+      operator: this._getDefaultOperator()
     });
   }
 
@@ -316,41 +376,6 @@ export class TableColumnFilterComponent implements OnInit, OnDestroy {
     }
   }
 
-  getDefaultMatchMode(): string {
-    const getMatchMode = (val: CpsColumnFilterMatchMode) => {
-      if (this.type in this.filterMatchModeOptions) {
-        return this.filterMatchModeOptions[this.type].includes(val)
-          ? val
-          : this.filterMatchModeOptions[this.type][0];
-      } else {
-        return val;
-      }
-    };
-
-    switch (this.type) {
-      case 'text':
-        return getMatchMode(CpsColumnFilterMatchMode.STARTS_WITH);
-      case 'number':
-        return getMatchMode(CpsColumnFilterMatchMode.EQUALS);
-      case 'date':
-        return getMatchMode(CpsColumnFilterMatchMode.DATE_IS);
-      case 'category':
-        return this.singleSelection
-          ? CpsColumnFilterMatchMode.IS
-          : CpsColumnFilterMatchMode.IN;
-      default:
-        return getMatchMode(CpsColumnFilterMatchMode.CONTAINS);
-    }
-  }
-
-  getDefaultOperator(): string | undefined {
-    return this._tableInstance.filters
-      ? (<FilterMetadata[]>(
-          this._tableInstance.filters[<string>(<string>this.field)]
-        ))[0].operator
-      : this.operator;
-  }
-
   get fieldConstraints(): FilterMetadata[] | undefined | null {
     if (this._tableInstance instanceof Table) {
       return this._tableInstance.filters
@@ -424,32 +449,11 @@ export class TableColumnFilterComponent implements OnInit, OnDestroy {
     event.stopPropagation();
   }
 
-  private _updateSortIconColor(color: string) {
-    const unsortedUp =
-      this.elementRef?.nativeElement?.parentElement?.querySelector(
-        '.sort-unsorted-arrow-up'
-      );
-    if (unsortedUp) {
-      unsortedUp.style.borderBottomColor = color;
-    }
-    const unsortedDown =
-      this.elementRef?.nativeElement?.parentElement?.querySelector(
-        '.sort-unsorted-arrow-down'
-      );
-    if (unsortedDown) {
-      unsortedDown.style.borderTopColor = color;
-    }
-  }
-
   @HostListener('mouseenter') onMouseOver() {
     this._updateSortIconColor('var(--cps-color-line-dark)');
   }
 
   @HostListener('mouseleave') onMouseLeave() {
     this._updateSortIconColor('');
   }
-
-  ngOnDestroy(): void {
-    this._tableInstance?.onFilter?.unsubscribe();
-  }
 }
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
@@ -86,6 +86,7 @@
             [disabled]="additionalBtnOnSelectDisabled"
             color="prepared"
             type="borderless"
+            [icon]="additionalBtnOnSelectIcon"
             [size]="toolbarSize"
             (clicked)="onClickAdditionalBtnOnSelect()">
           </cps-button>
@@ -96,6 +97,7 @@
             [disabled]="actionBtnDisabled"
             color="prepared"
             type="outlined"
+            [icon]="actionBtnIcon"
             [size]="toolbarSize"
             (clicked)="onClickActionBtn()">
           </cps-button>
@@ -173,9 +175,9 @@
   <ng-template pTemplate="header" *ngIf="nestedHeaderTemplate" let-columns>
     <ng-container
       *ngTemplateOutlet="
-      nestedHeaderTemplate;
+        nestedHeaderTemplate;
         context: {
-          $implicit: columns,
+          $implicit: columns
         }
       "></ng-container>
   </ng-template>
@@ -192,7 +194,7 @@
           *ngTemplateOutlet="
             headerTemplate;
             context: {
-              $implicit: columns,
+              $implicit: columns
             }
           "></ng-container>
       </ng-container>

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
@@ -385,6 +385,12 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
    */
   @Input() additionalBtnOnSelectTitle = 'Select action';
 
+  /**
+   * AdditionalBtnOnSelect icon.
+   * @group Props
+   */
+  @Input() additionalBtnOnSelectIcon = '';
+
   /**
    * Determines whether additionalBtnOnSelect is disabled.
    * @group Props
@@ -403,6 +409,12 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
    */
   @Input() actionBtnTitle = 'Action';
 
+  /**
+   * Action button icon.
+   * @group Props
+   */
+  @Input() actionBtnIcon = '';
+
   /**
    * Determines whether actionBtn is disabled.
    * @group Props