Martin Macola / autoservicio

Download as
Browse Code »

Commit 4df01d80e7a41a91f1151f391bede99a1c344b93

Authored by Marcelo Puebla
1 parent cb3fcc1fe6
Exists in master

Agregada funcion para quitar un producto del carrito para volver a personalizarlo.

Showing 3 changed files with 18 additions and 4 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 4df01d8
1 import { NgModule } from '@angular/core'; 1 import { NgModule } from '@angular/core';
2 import { Routes, RouterModule } from '@angular/router'; 2 import { Routes, RouterModule } from '@angular/router';
3 import { HomeComponent } from './components/home/home.component'; 3 import { HomeComponent } from './components/home/home.component';
4 import { InicioComponent } from './components/inicio/inicio.component'; 4 import { InicioComponent } from './components/inicio/inicio.component';
5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
7 import { MasterComponent } from './components/master/master.component'; 7 import { MasterComponent } from './components/master/master.component';
8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; 8 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
9 import { PagoComponent } from './components/pago/pago.component'; 9 import { PagoComponent } from './components/pago/pago.component';
10 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; 10 import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
11 11
12 const routes: Routes = [ 12 const routes: Routes = [
13 { path: '', component: HomeComponent }, 13 { path: '', component: HomeComponent },
14 { path: 'home', component: HomeComponent }, 14 { path: 'home', component: HomeComponent },
15 { path: 'abm-imagenes', component: AmbImagenesComponent }, 15 { path: 'abm-imagenes', component: AmbImagenesComponent },
16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, 16 { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
17 { path: 'pago', component: PagoComponent }, 17 { path: 'pago', component: PagoComponent },
18 { path: 'cancelar-compra', component: CancelarCompraComponent }, 18 { path: 'cancelar-compra', component: CancelarCompraComponent },
19 { 19 {
20 path: '', 20 path: '',
21 component: MasterComponent, 21 component: MasterComponent,
22 children: [ 22 children: [
23 { path: 'inicio', component: InicioComponent }, 23 { path: 'inicio', component: InicioComponent },
24 { path: 'busqueda-productos', component: BusquedaProductosComponent } 24 { path: 'busqueda-productos', component: BusquedaProductosComponent }
25 ] 25 ]
26 }, 26 },
27 { path: '**', redirectTo: '/home', pathMatch: 'full' }, 27 { path: '**', redirectTo: '/home', pathMatch: 'full' },
28 ]; 28 ];
29 29
30 @NgModule({ 30 @NgModule({
31 imports: [RouterModule.forRoot(routes)], 31 imports: [RouterModule.forRoot(routes, {onSameUrlNavigation: 'reload'})],
32 exports: [RouterModule] 32 exports: [RouterModule]
33 }) 33 })
34 34
35 export class AppRoutingModule { } 35 export class AppRoutingModule { }
36 36
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ 4df01d8
1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center"> 1 <div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2
3 <!-- ENCABEZADO --> 3 <!-- ENCABEZADO -->
4 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 4 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
5 Mi compra 5 Mi compra
6 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 6 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
7 </p> 7 </p>
8 8
9 <div class="overflow-auto overflow-scroll mb-2 w-100"> 9 <div class="overflow-auto overflow-scroll mb-2 w-100">
10 <!-- PRODUCTOS CARRITO --> 10 <!-- PRODUCTOS CARRITO -->
11 <div 11 <div
12 class="slide-in-bl my-2 bg-white border-0 rounded-sm" 12 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 13 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
14 <!-- <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> --> 14 <!-- <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> -->
15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 15 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
16 <div class="col-12 p-0 pt-2 text-left my-auto"> 16 <div class="col-12 p-0 pt-2 text-left my-auto">
17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 17 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p> 18 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
19 </div> 19 </div>
20 <div class="col-12 pr-1 text-right h6 my-auto "> 20 <div class="col-12 pr-1 text-right h6 my-auto ">
21 <p class="m-0">{{producto.PreVen | currency}}</p> 21 <p class="m-0">{{producto.PreVen | currency}}</p>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <!-- BOTONES --> 25 <!-- BOTONES -->
26 <div class="row m-0 d-flex justify-content-between"> 26 <div class="row m-0 d-flex justify-content-between">
27 27
28 <!-- SUMAR - RESTAR CANTIDAD --> 28 <!-- SUMAR - RESTAR CANTIDAD -->
29 <div class="col-auto px-1 my-2"> 29 <div class="col-auto px-1 my-2">
30 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 30 <div class="btn-group-sm btn-group float-left my-auto" role="group">
31 <button 31 <button
32 type="button" 32 type="button"
33 class="btn btn-light btn-sm my-auto border shadow" 33 class="btn btn-light btn-sm my-auto border shadow"
34 (click)="aumentarCantidad(producto)"> 34 (click)="aumentarCantidad(producto)">
35 <i class="fa fa-plus" aria-hidden="true"></i> 35 <i class="fa fa-plus" aria-hidden="true"></i>
36 </button> 36 </button>
37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow"> 37 <div class="bg-white border border-white px-3 my-auto text-dark h5 shadow">
38 <small>{{producto.cantidad}}</small> 38 <small>{{producto.cantidad}}</small>
39 </div> 39 </div>
40 <button 40 <button
41 type="button" 41 type="button"
42 class="btn btn-light btn-sm my-auto border shadow" 42 class="btn btn-light btn-sm my-auto border shadow"
43 (click)="restarCantidad(producto)"> 43 (click)="restarCantidad(producto)">
44 <i class="fa fa-minus" aria-hidden="true"></i> 44 <i class="fa fa-minus" aria-hidden="true"></i>
45 </button> 45 </button>
46 </div> 46 </div>
47 </div> 47 </div>
48 48
49 <!-- PERSONALIZAR --> 49 <!-- PERSONALIZAR -->
50 <div class="col-auto px-1 my-2"> 50 <div class="col-auto px-1 my-2">
51 <button 51 <button
52 *ngIf="esPersonalizable(producto)" 52 *ngIf="esPersonalizable(producto)"
53 type="button" 53 type="button"
54 class="btn btn-light btn-sm my-auto float-left border shadow" 54 class="btn btn-light btn-sm my-auto float-left border shadow"
55 (click)="personalizarPromo"> 55 (click)="personalizarPromo(producto, i)">
56 <i class="fa fa-hand-o-up" aria-hidden="true"></i> 56 <i class="fa fa-refresh text-purple" aria-hidden="true"></i>
57 </button> 57 </button>
58 </div> 58 </div>
59 59
60 <!-- BORRAR --> 60 <!-- BORRAR -->
61 <div class="col-auto px-1 my-2"> 61 <div class="col-auto px-1 my-2">
62 <button 62 <button
63 type="button" 63 type="button"
64 class="btn btn-secondary btn-sm my-auto shadow" 64 class="btn btn-secondary btn-sm my-auto shadow"
65 (click)="deleteProducto(producto, i)"> 65 (click)="deleteProducto(producto, i)">
66 <i class="fa fa-trash" aria-hidden="true"></i> 66 <i class="fa fa-trash" aria-hidden="true"></i>
67 </button> 67 </button>
68 </div> 68 </div>
69 </div> 69 </div>
70 </div> 70 </div>
71 </div> 71 </div>
72 72
73 <!-- TOTAL --> 73 <!-- TOTAL -->
74 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 74 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
75 <div class="card-body row"> 75 <div class="card-body row">
76 <div class="col-12"> 76 <div class="col-12">
77 <p 77 <p
78 class="h4 border-bottom border-secondary text-secondary pb-2"> 78 class="h4 border-bottom border-secondary text-secondary pb-2">
79 ({{getCantidadProductos()}}) artículos 79 ({{getCantidadProductos()}}) artículos
80 </p> 80 </p>
81 <p class="h3 text-secondary">Total</p> 81 <p class="h3 text-secondary">Total</p>
82 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 82 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
83 </div> 83 </div>
84 <div class="col-12"> 84 <div class="col-12">
85 <button 85 <button
86 *ngIf="cantTotal > 0" 86 *ngIf="cantTotal > 0"
87 type="button" 87 type="button"
88 class="btn btn-block btn-light btn-lg shadow mb-2 p-1" 88 class="btn btn-block btn-light btn-lg shadow mb-2 p-1"
89 routerLink="/confirmacion-carrito"> 89 routerLink="/confirmacion-carrito">
90 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 90 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
91 <i class="fa fa-check text-success" aria-hidden="true"></i> 91 <i class="fa fa-check text-success" aria-hidden="true"></i>
92 </button> 92 </button>
93 <button 93 <button
94 type="button" 94 type="button"
95 class="btn btn-block btn-light shadow btn-sm shadow" 95 class="btn btn-block btn-light shadow btn-sm shadow"
96 [routerLink]="['/cancelar-compra']"> 96 [routerLink]="['/cancelar-compra']">
97 <span class="pr-1">Cancelar</span> 97 <span class="pr-1">Cancelar</span>
98 <i class="fa fa-times text-danger" aria-hidden="true"></i> 98 <i class="fa fa-times text-danger" aria-hidden="true"></i>
99 </button> 99 </button>
100 </div> 100 </div>
101 </div> 101 </div>
102 </div> 102 </div>
103 </div> 103 </div>
104 104
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ 4df01d8
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { Producto } from 'src/app/wrappers/producto'; 2 import { Producto } from 'src/app/wrappers/producto';
3 import { appSettings } from 'src/etc/AppSettings'; 3 import { appSettings } from 'src/etc/AppSettings';
4 import { ProductoService } from 'src/app/services/producto.service'; 4 import { ProductoService } from 'src/app/services/producto.service';
5 import { Router } from '@angular/router';
5 6
6 @Component({ 7 @Component({
7 selector: 'app-sidebar', 8 selector: 'app-sidebar',
8 templateUrl: './sidebar.component.html', 9 templateUrl: './sidebar.component.html',
9 styleUrls: ['./sidebar.component.scss'], 10 styleUrls: ['./sidebar.component.scss'],
10 }) 11 })
11 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
12 13
13 private cantTotal: number = 0; 14 private cantTotal: number = 0;
14 private cantMin: number = 1; 15 private cantMin: number = 1;
15 private cantMax: number = 50; 16 private cantMax: number = 50;
16 private total: number = 0; 17 private total: number = 0;
17 private apiUrl: string = appSettings.apiUrl; 18 private apiUrl: string = appSettings.apiUrl;
18 19
19 public productosCarrito: Producto[] = []; 20 public productosCarrito: Producto[] = [];
20 21
21 constructor(private productoService: ProductoService) { } 22 constructor(
23 private productoService: ProductoService,
24 private router: Router) {
25 this.router.routeReuseStrategy.shouldReuseRoute = function () {
26 return false;
27 }
28 }
22 29
23 ngOnInit() { 30 ngOnInit() {
24 31
25 this.productosCarrito = this.productoService.productos; 32 this.productosCarrito = this.productoService.productos;
26 } 33 }
27 34
28 getCantidadProductos() { 35 getCantidadProductos() {
29 36
30 setTimeout(() => { 37 setTimeout(() => {
31 var cantTotalAux = 0; 38 var cantTotalAux = 0;
32 this.productosCarrito.forEach(producto => { 39 this.productosCarrito.forEach(producto => {
33 40
34 cantTotalAux += producto.cantidad; 41 cantTotalAux += producto.cantidad;
35 }, 250); 42 }, 250);
36 this.cantTotal = cantTotalAux; 43 this.cantTotal = cantTotalAux;
37 }) 44 })
38 return this.cantTotal; 45 return this.cantTotal;
39 } 46 }
40 47
41 getTotal() { 48 getTotal() {
42 49
43 var subTotal = 0; 50 var subTotal = 0;
44 for (let i = 0; i < this.productosCarrito.length; i++) { 51 for (let i = 0; i < this.productosCarrito.length; i++) {
45 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 52 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
46 } 53 }
47 return this.total = subTotal; 54 return this.total = subTotal;
48 } 55 }
49 56
50 aumentarCantidad(producto: Producto) { 57 aumentarCantidad(producto: Producto) {
51 58
52 if (producto.cantidad < this.cantMax) { 59 if (producto.cantidad < this.cantMax) {
53 producto.cantidad++; 60 producto.cantidad++;
54 this.cantTotal++ 61 this.cantTotal++
55 } 62 }
56 } 63 }
57 64
58 restarCantidad(producto: Producto) { 65 restarCantidad(producto: Producto) {
59 66
60 if (producto.cantidad > this.cantMin) { 67 if (producto.cantidad > this.cantMin) {
61 producto.cantidad--; 68 producto.cantidad--;
62 this.cantTotal--; 69 this.cantTotal--;
63 } 70 }
64 } 71 }
65 72
66 deleteProducto(producto: Producto, index: number) { 73 deleteProducto(producto: Producto, index: number) {
67 74
68 this.cantTotal -= producto.cantidad; 75 this.cantTotal -= producto.cantidad;
69 this.total -= producto.PreVen * producto.cantidad; 76 this.total -= producto.PreVen * producto.cantidad;
70 this.productosCarrito.reverse().splice(index, 1); 77 this.productosCarrito.reverse().splice(index, 1);
71 return; 78 return;
72 } 79 }
73 80
74 esPersonalizable(producto: Producto) { 81 esPersonalizable(producto: Producto) {
75 82
76 var esPersonalizable: boolean = false; 83 var esPersonalizable: boolean = false;
77 if (producto.tieneSinonimos) 84 if (producto.tieneSinonimos)
78 esPersonalizable = true; 85 esPersonalizable = true;
79 86
80 return esPersonalizable; 87 return esPersonalizable;
81 } 88 }
82 89
90 personalizarPromo(producto: Producto, index) {
91
92 this.productoService.productoAcargar = producto;
93 this.deleteProducto(producto, index);
94 this.router.navigate(['inicio']);
95 }
96
83 } 97 }
84 98