no items div added

src/app/app.scss

@@ -39,6 +39,19 @@ p {
     border-right: 1px solid #dedede;
 }
 
+.no-items {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;  
+}
+
+.no-items > h2 {
+    font-size: 15pt;
+    color: #d3d3d3;
+}
+
 // body.menu-open .side-menu-open {
 //     transform: translate3d(275px, 0px, 0px) scale(.9) !important;
 //     opacity: 0.9;

src/base/base-list-view.ts

@@ -173,6 +173,13 @@ export abstract class BaseListView<T> extends BaseView<T>{
         return this.getItems()[this.getSelectedIndex()];
     }
 
+    /**
+     * 
+     */
+    hasItems(): boolean {
+        return this.getItems().length > 0;
+    }
+
     /**
      * 
      * @param item 

src/pages/customers/customers.html

@@ -28,6 +28,9 @@
 			</p>
 		</ion-item>
 	</ion-list>
+	<div class="no-items" *ngIf="!hasItems()">
+        <h2>Sin elementos</h2>
+    </div>
 	<ion-fab right top edge>
         <button ion-fab mini (click)="goToDetails()">
             <ion-icon name="add"></ion-icon>

src/pages/leads/leads.html

@@ -29,6 +29,9 @@
             </p>
         </ion-item>
     </ion-list>
+    <div class="no-items" *ngIf="!hasItems()">
+        <h2>Sin elementos</h2>
+    </div>
     <ion-fab right top edge>
         <button ion-fab mini (click)="goToDetails()">
             <ion-icon name="add"></ion-icon>

src/pages/orders/orders.html

@@ -32,6 +32,9 @@
             </p>
         </ion-item>
     </ion-list>
+    <div class="no-items" *ngIf="!hasItems()">
+        <h2>Sin elementos</h2>
+    </div>
     <ion-fab right top edge>
         <button ion-fab mini (click)="goToDetails()">
             <ion-icon name="add"></ion-icon>

src/pages/phonecalls/phonecalls.html

@@ -21,6 +21,9 @@
             </p>
         </ion-item>
     </ion-list>
+    <div class="no-items" *ngIf="!hasItems()">
+        <h2>Sin elementos</h2>
+    </div>
     <ion-fab right top edge>
         <button ion-fab mini (click)="goToDetails()">
             <ion-icon name="add"></ion-icon>

src/pages/products/products.html

@@ -24,6 +24,9 @@
 			</p>
 		</ion-item>
 	</ion-list>
+	<div class="no-items" *ngIf="!hasItems()">
+        <h2>Sin elementos</h2>
+    </div>
 	<ion-fab right top edge>
         <button ion-fab mini (click)="goToDetails()">
             <ion-icon name="add"></ion-icon>

src/pages/variants/variants.html

@@ -24,4 +24,7 @@
 			</p>
 		</ion-item>
 	</ion-list>
+	<div class="no-items" *ngIf="!hasItems()">
+        <h2>Sin elementos</h2>
+    </div>
 </ion-content>