sale-order-details.html 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193
  1. <!--Encabezado-->
  2. <odetails-header title="Presupuesto" [showButtons]=false></odetails-header>
  3. <!--Contenido del formulario-->
  4. <ion-content class="has-header">
  5. <ion-slides #saleSlides (ionSlideWillChange)="onSlideChanged($event)">
  6. <!--Cliente-->
  7. <ion-slide>
  8. <h1>Seleccione un cliente:</h1>
  9. <ion-searchbar #customerSearchInput placeholder="Buscar cliente" (ionInput)="searchCustomer($event)"></ion-searchbar>
  10. <div *ngIf="isSearch()">
  11. <!--<ion-list inset [virtualScroll]="customers" approxItemHeight="30px">-->
  12. <ion-list inset *ngFor="let c of customers">
  13. <!--<ion-item *virtualItem="let item" (doubleTap)="selectCustomer(item)">-->
  14. <ion-item (doubleTap)="selectCustomer(c)">
  15. {{ c.name }}
  16. <ion-icon name="checkmark" item-right></ion-icon>
  17. </ion-item>
  18. </ion-list>
  19. </div>
  20. <div *ngIf="!isSearch()">
  21. <h1>Datos del cliente:</h1>
  22. <ion-list inset>
  23. <ion-item>
  24. <ion-label>Nombre:</ion-label>
  25. <ion-input [ngModel]="customer.name" readonly></ion-input>
  26. </ion-item>
  27. <ion-item>
  28. <ion-label>Teléfono:</ion-label>
  29. <ion-input [ngModel]="customer.phone" readonly></ion-input>
  30. </ion-item>
  31. <ion-item>
  32. <ion-label>Celular:</ion-label>
  33. <ion-input [ngModel]="customer.mobile" readonly></ion-input>
  34. </ion-item>
  35. <ion-item>
  36. <ion-label>Dirección:</ion-label>
  37. <ion-input [ngModel]="customer.street" readonly></ion-input>
  38. </ion-item>
  39. <ion-item>
  40. <ion-label>Ciudad:</ion-label>
  41. <ion-input [ngModel]="customer.city" readonly></ion-input>
  42. </ion-item>
  43. </ion-list>
  44. </div>
  45. </ion-slide>
  46. <!--Líneas de presupuesto-->
  47. -<ion-slide>
  48. <h1>Líneas del presupuesto</h1>
  49. <ion-searchbar #productSearchInput placeholder="Buscar producto" (ionInput)="searchProduct($event)" (doubleTap)="readBarcode()"></ion-searchbar>
  50. <div class="sale-content-wrapper" *ngIf="isSearch()">
  51. <!--<ion-scroll inset scrollY="true" [virtualScroll]="products" approxItemHeight="30px">-->
  52. <ion-scroll inset scrollY="true" *ngFor="let p of products">
  53. <!--<ion-item *virtualItem="let p" (doubleTap)="selectProduct(p)">-->
  54. <ion-item (doubleTap)="selectProduct(p)">
  55. <!--<ion-thumbnail item-left>
  56. <ion-img [src]="p.image_medium" *ngIf="!p.image_medium"></ion-img>
  57. <img src="./assets/images/product.png" *ngIf="!p.image_medium"/>
  58. </ion-thumbnail>-->
  59. <h2>{{ p.name }}</h2>
  60. <p>
  61. <strong>Precio:</strong>
  62. {{ p.list_price }}
  63. </p>
  64. </ion-item>
  65. </ion-scroll>
  66. </div>
  67. <div class="sale-content-wrapper" *ngIf="!isSearch()">
  68. <!--<ion-scroll scrollY="true" [virtualScroll]="lines" approxItemHeight="30px">-->
  69. <ion-scroll scrollY="true" *ngFor="let l of lines">
  70. <!--<ion-item *virtualItem="let l">-->
  71. <ion-item>
  72. <ion-thumbnail item-left>
  73. <ion-img src="l.image_medium" *ngIf="l.image_medium"></ion-img>
  74. <img src="./assets/images/product.png" *ngIf="!l.image_medium"/>
  75. </ion-thumbnail>
  76. <h2>{{ l.product.name }}</h2>
  77. <p>
  78. <strong>Precio:</strong>
  79. {{ l.price }}
  80. </p>
  81. <p>
  82. <strong>Cantidad:</strong>
  83. {{ l.quantity }}
  84. </p>
  85. <p>
  86. <strong>Subtotal:</strong>
  87. {{ l.subtotal }}
  88. </p>
  89. <button ion-button primary clear item-right (click)="askIfRemoveItem(l)">
  90. <ion-icon name="backspace"></ion-icon>
  91. </button>
  92. <ion-row>
  93. <ion-col width-33>
  94. <button ion-button primary clear small icon-only (click)="removeQuantity(l)">
  95. <ion-icon name="remove-circle"></ion-icon>
  96. </button>
  97. </ion-col>
  98. <ion-col width-33>
  99. <button ion-button primary clear small icon-only (click)="addQuantity(l)">
  100. <ion-icon name="add-circle"></ion-icon>
  101. </button>
  102. </ion-col>
  103. <ion-col width-33>
  104. <button ion-button primary clear small icon-only (click)="askIfChangePrice(l)">
  105. <ion-icon name="cash"></ion-icon>
  106. </button>
  107. </ion-col>
  108. </ion-row>
  109. </ion-item>
  110. </ion-scroll>
  111. <div class="sale-total">
  112. <ion-list>
  113. <ion-item>
  114. <ion-label>Total:</ion-label>
  115. <ion-input readonly text-right [ngModel]="total"></ion-input>
  116. </ion-item>
  117. </ion-list>
  118. </div>
  119. </div>
  120. </ion-slide>
  121. <!--Finalizar presupuesto-->
  122. <ion-slide>
  123. <div class="finish-sale">
  124. <h1>Finalizar presupuesto</h1>
  125. <ion-list inset>
  126. <ion-item>
  127. <ion-label>SubTotal:</ion-label>
  128. <ion-input text-right readonly [ngModel]="total"></ion-input>
  129. </ion-item>
  130. <ion-item>
  131. <ion-label>Descuento:</ion-label>
  132. <ion-input text-right readonly value="0"></ion-input>
  133. </ion-item>
  134. <ion-item>
  135. <ion-label>Total:</ion-label>
  136. <ion-input text-right readonly [ngModel]="total"></ion-input>
  137. </ion-item>
  138. </ion-list>
  139. <button ion-button color="primary" (click)="saveSale()">Guardar presupuesto</button>
  140. </div>
  141. </ion-slide>
  142. </ion-slides>
  143. </ion-content>
  144. <!-- Pie del formulario -->
  145. <ion-footer *ngIf="footer.show">
  146. <ion-toolbar>
  147. <ion-buttons start>
  148. <button ion-button color="primary" clear icon-left *ngIf="footer.back.show" (click)="goToBack()">
  149. <ion-icon name="arrow-back"></ion-icon>
  150. {{ footer.back.text }}
  151. </button>
  152. </ion-buttons>
  153. <ion-buttons end>
  154. <button ion-button color="primary" clear icon-right *ngIf="footer.forward.show" (click)="goToNext()">
  155. {{ footer.forward.text }}
  156. <ion-icon name="arrow-forward"></ion-icon>
  157. </button>
  158. </ion-buttons>
  159. </ion-toolbar>
  160. </ion-footer>