all views list adapt to search and pagination feature

src/app/app.scss

@@ -27,6 +27,11 @@ ion-list > div > ion-list-header {
     margin-bottom: 0px !important;
 }
 
+ion-footer > p {
+    font-size: 8pt;
+    color: #d3d3d3;
+}
+
 p {
     word-break: keep-all;
     white-space: normal;

src/base/base-list-view.ts

@@ -175,7 +175,7 @@ export abstract class BaseListView<T> extends BaseView<T>{
      * 
      */
     isExpandableRange(): boolean {
-        return this.getRange().end >= this.getItemsShown().length;
+        return this.getRange().end < this.getItemsShown().length;
     }
 
     /**

src/pages/customers/customers.html

@@ -53,3 +53,6 @@
         </button>
     </ion-fab>
 </ion-content>
+<ion-footer>
+	<p text-center>Se muestran {{ getItemsShown().length }} de {{ getItems().length }} elementos</p>
+</ion-footer>

src/pages/leads/leads.html

@@ -13,7 +13,7 @@
 </ion-header>
 <ion-content>
     <ion-list>
-        <ion-item *ngFor="let item of getItems()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
+        <ion-item *ngFor="let item of getItemsShown()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
             <h2>{{ item.contact_name || "Sin Contacto" }}</h2>
             <p>{{ item.name }}</p>
             <p>
@@ -34,7 +34,7 @@
             </p>
         </ion-item>
     </ion-list>
-    <div class="no-items" *ngIf="!hasItems()">
+    <div class="no-items" *ngIf="!hasItemsShown()">
         <h2>Sin elementos</h2>
     </div>
     <ion-fab right bottom>
@@ -43,3 +43,6 @@
         </button>
     </ion-fab>
 </ion-content>
+<ion-footer>
+	<p text-center>Se muestran {{ getItemsShown().length }} de {{ getItems().length }} elementos</p>
+</ion-footer>

src/pages/orders/orders.html

@@ -13,7 +13,7 @@
 </ion-header>
 <ion-content>
     <ion-list>
-        <ion-item *ngFor="let item of getItems()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
+        <ion-item *ngFor="let item of getItemsShown()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
             <h2>{{ item.name }}</h2>
             <p>
                 <strong>Cantidad:</strong>
@@ -37,7 +37,7 @@
             </p>
         </ion-item>
     </ion-list>
-    <div class="no-items" *ngIf="!hasItems()">
+    <div class="no-items" *ngIf="!hasItemsShown()">
         <h2>Sin elementos</h2>
     </div>
     <ion-fab right bottom>
@@ -46,3 +46,6 @@
         </button>
     </ion-fab>
 </ion-content>
+<ion-footer>
+	<p text-center>Se muestran {{ getItemsShown().length }} de {{ getItems().length }} elementos</p>
+</ion-footer>

src/pages/phonecalls/phonecalls.html

@@ -13,7 +13,7 @@
 </ion-header>
 <ion-content>
     <ion-list>
-        <ion-item *ngFor="let item of getItems()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
+        <ion-item *ngFor="let item of getItemsShown()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
             <h2>{{ item.date }}</h2>
             <p>{{ item.name }}</p>
             <p>
@@ -26,7 +26,7 @@
             </p>
         </ion-item>
     </ion-list>
-    <div class="no-items" *ngIf="!hasItems()">
+    <div class="no-items" *ngIf="!hasItemsShown()">
         <h2>Sin elementos</h2>
     </div>
     <ion-fab right bottom>
@@ -35,3 +35,6 @@
         </button>
     </ion-fab>
 </ion-content>
+<ion-footer>
+	<p text-center>Se muestran {{ getItemsShown().length }} de {{ getItems().length }} elementos</p>
+</ion-footer>

src/pages/products/products.html

@@ -29,7 +29,7 @@
 			</p>
 		</ion-item>
 	</ion-list>
-	<div class="no-items" *ngIf="!hasItems()">
+	<div class="no-items" *ngIf="!hasItemsShown()">
         <h2>Sin elementos</h2>
     </div>
 	<ion-fab right bottom>
@@ -38,3 +38,6 @@
         </button>
     </ion-fab>
 </ion-content>
+<ion-footer>
+	<p text-center>Se muestran {{ getItemsShown().length }} de {{ getItems().length }} elementos</p>
+</ion-footer>

src/pages/variants/variants.html

@@ -13,7 +13,7 @@
 </ion-header>
 <ion-content>
 	<ion-list>
-		<ion-item *ngFor="let item of getItems()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
+		<ion-item *ngFor="let item of getItemsShown()" (doubleTap)="openOptions(item)" [ngClass]="{ 'selected-item': item === getSelectedItem() }">
 			<ion-thumbnail item-left>
                 <img src="./assets/images/product.png" *ngIf="!item.image_medium"/>
 				<img [src]="item.image_medium | sanitizeUrl" *ngIf="item.image_medium"/>
@@ -29,7 +29,10 @@
 			</p>
 		</ion-item>
 	</ion-list>
-	<div class="no-items" *ngIf="!hasItems()">
+	<div class="no-items" *ngIf="!hasItemsShown()">
         <h2>Sin elementos</h2>
     </div>
 </ion-content>
+<ion-footer>
+	<p text-center>Se muestran {{ getItemsShown().length }} de {{ getItems().length }} elementos</p>
+</ion-footer>