Skip to content

Commit 2f30c5a

Browse files
pavel-s-epamsobolevskaiamichelu89
authored
feat: Passing custom toolbar actions dynamically (#125)
* feat: Create an external link template for a table column * fix: Add translation * fix: Update EsmfTableCellLinkComponent * Add a possibility to dynamically provide custom toolbar actions for a table Signed-off-by: Pavel Shalamkov <[email protected]> --------- Signed-off-by: Pavel Shalamkov <[email protected]> Co-authored-by: Evgeniya Sobolevskaya <[email protected]> Co-authored-by: Michele Santoro <[email protected]>
1 parent ed0a1c4 commit 2f30c5a

File tree

6 files changed

+43
-28
lines changed

6 files changed

+43
-28
lines changed

‎src/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.html.template‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,10 @@
145145

146146
<span data-test="spacer" class="spacer"></span>
147147

148+
<span #projectedToolbarActions>
149+
<ng-content select="[toolbarActions]"></ng-content>
150+
</span>
151+
148152
<% if (options.customCommandBarActions.length > 0) { %>
149153
<% for(let action of options.customCommandBarActions) { %>
150154
<button data-test="toolbar-custom-action-button" data-resp="custom-action-<%= action %>" *ngIf="!isInCollapsedMenu('custom-action-<%= action %>')" mat-icon-button #toolbarComp (click)="executeCustomCommandBarAction('<%= spinalCaseFunc(action) %>')" attr.aria-label="{{ '<%= options.versionedAccessPrefix %><%= spinalCaseFunc(action) %>.customCommandBarAction' | transloco }}">
@@ -161,18 +165,18 @@
161165
<% } %>
162166
<% } %>
163167

164-
<button data-test="refresh-data-button-<%= options.componentType %>" mat-icon-button data-resp="refresh-data-button" *ngIf="!isInCollapsedMenu('refresh-data-button')" #toolbarComp aria-label="Refresh table" (click)="triggerReloadFilter()"
168+
<button data-test="refresh-data-button-<%= options.componentType %>" mat-icon-button data-resp="refresh-data-button" *ngIf="!isInCollapsedMenu('refresh-data-button')" #toolbarComp aria-label="Refresh table" [disabled]="!isToolbarActionsEnabled" (click)="triggerReloadFilter()"
165169
[matTooltip]="'tableActions.refreshData' | transloco">
166170
<mat-icon data-test="refresh-data-icon" class="material-icons">autorenew</mat-icon>
167171
</button>
168172

169-
<button data-test="export-data-button-<%= options.componentType %>" mat-icon-button data-resp="export-data-button" *ngIf="!isInCollapsedMenu('export-data-button')" #toolbarComp aria-label="Download data as CSV" (click)="triggerExportToCsv()"
173+
<button data-test="export-data-button-<%= options.componentType %>" mat-icon-button data-resp="export-data-button" *ngIf="!isInCollapsedMenu('export-data-button')" #toolbarComp aria-label="Download data as CSV" [disabled]="!isToolbarActionsEnabled" (click)="triggerExportToCsv()"
170174
[matTooltip]="'tableActions.exportData' | transloco">
171175
<mat-icon data-test="export-data-icon" class="material-icons">file_download</mat-icon>
172176
</button>
173177

174178
<% if (options.componentType === 'table' && options.hasSearchBar) { %>
175-
<button data-test="open-configuration" data-resp="open-configuration-button" *ngIf="!isInCollapsedMenu('open-configuration-button')" #toolbarComp mat-icon-button aria-label="Open configuration" [matMenuTriggerFor]="configurationMenu" (menuOpened)="triggerInitOpenedConfigurationDialog()"
179+
<button data-test="open-configuration" data-resp="open-configuration-button" *ngIf="!isInCollapsedMenu('open-configuration-button')" #toolbarComp mat-icon-button aria-label="Open configuration" [matMenuTriggerFor]="configurationMenu" [disabled]="!isToolbarActionsEnabled" (menuOpened)="triggerInitOpenedConfigurationDialog()"
176180
[matTooltip]="'tableActions.openConfig' | transloco">
177181
<mat-icon data-test="open-configuration-icon" class="material-icons">settings </mat-icon>
178182
</button>
@@ -289,7 +293,9 @@
289293
<% } %>
290294
<% } %>
291295

