Martin Macola / autoservicio

Browse Code »

Commit 8c68a0e91e8685f6f097abe2672cc7cb3c363c8d

Authored by Marcelo Puebla 2019-09-12 12:34:32 -0300

1 parent 14c393de40

Exists in master

Agregadas animations..

Showing 2 changed files with 15 additions and 2 deletions Show diff stats

src/app/components/sidebar/sidebar.component.html

Diff comments View file @ 8c68a0e

 <div class="disable-user-select d-flex align-items-center flex-column h-100 text-center">
   <!-- ENCABEZADO -->
   <p class="h4 border-bottom border-white text-white pb-2">
     Mi compra
     <i class="fa fa-shopping-cart" aria-hidden="true"></i>
   </p>
   <div class="overflow-scroll px-1 mb-1 w-100">
     <!-- PRODUCTOS CARRITO -->
     <div class="row m-0"
-        *ngFor="let producto of productosCarrito; let i = index">
+        *ngFor="let producto of productosCarrito; let i = index"
+        [@EnterLeave]="flyIn">
       <div class="col p-0 my-1 bg-white border-0 rounded-sm">
         <div class="row m-0">
           <div class="col-6 pl-1 pr-0 my-auto">
             <img
               class="w-100 float-left rounded-sm shadow"
               src="{{apiImagenes}}/imagenes/{{producto.imagenes[0].imagen}}">
           </div>
           <div class="col-6 px-1">
             <!-- BOTONES -->
             <div class="row m-0 d-flex justify-content-between">
               <!-- SUMAR - RESTAR CANTIDAD -->
               <div class="col p-1">
                 <div class="btn-group-sm btn-group float-left" role="group">
                   <button
                     type="button"
                     class="btn btn-light btn-sm border shadow"
                     (click)="aumentarCantidad(producto)">
                     <i class="fa fa-plus" aria-hidden="true"></i>
                   </button>
                   <div class="bg-white border border-white my-auto px-2 text-dark h5 shadow">
                     <small>{{producto.cantidad}}</small>
                   </div>
                   <button
                     type="button"
                     class="btn btn-light btn-sm border shadow"
                     (click)="restarCantidad(producto)">
                     <i class="fa fa-minus" aria-hidden="true"></i>
                   </button>
                 </div>
               </div>
               <!-- PERSONALIZAR -->
               <div class="col p-1">
                 <button
                   *ngIf="producto.tieneSinonimos"
                   type="button"
                   class="btn btn-light btn-sm float-left border shadow"
                   (click)="personalizarPromo(producto, i)">
                   <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
                 </button>
               </div>
               <!-- BORRAR -->
               <div class="col p-1">
                 <button
                   type="button"
                   class="btn btn-secondary btn-sm float-right shadow"
                   (click)="deleteProducto(producto, i)">
                   <i class="fa fa-trash" aria-hidden="true"></i>
                 </button>
               </div>
             </div>
           </div>
         </div>
         <div class="row m-0 shadow rounded-sm">
           <div class="col px-2">
             <p class="m-0 text-left h6"><small>{{producto.DetArt}}</small></p>
             <p class="m-0 text-right font-weight-bold h6">{{producto.PreVen | currency}}</p>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- TOTAL -->
   <div class="card rounded-top-sm mx-2 mt-auto blue-gradient border-0">
     <div class="card-body p-2 pt-3 row m-0">
       <div class="col-12 p-0">
         <p
           class="h4 border-bottom border-secondary text-secondary pb-2">
           ({{getCantidadProductos()}}) artículos
         </p>
         <p class="h4 text-secondary">Total</p>
         <p class="h2 font-weight-bold">{{getTotal() | currency}}</p>
       </div>
       <div class="col-12 p-0">
         <button
           *ngIf="getCantidadProductos() > 0"
           type="button"
           class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
           routerLink="/confirmacion-carrito">
           <span class="font-weight-bold pr-1">Pagar</span>
           <i class="fa fa-check text-success" aria-hidden="true"></i>
         </button>
         <button
           type="button"
           class="btn btn-block btn-light shadow btn-sm shadow"
           [routerLink]="['/cancelar-compra']">
           <span class="pr-1">Cancelar</span>
           <i class="fa fa-times text-danger" aria-hidden="true"></i>
         </button>
       </div>
     </div>
   </div>
 </div>

src/app/components/sidebar/sidebar.component.ts

Diff comments View file @ 8c68a0e

 import { Component, OnInit } from '@angular/core';
 import { Producto } from 'src/app/wrappers/producto';
 import { appSettings } from 'src/etc/AppSettings';
 import { ProductoService } from 'src/app/services/producto.service';
 import { Router } from '@angular/router';
+import { trigger, state, style, transition, animate } from '@angular/animations';
 @Component({
   selector: 'app-sidebar',
   templateUrl: './sidebar.component.html',
   styleUrls: ['./sidebar.component.scss'],
+  animations: [
+    trigger('EnterLeave', [
+      state('flyIn', style({ transform: 'translateX(0)' })),
+      transition(':enter', [
+        style({ transform: 'translateX(-100%)' }),
+        animate('0.3s ease-in')
+      ]),
+      transition(':leave', [
+        animate('0.3s ease-out', style({ transform: 'translateX(-100%)' }))
+      ])
+    ])
+  ]
 })
 export class SidebarComponent implements OnInit {
   private cantTotal: number = 0;
   private cantMin: number = 1;
   private cantMax: number = 50;
   private total: number = 0;
   private apiImagenes: string = appSettings.apiImagenes;
   public productosCarrito: Producto[] = [];
   constructor(
     private productoService: ProductoService,
     private router: Router) {
     this.router.routeReuseStrategy.shouldReuseRoute = function () {
       return false;
     }
   }
   ngOnInit() {
     this.productosCarrito = this.productoService.productos;
   }
   getCantidadProductos() {
     var cantTotalAux = 0;
     this.productosCarrito.forEach(producto => {
       cantTotalAux += producto.cantidad;
     });
     this.cantTotal = cantTotalAux;
     return this.cantTotal;
   }
   getTotal() {
     var subTotal = 0;
     for (let i = 0; i < this.productosCarrito.length; i++) {
       subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
     }
     return this.total = subTotal;
   }
   aumentarCantidad(producto: Producto) {
     if (producto.cantidad < this.cantMax) {
       producto.cantidad++;
       this.cantTotal++
     }
   }
   restarCantidad(producto: Producto) {
     if (producto.cantidad > this.cantMin) {
       producto.cantidad--;
       this.cantTotal--;
     }
   }
   deleteProducto(producto: Producto, index: number) {
     this.cantTotal -= producto.cantidad;
     this.total -= producto.PreVen * producto.cantidad;
     this.productosCarrito.splice(index, 1);
-    return;
   }
   personalizarPromo(producto: Producto, index) {
     this.productoService.productoAcargar = producto;
     this.productoService.esPromoPersonalizada = true;
     this.deleteProducto(producto, index);
     this.router.navigate(['inicio']);
   }
 }