From 39230d616b8a8b255a3594f3b46d0b391472cf0e Mon Sep 17 00:00:00 2001 From: markuczy <129275100+markuczy@users.noreply.github.com> Date: Tue, 10 Dec 2024 14:03:33 +0100 Subject: [PATCH] feat: allow to specify autofocus for buttons (#634) * feat: allow to specify autofocus for buttons * fix: fixed lint * fix: storybook * fix: reverted ngIf removal --- .../button-dialog.component.html | 10 +- .../button-dialog/button-dialog.component.ts | 35 ++++- .../src/lib/model/button-dialog.ts | 3 + .../services/portal-dialog-service.stories.ts | 121 +++++++++++++++++- .../src/lib/services/portal-dialog.service.ts | 11 +- 5 files changed, 171 insertions(+), 9 deletions(-) diff --git a/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html b/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html index ecab425b..b554ec51 100644 --- a/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html +++ b/libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html @@ -6,16 +6,17 @@
- +
- +
- + `, }) class ButtonDialogWithPortalDialogServiceComponent { @@ -88,6 +88,27 @@ export const CustomData = { }, } +export const CustomAutofocus = { + render: (args: any) => ({ + props: { + ...args, + }, + template: ` + + + `, + }), + args: { + title: 'Custom title', + messageOrComponent: 'Custom message', + primaryKey: 'Primary Button', + secondaryKey: 'Secondary Button', + extras: { + autoFocusButton: 'secondary', + }, + }, +} + export const CustomDataWithExtendedButtons = { render: (args: any) => ({ props: { @@ -153,3 +174,97 @@ export const ComponentDisplayed = { extras: {}, }, } + +@Component({ + selector: 'ocx-my-component-to-display', + template: `

Hello, its my component to display custom buttons

`, +}) +class ComponentToDisplayCustomButtonsComponent implements DialogCustomButtonsDisabled, OnInit { + customButtonEnabled: EventEmitter<{ id: string; enabled: boolean }> = new EventEmitter() + + ngOnInit(): void { + this.customButtonEnabled.emit({ id: 'custom1', enabled: true }) + } +} + +export const CustomButtons = { + render: (args: any) => ({ + props: { + ...args, + }, + template: ` + + + `, + }), + args: { + title: 'Custom title', + messageOrComponent: { + type: ComponentToDisplayCustomButtonsComponent, + }, + primaryKey: { + key: 'PRIMARY_KEY', + icon: PrimeIcons.BOOKMARK, + tooltipKey: 'TOOLTIP_KEY', + tooltipPosition: 'right', + }, + secondaryKey: { + key: 'SECONDARY_KEY', + icon: PrimeIcons.SEARCH, + tooltipKey: 'TOOLTIP_KEY', + tooltipPosition: 'left', + }, + extras: { + customButtons: [ + { + id: 'custom1', + alignment: 'right', + key: 'CUSTOM_KEY', + icon: 'pi pi-times', + }, + ], + }, + }, +} + +export const CustomButtonsWithAutofocus = { + render: (args: any) => ({ + props: { + ...args, + }, + template: ` + + + `, + }), + args: { + title: 'Custom title', + messageOrComponent: { + type: ComponentToDisplayCustomButtonsComponent, + }, + primaryKey: { + key: 'PRIMARY_KEY', + icon: PrimeIcons.BOOKMARK, + tooltipKey: 'TOOLTIP_KEY', + tooltipPosition: 'right', + }, + secondaryKey: { + key: 'SECONDARY_KEY', + icon: PrimeIcons.SEARCH, + tooltipKey: 'TOOLTIP_KEY', + tooltipPosition: 'left', + }, + extras: { + customButtons: [ + { + id: 'custom1', + alignment: 'right', + key: 'CUSTOM_KEY', + icon: 'pi pi-times', + }, + ], + autoFocusButton: 'custom', + autoFocusButtonCustomId: 'custom1', + }, + }, +} diff --git a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts index ef47ac77..88546314 100644 --- a/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts +++ b/libs/portal-integration-angular/src/lib/services/portal-dialog.service.ts @@ -211,6 +211,7 @@ type Component = unknown extends T inputs?: Record } +export type DialogButton = 'primary' | 'secondary' | 'custom' export type DialogStateButtonClicked = 'primary' | 'secondary' | 'custom' /** @@ -225,6 +226,8 @@ export type DialogState = { export type PortalDialogConfig = { showXButton?: boolean customButtons?: ButtonDialogCustomButtonDetails[] + autoFocusButton?: DialogButton + autoFocusButtonCustomId?: string ariaLabelledBy?: string width?: string height?: string @@ -250,7 +253,10 @@ export type PortalDialogConfig = { @Injectable({ providedIn: 'any' }) export class PortalDialogService { - constructor(private dialogService: DialogService, private translateService: TranslateService) {} + constructor( + private dialogService: DialogService, + private translateService: TranslateService + ) {} /** * @deprecated @@ -443,6 +449,8 @@ export class PortalDialogService { customButtons: dialogOptions.customButtons?.map( (button) => this.buttonDetailsOrTranslationKey(button) as ButtonDialogCustomButtonDetails ), + autoFocusButton: dialogOptions.autoFocusButton, + autoFocusButtonCustomId: dialogOptions.autoFocusButtonCustomId, }, componentData: componentToRender.inputs, } @@ -454,6 +462,7 @@ export class PortalDialogService { data: dynamicDialogDataConfig, closable: dialogOptions.showXButton && secondaryButtonTranslationKeyOrDetails !== undefined, ...dialogOptions, + focusOnShow: false, }).onClose }) )