odoo_mobile/src/pages/sale-order-details/sale-order-details.html

<!--Encabezado-->
<odetails-header title="Presupuesto" [showButtons]=false></odetails-header>

<!--Contenido del formulario-->
<ion-content class="has-header">

    <ion-slides #saleSlides (ionSlideWillChange)="onSlideChanged($event)">
        <!--Cliente-->
        <ion-slide>
            <h1>Seleccione un cliente:</h1>
            <ion-searchbar #customerSearchInput placeholder="Buscar cliente" (ionInput)="searchCustomer($event)"></ion-searchbar>

            <div *ngIf="isSearch()">
                <!--<ion-list inset [virtualScroll]="customers" approxItemHeight="30px">-->
                <ion-list inset *ngFor="let c of customers">
                    <!--<ion-item *virtualItem="let item" (doubleTap)="selectCustomer(item)">-->
                    <ion-item (doubleTap)="selectCustomer(c)">
                        {{ c.name }}
                        <ion-icon name="checkmark" item-right></ion-icon>
                    </ion-item>
                </ion-list>
            </div>

            <div *ngIf="!isSearch()">
                <h1>Datos del cliente:</h1>

                <ion-list inset>
                    <ion-item>
                        <ion-label>Nombre:</ion-label>
                        <ion-input [ngModel]="customer.name" readonly></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label>Teléfono:</ion-label>
                        <ion-input [ngModel]="customer.phone" readonly></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label>Celular:</ion-label>
                        <ion-input [ngModel]="customer.mobile" readonly></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label>Dirección:</ion-label>
                        <ion-input [ngModel]="customer.street" readonly></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label>Ciudad:</ion-label>
                        <ion-input [ngModel]="customer.city" readonly></ion-input>
                    </ion-item>
                </ion-list>
            </div>
        </ion-slide>

        <!--Líneas de presupuesto-->
        -<ion-slide>
            <h1>Líneas del presupuesto</h1>
            <ion-searchbar #productSearchInput placeholder="Buscar producto" (ionInput)="searchProduct($event)" (doubleTap)="readBarcode()"></ion-searchbar>

           <div class="sale-content-wrapper" *ngIf="isSearch()">

               <!--<ion-scroll inset scrollY="true" [virtualScroll]="products" approxItemHeight="30px">-->
               <ion-scroll inset scrollY="true" *ngFor="let p of products">
                    <!--<ion-item *virtualItem="let p" (doubleTap)="selectProduct(p)">-->
                    <ion-item (doubleTap)="selectProduct(p)">
                        <!--<ion-thumbnail item-left>
                            <ion-img [src]="p.image_medium" *ngIf="!p.image_medium"></ion-img>
                            <img src="./assets/images/product.png" *ngIf="!p.image_medium"/>
                        </ion-thumbnail>-->

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

                        <p>
                            <strong>Precio:</strong>
                            {{ p.list_price }}
                        </p>
                    </ion-item>
               </ion-scroll>

           </div>

           <div class="sale-content-wrapper" *ngIf="!isSearch()">

                <!--<ion-scroll scrollY="true" [virtualScroll]="lines" approxItemHeight="30px">-->
                <ion-scroll scrollY="true" *ngFor="let l of lines">
                    <!--<ion-item *virtualItem="let l">-->
                    <ion-item>
                        <ion-thumbnail item-left>
                            <ion-img src="l.image_medium" *ngIf="l.image_medium"></ion-img>
                            <img src="./assets/images/product.png" *ngIf="!l.image_medium"/>
                        </ion-thumbnail>

                        <h2>{{ l.product.name }}</h2>

                        <p>
                            <strong>Precio:</strong>
                            {{ l.price }}
                        </p>

                        <p>
                            <strong>Cantidad:</strong>
                            {{ l.quantity }}
                        </p>

                        <p>
                            <strong>Subtotal:</strong>
                            {{ l.subtotal }}
                        </p>

                        <button ion-button primary clear item-right (click)="askIfRemoveItem(l)">
                            <ion-icon name="backspace"></ion-icon>
                        </button>

                        <ion-row>
                            <ion-col width-33>
                                <button ion-button primary clear small icon-only (click)="removeQuantity(l)">
                                    <ion-icon name="remove-circle"></ion-icon>
                                </button>
                            </ion-col>

                            <ion-col width-33>
                                <button ion-button primary clear small icon-only (click)="addQuantity(l)">
                                    <ion-icon name="add-circle"></ion-icon>
                                </button>
                            </ion-col>

                            <ion-col width-33>
                                <button ion-button primary clear small icon-only (click)="askIfChangePrice(l)">
                                    <ion-icon name="cash"></ion-icon>
                                </button>
                            </ion-col>
                        </ion-row>
                    </ion-item>
                </ion-scroll>

                <div class="sale-total">
                    <ion-list>
                        <ion-item>
                            <ion-label>Total:</ion-label>
                            <ion-input readonly text-right [ngModel]="total"></ion-input>
                        </ion-item>
                    </ion-list>
                </div>
            </div>
        </ion-slide>

        <!--Finalizar presupuesto-->
        <ion-slide>
            <div class="finish-sale">
                <h1>Finalizar presupuesto</h1>

                <ion-list inset>
                    <ion-item>
                        <ion-label>SubTotal:</ion-label>
                        <ion-input text-right readonly [ngModel]="total"></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label>Descuento:</ion-label>
                        <ion-input text-right readonly value="0"></ion-input>
                    </ion-item>

                    <ion-item>
                        <ion-label>Total:</ion-label>
                        <ion-input text-right readonly [ngModel]="total"></ion-input>
                    </ion-item>
                </ion-list>

                <button ion-button color="primary" (click)="saveSale()">Guardar presupuesto</button>
            </div>
        </ion-slide>
    </ion-slides>
</ion-content>

<!-- Pie del formulario -->
<ion-footer *ngIf="footer.show">
    <ion-toolbar>
        <ion-buttons start>
            <button ion-button color="primary" clear icon-left *ngIf="footer.back.show" (click)="goToBack()">
                <ion-icon name="arrow-back"></ion-icon>
                {{ footer.back.text }}
            </button>
        </ion-buttons>

        <ion-buttons end>
            <button ion-button color="primary" clear icon-right *ngIf="footer.forward.show" (click)="goToNext()">
                {{ footer.forward.text }}
                <ion-icon name="arrow-forward"></ion-icon>
            </button>
        </ion-buttons>
    </ion-toolbar>
</ion-footer>