feat: dialog service enchancements

onecx · Jun 17, 2024 · 7a5cf7c · 7a5cf7c
1 parent 85951d9
commit 7a5cf7c
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 4 deletions.
diff --git a/...al-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html b/...al-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.html
@@ -1,6 +1,8 @@
 <div>
-  <ng-container #container></ng-container>
-  <ng-content></ng-content>
+  <div class="buttonDialogScrollableContent">
+    <ng-container #container></ng-container>
+    <ng-content></ng-content>
+  </div>
   <div class="w-full flex justify-content-end mb-3">
     <button
       id="buttonDialogSecondaryButton"
@@ -11,6 +13,8 @@
       (click)="secondaryButtonAction()"
       [label]="dialogData.config.secondaryButtonDetails!.key | translate:dialogData.config.secondaryButtonDetails?.parameters"
       [disabled]="secondaryButtonDisabled$ | async"
+      [pTooltip]="dialogData.config.primaryButtonDetails!.tooltipKey ? (dialogData.config.primaryButtonDetails!.tooltipKey | translate) : null"
+      [tooltipPosition]="dialogData.config.primaryButtonDetails?.tooltipPosition ?? ''"
     ></button>
     <button
       id="buttonDialogPrimaryButton"
@@ -20,6 +24,8 @@
       (click)="primaryButtonAction()"
       [label]="dialogData.config.primaryButtonDetails!.key | translate:dialogData.config.primaryButtonDetails?.parameters"
       [disabled]="primaryButtonDisabled$ | async"
+      [pTooltip]="dialogData.config.secondaryButtonDetails!.tooltipKey ? (dialogData.config.secondaryButtonDetails!.tooltipKey | translate) : null"
+      [tooltipPosition]="dialogData.config.secondaryButtonDetails?.tooltipPosition ?? ''"
     ></button>
   </div>
 </div>
diff --git a/...al-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.scss b/...al-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.scss
@@ -0,0 +1,5 @@
+.buttonDialogScrollableContent {
+    overflow: auto;
+    max-height: 500px;
+    margin-bottom: 20px;
+}
diff --git a/...rtal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.ts b/...rtal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.ts
@@ -24,6 +24,7 @@ import {
 @Component({
   selector: 'ocx-button-dialog',
   templateUrl: './button-dialog.component.html',
+  styleUrls: ['./button-dialog.component.scss'],
 })
 export class ButtonDialogComponent implements OnInit {
   defaultPrimaryButtonDetails: ButtonDialogButtonDetails = {

diff --git a/...ore/components/button-dialog/dialog-message-content/dialog-message-content.component.html b/...ore/components/button-dialog/dialog-message-content/dialog-message-content.component.html
@@ -1,6 +1,6 @@
 <div class="dialogMessageContent">
-  <h2>
+  <div>
     <i *ngIf="icon !== ''" [class]="icon"></i>
     <span id="dialogMessage">{{message | translate:messageParameters}}</span>
-  </h2>
+  </div>
 </div>
diff --git a/libs/portal-integration-angular/src/lib/model/button-dialog.ts b/libs/portal-integration-angular/src/lib/model/button-dialog.ts
@@ -24,6 +24,8 @@ export interface ButtonDialogButtonDetails {
   key: string
   icon?: PrimeIcon
   parameters?: Record<string, unknown>
+  tooltipKey?: string
+  tooltipPosition?: 'right' | 'left' | 'top' | 'bottom' | string | undefined
 }
 
 export interface ButtonDialogConfig {

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
@@ -274,12 +274,16 @@ export class PortalDialogService {
    * const primaryButton = {
    *   key: 'OK_BUTTON',
    *   icon: PrimeIcons.CHECK
+   *   tooltipKey: 'OK_TOOLTIP',
+   *   tooltipPosition: 'bottom'
    * }
    *
    * // Refresh button with refresh icon
    * const secondaryButton = {
    *   key: 'REFRESH_BUTTON',
    *   icon: PrimeIcons.REFRESH
+   *   tooltipKey: 'REFRESH_TOOLTIP',
+   *   tooltipPosition: 'right'
    * }
    *
    * this.portalDialogService.openDialog('TITLE_KEY', 'WELCOME_MESSAGE', primaryButton, secondaryButton).subscribe((stateOnClose) => {