292-
<div mat-menu-item *ngIf="isInCollapsedMenu('refresh-data-button')" (click)="triggerReloadFilter()">
296+
<ng-content select="[toolbarCollapsedActions]"></ng-content>
297+
298+
<div mat-menu-item *ngIf="isInCollapsedMenu('refresh-data-button')" [disabled]="!isToolbarActionsEnabled" (click)="triggerReloadFilter()">
293299
<mat-icon data-test="refresh-data-icon-collapsed" class="material-icons"
294300
>autorenew</mat-icon>
295301
<span>Refresh</span>
@@ -298,6 +304,7 @@
298304
<div
299305
mat-menu-item
300306
*ngIf="isInCollapsedMenu('export-data-button')"
307+
[disabled]="!isToolbarActionsEnabled"
301308
(click)="triggerExportToCsv()"
302309
data-test="export-data-button-<% if (options.componentType === 'table') { %>table<% } else { %>card<% } %>-collapsed">
303310
<mat-icon data-test="export-data-icon-collapsed" class="material-icons"
@@ -309,6 +316,7 @@
309316
<div
310317
mat-menu-item
311318
*ngIf="isInCollapsedMenu('open-configuration-button')"
319+
[disabled]="!isToolbarActionsEnabled"
312320
(click)="openSettingsFromCollapsed()"
313321
>
314322
<mat-icon data-test="open-configuration-icon-collapsed" class="material-icons"

‎src/ng-generate/components/shared/generators/components/command-bar/files/__name@dasherize__-command-bar.component.ts.template‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ import { MatDialog } from '@angular/material/dialog';
2727
})
2828
export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
2929
@Input() isMultipleSelectionEnabled = true;
30+
@Input() isToolbarActionsEnabled = true;
3031
@Input() selection = new SelectionModel<any>(this.isMultipleSelectionEnabled, []);
3132
@Input() totalItems = 0;
3233
@Input() searchFocused = false;
@@ -65,6 +66,8 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
6566
componentsContainer!: ElementRef;
6667
@ViewChildren('toolbarComp', { read: ElementRef })
6768
components!: QueryList<ElementRef>;
69+
@ViewChild('projectedToolbarActions', {read: ElementRef, static: false})
70+
projectedToolbarActions!: ElementRef;
6871
hiddenComponents: any[] = [];
6972
initialCompWidths : any[]= [];
7073

@@ -126,13 +129,21 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
126129
<% } %>
127130

