Merge pull request #13815 from anlampe/toolbar-accept-documented-temp…

…late-names Toolbar: Accept documented template names #13814
primefaces · Oct 11, 2023 · 32ee09b · 32ee09b · vercel · Oct 11, 2023
2 parents eb51e57 + 7f61c40
commit 32ee09b
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 2 deletions.
diff --git a/src/app/components/toolbar/toolbar.ts b/src/app/components/toolbar/toolbar.ts
@@ -62,10 +62,12 @@ export class Toolbar implements AfterContentInit, BlockableUI {
     ngAfterContentInit() {
         (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
             switch (item.getType()) {
+                case 'start':
                 case 'left':
                     this.startTemplate = item.template;
                     break;
 
+                case 'end':
                 case 'right':
                     this.endTemplate = item.template;
                     break;

diff --git a/src/app/showcase/doc/toolbar/basicdoc.ts b/src/app/showcase/doc/toolbar/basicdoc.ts
@@ -6,7 +6,7 @@ import { Code } from '../../domain/code';
     selector: 'basic-doc',
     template: ` <section class="py-4">
         <app-docsectiontext [title]="title" [id]="id">
-            <p>Toolbar provides <i>start</i>, <i>center</i> and <i>end</i> templates to place content at these sections.</p>
+            <p>Toolbar is a grouping component for buttons and other content. Its content can be placed inside the <i>start</i>, <i>center</i> and <i>end</i> sections.</p>
         </app-docsectiontext>
         <div class="card">
             <p-toolbar>

diff --git a/src/app/showcase/doc/toolbar/templatedoc.ts b/src/app/showcase/doc/toolbar/templatedoc.ts
@@ -0,0 +1,136 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+import { Code } from '../../domain/code';
+
+@Component({
+    selector: 'template-doc',
+    template: ` <section class="py-3">
+        <app-docsectiontext [title]="title" [id]="id">
+            <p>Content can also be placed using the  <i>start</i>, <i>center</i> and <i>end</i> templates.</p>
+        </app-docsectiontext>
+        <div class="card">
+            <p-toolbar>
+                <ng-template pTemplate="start">
+                    <p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
+                    <p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
+                    <i class="p-toolbar-separator pi pi-bars mr-2" style="vertical-align: middle"></i>
+                    <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"></p-splitButton>
+                </ng-template>
+                <ng-template pTemplate="center">
+                    <span class="text-primary font-semibold text-xl">Center</span>
+                </ng-template>
+                <ng-template pTemplate="end">
+                    <p-button icon="pi pi-search" class="mr-2"></p-button>
+                    <p-button icon="pi pi-calendar" styleClass="p-button-success mr-2"></p-button>
+                    <p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
+                </ng-template>
+            </p-toolbar>
+        </div>
+        <app-code [code]="code" selector="toolbar-template-demo"></app-code>
+    </section>`
+})
+export class TemplateDoc implements OnInit {
+    @Input() id: string;
+
+    @Input() title: string;
+
+    items: MenuItem[] | undefined;
+
+    ngOnInit() {
+        this.items = [
+            {
+                label: 'Update',
+                icon: 'pi pi-refresh'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times'
+            },
+            {
+                label: 'Angular',
+                icon: 'pi pi-external-link',
+                url: 'http://angular.io'
+            },
+            {
+                label: 'Router',
+                icon: 'pi pi-upload',
+                routerLink: '/fileupload'
+            }
+        ];
+    }
+
+    code: Code = {
+        basic: `
+<p-toolbar>
+    <ng-template pTemplate="start">
+        <p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
+        <p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
+        <i class="p-toolbar-separator pi pi-bars mr-2" style="vertical-align: middle"></i>
+        <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"></p-splitButton>
+    </ng-template>
+    <ng-template pTemplate="center">
+        <span class="text-primary font-semibold text-xl">Center</span>
+    </ng-template>
+    <ng-template pTemplate="end">
+        <p-button icon="pi pi-search" class="mr-2"></p-button>
+        <p-button icon="pi pi-calendar" styleClass="p-button-success mr-2"></p-button>
+        <p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
+    </ng-template>
+</p-toolbar>`,
+
+        html: `
+<ng-template class="card">
+    <p-toolbar>
+        <ng-template pTemplate="start">
+            <p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
+            <p-button label="Upload" icon="pi pi-upload" styleClass="p-button-success"></p-button>
+            <i class="p-toolbar-separator pi pi-bars mr-2" style="vertical-align: middle"></i>
+            <p-splitButton label="Save" icon="pi pi-check" [model]="items" styleClass="p-button-warning"></p-splitButton>
+        </ng-template>
+        <ng-template pTemplate="center">
+            <span class="text-primary font-semibold text-xl">Center</span>
+        </ng-template>
+        <ng-template pTemplate="end">
+            <p-button icon="pi pi-search" class="mr-2"></p-button>
+            <p-button icon="pi pi-calendar" styleClass="p-button-success mr-2"></p-button>
+            <p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
+        </ng-template>
+    </p-toolbar>
+</div>`,
+
+        typescript: `
+import { Component, OnInit } from '@angular/core';
+import { MenuItem } from 'primeng/api';
+
+@Component({
+    selector: 'toolbar-template-demo',
+    templateUrl: './toolbar-template-demo.html'
+})
+export class ToolbarTemplateDemo implements OnInit {
+    items: MenuItem[] | undefined;
+
+    ngOnInit() {
+        this.items = [
+            {
+                label: 'Update',
+                icon: 'pi pi-refresh'
+            },
+            {
+                label: 'Delete',
+                icon: 'pi pi-times'
+            },
+            {
+                label: 'Angular',
+                icon: 'pi pi-external-link',
+                url: 'http://angular.io'
+            },
+            {
+                label: 'Router',
+                icon: 'pi pi-upload',
+                routerLink: '/fileupload'
+            }
+        ];
+    }
+}`
+    };
+}
diff --git a/src/app/showcase/doc/toolbar/toolbardoc.module.ts b/src/app/showcase/doc/toolbar/toolbardoc.module.ts
@@ -10,10 +10,11 @@ import { AccessibilityDoc } from './accessibilitydoc';
 import { BasicDoc } from './basicdoc';
 import { ImportDoc } from './importdoc';
 import { StyleDoc } from './styledoc';
+import {TemplateDoc} from "./templatedoc";
 
 @NgModule({
     imports: [CommonModule, AppCodeModule, AppDocModule, ToolbarModule, RouterModule, ButtonModule, SplitButtonModule],
     exports: [AppDocModule],
-    declarations: [ImportDoc, BasicDoc, StyleDoc, AccessibilityDoc]
+    declarations: [ImportDoc, BasicDoc, TemplateDoc, StyleDoc, AccessibilityDoc]
 })
 export class ToolbarDocModule {}
diff --git a/src/app/showcase/pages/toolbar/toolbardemo.ts b/src/app/showcase/pages/toolbar/toolbardemo.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { StyleDoc } from '../../doc/toolbar/styledoc';
 import { ImportDoc } from '../../doc/toolbar/importdoc';
 import { BasicDoc } from '../../doc/toolbar/basicdoc';
+import { TemplateDoc } from '../../doc/toolbar/templatedoc';
 import { AccessibilityDoc } from '../../doc/toolbar/accessibilitydoc';
 
 @Component({
@@ -19,6 +20,11 @@ export class ToolbarDemo {
             label: 'Basic',
             component: BasicDoc
         },
+        {
+            id: 'template',
+            label: 'Template',
+            component: TemplateDoc
+        },
         {
             id: 'style',
             label: 'Style',