Martin Macola / autoservicio

Download as
Browse Code »

Commit fa5a6300a26e4b8a97fc8429c46f215d9396fd14

Authored by Eric Fernandez
2 parents bea5ae5ad9 6107917b60
Exists in master

Merge branch 'master' of http://git.focasoftware.com/angular/autoservicio

Showing 5 changed files   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ fa5a630
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center"> 7 <p class="h5 py-1 bg-gray text-muted text-center">
8 Búsqueda 8 Búsqueda
9 <i class="fa fa-search"></i> 9 <i class="fa fa-search"></i>
10 </p> 10 </p>
11 </div> 11 </div>
12 </div> 12 </div>
13 13
14 <div class="row m-3 disable-user-select"> 14 <div class="row m-3 disable-user-select">
15 15
16 <!-- FILTROS --> 16 <!-- FILTROS -->
17 <div *ngIf="verCategorias" class="col-sm-2 p-1"> 17 <div *ngIf="verCategorias" class="col-sm-2 p-1">
18 <div class="text-center"> 18 <div class="text-center">
19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p> 19 <p class="font-weight-bold text-muted border-bottom pb-2">Buscar por Categoría</p>
20 </div> 20 </div>
21 <ul class="list-group"> 21 <ul class="list-group">
22 <li 22 <li
23 *ngFor="let categoria of categorias" 23 *ngFor="let categoria of categorias"
24 [ngClass]="{active: categoriaActive == categoria.id}" 24 [ngClass]="{active: categoriaActive == categoria.id}"
25 (click)="categoriaActive = categoria.id; filterItems()" 25 (click)="categoriaActive = categoria.id; filterItems()"
26 class="list-group-item list-group-item-action text-center my-1 p-2 h6"> 26 class="list-group-item list-group-item-action text-center my-1 p-2 h6">
27 {{categoria.detalle}} 27 {{categoria.detalle}}
28 </li> 28 </li>
29 </ul> 29 </ul>
30 </div> 30 </div>
31 31
32 <!-- SEARCH INPUT --> 32 <!-- SEARCH INPUT -->
33 <div *ngIf="productos.length > 0" class="fade-in col"> 33 <div *ngIf="productos.length > 0" class="fade-in col">
34 34
35 <div class="row search"> 35 <div class="row search">
36 <div class="col-sm-10"> 36 <div class="col-sm-10">
37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span> 37 <span class="fa fa-search form-control-lg form-control-search pl-3"></span>
38 <input 38 <input
39 type="text" 39 type="text"
40 class="form-control form-control-lg shadow-sm rounded-pill px-5" 40 class="form-control form-control-lg shadow-sm rounded-pill px-5"
41 placeholder="Búsqueda productos" 41 placeholder="Búsqueda productos"
42 [(ngModel)]="searchTerm" 42 [(ngModel)]="searchTerm"
43 (ngModelChange)="filterItems()"> 43 (ngModelChange)="filterItems()">
44 </div> 44 </div>
45 <!-- BOTON VOLVER --> 45 <!-- BOTON VOLVER -->
46 <div class="col-sm-2"> 46 <div class="col-sm-2">
47 <button 47 <button
48 type="button" 48 type="button"
49 class="btn btn-light btn-lg shadow-sm" 49 class="btn btn-light btn-lg shadow-sm"
50 [routerLink]="['/inicio']"> 50 [routerLink]="['/inicio']">
51 <span class="font-weight-normal h6 pr-2">Volver</span> 51 <span class="font-weight-normal h6 pr-2">Volver</span>
52 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 52 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
53 </button> 53 </button>
54 </div> 54 </div>
55 <div class="col-sm-12 my-2"> 55 <div class="col-sm-12 my-2">
56 <span class="badge badge-light px-2">Más vendidos</span> 56 <span class="badge badge-light px-2">Más vendidos</span>
57 </div> 57 </div>
58 </div> 58 </div>
59 <!-- LISTA DE PRODUCTOS --> 59 <!-- LISTA DE PRODUCTOS -->
60 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 60 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
61 <div 61 <div
62 class="col-4 p-2" 62 class="col-4 p-2"
63 *ngFor="let producto of auxProductos"> 63 *ngFor="let producto of auxProductos">
64 <div 64 <div
65 class="card-effect bg-white rounded-sm shadow border-0" 65 class="card-effect bg-white rounded-sm shadow border-0"
66 (click)="elegirProducto(producto)"> 66 (click)="elegirProducto(producto)">
67 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto"> 67 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
68 <div class="p-2"> 68 <div class="p-2">
69 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 69 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
70 <div class="row justify-content-between m-0"> 70 <div class="row justify-content-between m-0">
71 <div class="col-12 p-0"> 71 <div class="col-12 p-0">
72 <div class="text-left"> 72 <div class="text-left">
73 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 73 <p class="m-0 h6"><small>{{producto.DET_LAR}}</small></p>
74 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
75 </div> 74 </div>
76 </div> 75 </div>
77 <div class="col-12 my-auto pt-2 pr-2 p-0"> 76 <div class="col-12 my-auto pt-2 pr-2 p-0">
78 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 77 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
79 </div> 78 </div>
80 </div> 79 </div>
81 </div> 80 </div>
82 </div> 81 </div>
83 </div> 82 </div>
84 </div> 83 </div>
85 </div> 84 </div>
86 85
87 <!-- SPINNER --> 86 <!-- SPINNER -->
88 <div 87 <div
89 *ngIf="productos.length === 0 && showSpinner" 88 *ngIf="productos.length === 0 && showSpinner"
90 class="col-sm-10 p-0 align-self-center text-center"> 89 class="col-sm-10 p-0 align-self-center text-center">
91 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 90 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
92 <span class="text-secondary m-2 h5">Cargando información.</span> 91 <span class="text-secondary m-2 h5">Cargando información.</span>
93 </div> 92 </div>
94 93
95 </div> 94 </div>
96 95
97 </div> 96 </div>
98 97
99 </div> 98 </div>
100 99
src/app/components/cancelar-compra/cancelar-compra.component.html
Diff comments   View file @ fa5a630
1 <div class="container-fluid p-0"> 1 <div class="container-fluid fade-in p-0 disable-user-select">
2 <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image">
3 <div class="row m-0">
4 <div class="col p-0">
5 <div class="vh-100 fade-in d-flex align-content-strech flex-wrap disable-user-select">
6 2
7 <!-- HEADER --> 3 <!-- INFO -->
8 <div class="row m-0 w-100 bg-primary-gradient-horizontal"> 4 <div class="row vh-100 py-5 m-0 w-100 bg-primary-gradient-horizontal">
9 <div class="col-6 bg-white rounded-bottom-right"> 5 <div class="col-4 offset-1">
10 <div class="row h-100"> 6 <div class="row h-100">
11 <div class="col d-flex align-items-center"> 7 <div class="col-12 my-auto">
12 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png"> 8 <div class="card rounded">
13 </div> 9 <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-5 mb-4">
10 <div class="mb-5 mt-4">
11 <p class="display-3 card-text text-center font-weight-bold">
12 Atención
13 </p>
14 </div> 14 </div>
15 </div> 15 </div>
16 </div> 16 </div>
17 17 </div>
18 <!-- INFO --> 18 </div>
19 <div class="row h-75 py-5 m-0 w-100"> 19 <div class="col-6 text-center text-white my-auto">
20 <div class="col-4 offset-2"> 20 <p class="display-3 font-weight-bold mb-5">
21 <div class="row h-100"> 21 ¿Desea Cancelar su compra?
22 <div class="col-12 py-4"> 22 </p>
23 <div class="card h-100 rounded"> 23 <div class="d-flex justify-content-center mt-2">
24 <img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto mt-auto mb-4"> 24 <button type="button" class="btn btn-lg btn-light shadow mr-4" (click)="volverPreviousPage()">
25 <div class="mb-auto mt-4"> 25 <span class="pr-2">Continuar con mi compra</span>
26 <p class="display-3 card-text text-center font-weight-bold"> 26 <i class="fa fa-undo text-warning"></i>
27 Atención 27 </button>
28 </p> 28 <button type="button" class="btn btn-lg btn-light shadow ml-4" (click)="limpiarCarritoYvolver()">
29 </div> 29 <span class="pr-2">Si, Cancelar</span>
30 </div> 30 <i class="fa fa-times text-danger"></i>
31 </div> 31 </button>
32 </div>
33 </div>
34 <div class="col-6 text-center text-white my-auto">
35 <p class="display-3 font-weight-bold mb-5">
36 Usted esta a punto<br>de cancelar su compra
37 </p>
38 <p class="display-4 m-0">
39 Perderá los datos y<br>productos ya ingresados
40 </p>
41 <div class="d-flex justify-content-center mt-2">
42 <button
43 type="button"
44 class="btn btn-lg btn-light shadow mr-4"
45 (click)="volverPreviousPage()">
46 <span class="pr-2">Volver a mi compra</span>
47 <i class="fa fa-undo text-warning"></i>
48 </button>
49 <button
50 type="button"
51 class="btn btn-lg btn-light shadow ml-4"
52 (click)="limpiarCarritoYvolver()">
53 <span class="pr-2">Si, terminar</span>
54 <i class="fa fa-times text-danger"></i>
55 </button>
56 </div>
57 </div>
58 </div>
59
60 <!-- FOOTER -->
61 <div class="row m-0 w-100 bg-gray">
62 <div class="col-6 bg-white offset-6 rounded-top-left">
63 <div class="row h-100">
64 <div class="col d-flex align-items-center">
65 <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
66 </div>
67 </div>
68 </div>
69 </div>
70
71 </div> 32 </div>
src/app/components/cancelar-compra/cancelar-compra.component.ts
Diff comments   View file @ fa5a630
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { appSettings } from 'src/etc/AppSettings'; 2 import { appSettings } from 'src/etc/AppSettings';
3 import { Location } from '@angular/common'; 3 import { Location } from '@angular/common';
4 import { Router } from '@angular/router'; 4 import { Router } from '@angular/router';
5 import { ProductoService } from 'src/app/services/producto.service';
5 6
6 @Component({ 7 @Component({
7 selector: 'app-cancelar-compra', 8 selector: 'app-cancelar-compra',
8 templateUrl: './cancelar-compra.component.html', 9 templateUrl: './cancelar-compra.component.html',
9 styleUrls: ['./cancelar-compra.component.scss'] 10 styleUrls: ['./cancelar-compra.component.scss']
10 }) 11 })
11 export class CancelarCompraComponent implements OnInit { 12 export class CancelarCompraComponent implements OnInit {
12 13
13 private apiUrl: string = appSettings.apiUrl; 14 private apiUrl: string = appSettings.apiUrl;
14 15
15 constructor( 16 constructor(
16 private location: Location, 17 private location: Location,
17 private router: Router 18 private router: Router,
19 private productoService : ProductoService
18 ) { } 20 ) { }
19 21
20 ngOnInit() { 22 ngOnInit() {
23
24 setTimeout(() => {
25 this.limpiarCarritoYvolver();
26 }, 30000)
21 } 27 }
22 28
23 volverPreviousPage() { 29 volverPreviousPage() {
24 30
25 this.location.back(); 31 this.location.back();
26 } 32 }
27 33
28 limpiarCarritoYvolver(){ 34 limpiarCarritoYvolver(){
29 35
36 this.productoService.productoAcargar = undefined;
37 this.productoService.promoAcargar = undefined;
38 this.productoService.productos = [];
30 this.router.navigate(['/home']); 39 this.router.navigate(['/home']);
31 } 40 }
32 41
33 } 42 }
34 43
src/app/components/inicio/inicio.component.html
Diff comments   View file @ fa5a630
1 <div class="row m-0 fade-in"> 1 <div class="row m-0 fade-in">
2 <div class="col-12 p-0"> 2 <div class="col-12 p-0">
3 3
4 <!-- NOMBRE DE SECCION --> 4 <!-- NOMBRE DE SECCION -->
5 <div class="row m-0"> 5 <div class="row m-0">
6 <div class="col-12 p-0"> 6 <div class="col-12 p-0">
7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p> 7 <p class="h5 py-1 bg-gray text-muted text-center">Inicio</p>
8 </div> 8 </div>
9 </div> 9 </div>
10 10
11 <div class="row m-3 d-flex align-items-start disable-user-select"> 11 <div class="row m-3 d-flex align-items-start disable-user-select">
12 <div class="col-md-5 d-flex align-items-end flex-column"> 12 <div class="col-md-5 d-flex align-items-end flex-column">
13 13
14 <!-- PROMOCIONES --> 14 <!-- PROMOCIONES -->
15 <div 15 <div
16 (click)="irBusquedaProductos(false)" 16 (click)="irBusquedaProductos(false)"
17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto"> 17 class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
18 <div class="card-body text-left px-4 py-3"> 18 <div class="card-body text-left px-4 py-3">
19 <div class="row"> 19 <div class="row">
20 <div class="col-7"> 20 <div class="col-auto">
21 <p class="h3 card-title">Promociones</p> 21 <p class="h3 card-title">Promociones</p>
22 </div> 22 </div>
23 <div class="col-5 p-0"> 23 <div class="col-auto p-0">
24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0"> 24 <img src="{{apiUrl}}/imagenes/primario.promociones.png" class="icon-dim m-0">
25 </div> 25 </div>
26 </div> 26 </div>
27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p> 27 <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
28 </div> 28 </div>
29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel"> 29 <div id="carouselIndicators" class="carousel slide" data-ride="carousel">
30 <div class="carousel-inner"> 30 <div class="carousel-inner">
31 <div class="carousel-item active"> 31 <div class="carousel-item active">
32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded"> 32 <img src="{{apiUrl}}/imagenes/beldent.jpg" class="d-block w-75 m-auto rounded">
33 </div> 33 </div>
34 <div class="carousel-item"> 34 <div class="carousel-item">
35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded"> 35 <img src="{{apiUrl}}/imagenes/cafe con leche y medialunas.jpg" class="d-block w-75 m-auto rounded">
36 </div> 36 </div>
37 <div class="carousel-item"> 37 <div class="carousel-item">
38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded"> 38 <img src="{{apiUrl}}/imagenes/Surtido bagley.jpg" class="d-block w-75 m-auto rounded">
39 </div> 39 </div>
40 <div class="carousel-item"> 40 <div class="carousel-item">
41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded"> 41 <img src="{{apiUrl}}/imagenes/yogurisimo.jpg" class="d-block w-75 m-auto rounded">
42 </div> 42 </div>
43 </div> 43 </div>
44 </div> 44 </div>
45 </div> 45 </div>
46 46
47 <!-- ORDENAR --> 47 <!-- ORDENAR -->
48 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 48 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
49 <div class="card-body text-left px-4 py-3"> 49 <div class="card-body text-left px-4 py-3">
50 <div class="row"> 50 <div class="row">
51 <div class="col-5"> 51 <div class="col-auto">
52 <p class="h3 card-title">Ordenar Pedido</p> 52 <p class="h3 card-title">Ordenar Pedido</p>
53 </div> 53 </div>
54 <div class="col-7 p-0"> 54 <div class="col-auto p-0">
55 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 55 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
56 </div> 56 </div>
57 </div> 57 </div>
58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 58 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
59 </div> 59 </div>
60 <img 60 <img
61 class="card-img-bottom d-block w-100 mx-auto rounded" 61 class="card-img-bottom d-block w-100 mx-auto rounded"
62 src="{{apiUrl}}/imagenes/cafe.jpg"> 62 src="{{apiUrl}}/imagenes/cafe.jpg">
63 </div> 63 </div>
64 </div> 64 </div>
65 65
66 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 66 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
67 67
68 <!-- CARGAR PRODUCTOS --> 68 <!-- CARGAR PRODUCTOS -->
69 <ng-template #popTemplate> 69 <ng-template #popTemplate>
70 <app-popover-promos 70 <app-popover-promos
71 *ngIf="promociones.length > 0 && sinonimos.length === 0" 71 *ngIf="promociones.length > 0 && sinonimos.length === 0"
72 [popover]="popoverDirective" 72 [popover]="popoverDirective"
73 [popoverContent]="promociones" 73 [popoverContent]="promociones"
74 (promoSeleccionada)="promoSeleccionada($event)" 74 (promoSeleccionada)="promoSeleccionada($event)"
75 class="text-white rounded-sm border-0"> 75 class="text-white rounded-sm border-0">
76 </app-popover-promos> 76 </app-popover-promos>
77 <app-popover-sinonimos 77 <app-popover-sinonimos
78 *ngIf="sinonimos.length > 0" 78 *ngIf="sinonimos.length > 0"
79 [popover]="popoverDirective" 79 [popover]="popoverDirective"
80 [popoverContent]="sinonimos" 80 [popoverContent]="sinonimos"
81 (productosPersonalizados)="productosPersonalizados($event)" 81 (productosPersonalizados)="productosPersonalizados($event)"
82 class="text-white rounded-sm border-0"> 82 class="text-white rounded-sm border-0">
83 </app-popover-sinonimos> 83 </app-popover-sinonimos>
84 </ng-template> 84 </ng-template>
85 <div 85 <div
86 placement="left" 86 placement="left"
87 triggers="" 87 triggers=""
88 [popover]="popTemplate" 88 [popover]="popTemplate"
89 class="w-100" 89 class="w-100"
90 #pop="bs-popover"> 90 #pop="bs-popover">
91 <div class="card bg-white border-0 shadow rounded mb-auto"> 91 <div class="card bg-white border-0 shadow rounded mb-auto">
92 <div class="card-body text-left px-4 py-3"> 92 <div class="card-body text-left px-4 py-3">
93 <div class="row"> 93 <div class="row">
94 <div class="col-6"> 94 <div class="col-auto">
95 <p class="h3 card-title">Cargar Productos</p> 95 <p class="h3 card-title">Cargar Productos</p>
96 </div> 96 </div>
97 <div class="col-6 p-0"> 97 <div class="col-auto p-0">
98 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 98 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
99 </div> 99 </div>
100 </div> 100 </div>
101 <p class="h5 card-text text-muted font-weight-light"> 101 <p class="h5 card-text text-muted font-weight-light">
102 Coloque un producto frente<br> 102 Coloque un producto frente<br>
103 al lector de códigos o selecciónelo en pantalla 103 al lector de códigos o selecciónelo en pantalla
104 </p> 104 </p>
105 </div> 105 </div>
106 <div class="row m-4"> 106 <div class="row m-4">
107 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 107 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
108 <!-- IMAGEN DE ESCANER --> 108 <!-- IMAGEN DE ESCANER -->
109 <img 109 <img
110 *ngIf="!productoAcargar" 110 *ngIf="!productoAcargar"
111 class="card-img-top d-block w-100 mx-auto rounded-sm" 111 class="card-img-top d-block w-100 mx-auto rounded-sm"
112 src="{{apiUrl}}/imagenes/escanner.jpg"> 112 src="{{apiUrl}}/imagenes/escanner.jpg">
113 113
114 <!-- PRODUCTO A CARGAR --> 114 <!-- PRODUCTO A CARGAR -->
115 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 115 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
116 <img 116 <img
117 class="card-img-top d-block w-75 mx-auto rounded-sm" 117 class="card-img-top d-block w-75 mx-auto rounded-sm"
118 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}"> 118 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
119 119
120 <div class="row justify-content-between m-3"> 120 <div class="row justify-content-between m-3">
121 <div class="col-12 text-left px-1"> 121 <div class="col-12 text-left px-1">
122 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 122 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
123 </div> 123 </div>
124 <div class="col-12 text-right mt-2"> 124 <div class="col-12 text-right mt-2">
125 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 125 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
126 </div> 126 </div>
127 </div> 127 </div>
128 </div> 128 </div>
129 129
130 <!-- PROMO A CARGAR --> 130 <!-- PROMO A CARGAR -->
131 <div class="fade-in m-0" *ngIf="promoAcargar"> 131 <div class="fade-in m-0" *ngIf="promoAcargar">
132 <img 132 <img
133 class="card-img-top d-block w-100 mx-auto rounded-sm" 133 class="card-img-top d-block w-100 mx-auto rounded-sm"
134 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}"> 134 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
135 135
136 <div class="row justify-content-between m-3"> 136 <div class="row justify-content-between m-3">
137 <div class="col-12 text-left px-1"> 137 <div class="col-12 text-left px-1">
138 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p> 138 <p class="h6 font-weight-bold mb-0">{{promoAcargar.DetArt}}</p>
139 </div> 139 </div>
140 <div class="col-12 text-right mt-2 align-self-end"> 140 <div class="col-12 text-right mt-2 align-self-end">
141 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p> 141 <p class="h5 font-weight-bold mb-0">{{promoAcargar.PreVen | currency}}</p>
142 </div> 142 </div>
143 </div> 143 </div>
144 </div> 144 </div>
145 145
146 </div> 146 </div>
147 <!-- BOTONES DE CARGAR PRODUCTOS--> 147 <!-- BOTONES DE CARGAR PRODUCTOS-->
148 <div 148 <div
149 class="col-5 pr-0" 149 class="col-5 pr-0"
150 *ngIf="promociones.length > 0"> 150 *ngIf="promociones.length > 0">
151 <button 151 <button
152 *ngIf="sinonimos.length > 0" 152 *ngIf="sinonimos.length > 0"
153 type="button" 153 type="button"
154 class="btn btn-light btn-block shadow-sm" 154 class="btn btn-light btn-block shadow-sm"
155 (click)="pop.show()"> 155 (click)="pop.show()">
156 <span class="pr-2">Personalizar</span> 156 <span class="pr-2">Personalizar</span>
157 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 157 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
158 </button> 158 </button>
159 <button 159 <button
160 *ngIf="!promoAcargar || sinonimos.length == 0" 160 *ngIf="!promoAcargar || sinonimos.length == 0"
161 type="button" 161 type="button"
162 class="btn btn-primary btn-block shadow-sm" 162 class="btn btn-primary btn-block shadow-sm"
163 (click)="pop.show()"> 163 (click)="pop.show()">
164 <span class="pr-2">Mostrar promociones</span> 164 <span class="pr-2">Mostrar promociones</span>
165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 165 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
166 </button> 166 </button>
167 <button 167 <button
168 type="button" 168 type="button"
169 class="btn btn-light btn-block shadow-sm my-3" 169 class="btn btn-light btn-block shadow-sm my-3"
170 (click)="confirmarProducto()"> 170 (click)="confirmarProducto()">
171 <span class="pr-2 font-weight-bold">Confirmar</span> 171 <span class="pr-2 font-weight-bold">Confirmar</span>
172 <i class="fa fa-check text-success" aria-hidden="true"></i> 172 <i class="fa fa-check text-success" aria-hidden="true"></i>
173 </button> 173 </button>
174 <button 174 <button
175 type="button" 175 type="button"
176 class="btn btn-light btn-block shadow-sm" 176 class="btn btn-light btn-block shadow-sm"
177 (click)="deshacerCarga()"> 177 (click)="deshacerCarga()">
178 <span class="pr-2">Deshacer</span> 178 <span class="pr-2">Deshacer</span>
179 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 179 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
180 </button> 180 </button>
181 </div> 181 </div>
182 </div> 182 </div>
183 </div> 183 </div>
184 </div> 184 </div>
185 185
186 <!-- BUSCAR PRODUCTOS --> 186 <!-- BUSCAR PRODUCTOS -->
187 <div (click)="irBusquedaProductos(true)" 187 <div (click)="irBusquedaProductos(true)"
188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 188 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
189 <div class="card-body text-left px-4 py-3"> 189 <div class="card-body text-left px-4 py-3">
190 <div class="row"> 190 <div class="row">
191 <div class="col-6"> 191 <div class="col-auto">
192 <p class="h3 card-title">Buscar Productos</p> 192 <p class="h3 card-title">Buscar Productos</p>
193 <p class="h5 card-text text-muted font-weight-light"> 193 <p class="h5 card-text text-muted font-weight-light">
194 Busque aquí los productos<br> 194 Busque aquí los productos<br>
195 que no tienen código </p> 195 que no tienen código </p>
196 </div> 196 </div>
197 <div class="col-6 p-0"> 197 <div class="col-auto p-0">
198 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 198 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
199 </div> 199 </div>
200 </div> 200 </div>
201 201
202 </div> 202 </div>
203 </div> 203 </div>
204 204
205 </div> 205 </div>
206 206
207 </div> 207 </div>
208 208
209 </div> 209 </div>
210 </div> 210 </div>
211 211
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ fa5a630
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">
56 <i class="fa fa-hand-o-up" aria-hidden="true"></i> 56 <i class="fa fa-hand-o-up" 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()}}) items 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