Fixed #10653 - Set Paginator Page from InputNumber and Fixed #10652 -…

… CurrentPageReport displays wrong value
primefaces · Sep 22, 2021 · 845a72f · 845a72f
1 parent 22da724
commit 845a72f
Show file tree

Hide file tree

Showing 39 changed files with 263 additions and 8 deletions.
diff --git a/src/app/components/paginator/paginator.ts b/src/app/components/paginator/paginator.ts
@@ -5,6 +5,7 @@ import {DropdownModule} from 'primeng/dropdown';
 import {SelectItem} from 'primeng/api';
 import {RippleModule} from 'primeng/ripple';
 import {SharedModule} from 'primeng/api';
+import {InputNumberModule} from 'primeng/inputnumber';
 
 @Component({
     selector: 'p-paginator',
@@ -38,6 +39,7 @@ import {SharedModule} from 'primeng/api';
                     class="p-paginator-last p-paginator-element p-link" [ngClass]="{'p-disabled':isLastPage()}">
                 <span class="p-paginator-icon pi pi-angle-double-right"></span>
             </button>
+            <p-inputNumber *ngIf="showJumpToPageInput" [ngModel]="getPage()" class="p-paginator-page-input" (ngModelChange)="changePage($event)"></p-inputNumber>
             <p-dropdown [options]="rowsPerPageItems" [(ngModel)]="rows" *ngIf="rowsPerPageOptions" styleClass="p-paginator-rpp-options"
                 (onChange)="onRppChange($event)" [appendTo]="dropdownAppendTo" [scrollHeight]="dropdownScrollHeight">
                 <ng-container *ngIf="dropdownItemTemplate">
@@ -93,6 +95,8 @@ export class Paginator implements OnInit, OnChanges {
 
     @Input() showJumpToPageDropdown: boolean;
 
+    @Input() showJumpToPageInput: boolean;
+
     @Input() showPageLinks: boolean = true;
 
     @Input() dropdownItemTemplate: TemplateRef<any>;
@@ -169,7 +173,7 @@ export class Paginator implements OnInit, OnChanges {
     }
 
     getPageCount() {
-        return Math.ceil(this.totalRecords/this.rows)||1;
+        return Math.ceil(this.totalRecords/this.rows);
     }
 
     calculatePageLinkBoundaries() {
@@ -285,7 +289,7 @@ export class Paginator implements OnInit, OnChanges {
 
     get currentPageReport() {
         return this.currentPageReportTemplate
-                .replace("{currentPage}", String(this.getPage() + 1))
+                .replace("{currentPage}", String(this.getPageCount() > 0 ? this.getPage() + 1 : 0))
                 .replace("{totalPages}", String(this.getPageCount()))
                 .replace("{first}", String((this.totalRecords > 0) ? this._first + 1 : 0))
                 .replace("{last}", String(Math.min(this._first + this.rows, this.totalRecords)))
@@ -295,8 +299,8 @@ export class Paginator implements OnInit, OnChanges {
 }
 
 @NgModule({
-    imports: [CommonModule,DropdownModule,FormsModule,SharedModule,RippleModule],
-    exports: [Paginator,DropdownModule,FormsModule,SharedModule],
+    imports: [CommonModule,DropdownModule,InputNumberModule,FormsModule,SharedModule,RippleModule],
+    exports: [Paginator,DropdownModule,InputNumberModule,FormsModule,SharedModule],
     declarations: [Paginator]
 })
 export class PaginatorModule { }
diff --git a/src/app/components/table/table.ts b/src/app/components/table/table.ts
@@ -98,7 +98,7 @@ export class TableService {
             <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="p-paginator-top" [alwaysShow]="alwaysShowPaginator"
                 (onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition =='both')"
                 [templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo" [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
+                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showJumpToPageInput]="showJumpToPageInput" [showPageLinks]="showPageLinks"></p-paginator>
 
             <div #wrapper class="p-datatable-wrapper" [ngStyle]="{height: scrollHeight}">
                 <table #table *ngIf="!virtualScroll" role="table" class="p-datatable-table" [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
@@ -130,7 +130,7 @@ export class TableService {
             <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="p-paginator-bottom" [alwaysShow]="alwaysShowPaginator"
                 (onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')"
                 [templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo" [dropdownScrollHeight]="paginatorDropdownScrollHeight"
-                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showPageLinks]="showPageLinks"></p-paginator>
+                [currentPageReportTemplate]="currentPageReportTemplate" [showFirstLastIcon]="showFirstLastIcon" [dropdownItemTemplate]="paginatorDropdownItemTemplate" [showCurrentPageReport]="showCurrentPageReport" [showJumpToPageDropdown]="showJumpToPageDropdown" [showJumpToPageInput]="showJumpToPageInput" [showPageLinks]="showPageLinks"></p-paginator>
 
             <div *ngIf="summaryTemplate" class="p-datatable-footer">
                 <ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
@@ -183,6 +183,8 @@ export class Table implements OnInit, AfterViewInit, AfterContentInit, Blockable
 
     @Input() showJumpToPageDropdown: boolean;
 
+    @Input() showJumpToPageInput: boolean;
+
     @Input() showFirstLastIcon: boolean = true;
 
     @Input() showPageLinks: boolean = true;

diff --git a/src/app/showcase/components/paginator/paginatordemo.html b/src/app/showcase/components/paginator/paginatordemo.html
@@ -192,6 +192,12 @@ <h5>Properties</h5>
                             <td>false</td>
                             <td>Whether to display a dropdown to navigate to any page.</td>
                         </tr>
+                        <tr>
+                            <td>showJumpToPageInput</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to display a input to navigate to any page.</td>
+                        </tr>
                         <tr>
                             <td>showPageLinks</td>
                             <td>boolean</td>

diff --git a/src/app/showcase/components/table/tabledemo.html b/src/app/showcase/components/table/tabledemo.html
@@ -3009,6 +3009,12 @@ <h5>Properties</h5>
                             <td>false</td>
                             <td>Whether to display a dropdown to navigate to any page.</td>
                         </tr>
+                        <tr>
+                            <td>showJumpToPageInput</td>
+                            <td>boolean</td>
+                            <td>false</td>
+                            <td>Whether to display a input to navigate to any page.</td>
+                        </tr>
                         <tr>
                             <td>showPageLinks</td>
                             <td>boolean</td>

diff --git a/src/app/showcase/components/table/tablepagedemo.ts b/src/app/showcase/components/table/tablepagedemo.ts
@@ -38,5 +38,4 @@ export class TablePageDemo implements OnInit {
     isFirstPage(): boolean {
         return this.customers ? this.first === 0 : true;
     }
-
-}
+}
diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -3064,6 +3064,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -3064,6 +3064,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/arya-orange/theme.css b/src/assets/components/themes/arya-orange/theme.css
@@ -3064,6 +3064,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/arya-purple/theme.css b/src/assets/components/themes/arya-purple/theme.css
@@ -3064,6 +3064,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.286em;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/bootstrap4-dark-blue/theme.css b/src/assets/components/themes/bootstrap4-dark-blue/theme.css
@@ -3076,6 +3076,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 1px solid #3f4b5b;

diff --git a/src/assets/components/themes/bootstrap4-dark-purple/theme.css b/src/assets/components/themes/bootstrap4-dark-purple/theme.css
@@ -3076,6 +3076,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 1px solid #3f4b5b;

diff --git a/src/assets/components/themes/bootstrap4-light-blue/theme.css b/src/assets/components/themes/bootstrap4-light-blue/theme.css
@@ -3076,6 +3076,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: #ffffff;
   border: 1px solid #dee2e6;

diff --git a/src/assets/components/themes/bootstrap4-light-purple/theme.css b/src/assets/components/themes/bootstrap4-light-purple/theme.css
@@ -3076,6 +3076,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: #ffffff;
   border: 1px solid #dee2e6;

diff --git a/src/assets/components/themes/fluent-light/theme.css b/src/assets/components/themes/fluent-light/theme.css
@@ -3064,6 +3064,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/luna-amber/theme.css b/src/assets/components/themes/luna-amber/theme.css
@@ -3076,6 +3076,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/luna-blue/theme.css b/src/assets/components/themes/luna-blue/theme.css
@@ -3076,6 +3076,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/luna-green/theme.css b/src/assets/components/themes/luna-green/theme.css
@@ -3076,6 +3076,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/luna-pink/theme.css b/src/assets/components/themes/luna-pink/theme.css
@@ -3076,6 +3076,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 2.357rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/md-dark-deeppurple/theme.css b/src/assets/components/themes/md-dark-deeppurple/theme.css
@@ -3088,6 +3088,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/md-dark-indigo/theme.css b/src/assets/components/themes/md-dark-indigo/theme.css
@@ -3088,6 +3088,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/md-light-deeppurple/theme.css b/src/assets/components/themes/md-light-deeppurple/theme.css
@@ -3088,6 +3088,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/md-light-indigo/theme.css b/src/assets/components/themes/md-light-indigo/theme.css
@@ -3088,6 +3088,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/mdc-dark-deeppurple/theme.css b/src/assets/components/themes/mdc-dark-deeppurple/theme.css
@@ -3088,6 +3088,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/mdc-dark-indigo/theme.css b/src/assets/components/themes/mdc-dark-indigo/theme.css
@@ -3088,6 +3088,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;

diff --git a/src/assets/components/themes/mdc-light-deeppurple/theme.css b/src/assets/components/themes/mdc-light-deeppurple/theme.css
@@ -3088,6 +3088,13 @@ p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
 .p-paginator .p-dropdown .p-dropdown-label {
   padding-right: 0;
 }
+.p-paginator .p-paginator-page-input {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+.p-paginator .p-paginator-page-input .p-inputtext {
+  max-width: 3rem;
+}
 .p-paginator .p-paginator-current {
   background-color: transparent;
   border: 0 none;
-Original file line number
+Diff line change
@@ Expand Up / @@ -38,5 +38,4 @@ export class TablePageDemo implements OnInit { @@
         isFirstPage(): boolean {
             return this.customers ? this.first === 0 : true;
         }
-    }
+    }