From c8c387eeaf1dc4fc26b82774922b116d9c04adfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=87etin?= <69278826+cetincakiroglu@users.noreply.github.com> Date: Wed, 13 Dec 2023 15:50:33 +0300 Subject: [PATCH] Fixed #14354 - DynamicDialog | Add templating support --- .../components/dynamicdialog/dialogservice.ts | 1 + .../dynamicdialog/dynamicdialog-config.ts | 49 ++++++++++++- .../components/dynamicdialog/dynamicdialog.ts | 69 ++++++++++++++----- .../dynamicdialog/dynamicdialogdoc.module.ts | 3 +- .../showcase/doc/dynamicdialog/exampledoc.ts | 34 +++++++-- src/app/showcase/doc/dynamicdialog/footer.ts | 18 +++++ .../doc/dynamicdialog/productlistdemo.ts | 9 +-- 7 files changed, 150 insertions(+), 33 deletions(-) create mode 100644 src/app/showcase/doc/dynamicdialog/footer.ts diff --git a/src/app/components/dynamicdialog/dialogservice.ts b/src/app/components/dynamicdialog/dialogservice.ts index a09834f8773..a06ddc24aac 100755 --- 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 index eb0f3a6fe5a..4e2dc8baf14 100755 --- 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 { * @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; + /** + * Template of the body. + * @group Props + */ + content?: ComponentRef; + /** + * Template of the footer. + * @group Props + */ + footer?: ComponentRef; + /** + * Template of the minimize icon. + * @group Props + */ + minimizeicon?: ComponentRef; + /** + * Template of the maximize icon. + * @group Props + */ + maximizeicon?: ComponentRef; + /** + * Template of the close icon. + * @group Props + */ + closeicon?: ComponentRef; } diff --git a/src/app/components/dynamicdialog/dynamicdialog.ts b/src/app/components/dynamicdialog/dynamicdialog.ts index 4863742c40c..1f364a560f9 100755 --- 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: '{ >
- {{ config.header }} -
- - -
+ + + {{ config.header }} +
+ + +
+
- + +
-
- {{ config.footer }} +
+ + {{ config.footer }} + +
@@ -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 index e0e1646c1f7..3869453375c 100644 --- 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 index 7f2108e2982..dde25566de9 100644 --- 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'; - -
- -
\` + \` }) 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: \` +
+ +
\` +}) +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 new file mode 100644 index 00000000000..f6c5f872c2e --- /dev/null +++ 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: ` +
+ +
+ ` +}) +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 index 5b1ad140cb8..6d6ed192c7e 100755 --- a/src/app/showcase/doc/dynamicdialog/productlistdemo.ts +++ b/src/app/showcase/doc/dynamicdialog/productlistdemo.ts @@ -32,10 +32,7 @@ import { InfoDemo } from './infodemo'; - -
- -
` + ` }) 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':