Fixed #10192 - Header template support for PickList and OrderList

primefaces · May 3, 2021 · a47aac4 · a47aac4
1 parent ae7d146
commit a47aac4
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/src/app/components/orderlist/orderlist.ts b/src/app/components/orderlist/orderlist.ts
@@ -19,8 +19,9 @@ import {CdkDragDrop, DragDropModule, moveItemInArray} from '@angular/cdk/drag-dr
                 <button type="button" pButton pRipple icon="pi pi-angle-double-down" (click)="moveBottom()"></button>
             </div>
             <div class="p-orderlist-list-container">
-                <div class="p-orderlist-header" *ngIf="header">
-                    <div class="p-orderlist-title">{{header}}</div>
+                <div class="p-orderlist-header" *ngIf="header || headerTemplate">
+                    <div class="p-orderlist-title" *ngIf="!headerTemplate">{{header}}</div>
+                    <ng-container *ngTemplateOutlet="headerTemplate"></ng-container>
                 </div>
                 <div class="p-orderlist-filter-container" *ngIf="filterBy">
                     <div class="p-orderlist-filter">
@@ -94,6 +95,8 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
     @ContentChildren(PrimeTemplate) templates: QueryList<any>;
 
     public itemTemplate: TemplateRef<any>;
+
+    public headerTemplate: TemplateRef<any>;
 
     public emptyMessageTemplate: TemplateRef<any>;
 
@@ -142,6 +145,10 @@ export class OrderList implements AfterViewChecked,AfterContentInit {
                     this.emptyMessageTemplate = item.template;
                 break;
 
+                case 'header':
+                    this.headerTemplate = item.template;
+                break;
+
                 default:
                     this.itemTemplate = item.template;
                 break;

diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
@@ -18,8 +18,9 @@ import {ObjectUtils, UniqueComponentId} from 'primeng/utils';
                 <button type="button" pButton pRipple icon="pi pi-angle-double-down" [disabled]="disabled" (click)="moveBottom(sourcelist,source,selectedItemsSource,onSourceReorder,SOURCE_LIST)"></button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-source-wrapper">
-                <div class="p-picklist-header" *ngIf="sourceHeader">
-                    <div class="p-picklist-title">{{sourceHeader}}</div>
+                <div class="p-picklist-header" *ngIf="sourceHeader || sourceHeaderTemplate">
+                    <div class="p-picklist-title" *ngIf="!sourceHeaderTemplate">{{sourceHeader}}</div>
+                    <ng-container *ngTemplateOutlet="sourceHeaderTemplate"></ng-container>
                 </div>
                 <div class="p-picklist-filter-container" *ngIf="filterBy && showSourceFilter !== false">
                     <div class="p-picklist-filter">
@@ -51,8 +52,9 @@ import {ObjectUtils, UniqueComponentId} from 'primeng/utils';
                 <button type="button" pButton pRipple icon="pi pi-angle-double-left" [disabled]="disabled" (click)="moveAllLeft()"></button>
             </div>
             <div class="p-picklist-list-wrapper p-picklist-target-wrapper">
-                <div class="p-picklist-header" *ngIf="targetHeader">
-                    <div class="p-picklist-title" *ngIf="targetHeader">{{targetHeader}}</div>
+                <div class="p-picklist-header" *ngIf="targetHeader || targetHeaderTemplate">
+                    <div class="p-picklist-title" *ngIf="!targetHeaderTemplate">{{targetHeader}}</div>
+                    <ng-container *ngTemplateOutlet="targetHeaderTemplate"></ng-container>
                 </div>
                 <div class="p-picklist-filter-container" *ngIf="filterBy && showTargetFilter !== false">
                     <div class="p-picklist-filter">
@@ -206,6 +208,10 @@ export class PickList implements AfterViewChecked,AfterContentInit {
 
     emptyMessageTargetTemplate: TemplateRef<any>;
 
+    sourceHeaderTemplate: TemplateRef<any>;
+
+    targetHeaderTemplate: TemplateRef<any>;
+
     readonly SOURCE_LIST = -1;
 
     readonly TARGET_LIST = 1;
@@ -226,13 +232,21 @@ export class PickList implements AfterViewChecked,AfterContentInit {
                     this.itemTemplate = item.template;
                 break;
 
+                case 'sourceHeader':
+                    this.sourceHeaderTemplate = item.template;
+                break;
+
+                case 'targetHeader':
+                    this.targetHeaderTemplate = item.template;
+                break;
+
                 case 'emptymessagesource':
                     this.emptyMessageSourceTemplate = item.template;
                 break;
 
                 case 'emptymessagetarget':
                     this.emptyMessageTargetTemplate = item.template;
-                    break;
+                break;
 
                 default:
                     this.itemTemplate = item.template;

diff --git a/src/app/showcase/components/orderlist/orderlistdemo.html b/src/app/showcase/components/orderlist/orderlistdemo.html
@@ -276,6 +276,10 @@ <h5>Templates</h5>
                             <td>item</td>
                             <td>$implicit: Data of the item</td>
                         </tr>
+                        <tr>
+                            <td>header</td>
+                            <td>-</td>
+                        </tr>
                         <tr>
                             <td>empty</td>
                             <td>-</td>

diff --git a/src/app/showcase/components/picklist/picklistdemo.html b/src/app/showcase/components/picklist/picklistdemo.html
@@ -387,6 +387,14 @@ <h5>Templates</h5>
                             <td>$implicit: Data of the item<br />
                                 index: Index of the item</td>
                         </tr>
+                        <tr>
+                            <td>sourceHeader</td>
+                            <td>-</td>
+                        </tr>
+                        <tr>
+                            <td>targetHeader</td>
+                            <td>-</td>
+                        </tr>
                         <tr>
                             <td>emptymessagesource</td>
                             <td>-</td>