odoo_mobile/src/pages/customer-list/customer-list.html

<ion-header>

    <ion-navbar color="primary">
        <button ion-button menuToggle>
            <ion-icon name="menu"></ion-icon>
        </button>

        <ion-title>Clientes</ion-title>

        <ion-buttons end>
            <button ion-button (click)="toggleSearch()">
                <ion-icon color="ligth" name="search"></ion-icon>
            </button>
        </ion-buttons>
  </ion-navbar>

</ion-header>

<ion-toolbar color="primary" *ngIf="isSearchMode()">
    <ion-searchbar placeholder="Buscar" debounce="1000" (ionInput)="search($event)"></ion-searchbar>
    <ion-buttons end>
        <button ion-button (click)="toggleSearch()">
            <ion-icon name="arrow-forward"></ion-icon>
        </button>
    </ion-buttons>
</ion-toolbar>

<ion-content>
    <ion-card *ngFor="let c of visibleElements; trackBy:trackByElements">
        <ion-item>
            <ion-thumbnail item-left>
                <img src="./assets/images/customer.png" *ngIf="!c.image_medium"/>
                <img [src]="c.image_medium | sanitizeUrl" *ngIf="c.image_medium"/>
            </ion-thumbnail>

            <h2>{{ c.name }}</h2>

            <p>
                <strong>Ciudad:</strong>
                {{ c.city }}
            </p>

            <p>
                <strong>Dirección:</strong>
                {{ c.street }}
            </p>

            <p>
                <strong>Celular:</strong>
                {{ c.mobile }}
            </p>

            <button ion-button primary clear item-right (click)="showOptions($event, c)">
                <ion-icon name="more"></ion-icon>
            </button>
        </ion-item>

        <ion-row center>
            <ion-col width-33>
                <button ion-button primary clear small>
                    <ion-icon name="cash"></ion-icon>
                    <div>{{ c.sales_order_count || 0}} Pedidos</div>
                </button>
            </ion-col>

            <ion-col width-33>
                <button ion-button primary clear small>
                    <ion-icon name="document"></ion-icon>
                    <div>{{ c.invoice_count || 0}} Facturas</div>
                </button>
            </ion-col>

            <ion-col width-33>
                <button ion-button primary clear small>
                    <ion-icon name="flag"></ion-icon>
                    <div>{{ c.opportunity_count || 0}} Iniciativas</div>
                </button>
            </ion-col>
        </ion-row>
    </ion-card>

    <div class="no-element" *ngIf="!hasVisibleElements()">
        <h2>Sin elementos</h2>
    </div>

    <ion-infinite-scroll (ionInfinite)="seek($event)">
        <ion-infinite-scroll-content></ion-infinite-scroll-content>
    </ion-infinite-scroll>
    
    <ion-fab right bottom>
        <button ion-fab color="yellow" (click)="goToPage(null)">
            <ion-icon name="add" color="light"></ion-icon>
        </button>
    </ion-fab>
</ion-content>