Merge pull request #14060 from mtsymbarov-del/fix/table-widget

Added "Show all" option for the Columns to Display

ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html

@@ -17,8 +17,16 @@
 -->
 <div class="mat-content mat-padding flex flex-col">
   <label class="tb-title" translate>entity.columns-to-display</label>
-  <mat-checkbox [(ngModel)]="column.display" *ngFor="let column of (columns | selectableColumns)"
-                (ngModelChange)="update()">
-    {{ column.title }}
+  <mat-checkbox
+    [checked]="allColumnsVisible"
+    [indeterminate]="someColumnsVisible"
+    (change)="toggleAllColumns($event)">
+    {{'entity.show-all-columns' | translate}}
   </mat-checkbox>
+  <mat-divider/>
+  @for (column of columns; track column.def) {
+    <mat-checkbox [(ngModel)]="column.display" (ngModelChange)="update()">
+      {{ column.title }}
+    </mat-checkbox>
+  }
 </div>

ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts

@@ -15,6 +15,8 @@
 ///
 
 import { Component, Inject, InjectionToken } from '@angular/core';
+import { isDefinedAndNotNull } from '@core/utils';
+import { SelectableColumnsPipe } from '@shared/public-api';
 import { DisplayColumn } from '@home/components/widget/lib/table-widget.models';
 
 export const DISPLAY_COLUMNS_PANEL_DATA = new InjectionToken<any>('DisplayColumnsPanelData');
@@ -33,8 +35,28 @@ export class DisplayColumnsPanelComponent {
 
   columns: DisplayColumn[];
 
-  constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData) {
-    this.columns = this.data.columns;
+  constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData,
+              private selectableColumnsPipe: SelectableColumnsPipe ) {
+    this.columns = this.selectableColumnsPipe.transform(this.data.columns);
+  }
+
+  get allColumnsVisible(): boolean {
+    return isDefinedAndNotNull(this.columns) && this.columns.every(column => column.display);
+  }
+
+  get someColumnsVisible(): boolean {
+    const filtredColumns = this.columns.filter(item => item.display);
+    return filtredColumns.length !== 0 && this.columns.length !== filtredColumns.length;
+  }
+
+  public toggleAllColumns(event: any): void {
+    const isChecked = event.checked;
+    
+    this.columns.forEach(column => {
+      column.display = isChecked;
+    });
+    
+    this.update();
   }
 
   public update() {

ui-ngx/src/app/shared/shared.module.ts

@@ -237,6 +237,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
 @NgModule({
   providers: [
     DatePipe,
+    SelectableColumnsPipe,
     MillisecondsToTimeStringPipe,
     EnumToArrayPipe,
     HighlightPipe,

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -2770,6 +2770,7 @@
         "details": "Entity details",
         "no-entities-prompt": "No entities found",
         "no-data": "No data to display",
+        "show-all-columns":"Show All",
         "columns-to-display": "Columns to Display",
         "type-api-usage-state": "API Usage State",
         "type-edge": "Edge",