128131
ngAfterViewInit(): void {
129-
const compWidths: any[] = this.components
130-
.toArray()
131-
.map((comp) =>
132-
( {width: comp.nativeElement.clientWidth, id: comp.nativeElement.getAttribute('data-resp') }));
132+
const children = Array.from<HTMLElement>(this.projectedToolbarActions.nativeElement.children);
133+
const projectedCompWidths: any[] = children.map(comp => ({
134+
width: comp.clientWidth,
135+
id: comp.getAttribute('data-resp')
136+
}));
133137

134-
if(this.initialCompWidths.length === 0){
135-
this.initialCompWidths = compWidths;
138+
const compWidths: any[] = this.components
139+
.toArray()
140+
.map((comp) => ({width: comp.nativeElement.clientWidth, id: comp.nativeElement.getAttribute('data-resp')}));
141+
142+
if (this.initialCompWidths.length === 0) {
143+
const widths = [...compWidths];
144+
const buttonsStartIndex = widths.findIndex(w => w.id?.includes('button'));
145+
widths.splice(buttonsStartIndex, 0, ...projectedCompWidths);
146+
this.initialCompWidths = widths;
136147
};
137148

138149
this.updateToolbarComponentsVisibility();
@@ -150,8 +161,8 @@ export class <%= classify(name) %>CommandBarComponent implements AfterViewInit {
150161

151162
for (let i = 0; i < this.initialCompWidths.length; i++) {
152163
const buttonWidth = this.initialCompWidths[i];
153-
// 70 is for the width of the collapsed menu width
154-
if (usedWidth + buttonWidth.width + 70 >= containerWidth) {
164+
// 76 is for the width of the collapsed menu width
165+
if (usedWidth + buttonWidth.width + 76 >= containerWidth) {
155166
this.hiddenComponents.push(buttonWidth.id);
156167
} else {
157168
usedWidth += buttonWidth.width;

‎src/ng-generate/components/shared/methods/generation/extended-table.html.template‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@
8080
<% } else { %>
8181
<esmf-table-cell
8282
[value]="<%= cellContent %>"
83-
[description]="'<%= propertyLocaleKeyPath %>.description' | transloco"
83+
[description]="'<%= propertyLocaleKeyPath %>.description' | transloco"
8484
<% if(options.hasSearchBar) { %>
8585
[configs]="configs"
8686
[highlightString]="highlightString"

‎src/ng-generate/components/table/generators/components/table-cell/files/__name@dasherize__.component.html.template‎

Lines changed: 1 addition & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,4 @@
1-
<!--
2-
* Copyright (c) 2024 Robert Bosch Manufacturing Solutions GmbH
3-
*
4-
* See the AUTHORS file(s) distributed with this work for
5-
* additional information regarding authorship.
6-
*
7-
* This Source Code Form is subject to the terms of the Mozilla Public
8-
* License, v. 2.0. If a copy of the MPL was not distributed with this
9-
* file, You can obtain one at https://mozilla.org/MPL/2.0/.
10-
*
11-
* SPDX-License-Identifier: MPL-2.0
12-
-->
13-
<!-- <%= options.generationDisclaimerText %> -->
14-
1+
<!-- <%= options.generationDisclaimerText %> -->
152
<div class="cell-content"
163
[highlight]="highlightString"
174
[highlightSource]="value"

‎src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.html.template‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,14 @@
2222
<% if (options.customCommandBarActions.length > 0) { %>
2323
(customCommandBarActionEvent)="handleCustomCommandBarActionEvent($event.action)"
2424
<% } %>
25-
></<%= dasherize(name) %>-command-bar>
25+
>
26+
<ng-container toolbarActions>
27+
<ng-content select="[customToolbarActions]"></ng-content>
28+
</ng-container>
29+
<ng-container toolbarCollapsedActions>
30+
<ng-content select="[customToolbarCollapsedActions]"></ng-content>
31+
</ng-container>
32+
</<%= dasherize(name) %>-command-bar>
2633
<% } %>
2734
<ng-container *ngIf="!!customTemplate && !dataSource.data.length">
2835
<ng-container *ngTemplateOutlet="loadCustomTemplate()"></ng-container>

‎src/ng-generate/components/table/generators/components/table/files/__name@dasherize__.component.ts.template‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,7 @@ import {SelectionModel} from '@angular/cdk/collections';
6262
import { TranslocoService } from '@jsverse/transloco';
6363
import {PaginatorSelectConfigInjector} from "<% if (options.enableVersionSupport) { %>../<% } %>../../services/paginator-select-config.provider";
6464
import {JSSdkLocalStorageService} from "<% if (options.enableVersionSupport) { %>../<% } %>../../services/storage.service";
65+
import {<%= classify(name) %>CommandBarComponent} from "./<%= dasherize(name) %>-command-bar.component";
6566
import {<%= classify(name) %>ColumnMenuComponent} from './<%= dasherize(name) %>-column-menu.component';
6667

6768
<% if (options.hasSearchBar) { %>
@@ -198,6 +199,7 @@ export class <%= classify(name) %>Component implements OnInit, AfterViewInit, Af
198199
<% } %>
199200

200201
@ViewChild('searchInput') searchInput!: ElementRef;
202+
@ViewChild(<%= classify(name) %>CommandBarComponent) commandBar: <%= classify(name) %>CommandBarComponent;
201203

202204
@HostBinding("attr.style")
203205
public get valueAsStyle(): any {

0 commit comments

Comments
 (0)