[ADF-1386] If pagination attribute is undefined shows inconsistent range (#2210)

* Add classes to pagination to better style the layout, improve an i18n translation

* Fix default pagination only if there’s no input on init

ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.html

@@ -1,5 +1,5 @@
-<div class="adf-pagination__block adf-pagination__range">
+<div class="adf-pagination__block">
-    <span>
+    <span class="adf-pagination__range">
         {{
             'CORE.PAGINATION.ITEMS_RANGE' | translate: {
                 range: range.join('-'),
@@ -9,9 +9,15 @@
     </span>
 </div>
 
-<div class="adf-pagination__block adf-pagination__size">
+<div class="adf-pagination__block">
-    <span>{{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }}</span>
+    <span>
-    {{ pagination.maxItems }}
+        {{ 'CORE.PAGINATION.ITEMS_PER_PAGE' | translate }}
+    </span>
+
+    <span class="adf-pagination__max-items">
+        {{ pagination.maxItems }}
+    </span>
+
     <button md-icon-button [mdMenuTriggerFor]="pageSizeMenu">
         <md-icon>arrow_drop_down</md-icon>
     </button>
@@ -26,14 +32,19 @@
     </md-menu>
 </div>
 
-<div class="adf-pagination__block adf-pagination__current-page">
+<div class="adf-pagination__block">
-    {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate }} {{ current }}
+    <span class="adf-pagination__current-page">
+        {{ 'CORE.PAGINATION.CURRENT_PAGE' | translate: { number: current } }}
+    </span>
 
-    <button md-icon-button [mdMenuTriggerFor]="pagesMenu" *ngIf="pages.length > 1">
+    <button
+        md-icon-button
+        [mdMenuTriggerFor]="pagesMenu"
+        *ngIf="pages.length > 1">
         <md-icon>arrow_drop_down</md-icon>
     </button>
 
-    <span>
+    <span class="adf-pagination__total-pages">
         {{ 'CORE.PAGINATION.TOTAL_PAGES' | translate: { total: pages.length } }}
     </span>
 
@@ -47,8 +58,9 @@
     </md-menu>
 </div>
 
-<div class="adf-pagination__block adf-pagination__navigation">
+<div class="adf-pagination__block">
     <button
+        class="adf-pagination__previous-button"
         md-icon-button
         [disabled]="isFirstPage"
         (click)="goPrevious()">
@@ -56,6 +68,7 @@
     </button>
 
     <button
+        class="adf-pagination__next-button"
         md-icon-button
         [disabled]="isLastPage"
         (click)="goNext()">

ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.scss

@@ -2,31 +2,49 @@
 
 $adf-pagination--height: 48px;
 $adf-pagination--icon-button-size: 32px;
+$adf-pagination--border: 1px solid $alfresco-divider-color;
 
 .adf-pagination {
     display: flex;
-    border-top: 1px solid $alfresco-divider-color;
+    border-top: $adf-pagination--border;
     height: $adf-pagination--height;
     line-height: $adf-pagination--height;
+    color: $alfresco-secondary-text-color;
 
     &__block {
         display: flex;
         align-items: center;
         padding: 0 12px;
-        border-right: 1px solid $alfresco-divider-color;
+        border-right: $adf-pagination--border;
 
         &:first-child {
             flex: 1 1 auto;
+            padding-left: 24px;
         }
 
         &:last-child {
             border-right-width: 0;
         }
+    }
 
-        span {
+    &__max-items {
-            color: $alfresco-secondary-text-color;
+        margin-left: 10px;
-            margin: 0 5px;
+    }
+
+    &__max-items, &__current-page {
+        margin-right: 5px;
+
+        &, & + button {
+            color: $alfresco-primary-text-color;
         }
+
+        & + button {
+            margin-left: -10px;
+        }
+    }
+
+    &__previous-button, &__next-button {
+        margin: 0 5px;
     }
 
     button[md-icon-button] {

ng2-components/ng2-alfresco-core/src/components/pagination/pagination.component.ts

@@ -41,6 +41,12 @@ export class PaginationComponent implements OnInit {
 
     static DEFAULT_PAGE_SIZE: number = 25;
 
+    static DEFAULT_PAGINATION: Pagination = {
+        skipCount: 0,
+        maxItems: PaginationComponent.DEFAULT_PAGE_SIZE,
+        totalItems: 0
+    };
+
     static ACTIONS = {
         NEXT_PAGE: 'NEXT_PAGE',
         PREV_PAGE: 'PREV_PAGE',
@@ -81,11 +87,9 @@ export class PaginationComponent implements OnInit {
     }
 
     ngOnInit() {
-        this.pagination = {
+        if (!this.pagination) {
-            skipCount: 0,
+            this.pagination = PaginationComponent.DEFAULT_PAGINATION;
-            maxItems: PaginationComponent.DEFAULT_PAGE_SIZE,
+        }
-            totalItems: 0
-        };
     }
 
     get lastPage(): number {

ng2-components/ng2-alfresco-core/src/i18n/en.json

@@ -3,7 +3,7 @@
         "PAGINATION": {
             "ITEMS_RANGE": "Showing {{ range }} of {{ total }}",
             "ITEMS_PER_PAGE": "Items per page",
-            "CURRENT_PAGE": "Page",
+            "CURRENT_PAGE": "Page {{ number }}",
             "TOTAL_PAGES": "of {{ total }}"
         }
     }