From f6ceae1d1e958263215b730f7c208dc691d49c80 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Thu, 25 Sep 2025 10:37:21 +0300 Subject: [PATCH 1/4] added show all/hide all button to table columns --- .../lib/display-columns-panel.component.html | 7 +++++ .../lib/display-columns-panel.component.ts | 26 +++++++++++++++++++ .../assets/locale/locale.constant-en_US.json | 1 + 3 files changed, 34 insertions(+) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html index 65d647993f..5bcd9f0711 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html @@ -17,6 +17,13 @@ -->
+ + {{'entity.show-all-columns' | translate}} + + {{ column.title }} diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts index 8c5f13de69..deb46408e8 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts @@ -37,6 +37,32 @@ export class DisplayColumnsPanelComponent { this.columns = this.data.columns; } + get selectableColumns(): DisplayColumn[] { + return this.columns.filter(column => column.selectable); + } + + get allColumnsVisible(): boolean { + const selectableColumns = this.selectableColumns; + return selectableColumns.length > 0 && selectableColumns.every(column => column.display); + } + + get someColumnsVisible(): boolean { + const selectableColumns = this.selectableColumns; + const visibleCount = selectableColumns.filter(column => column.display).length; + return visibleCount > 0 && visibleCount < selectableColumns.length; + } + + public toggleAllColumns(event: any): void { + const isChecked = event.checked; + const selectableColumns = this.selectableColumns; + + selectableColumns.forEach(column => { + column.display = isChecked; + }); + + this.update(); + } + public update() { this.data.columnsUpdated(this.columns); } diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json index 9ee555a838..0e3c815ebd 100644 --- a/ui-ngx/src/assets/locale/locale.constant-en_US.json +++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json @@ -2680,6 +2680,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", From e4c807bad4cf72a5b0d5624a9d064a71eac31f31 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Thu, 25 Sep 2025 15:54:22 +0300 Subject: [PATCH 2/4] did some reworks --- .../lib/display-columns-panel.component.html | 9 +++++---- .../lib/display-columns-panel.component.ts | 20 ++++++++----------- 2 files changed, 13 insertions(+), 16 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html index 5bcd9f0711..d1142d08ed 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html +++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.html @@ -24,8 +24,9 @@ {{'entity.show-all-columns' | translate}} - - {{ column.title }} - + @for (column of columns; track column.def) { + + {{ column.title }} + + }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts index deb46408e8..d898cdb5a9 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts +++ b/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 '@app/core/utils'; +import { SelectableColumnsPipe } from '@app/shared/pipe/selectable-columns.pipe'; import { DisplayColumn } from '@home/components/widget/lib/table-widget.models'; export const DISPLAY_COLUMNS_PANEL_DATA = new InjectionToken('DisplayColumnsPanelData'); @@ -34,29 +36,23 @@ export class DisplayColumnsPanelComponent { columns: DisplayColumn[]; constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData) { - this.columns = this.data.columns; - } - - get selectableColumns(): DisplayColumn[] { - return this.columns.filter(column => column.selectable); + const selectableColumnsPipe = new SelectableColumnsPipe(); + this.columns = selectableColumnsPipe.transform(this.data.columns); } get allColumnsVisible(): boolean { - const selectableColumns = this.selectableColumns; - return selectableColumns.length > 0 && selectableColumns.every(column => column.display); + return isDefinedAndNotNull(this.columns) && this.columns.every(column => column.display); } get someColumnsVisible(): boolean { - const selectableColumns = this.selectableColumns; - const visibleCount = selectableColumns.filter(column => column.display).length; - return visibleCount > 0 && visibleCount < selectableColumns.length; + 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; - const selectableColumns = this.selectableColumns; - selectableColumns.forEach(column => { + this.columns.forEach(column => { column.display = isChecked; }); From b77274baefe02c659d88e714a38e8dafd9475848 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Tue, 30 Sep 2025 13:17:58 +0300 Subject: [PATCH 3/4] add missing provider --- .../widget/lib/display-columns-panel.component.ts | 10 +++++----- ui-ngx/src/app/shared/shared.module.ts | 1 + 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts index d898cdb5a9..87ca4ee4fc 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts @@ -15,8 +15,8 @@ /// import { Component, Inject, InjectionToken } from '@angular/core'; -import { isDefinedAndNotNull } from '@app/core/utils'; -import { SelectableColumnsPipe } from '@app/shared/pipe/selectable-columns.pipe'; +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('DisplayColumnsPanelData'); @@ -35,9 +35,9 @@ export class DisplayColumnsPanelComponent { columns: DisplayColumn[]; - constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData) { - const selectableColumnsPipe = new SelectableColumnsPipe(); - this.columns = selectableColumnsPipe.transform(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 { diff --git a/ui-ngx/src/app/shared/shared.module.ts b/ui-ngx/src/app/shared/shared.module.ts index 9fd6e4a71e..619c64cfb1 100644 --- a/ui-ngx/src/app/shared/shared.module.ts +++ b/ui-ngx/src/app/shared/shared.module.ts @@ -236,6 +236,7 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) @NgModule({ providers: [ DatePipe, + SelectableColumnsPipe, MillisecondsToTimeStringPipe, EnumToArrayPipe, HighlightPipe, From b63c2e3214a52f62f949eda17f6aa34b29035103 Mon Sep 17 00:00:00 2001 From: Maksym Tsymbarov Date: Mon, 6 Oct 2025 16:07:15 +0300 Subject: [PATCH 4/4] add spaces --- .../components/widget/lib/display-columns-panel.component.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts index 87ca4ee4fc..4ef00bd575 100644 --- a/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts +++ b/ui-ngx/src/app/modules/home/components/widget/lib/display-columns-panel.component.ts @@ -36,7 +36,7 @@ export class DisplayColumnsPanelComponent { columns: DisplayColumn[]; constructor(@Inject(DISPLAY_COLUMNS_PANEL_DATA) public data: DisplayColumnsPanelData, - private selectableColumnsPipe:SelectableColumnsPipe ) { + private selectableColumnsPipe: SelectableColumnsPipe ) { this.columns = this.selectableColumnsPipe.transform(this.data.columns); }