Martin Macola / autoservicio

Commit 3205cca4cfea99cfd4f75ccf381332d70c88de6b

Authored by Eric Fernandez 2019-08-21 16:55:31 -0300

Exists in master

Merge branch 'master' into 'master'

Master(mpuebla)

See merge request !44

Showing 4 changed files Show diff stats

src/app/components/cancelar-compra/cancelar-compra.component.ts

Diff comments View file @ 3205cca

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { appSettings } from 'src/etc/AppSettings';
 import { Location } from '@angular/common';
 import { Router } from '@angular/router';
 import { ProductoService } from 'src/app/services/producto.service';
 @Component({
   selector: 'app-cancelar-compra',
   templateUrl: './cancelar-compra.component.html',
   styleUrls: ['./cancelar-compra.component.scss']
 })
-export class CancelarCompraComponent implements OnInit {
+export class CancelarCompraComponent implements OnInit, OnDestroy {
   private apiUrl: string = appSettings.apiUrl;
+  private timer: any;
   constructor(
     private location: Location,
     private router: Router,
-    private productoService : ProductoService
+    private productoService: ProductoService
-    ) { }
+  ) { }
   ngOnInit() {
-    setTimeout(() => {
+    this.timer = setTimeout(() => {
       this.limpiarCarritoYvolver();
     }, 30000)
   }
+  ngOnDestroy() {
+    clearTimeout(this.timer);
+  }
   volverPreviousPage() {
     this.location.back();
   }
-  limpiarCarritoYvolver(){
+  limpiarCarritoYvolver() {
     this.productoService.productoAcargar = undefined;
     this.productoService.promoAcargar = undefined;
     this.productoService.productos = [];
     this.router.navigate(['/home']);
   }
 }

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 3205cca

 <div class="row m-0 fade-in bg-primary-gradient disable-user-select">
   <div class="col-12 p-0 vh-100">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-gray text-muted text-center m-0">
           Pagar
           <i class="fa fa-usd"></i>
         </p>
       </div>
     </div>
     <div class="row m-0">
       <div class="col-12">
         <!-- TEXTO DE IZQUIERDA -->
         <div class="row mx-2 mt-4 text-white">
           <div class="col-sm-2 my-auto">
             <p class="h2">Mi Compra
               <i class="fa fa-shopping-cart "></i>
             </p>
           </div>
           <div class="col-sm-4 my-auto">
             <p class="h3">¿Desea finalizar su compra?</p>
             <p class="h4">Por favor, controle y confirme su compra.</p>
           </div>
         </div>
         <div class="row">
           <!-- GRILLA DE PRODUCTOS DE MI COMPRA -->
           <div class="col-sm-7">
             <div class="row ml-4 pr-3 vh-70 overflow-scroll text-dark">
               <div class="col-4 p-2" *ngFor="let producto of productos">
                 <div class="bg-white rounded-sm shadow border-0">
                   <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
                   <div class="p-2">
                     <p class="h6 text-left m-0">{{producto.DetArt}}</p>
                     <div class="row justify-content-between m-0">
                       <div class="col-12 p-0">
                         <div class="text-left">
                           <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
                           <p class="m-0 h6"><small>{{producto.CodSec}}-{{producto.CodArt}}</small></p>
                         </div>
                       </div>
                       <div class="col-12 my-auto pt-2 pr-2 p-0">
                         <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="col-sm-5">
+          <div class="col-sm-5 pl-0">
             <div class="row ml-3">
               <!-- TICKET -->
-              <div class="col-sm-7">
+              <div class="col-sm-7 p-0">
                 <div class="card rounded-sm shadow">
                   <div class="card-body">
                     <p class="h5 card-title">Su Ticket</p>
-                    <p class="h6 card-text text-left mt-4 pr-2 vh-60 overflow-scroll">
+                    <div class="row mt-4 m-0">
-                      Ticket detalle.
+                      <div class="col-12 p-0 mb-2">
-                    </p>
+                        <p class="h6 m-0 card-text text-left">
-                    <p class="h4 card-text text-right mt-3 mb-0">
+                          <small class="font-weight-bold">DESCRIPCIÓN</small>
-                      Total {{230 | currency}}
+                        </p>
+                        <p class="h6 m-0 card-text text-left">
+                          <small class="font-weight-bold">CANTIDAD X PRECIO UNITARIO</small>
+                        </p>
+                      </div>
+                    </div>
+                    <div class="row vh-50 overflow-scroll m-0">
+                      <div class="col-12 p-0 mb-2" *ngFor="let producto of productos">
+                        <p class="h6 m-0 card-text text-left">
+                          <small>{{producto.DetArt}}</small>
+                        </p>
+                        <div class="row d-flex justify-content-between m-0">
+                          <div class="col p-0">
+                            <p class="h6 m-0 card-text text-left">
+                              <small>{{producto.cantidad}} x {{producto.PreVen | currency}}</small>
+                            </p>
+                          </div>
+                          <div class="col p-0">
+                            <p class="h6 m-0 card-text text-right">
+                              <small>{{(producto.PreVen) * (producto.cantidad) | currency}}</small>
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                    <p class="h4 font-weight-bold card-text text-right mt-3 mb-0">
+                      Total {{getTotal() | currency}}
                     </p>
                   </div>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <!-- OPCIONES ABAJO DERECHA -->
         <div class="row m-0 fixed-bottom">
           <div class="col-sm-2 offset-sm-10 p-0 mt-auto">
             <div class="card m-2 rounded-top-sm mt-auto blue-gradient border-0">
               <div class="card-body row m-0">
                 <div class="col-12 p-3">
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     (click)="volverPreviousPage()">
                     <span class="pr-2">Volver</span>
                     <i class="fa fa-undo text-warning"></i>
                   </button>
                   <button [routerLink]="['/pago']" type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1">
                     <span class="font-weight-bold pr-2">Finalizar y Pagar</span>
                     <i class="fa fa-check text-success"></i>
                   </button>
                   <button
                     type="button"
                     class="btn btn-block btn-light shadow btn-sm shadow"
                     [routerLink]="['/cancelar-compra']">
                     <span class="pr-2">Cancelar</span>
                     <i class="fa fa-times text-danger"></i>
                   </button>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts

Diff comments View file @ 3205cca

 import { Component, OnInit } from '@angular/core';
 import { appSettings } from 'src/etc/AppSettings';
 import { Location } from '@angular/common';
 import { ProductoService } from 'src/app/services/producto.service';
+import { Producto } from 'src/app/wrappers/producto';
 @Component({
   selector: 'app-confirmacion-carrito',
   templateUrl: './confirmacion-carrito.component.html',
   styleUrls: ['./confirmacion-carrito.component.scss']
 })
 export class ConfirmacionCarritoComponent implements OnInit {
-  productos = [];
+  productos: Producto[] = [];
+  total: number = 0;
   private apiUrl: string = appSettings.apiUrl;
-  constructor(private location: Location, private productoService: ProductoService) { }
+  constructor(
+    private location: Location,
+    private productoService: ProductoService
+  ) { }
   ngOnInit() {
     this.productos = this.productoService.productos;
   }
   volverPreviousPage() {
     this.location.back();
   }
+  getTotal() {
+    var subTotal = 0;
+    this.productos.forEach(producto => {
+      subTotal = subTotal + (producto.PreVen * producto.cantidad);
+    });
+    return this.total = subTotal;
+  }
 }

src/styles.scss

Diff comments View file @ 3205cca

 @import "./assets/scss/animation.scss";
 @import "./assets/scss/bootstrap-override.scss";
 @import "../node_modules/bootstrap/scss/_variables.scss";
 html,
 body {
   background-color: #f0f0f0;
   font-family: bahnschrift;
   overflow: hidden !important;
 }
 .blur {
   filter: blur(10px);
   -webkit-filter: blur(10px);
 }
 .disable-user-select {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 .blue-gradient {
   background: linear-gradient(0deg, #ffffff00, $white);
 }
 .rounded {
   border-radius: 1.5rem !important;
 }
 .rounded-top-sm {
   border-top-left-radius: 0.75rem !important;
   border-top-right-radius: 0.75rem !important;
 }
 .rounded-sm {
   border-radius: 0.75rem !important;
 }
 .card-effect {
   &:active {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
   &:focus {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
 }
 .overflow-scroll {
   overflow-y: auto !important;
   overflow-x: hidden !important;
   &::-webkit-scrollbar {
     width: 1em;
   }
   &::-webkit-scrollbar-track {
     border-radius: 10px;
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     background-color: $white;
   }
   &::-webkit-scrollbar-thumb {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     outline: 1px solid slategrey;
     border-radius: 10px;
     height: 12px;
     &:active {
       box-shadow: inset 0 0 8px $primary;
       -webkit-box-shadow: inset 0 0 8px $primary;
     }
   }
   &::-webkit-scrollbar-corner {
     border-radius: 10px;
   }
 }
 .bg-gray {
   background-color: #e6e6e6;
 }
 .bg-primary-gradient {
   background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
 }
 .bg-primary-gradient-horizontal {
   background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
 }
 .icon-dim {
   height: 40px !important;
   width: auto !important;
   background-color: white !important;
 }
 .text-purple {
   color: $purple;
 }
 .vh-70 {
   min-height: auto !important;
   max-height: 70vh !important;
 }
 .vh-60 {
   min-height: auto !important;
   max-height: 60vh !important;
 }
+.vh-50 {
+  min-height: auto !important;
+  max-height: 50vh !important;
+}
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }
 .background-image {
   background-repeat: no-repeat;
   background-size: cover;
   position: fixed;
 }
 .rounded-bottom-right {
   border-bottom-right-radius: 10rem;
   &:before {
     border-radius: 0 40px 40px 0;
     background-color: #fff;
   }
 }
 .rounded-top-left {
   border-top-left-radius: 10rem;
 }
 .bg-gray {
   background-color: #cccccc;
 }