Fixed #14354 - DynamicDialog | Add templating support

primefaces · Dec 13, 2023 · c8c387e · c8c387e
1 parent 7a07950
commit c8c387e
Show file tree

Hide file tree

Showing 7 changed files with 150 additions and 33 deletions.
diff --git a/src/app/components/dynamicdialog/dialogservice.ts b/src/app/components/dynamicdialog/dialogservice.ts
@@ -5,6 +5,7 @@ import { DynamicDialogInjector } from './dynamicdialog-injector';
 import { DynamicDialogConfig } from './dynamicdialog-config';
 import { DynamicDialogRef } from './dynamicdialog-ref';
 import { DOCUMENT } from '@angular/common';
+import { ObjectUtils } from 'primeng/utils';
 /**
  * Dynamic Dialog component methods.
  * @group Service

diff --git a/src/app/components/dynamicdialog/dynamicdialog-config.ts b/src/app/components/dynamicdialog/dynamicdialog-config.ts
@@ -1,3 +1,6 @@
+import { Component, TemplateRef } from '@angular/core';
+import { ComponentRef } from 'react';
+
 /**
  * Dialogs can be created dynamically with any component as the content using a DialogService.
  * @group Components
@@ -158,9 +161,51 @@ export class DynamicDialogConfig<T = any> {
      * @group Props
      */
     duplicate?: boolean;
-   /**
+    /**
      * Object literal to define widths per screen size.
      * @group Props
      */
-   breakpoints?: any;
+    breakpoints?: any;
+    /**
+     * Dialog templates.
+     * @group Props
+     */
+    templates?: DynamicDialogTemplates;
+}
+
+/**
+ * Defines valid templates in Dynamic Dialog.
+ * @group Templates
+ */
+export interface DynamicDialogTemplates {
+    /**
+     * Template of the header.
+     * @group Props
+     */
+    header?: ComponentRef<any>;
+    /**
+     * Template of the body.
+     * @group Props
+     */
+    content?: ComponentRef<any>;
+    /**
+     * Template of the footer.
+     * @group Props
+     */
+    footer?: ComponentRef<any>;
+    /**
+     * Template of the minimize icon.
+     * @group Props
+     */
+    minimizeicon?: ComponentRef<any>;
+    /**
+     * Template of the maximize icon.
+     * @group Props
+     */
+    maximizeicon?: ComponentRef<any>;
+    /**
+     * Template of the close icon.
+     * @group Props
+     */
+    closeicon?: ComponentRef<any>;
 }
diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts
@@ -18,8 +18,7 @@ import {
     Type,
     ViewChild,
     ViewEncapsulation,
-    ViewRef,
-    Input
+    ViewRef
 } from '@angular/core';
 import { PrimeNGConfig, SharedModule } from 'primeng/api';
 import { DomHandler } from 'primeng/dom';
