Add disabled state to table treetable action btns

AbsaOSS · Oct 26, 2023 · f6b1a06 · f6b1a06
1 parent f1b8cff
commit f6b1a06
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 0 deletions.
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
@@ -48,6 +48,7 @@
         <div>{{ toolbarTitle }}</div>
         <div *ngIf="showGlobalFilter" class="cps-table-tbar-global-filter">
           <cps-input
+            #globalFilterComp
             prefixIcon="search"
             [placeholder]="globalFilterPlaceholder"
             (valueChanged)="onFilterGlobal($event)"
@@ -64,6 +65,7 @@
           class="cps-table-tbar-btn-on-select">
           <cps-button
             label="Remove"
+            [disabled]="removeBtnOnSelectDisabled"
             color="prepared"
             type="borderless"
             icon="remove"
@@ -76,6 +78,7 @@
           class="cps-table-tbar-btn-on-select">
           <cps-button
             [label]="additionalBtnOnSelectTitle"
+            [disabled]="additionalBtnOnSelectDisabled"
             color="prepared"
             type="borderless"
             [size]="toolbarSize"
@@ -85,6 +88,7 @@
         <div *ngIf="showActionBtn" class="cps-table-tbar-action-btn">
           <cps-button
             [label]="actionBtnTitle"
+            [disabled]="actionBtnDisabled"
             color="prepared"
             type="outlined"
             [size]="toolbarSize"

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
@@ -123,12 +123,15 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
   @Input() globalFilterFields: string[] = [];
 
   @Input() showRemoveBtnOnSelect = true;
+  @Input() removeBtnOnSelectDisabled = false;
 
   @Input() showAdditionalBtnOnSelect = false;
   @Input() additionalBtnOnSelectTitle = 'Select action';
+  @Input() additionalBtnOnSelectDisabled = false;
 
   @Input() showActionBtn = false;
   @Input() actionBtnTitle = 'Action';
+  @Input() actionBtnDisabled = false;
 
   @Input() showExportBtn = false;
   @Input() exportFilename = 'download';
@@ -173,6 +176,9 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
   @ViewChild('primengTable', { static: true })
   primengTable!: Table;
 
+  @ViewChild('globalFilterComp')
+  globalFilterComp!: CpsInputComponent;
+
   selectedRows: any[] = [];
 
   virtualScrollItemSize = 0;
@@ -287,6 +293,8 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (this.loading) this.clearGlobalFilter();
+
     const dataChanges = changes?.data;
     if (
       dataChanges?.previousValue?.length !== dataChanges?.currentValue?.length
@@ -297,6 +305,10 @@ export class CpsTableComponent implements OnInit, AfterViewChecked, OnChanges {
     }
   }
 
+  clearGlobalFilter() {
+    this.globalFilterComp?.clear();
+  }
+
   onSelectionChanged(selection: any[]) {
     this.selectionChanged.emit(selection);
   }

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
@@ -50,6 +50,7 @@
         <div>{{ toolbarTitle }}</div>
         <div *ngIf="showGlobalFilter" class="cps-treetable-tbar-global-filter">
           <cps-input
+            #globalFilterComp
             prefixIcon="search"
             [placeholder]="globalFilterPlaceholder"
             (valueChanged)="onFilterGlobal($event)"
@@ -66,6 +67,7 @@
           class="cps-treetable-tbar-btn-on-select">
           <cps-button
             label="Remove"
+            [disabled]="removeBtnOnSelectDisabled"
             color="prepared"
             type="borderless"
             icon="remove"
@@ -78,6 +80,7 @@
           class="cps-treetable-tbar-btn-on-select">
           <cps-button
             [label]="additionalBtnOnSelectTitle"
+            [disabled]="additionalBtnOnSelectDisabled"
             color="prepared"
             type="borderless"
             [size]="toolbarSize"
@@ -87,6 +90,7 @@
         <div *ngIf="showActionBtn" class="cps-treetable-tbar-action-btn">
           <cps-button
             [label]="actionBtnTitle"
+            [disabled]="actionBtnDisabled"
             color="prepared"
             type="outlined"
             [size]="toolbarSize"

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
@@ -133,12 +133,15 @@ export class CpsTreeTableComponent
   @Input() globalFilterFields: string[] = [];
 
   @Input() showRemoveBtnOnSelect = true;
+  @Input() removeBtnOnSelectDisabled = false;
 
   @Input() showAdditionalBtnOnSelect = false;
   @Input() additionalBtnOnSelectTitle = 'Select action';
+  @Input() additionalBtnOnSelectDisabled = false;
 
   @Input() showActionBtn = false;
   @Input() actionBtnTitle = 'Action';
+  @Input() actionBtnDisabled = false;
 
   @Input() showDataReloadBtn = false;
 
@@ -180,6 +183,9 @@ export class CpsTreeTableComponent
   @ViewChild('primengTreeTable', { static: true })
   primengTreeTable!: TreeTable;
 
+  @ViewChild('globalFilterComp')
+  globalFilterComp!: CpsInputComponent;
+
   selectedColumns: { [key: string]: any }[] = [];
 
   rowOptions: { label: string; value: number }[] = [];
@@ -285,6 +291,8 @@ export class CpsTreeTableComponent
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (this.loading) this.clearGlobalFilter();
+
     const dataChanges = changes?.data;
     if (dataChanges?.previousValue !== dataChanges?.currentValue) {
       this.selectedRows = [];
@@ -297,6 +305,10 @@ export class CpsTreeTableComponent
       window.removeEventListener('resize', this._onWindowResize.bind(this));
   }
 
+  clearGlobalFilter() {
+    this.globalFilterComp?.clear();
+  }
+
   private _onWindowResize() {
     this.defScrollHeightPx = this.scrollableBody.clientHeight;
   }