Merge pull request #7027 from gasparbarancelli/6967

Empty message for PickList #6967
primefaces · Jan 7, 2019 · b795bcc · b795bcc
2 parents a4fb5ce + a0fdb5d
commit b795bcc
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 0 deletions.
diff --git a/src/app/components/picklist/picklist.ts b/src/app/components/picklist/picklist.ts
@@ -36,6 +36,9 @@ import {ObjectUtils} from '../utils/objectutils';
                         <li class="ui-picklist-droppoint" *ngIf="dragdrop&&l" (dragover)="onDragOver($event, i + 1, SOURCE_LIST)" (drop)="onDrop($event, i + 1, SOURCE_LIST)" (dragleave)="onDragLeave($event, SOURCE_LIST)"
                         [ngClass]="{'ui-picklist-droppoint-highlight': (i + 1 === dragOverItemIndexSource)}"></li>
                     </ng-template>
+                    <ng-container *ngIf="source == null || source.length === 0">
+                        <ng-container *ngTemplateOutlet="emptyMessageSourceTemplate"></ng-container>
+                    </ng-container>
                 </ul>
             </div>
             <div class="ui-picklist-buttons">
@@ -65,6 +68,9 @@ import {ObjectUtils} from '../utils/objectutils';
                         <li class="ui-picklist-droppoint" *ngIf="dragdrop&&l" (dragover)="onDragOver($event, i + 1, TARGET_LIST)" (drop)="onDrop($event, i + 1, TARGET_LIST)" (dragleave)="onDragLeave($event, TARGET_LIST)"
                         [ngClass]="{'ui-picklist-droppoint-highlight': (i + 1 === dragOverItemIndexTarget)}"></li>
                     </ng-template>
+                    <ng-container *ngIf="target == null || target.length === 0">
+                        <ng-container *ngTemplateOutlet="emptyMessageTargetTemplate"></ng-container>
+                    </ng-container>
                 </ul>
             </div>
             <div class="ui-picklist-target-controls ui-picklist-buttons" *ngIf="showTargetControls">
@@ -196,6 +202,10 @@ export class PickList implements AfterViewChecked,AfterContentInit {
 
     listHighlightSource: boolean;
 
+    emptyMessageSourceTemplate: TemplateRef<any>;
+
+    emptyMessageTargetTemplate: TemplateRef<any>;
+
     readonly SOURCE_LIST = -1;
 
     readonly TARGET_LIST = 1;
@@ -208,6 +218,14 @@ export class PickList implements AfterViewChecked,AfterContentInit {
                 case 'item':
                     this.itemTemplate = item.template;
                 break;
+
+                case 'emptymessagesource':
+                    this.emptyMessageSourceTemplate = item.template;
+                break;
+
+                case 'emptymessagetarget':
+                    this.emptyMessageTargetTemplate = item.template;
+                    break;
 
                 default:
                     this.itemTemplate = item.template;

diff --git a/src/app/showcase/components/picklist/picklistdemo.html b/src/app/showcase/components/picklist/picklistdemo.html
@@ -16,6 +16,16 @@
                 <div style="font-size:14px;float:right;margin:15px 5px 0 0">{{car.brand}} - {{car.year}} - {{car.color}}</div>
             </div>
         </ng-template>
+        <ng-template pTemplate="emptymessagesource">
+            <div class="ui-helper-clearfix">
+                <div style="font-size:14px; margin:15px 0 0 5px">No items available</div>
+            </div>
+        </ng-template>
+        <ng-template pTemplate="emptymessagetarget">
+            <div class="ui-helper-clearfix">
+                <div style="font-size:14px; margin:15px 0 0 5px">No items selected</div>
+            </div>
+        </ng-template>
     </p-pickList>
 
 </div>
@@ -99,6 +109,31 @@ <h3>DragDrop</h3>
 </code>
 </pre>
 
+            <h3>Templates</h3>
+            <div class="doc-tablewrapper">
+                <table class="doc-table">
+                    <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                        <th>Description</th>
+                    </tr>
+                    </thead>
+                    <tbody>
+                    <tr>
+                        <td>emptymessagesource</td>
+                        <td>-</td>
+                        <td>Content to display when there is no item available for selection.</td>
+                    </tr>
+                    <tr>
+                        <td>emptymessagetarget</td>
+                        <td>-</td>
+                        <td>Content to display when there is no element selected.</td>
+                    </tr>
+                    </tbody>
+                </table>
+            </div>
+
             <h3>Properties</h3>
             <div class="doc-tablewrapper">
                 <table class="doc-table">