@@ -72,23 +71,33 @@ const hideAnimation = animation([animate('{{transition}}', style({ transform: '{
             >
                 <div *ngIf="config.resizable" class="p-resizable-handle" style="z-index: 90;" (mousedown)="initResize($event)"></div>
                 <div #titlebar class="p-dialog-header" (mousedown)="initDrag($event)" *ngIf="config.showHeader === false ? false : true">
-                    <span class="p-dialog-title" [id]="ariaLabelledBy + '_title'">{{ config.header }}</span>
-                    <div class="p-dialog-header-icons">
-                        <button *ngIf="config.maximizable" type="button" [ngClass]="{ 'p-dialog-header-icon p-dialog-header-maximize p-link': true }" (click)="maximize()" (keydown.enter)="maximize()" tabindex="-1" pRipple>
-                            <span class="p-dialog-header-maximize-icon" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
-                            <WindowMaximizeIcon *ngIf="!maximized && !maximizeIcon" [styleClass]="'p-dialog-header-maximize-icon'" />
-                            <WindowMinimizeIcon *ngIf="maximized && !minimizeIcon" [styleClass]="'p-dialog-header-maximize-icon'" />
-                        </button>
-                        <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" role="button" (click)="hide()" (keydown.enter)="hide()" *ngIf="config.closable !== false" [attr.aria-label]="closeAriaLabel">
-                            <TimesIcon [styleClass]="'p-dialog-header-close-icon'" />
-                        </button>
-                    </div>
+                    <ng-container *ngComponentOutlet="headerTemplate"></ng-container>
+                    <ng-container *ngIf="!headerTemplate">
+                        <span class="p-dialog-title" [id]="ariaLabelledBy + '_title'">{{ config.header }}</span>
+                        <div class="p-dialog-header-icons">
+                            <button *ngIf="config.maximizable" type="button" [ngClass]="{ 'p-dialog-header-icon p-dialog-header-maximize p-link': true }" (click)="maximize()" (keydown.enter)="maximize()" tabindex="-1" pRipple>
+                                <span class="p-dialog-header-maximize-icon" *ngIf="!maximizeIconTemplate || !minimizeIconTemplate" [ngClass]="maximized ? minimizeIcon : maximizeIcon"></span>
+                                <WindowMaximizeIcon *ngIf="!maximized && !maximizeIcon && !maximizeIconTemplate" [styleClass]="'p-dialog-header-maximize-icon'" />
+                                <WindowMinimizeIcon *ngIf="maximized && !minimizeIcon && !minimizeIconTemplate" [styleClass]="'p-dialog-header-maximize-icon'" />
+                                <ng-container *ngComponentOutlet="maximizeIconTemplate"></ng-container>
+                                <ng-container *ngComponentOutlet="minimizeIconTemplate"></ng-container>
+                            </button>
+                            <button [ngClass]="'p-dialog-header-icon p-dialog-header-maximize p-link'" type="button" role="button" (click)="hide()" (keydown.enter)="hide()" *ngIf="config.closable !== false" [attr.aria-label]="closeAriaLabel">
+                                <TimesIcon [styleClass]="'p-dialog-header-close-icon'" *ngIf="!closeIconTemplate" />
+                                <ng-container *ngComponentOutlet="closeIconTemplate"></ng-container>
+                            </button>
+                        </div>
+                    </ng-container>
                 </div>
                 <div #content class="p-dialog-content" [ngStyle]="config.contentStyle">
-                    <ng-template pDynamicDialogContent></ng-template>
+                    <ng-template pDynamicDialogContent *ngIf="!contentTemplate"></ng-template>
+                    <ng-container *ngComponentOutlet="contentTemplate"></ng-container>
                 </div>
-                <div class="p-dialog-footer" *ngIf="config.footer">
-                    {{ config.footer }}
+                <div class="p-dialog-footer" *ngIf="config.footer || footerTemplate">
+                    <ng-container *ngIf="!footerTemplate">
+                        {{ config.footer }}
+                    </ng-container>
+                    <ng-container *ngComponentOutlet="footerTemplate"></ng-container>
                 </div>
             </div>
         </div>
@@ -216,6 +225,30 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
         return this.config.breakpoints;
     }
 
+    get footerTemplate() {
+        return this.config?.templates?.footer;
+    }
+
+    get headerTemplate() {
+        return this.config?.templates?.header;
+    }
+
+    get contentTemplate() {
+        return this.config?.templates?.content;
+    }
+
+    get minimizeIconTemplate() {
+        return this.config?.templates?.minimizeicon;
+    }
+
+    get maximizeIconTemplate() {
+        return this.config?.templates?.maximizeicon;
+    }
+
+    get closeIconTemplate() {
+        return this.config?.templates?.closeicon;
+    }
+
     constructor(
         @Inject(DOCUMENT) private document: Document,
         @Inject(PLATFORM_ID) private platformId: any,
@@ -227,8 +260,8 @@ export class DynamicDialogComponent implements AfterViewInit, OnDestroy {
         public primeNGConfig: PrimeNGConfig,
         @SkipSelf() @Optional() private parentDialog: DynamicDialogComponent
     ) {}
-    
-    ngOnInit(){
+
+    ngOnInit() {
         if (this.breakpoints) {
             this.createStyle();
         }

diff --git a/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts b/src/app/showcase/doc/dynamicdialog/dynamicdialogdoc.module.ts
@@ -19,9 +19,10 @@ import { CloseDoc } from './closedoc';
 import { TagModule } from 'primeng/tag';
 import { InfoDemo } from './infodemo';
 import { CustomizationDoc } from './customizationdoc';
+import { Footer } from './footer';
 @NgModule({
     imports: [CommonModule, AppCodeModule, RouterModule, FormsModule, TagModule, DialogModule, ButtonModule, AppDocModule, ToastModule, TableModule],
-    declarations: [OpenDoc, ImportDoc, StyleDoc, ExampleDoc, ProductListDemo, UsageDoc, PassingDataDoc, CloseDoc, StyleDoc, InfoDemo, CustomizationDoc],
+    declarations: [OpenDoc, Footer, ImportDoc, StyleDoc, ExampleDoc, ProductListDemo, UsageDoc, PassingDataDoc, CloseDoc, StyleDoc, InfoDemo, CustomizationDoc],
     exports: [AppDocModule]
 })
 export class DynamicDialogDocModule {}
diff --git a/src/app/showcase/doc/dynamicdialog/exampledoc.ts b/src/app/showcase/doc/dynamicdialog/exampledoc.ts
@@ -3,6 +3,7 @@ import { MessageService } from 'primeng/api';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Code } from '../../domain/code';
 import { ProductListDemo } from './productlistdemo';
+import { Footer } from './footer';
 
 @Component({
     selector: 'dynamic-dialog-example-demo',
@@ -34,6 +35,9 @@ export class ExampleDoc implements OnDestroy {
             breakpoints: {
                 '960px': '75vw',
                 '640px': '90vw'
+            },
+            templates: {
+                footer: Footer
             }
         });
 
@@ -75,6 +79,7 @@ import { MessageService } from 'primeng/api';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { Product } from '../../domain/product';
 import { ProductListDemo } from './productlistdemo';
+import { Footer } from './footer';
 
 @Component({
     selector: 'dynamic-dialog-example-demo',
@@ -95,6 +100,9 @@ export class DynamicDialogExampleDemo implements OnDestroy {
             breakpoints: {
                 '960px': '75vw',
                 '640px': '90vw'
+            },
+            templates: {
+                footer: Footer
             }
         });
 
@@ -183,10 +191,7 @@ import { InfoDemo } from './infodemo';
                     </td>
                 </tr>
             </ng-template>
-        </p-table>
-        <div class="flex w-full justify-content-end mt-3">
-            <p-button type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })"></p-button>
-        </div>\`
+        </p-table>\`
 })
 export class ProductListDemo implements OnInit {
     products: Product[];
@@ -269,6 +274,27 @@ export class InfoDemo {
             this.ref.close();
         }
     }
+}`
+        },
+        {
+            path: 'src/app/demo/footer.ts',
+            name: 'Footer',
+            content: `import { Component } from '@angular/core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+@Component({
+    selector: 'footer',
+    template:  \`
+        <div class="flex w-full justify-content-end mt-3">
+            <p-button type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })"></p-button>
+        </div> \`
+})
+export class Footer {
+    constructor(public ref: DynamicDialogRef) {}
+
+    closeDialog(data) {
+        this.ref.close(data);
+    }
 }`
         }
     ];

diff --git a/src/app/showcase/doc/dynamicdialog/footer.ts b/src/app/showcase/doc/dynamicdialog/footer.ts
@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { DynamicDialogRef } from 'primeng/dynamicdialog';
+
+@Component({
+    selector: 'footer',
+    template: `
+        <div class="flex w-full justify-content-end mt-3">
+            <p-button type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })"></p-button>
+        </div>
+    `
+})
+export class Footer {
+    constructor(public ref: DynamicDialogRef) {}
+
+    closeDialog(data) {
+        this.ref.close(data);
+    }
+}
diff --git a/src/app/showcase/doc/dynamicdialog/productlistdemo.ts b/src/app/showcase/doc/dynamicdialog/productlistdemo.ts
@@ -32,10 +32,7 @@ import { InfoDemo } from './infodemo';
                     </td>
                 </tr>
             </ng-template>
-        </p-table>
-        <div class="flex w-full justify-content-end mt-3">
-            <p-button type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })"></p-button>
-        </div>`
+        </p-table>`
 })
 export class ProductListDemo implements OnInit {
     products: Product[];
@@ -61,10 +58,6 @@ export class ProductListDemo implements OnInit {
         });
     }
 
-    closeDialog(data) {
-        this.ref.close(data);
-    }
-
     getSeverity(status: string) {
         switch (status) {
             case 'INSTOCK':