#9532 - empty template and I18N support for Dropdown

primefaces · May 4, 2021 · 225d49f · 225d49f
1 parent 9f3bc25
commit 225d49f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 5 deletions.
diff --git a/src/app/components/dropdown/dropdown.ts b/src/app/components/dropdown/dropdown.ts
@@ -3,7 +3,7 @@ import {NgModule,Component,ElementRef,OnInit,AfterViewInit,AfterContentInit,Afte
         QueryList,ViewChild,TemplateRef,forwardRef,ChangeDetectorRef,NgZone,ViewRef,ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
 import {trigger,style,transition,animate,AnimationEvent} from '@angular/animations';
 import {CommonModule} from '@angular/common';
-import {SelectItem} from 'primeng/api';
+import {PrimeNGConfig, SelectItem, TranslationKeys} from 'primeng/api';
 import {SharedModule,PrimeTemplate, FilterService} from 'primeng/api';
 import {DomHandler, ConnectedOverlayScrollHandler} from 'primeng/dom';
 import {ObjectUtils} from 'primeng/utils';
@@ -118,12 +118,18 @@ export class DropdownItem {
                                 </cdk-virtual-scroll-viewport>
                             </ng-template>
                         </ng-template>
-                        <li *ngIf="filter && (!optionsToDisplay || (optionsToDisplay && optionsToDisplay.length === 0))" class="p-dropdown-empty-message">
+                        <li *ngIf="filterValue && isEmpty()" class="p-dropdown-empty-message">
                             <ng-container *ngIf="!emptyFilterTemplate; else emptyFilter">
-                                {{emptyFilterMessage}}
+                                {{emptyFilterMessageLabel}}
                             </ng-container>
                             <ng-container #emptyFilter *ngTemplateOutlet="emptyFilterTemplate"></ng-container>
                         </li>
+                        <li *ngIf="!filterValue && isEmpty()" class="p-dropdown-empty-message">
+                            <ng-container *ngIf="!emptyTemplate; else empty">
+                                {{emptyMessageLabel}}
+                            </ng-container>
+                            <ng-container #empty *ngTemplateOutlet="emptyTemplate"></ng-container>
+                        </li>
                     </ul>
                 </div>
                 <ng-container *ngTemplateOutlet="footerTemplate"></ng-container>
@@ -212,7 +218,9 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
 
     @Input() showClear: boolean;
 
-    @Input() emptyFilterMessage: string = 'No results found';
+    @Input() emptyFilterMessage: string = '';
+
+    @Input() emptyMessage: string = '';
 
     @Input() virtualScroll: boolean;
 
@@ -306,6 +314,8 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
 
     emptyFilterTemplate: TemplateRef<any>;
 
+    emptyTemplate: TemplateRef<any>;
+
     selectedOption: any;
 
     _options: any[];
@@ -360,7 +370,7 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
 
     preventModelTouched: boolean;
 
-    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService) {}
+    constructor(public el: ElementRef, public renderer: Renderer2, public cd: ChangeDetectorRef, public zone: NgZone, public filterService: FilterService, public config: PrimeNGConfig) {}
 
     ngAfterContentInit() {
         this.templates.forEach((item) => {
@@ -385,6 +395,10 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
                     this.emptyFilterTemplate = item.template;
                 break;
 
+                case 'empty':
+                    this.emptyTemplate = item.template;
+                break;
+
                 case 'group':
                     this.groupTemplate = item.template;
                 break;
@@ -435,6 +449,14 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
         return this.selectedOption ? this.getOptionLabel(this.selectedOption) : null;
     }
 
+    get emptyMessageLabel(): string {
+        return this.emptyMessage || this.config.getTranslation(TranslationKeys.EMPTY_MESSAGE);
+    }
+
+    get emptyFilterMessageLabel(): string {
+        return this.emptyFilterMessage || this.config.getTranslation(TranslationKeys.EMPTY_FILTER_MESSAGE);
+    }
+
     updateEditableLabel(): void {
         if (this.editableInputViewChild && this.editableInputViewChild.nativeElement) {
             this.editableInputViewChild.nativeElement.value = (this.selectedOption ? this.getOptionLabel(this.selectedOption) : this.value||'');
@@ -595,6 +617,10 @@ export class Dropdown implements OnInit,AfterViewInit,AfterContentInit,AfterView
         return !(this.el.nativeElement.isSameNode(event.target) || this.el.nativeElement.contains(event.target) || (this.overlay && this.overlay.contains(<Node> event.target)));
     }
 
+    isEmpty() {
+        return !this.optionsToDisplay || (this.optionsToDisplay && this.optionsToDisplay.length === 0);
+    }
+
     onEditableInputClick() {
         this.bindDocumentClickListener();
     }

diff --git a/src/app/showcase/components/dropdown/dropdowndemo.html b/src/app/showcase/components/dropdown/dropdowndemo.html
@@ -361,6 +361,18 @@ <h5>Properties</h5>
                             <td>false</td>
                             <td>When present, it specifies that the component cannot be edited.</td>
                         </tr>
+                        <tr>
+                            <td>emptyMessage</td>
+                            <td>string</td>
+                            <td>No records found.</td>
+                            <td>Text to display when there is no data. Defaults to global value in i18n translation configuration.</td>
+                        </tr>
+                        <tr>
+                            <td>emptyFilterMessage</td>
+                            <td>string</td>
+                            <td>No results found</td>
+                            <td>Text to display when filtering does not return any results. Defaults to global value in i18n translation configuration.</td>
+                        </tr>
                         <tr>
                             <td>ariaLabelledBy</td>
                             <td>string</td>