Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit d90b1d556a5cadc6e13a4520b628c9ee444a03ad

Authored by Marcelo Puebla
1 parent 5dcd31ce9a
Exists in master and in 1 other branch validar_pve

Cambio para mostrar las imagenes de los productos.

Showing 5 changed files with 36 additions and 5 deletions   Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ d90b1d5
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="form-group row search"> 35 <div class="form-group 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> 55 </div>
56 <!-- LISTA DE PRODUCTOS --> 56 <!-- LISTA DE PRODUCTOS -->
57 <div class="row align-items-start vh-70 overflow-scroll disable-user-select"> 57 <div class="row align-items-start vh-70 overflow-scroll disable-user-select">
58 <div 58 <div
59 class="col-4 p-2" 59 class="col-4 p-2"
60 *ngFor="let producto of auxProductos"> 60 *ngFor="let producto of auxProductos">
61 <div 61 <div
62 class="card-effect bg-white rounded-sm shadow border-0" 62 class="card-effect bg-white rounded-sm shadow border-0"
63 (click)="mostrarBotonCargar(producto)"> 63 (click)="mostrarBotonCargar(producto)">
64 <img src="{{apiUrl}}/imagenes/testImg.jpg" class="rounded-sm w-100 m-auto"> 64 <img src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}" class="rounded-sm w-100 m-auto">
65 <div class="p-2"> 65 <div class="p-2">
66 <p class="h6 text-left m-0">{{producto.DetArt}}</p> 66 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
67 <div class="row justify-content-between m-0"> 67 <div class="row justify-content-between m-0">
68 <div class="col-12 p-0"> 68 <div class="col-12 p-0">
69 <div class="text-left"> 69 <div class="text-left">
70 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 70 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
71 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p> 71 <p class="m-0 h6"><small>COD. {{producto.CodRub}}</small></p>
72 </div> 72 </div>
73 </div> 73 </div>
74 <div class="col-12 my-auto pt-2 pr-2 p-0"> 74 <div class="col-12 my-auto pt-2 pr-2 p-0">
75 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p> 75 <p class="text-right m-0 h6">{{producto.PreVen | currency}}</p>
76 </div> 76 </div>
77 </div> 77 </div>
78 <div *ngIf="producto.showCargarProducto" class="row mt-2 fade-bottom"> 78 <div *ngIf="producto.showCargarProducto" class="row mt-2 fade-bottom">
79 <div class="col-sm-12"> 79 <div class="col-sm-12">
80 <button 80 <button
81 type="button" 81 type="button"
82 class="btn btn-block btn-outline-primary shadow" 82 class="btn btn-block btn-outline-primary shadow"
83 (click)="elegirProducto(producto)"> 83 (click)="elegirProducto(producto)">
84 Cargar Producto 84 Cargar Producto
85 </button> 85 </button>
86 </div> 86 </div>
87 </div> 87 </div>
88 </div> 88 </div>
89 </div> 89 </div>
90 </div> 90 </div>
91 </div> 91 </div>
92 </div> 92 </div>
93 93
94 <!-- SPINNER --> 94 <!-- SPINNER -->
95 <div 95 <div
96 *ngIf="productos.length === 0 && showSpinner" 96 *ngIf="productos.length === 0 && showSpinner"
97 class="col-sm-10 p-0 align-self-center text-center"> 97 class="col-sm-10 p-0 align-self-center text-center">
98 <div class="spinner-border spinner-lg text-secondary" role="status"></div> 98 <div class="spinner-border spinner-lg text-secondary" role="status"></div>
99 <span class="text-secondary m-2 h5">Cargando información.</span> 99 <span class="text-secondary m-2 h5">Cargando información.</span>
100 </div> 100 </div>
101 101
102 </div> 102 </div>
103 103
104 </div> 104 </div>
105 105
106 </div> 106 </div>
107 107
src/app/components/inicio/inicio.component.html
Diff comments   View file @ d90b1d5
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-7">
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-5 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/testImg3.jpg" class="d-block w-100 m-auto rounded"> 32 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
33 </div> 33 </div>
34 <div class="carousel-item"> 34 <div class="carousel-item">
35 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 35 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
36 </div> 36 </div>
37 <div class="carousel-item"> 37 <div class="carousel-item">
38 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded"> 38 <img src="{{apiUrl}}/imagenes/testImg3.jpg" class="d-block w-100 m-auto rounded">
39 </div> 39 </div>
40 </div> 40 </div>
41 </div> 41 </div>
42 </div> 42 </div>
43 43
44 <!-- ORDENAR --> 44 <!-- ORDENAR -->
45 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 45 <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
46 <div class="card-body text-left px-4 py-3"> 46 <div class="card-body text-left px-4 py-3">
47 <div class="row"> 47 <div class="row">
48 <div class="col-5"> 48 <div class="col-5">
49 <p class="h3 card-title">Ordenar Pedido</p> 49 <p class="h3 card-title">Ordenar Pedido</p>
50 </div> 50 </div>
51 <div class="col-7 p-0"> 51 <div class="col-7 p-0">
52 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim"> 52 <img src="{{apiUrl}}/imagenes/primario.ordenar.png" class="icon-dim">
53 </div> 53 </div>
54 </div> 54 </div>
55 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p> 55 <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
56 </div> 56 </div>
57 <img 57 <img
58 class="card-img-bottom d-block w-100 mx-auto rounded" 58 class="card-img-bottom d-block w-100 mx-auto rounded"
59 src="{{apiUrl}}/imagenes/cafe.jpg"> 59 src="{{apiUrl}}/imagenes/cafe.jpg">
60 </div> 60 </div>
61 </div> 61 </div>
62 62
63 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0"> 63 <div class="col-md-7 d-flex align-items-end flex-column mt-4 mt-md-0">
64 64
65 <!-- CARGAR PRODUCTOS --> 65 <!-- CARGAR PRODUCTOS -->
66 <ng-template #popTemplate> 66 <ng-template #popTemplate>
67 <app-popover-promos 67 <app-popover-promos
68 *ngIf="promociones.length > 0 && sinonimos.length === 0" 68 *ngIf="promociones.length > 0 && sinonimos.length === 0"
69 [popover]="popoverDirective" 69 [popover]="popoverDirective"
70 [popoverContent]="promociones" 70 [popoverContent]="promociones"
71 (promoSeleccionada)="promoSeleccionada($event)" 71 (promoSeleccionada)="promoSeleccionada($event)"
72 class="text-white rounded-sm border-0"> 72 class="text-white rounded-sm border-0">
73 </app-popover-promos> 73 </app-popover-promos>
74 <app-popover-sinonimos 74 <app-popover-sinonimos
75 *ngIf="sinonimos.length > 0" 75 *ngIf="sinonimos.length > 0"
76 [popover]="popoverDirective" 76 [popover]="popoverDirective"
77 [popoverContent]="sinonimos" 77 [popoverContent]="sinonimos"
78 (sinonimoSeleccionado)="sinonimoSeleccionado($event)" 78 (sinonimoSeleccionado)="sinonimoSeleccionado($event)"
79 class="text-white rounded-sm border-0"> 79 class="text-white rounded-sm border-0">
80 </app-popover-sinonimos> 80 </app-popover-sinonimos>
81 </ng-template> 81 </ng-template>
82 <div 82 <div
83 placement="left" 83 placement="left"
84 triggers="" 84 triggers=""
85 [popover]="popTemplate" 85 [popover]="popTemplate"
86 class="w-100" 86 class="w-100"
87 #pop="bs-popover"> 87 #pop="bs-popover">
88 <div class="card bg-white border-0 shadow rounded mb-auto"> 88 <div class="card bg-white border-0 shadow rounded mb-auto">
89 <div class="card-body text-left px-4 py-3"> 89 <div class="card-body text-left px-4 py-3">
90 <div class="row"> 90 <div class="row">
91 <div class="col-6"> 91 <div class="col-6">
92 <p class="h3 card-title">Cargar Productos</p> 92 <p class="h3 card-title">Cargar Productos</p>
93 </div> 93 </div>
94 <div class="col-6 p-0"> 94 <div class="col-6 p-0">
95 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2"> 95 <img src="{{apiUrl}}/imagenes/escanear.png" class="icon-dim mb-2">
96 </div> 96 </div>
97 </div> 97 </div>
98 <p class="h5 card-text text-muted font-weight-light"> 98 <p class="h5 card-text text-muted font-weight-light">
99 Coloque el código de<br> 99 Coloque el código de<br>
100 barras o QR frente al scanner. 100 barras o QR frente al scanner.
101 </p> 101 </p>
102 </div> 102 </div>
103 <div class="row m-4"> 103 <div class="row m-4">
104 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm"> 104 <div class="col card bg-white shadow border-0 w-75 p-0 mx-auto rounded-sm">
105 <!-- IMAGEN DE ESCANER --> 105 <!-- IMAGEN DE ESCANER -->
106 <img 106 <img
107 *ngIf="!productoAcargar" 107 *ngIf="!productoAcargar"
108 class="card-img-top d-block w-100 mx-auto rounded-sm" 108 class="card-img-top d-block w-100 mx-auto rounded-sm"
109 src="{{apiUrl}}/imagenes/escanner.jpg"> 109 src="{{apiUrl}}/imagenes/escanner.jpg">
110 110
111 <!-- PRODUCTO A CARGAR --> 111 <!-- PRODUCTO A CARGAR -->
112 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> 112 <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar">
113 <img 113 <img
114 class="card-img-top d-block w-75 mx-auto rounded-sm" 114 class="card-img-top d-block w-75 mx-auto rounded-sm"
115 src="{{apiUrl}}/imagenes/testImg.jpg"> 115 src="{{apiUrl}}/imagenes/{{productoAcargar.imagenes[0].imagen}}">
116 116
117 <div class="row justify-content-between m-3"> 117 <div class="row justify-content-between m-3">
118 <div class="col-12 text-left px-1"> 118 <div class="col-12 text-left px-1">
119 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p> 119 <p class="h6 font-weight-bold mb-0">{{productoAcargar.DetArt}}</p>
120 </div> 120 </div>
121 <div class="col-12 text-right mt-2"> 121 <div class="col-12 text-right mt-2">
122 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p> 122 <p class="h5 font-weight-bold mb-0">{{productoAcargar.PreVen | currency}}</p>
123 </div> 123 </div>
124 </div> 124 </div>
125 </div> 125 </div>
126 126
127 <!-- PROMO A CARGAR --> 127 <!-- PROMO A CARGAR -->
128 <div class="fade-in m-0" *ngIf="promoAcargar"> 128 <div class="fade-in m-0" *ngIf="promoAcargar">
129 <img 129 <img
130 class="card-img-top d-block w-100 mx-auto rounded-sm" 130 class="card-img-top d-block w-100 mx-auto rounded-sm"
131 src="{{apiUrl}}/imagenes/testImg.jpg"> 131 src="{{apiUrl}}/imagenes/{{promoAcargar.imagenes[0].imagen}}">
132 132
133 <div class="row justify-content-between m-3"> 133 <div class="row justify-content-between m-3">
134 <div class="col-12 text-left px-1"> 134 <div class="col-12 text-left px-1">
135 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p> 135 <p class="h6 font-weight-bold mb-0">{{promoAcargar.nombrePromo}}</p>
136 </div> 136 </div>
137 <div class="col-12 text-right mt-2 align-self-end"> 137 <div class="col-12 text-right mt-2 align-self-end">
138 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p> 138 <p class="h5 font-weight-bold mb-0">{{promoAcargar.precioTotal | currency}}</p>
139 </div> 139 </div>
140 </div> 140 </div>
141 </div> 141 </div>
142 142
143 </div> 143 </div>
144 <!-- BOTONES DE CARGAR PRODUCTOS--> 144 <!-- BOTONES DE CARGAR PRODUCTOS-->
145 <div 145 <div
146 class="col-5 pr-0" 146 class="col-5 pr-0"
147 *ngIf="promociones.length > 0"> 147 *ngIf="promociones.length > 0">
148 <button 148 <button
149 *ngIf="sinonimos.length > 0" 149 *ngIf="sinonimos.length > 0"
150 type="button" 150 type="button"
151 class="btn btn-light btn-block shadow-sm" 151 class="btn btn-light btn-block shadow-sm"
152 (click)="pop.show()"> 152 (click)="pop.show()">
153 <span class="pr-2">Personalizar</span> 153 <span class="pr-2">Personalizar</span>
154 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i> 154 <i class="fa fa-hand-o-up text-purple" aria-hidden="true"></i>
155 </button> 155 </button>
156 <button 156 <button
157 *ngIf="!promoAcargar" 157 *ngIf="!promoAcargar"
158 type="button" 158 type="button"
159 class="btn btn-primary btn-block shadow-sm" 159 class="btn btn-primary btn-block shadow-sm"
160 (click)="pop.show()"> 160 (click)="pop.show()">
161 <span class="pr-2">Mostrar promociones</span> 161 <span class="pr-2">Mostrar promociones</span>
162 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i> 162 <i class="fa fa-bullhorn fa-flip-horizontal" aria-hidden="true"></i>
163 </button> 163 </button>
164 <button type="button" class="btn btn-light btn-block shadow-sm my-3"> 164 <button type="button" class="btn btn-light btn-block shadow-sm my-3">
165 <span class="pr-2 font-weight-bold">Confirmar</span> 165 <span class="pr-2 font-weight-bold">Confirmar</span>
166 <i class="fa fa-check text-success" aria-hidden="true"></i> 166 <i class="fa fa-check text-success" aria-hidden="true"></i>
167 </button> 167 </button>
168 <button 168 <button
169 type="button" 169 type="button"
170 class="btn btn-light btn-block shadow-sm" 170 class="btn btn-light btn-block shadow-sm"
171 (click)="deshacerCarga()"> 171 (click)="deshacerCarga()">
172 <span class="pr-2">Deshacer</span> 172 <span class="pr-2">Deshacer</span>
173 <i class="fa fa-undo text-warning" aria-hidden="true"></i> 173 <i class="fa fa-undo text-warning" aria-hidden="true"></i>
174 </button> 174 </button>
175 </div> 175 </div>
176 </div> 176 </div>
177 </div> 177 </div>
178 </div> 178 </div>
179 179
180 <!-- BUSCAR PRODUCTOS --> 180 <!-- BUSCAR PRODUCTOS -->
181 <div (click)="irBusquedaProductos(true)" 181 <div (click)="irBusquedaProductos(true)"
182 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4"> 182 class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
183 <div class="card-body text-left px-4 py-3"> 183 <div class="card-body text-left px-4 py-3">
184 <div class="row"> 184 <div class="row">
185 <div class="col-6"> 185 <div class="col-6">
186 <p class="h3 card-title">Buscar Productos</p> 186 <p class="h3 card-title">Buscar Productos</p>
187 <p class="h5 card-text text-muted font-weight-light"> 187 <p class="h5 card-text text-muted font-weight-light">
188 Busque aquí los productos<br> 188 Busque aquí los productos<br>
189 que no tienen código </p> 189 que no tienen código </p>
190 </div> 190 </div>
191 <div class="col-6 p-0"> 191 <div class="col-6 p-0">
192 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2"> 192 <img src="{{apiUrl}}/imagenes/primario.buscar.png" class="icon-dim mb-2">
193 </div> 193 </div>
194 </div> 194 </div>
195 195
196 </div> 196 </div>
197 </div> 197 </div>
198 198
199 </div> 199 </div>
200 200
201 </div> 201 </div>
202 202
203 </div> 203 </div>
204 </div> 204 </div>
205 205
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ d90b1d5
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 <p class="h4 border-bottom border-white text-white mt-4 pb-2"> 3 <p class="h4 border-bottom border-white text-white mt-4 pb-2">
4 Mi compra 4 Mi compra
5 <i class="fa fa-shopping-cart" aria-hidden="true"></i> 5 <i class="fa fa-shopping-cart" aria-hidden="true"></i>
6 </p> 6 </p>
7 7
8 <div class="overflow-auto overflow-scroll mb-2 w-100"> 8 <div class="overflow-auto overflow-scroll mb-2 w-100">
9 <!-- PRODUCTOS CARRITO --> 9 <!-- PRODUCTOS CARRITO -->
10 <div 10 <div
11 class="fade-left my-2 bg-white border-0 rounded-sm" 11 class="slide-in-bl my-2 bg-white border-0 rounded-sm"
12 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> 12 *ngFor="let producto of productosCarrito.slice().reverse(); let i = index">
13 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> 13 <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}">
14 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> 14 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
15 <div class="col-12 p-0 pt-2 text-left my-auto"> 15 <div class="col-12 p-0 pt-2 text-left my-auto">
16 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p> 16 <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
17 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p> 17 <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
18 </div> 18 </div>
19 <div class="col-12 pr-1 text-right h6 my-auto "> 19 <div class="col-12 pr-1 text-right h6 my-auto ">
20 <p class="m-0">{{producto.PreVen | currency}}</p> 20 <p class="m-0">{{producto.PreVen | currency}}</p>
21 </div> 21 </div>
22 </div> 22 </div>
23 <div class="row m-0 p-0"> 23 <div class="row m-0 p-0">
24 <div class="col-6 px-2 my-2"> 24 <div class="col-6 px-2 my-2">
25 <div class="btn-group-sm btn-group float-left my-auto" role="group"> 25 <div class="btn-group-sm btn-group float-left my-auto" role="group">
26 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)"> 26 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
27 <i class="fa fa-plus" aria-hidden="true"></i> 27 <i class="fa fa-plus" aria-hidden="true"></i>
28 </button> 28 </button>
29 <div class="bg-white border border-white px-3 my-auto text-dark h5"> 29 <div class="bg-white border border-white px-3 my-auto text-dark h5">
30 <small>{{producto.cantidad}}</small> 30 <small>{{producto.cantidad}}</small>
31 </div> 31 </div>
32 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)"> 32 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
33 <i class="fa fa-minus" aria-hidden="true"></i> 33 <i class="fa fa-minus" aria-hidden="true"></i>
34 </button> 34 </button>
35 </div> 35 </div>
36 </div> 36 </div>
37 <div class="col-6 px-2 my-2"> 37 <div class="col-6 px-2 my-2">
38 <div class="btn-group-sm btn-group float-right my-auto" role="group"> 38 <div class="btn-group-sm btn-group float-right my-auto" role="group">
39 <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2"> 39 <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">
40 <i class="fa fa-hand-o-up" aria-hidden="true"></i> 40 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
41 </button> 41 </button>
42 <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)"> 42 <button type="button" class="btn btn-secondary btn-sm my-auto ml-2" (click)="deleteProducto(i)">
43 <i class="fa fa-times" aria-hidden="true"></i> 43 <i class="fa fa-times" aria-hidden="true"></i>
44 </button> 44 </button>
45 </div> 45 </div>
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
50 50
51 <!-- TOTAL --> 51 <!-- TOTAL -->
52 <div class="card rounded-top-sm mt-auto blue-gradient border-0"> 52 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
53 <div class="card-body row"> 53 <div class="card-body row">
54 <div class="col-12"> 54 <div class="col-12">
55 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p> 55 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>
56 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p> 56 <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>
57 <p class="h3 text-secondary">Total</p> 57 <p class="h3 text-secondary">Total</p>
58 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p> 58 <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
59 </div> 59 </div>
60 <div class="col-12"> 60 <div class="col-12">
61 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito"> 61 <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">
62 <span class="font-weight-bold pr-1">Finalizar y Pagar</span> 62 <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
63 <i class="fa fa-check text-success" aria-hidden="true"></i> 63 <i class="fa fa-check text-success" aria-hidden="true"></i>
64 </button> 64 </button>
65 <button 65 <button
66 type="button" 66 type="button"
67 class="btn btn-block btn-light shadow btn-sm shadow" 67 class="btn btn-block btn-light shadow btn-sm shadow"
68 [routerLink]="['/cancelar-compra']"> 68 [routerLink]="['/cancelar-compra']">
69 <span class="pr-1">Cancelar</span> 69 <span class="pr-1">Cancelar</span>
70 <i class="fa fa-times text-danger" aria-hidden="true"></i> 70 <i class="fa fa-times text-danger" aria-hidden="true"></i>
71 </button> 71 </button>
72 </div> 72 </div>
73 </div> 73 </div>
74 </div> 74 </div>
75 </div> 75 </div>
76 76
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ d90b1d5
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 5
6 6
7 @Component({ 7 @Component({
8 selector: 'app-sidebar', 8 selector: 'app-sidebar',
9 templateUrl: './sidebar.component.html', 9 templateUrl: './sidebar.component.html',
10 styleUrls: ['./sidebar.component.scss'], 10 styleUrls: ['./sidebar.component.scss'],
11 }) 11 })
12 export class SidebarComponent implements OnInit { 12 export class SidebarComponent implements OnInit {
13 13
14 private cont: number = 1; 14 private cont: number = 1;
15 private min: number = 1; 15 private min: number = 1;
16 private max: number = 50; 16 private max: number = 50;
17 private total: number = 0; 17 private total: number = 0;
18 private apiUrl: string = appSettings.apiUrl; 18 private apiUrl: string = appSettings.apiUrl;
19 19
20 public productosCarrito: Producto[] = []; 20 public productosCarrito: Producto[] = [];
21 21
22 constructor(private productoService: ProductoService) { 22 constructor(private productoService: ProductoService) {
23 23
24 this.productosCarrito = this.productoService.productos; 24 this.productosCarrito = this.productoService.productos;
25 } 25 }
26 26
27 ngOnInit() { 27 ngOnInit() {
28 28
29 } 29 }
30 30
31 getCantidadProductos() { 31 getCantidadProductos() {
32 32
33 for (let i = 0; i < this.productosCarrito.length; i++) { 33 for (let i = 0; i < this.productosCarrito.length; i++) {
34 this.productosCarrito[i].cantidad = 1 34 this.productosCarrito[i].cantidad = 1
35 this.cont++; 35 this.cont++;
36 } 36 }
37 return this.cont; 37 return this.cont;
38 } 38 }
39 39
40 getTotal() { 40 getTotal() {
41 41
42 let subTotal = 0; 42 let subTotal = 0;
43 for (let i = 0; i < this.productosCarrito.length; i++) { 43 for (let i = 0; i < this.productosCarrito.length; i++) {
44 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 44 subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
45 } 45 }
46 return this.total = subTotal; 46 return this.total = subTotal;
47 } 47 }
48 48
49 public aumentarContador(index) { 49 public aumentarContador(index) {
50 50
51 this.cont++; 51 this.cont++;
52 for (let i = 0; i < this.productosCarrito.length; i++) { 52 for (let i = 0; i < this.productosCarrito.length; i++) {
53 if (i === index) { 53 if (i === index) {
54 this.total = this.total + this.productosCarrito[i].PreVen; 54 this.total = this.total + this.productosCarrito[i].PreVen;
55 return (this.productosCarrito[i].cantidad === this.max) ? 55 return (this.productosCarrito[i].cantidad === this.max) ?
56 this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++; 56 this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++;
57 57
58 } 58 }
59 } 59 }
60 } 60 }
61 61
62 decrementarContador(index) { 62 decrementarContador(index) {
63 63
64 for (let i = 0; i < this.productosCarrito.length; i++) { 64 for (let i = 0; i < this.productosCarrito.length; i++) {
65 if (i === index && this.productosCarrito[i].cantidad > this.min) { 65 if (i === index && this.productosCarrito[i].cantidad > this.min) {
66 this.productosCarrito[i].cantidad--; 66 this.productosCarrito[i].cantidad--;
67 this.cont--; 67 this.cont--;
68 break; 68 break;
69 } 69 }
70 } 70 }
71 71
72 this.getTotal() 72 this.getTotal()
73 } 73 }
74 74
75 setCantidadItems() { 75 setCantidadItems() {
76 76
77 this.cont = 0; 77 this.cont = 0;
78 for (let i = 0; i < this.productosCarrito.length; i++) { 78 for (let i = 0; i < this.productosCarrito.length; i++) {
79 this.cont += this.productosCarrito[i].cantidad; 79 this.cont += this.productosCarrito[i].cantidad;
80 } 80 }
81 } 81 }
82 82
83 deleteProducto(index: number) { 83 deleteProducto(index: number) {
84 84
85 for (let i = 0; i < this.productosCarrito.length; i++) { 85 for (let i = 0; i < this.productosCarrito.length; i++) {
86 if (i === index) { 86 if (i === index) {
87 this.cont -= this.productosCarrito[i].cantidad; 87 this.cont -= this.productosCarrito[i].cantidad;
88 //Elimina del total el PreVen de todo el item 88 //Elimina del total el PreVen de todo el item
89 this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad); 89 this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
90 this.productosCarrito.splice(i, 1); 90 this.productosCarrito.reverse().splice(i, 1);
91 return; 91 return;
92 } 92 }
93 } 93 }
94 } 94 }
95 95
96 cleanCarrito() { 96 cleanCarrito() {
97 97
98 this.productoService.productos = this.productosCarrito = []; 98 this.productoService.productos = this.productosCarrito = [];
99 this.total = 0; 99 this.total = 0;
100 this.cont = 0; 100 this.cont = 0;
101 } 101 }
102 } 102 }
103 103
src/assets/scss/animation.scss
Diff comments   View file @ d90b1d5
1 .fade-in { 1 .fade-in {
2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 2 -webkit-animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both; 3 animation: fadein 0.6s cubic-bezier(0.39, 0.575, 0.565, 1) both;
4 } 4 }
5 5
6 @-webkit-keyframes fadein { 6 @-webkit-keyframes fadein {
7 0% { 7 0% {
8 -webkit-transform: translateZ(80px); 8 -webkit-transform: translateZ(80px);
9 transform: translateZ(80px); 9 transform: translateZ(80px);
10 opacity: 0; 10 opacity: 0;
11 } 11 }
12 100% { 12 100% {
13 -webkit-transform: translateZ(0); 13 -webkit-transform: translateZ(0);
14 transform: translateZ(0); 14 transform: translateZ(0);
15 opacity: 1; 15 opacity: 1;
16 } 16 }
17 } 17 }
18 18
19 @keyframes fadein { 19 @keyframes fadein {
20 0% { 20 0% {
21 -webkit-transform: translateZ(80px); 21 -webkit-transform: translateZ(80px);
22 transform: translateZ(80px); 22 transform: translateZ(80px);
23 opacity: 0; 23 opacity: 0;
24 } 24 }
25 100% { 25 100% {
26 -webkit-transform: translateZ(0); 26 -webkit-transform: translateZ(0);
27 transform: translateZ(0); 27 transform: translateZ(0);
28 opacity: 1; 28 opacity: 1;
29 } 29 }
30 } 30 }
31 31
32 .fade-right { 32 .fade-right {
33 animation: faderight 1s; 33 animation: faderight 1s;
34 -moz-animation: faderight 1s; /* Firefox */ 34 -moz-animation: faderight 1s; /* Firefox */
35 -webkit-animation: faderight 1s; /* Safari and Chrome */ 35 -webkit-animation: faderight 1s; /* Safari and Chrome */
36 -o-animation: faderight 1s; /* Opera */ 36 -o-animation: faderight 1s; /* Opera */
37 } 37 }
38 38
39 @keyframes faderight { 39 @keyframes faderight {
40 from { 40 from {
41 opacity: 0; 41 opacity: 0;
42 transform: translateX(-20px); 42 transform: translateX(-20px);
43 } 43 }
44 to { 44 to {
45 opacity: 1; 45 opacity: 1;
46 transform: translateX(0); 46 transform: translateX(0);
47 } 47 }
48 } 48 }
49 49
50 @-moz-keyframes faderight { 50 @-moz-keyframes faderight {
51 /* Firefox */ 51 /* Firefox */
52 from { 52 from {
53 opacity: 0; 53 opacity: 0;
54 -moz-transform: translateX(-20px); 54 -moz-transform: translateX(-20px);
55 } 55 }
56 to { 56 to {
57 opacity: 1; 57 opacity: 1;
58 -moz-transform: translateX(0); 58 -moz-transform: translateX(0);
59 } 59 }
60 } 60 }
61 61
62 @-webkit-keyframes faderight { 62 @-webkit-keyframes faderight {
63 /* Safari and Chrome */ 63 /* Safari and Chrome */
64 from { 64 from {
65 opacity: 0; 65 opacity: 0;
66 -webkit-transform: translateX(-20px); 66 -webkit-transform: translateX(-20px);
67 } 67 }
68 to { 68 to {
69 opacity: 1; 69 opacity: 1;
70 -webkit-transform: translateX(0); 70 -webkit-transform: translateX(0);
71 } 71 }
72 } 72 }
73 73
74 .fade-left { 74 .fade-left {
75 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 75 -webkit-animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
76 animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; 76 animation: fadeleft 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
77 } 77 }
78 78
79 @-webkit-keyframes fadeleft { 79 @-webkit-keyframes fadeleft {
80 0% { 80 0% {
81 -webkit-transform: scaleX(0); 81 -webkit-transform: scaleX(0);
82 transform: scaleX(0); 82 transform: scaleX(0);
83 -webkit-transform-origin: 100% 100%; 83 -webkit-transform-origin: 100% 100%;
84 transform-origin: 100% 100%; 84 transform-origin: 100% 100%;
85 opacity: 1; 85 opacity: 1;
86 } 86 }
87 100% { 87 100% {
88 -webkit-transform: scaleX(1); 88 -webkit-transform: scaleX(1);
89 transform: scaleX(1); 89 transform: scaleX(1);
90 -webkit-transform-origin: 100% 100%; 90 -webkit-transform-origin: 100% 100%;
91 transform-origin: 100% 100%; 91 transform-origin: 100% 100%;
92 opacity: 1; 92 opacity: 1;
93 } 93 }
94 } 94 }
95 95
96 @keyframes fadeleft { 96 @keyframes fadeleft {
97 0% { 97 0% {
98 -webkit-transform: scaleX(0); 98 -webkit-transform: scaleX(0);
99 transform: scaleX(0); 99 transform: scaleX(0);
100 -webkit-transform-origin: 100% 100%; 100 -webkit-transform-origin: 100% 100%;
101 transform-origin: 100% 100%; 101 transform-origin: 100% 100%;
102 opacity: 1; 102 opacity: 1;
103 } 103 }
104 100% { 104 100% {
105 -webkit-transform: scaleX(1); 105 -webkit-transform: scaleX(1);
106 transform: scaleX(1); 106 transform: scaleX(1);
107 -webkit-transform-origin: 100% 100%; 107 -webkit-transform-origin: 100% 100%;
108 transform-origin: 100% 100%; 108 transform-origin: 100% 100%;
109 opacity: 1; 109 opacity: 1;
110 } 110 }
111 } 111 }
112 112
113 .fade-bottom { 113 .fade-bottom {
114 -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 114 -webkit-animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
115 animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both; 115 animation: fade-bottom 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
116 } 116 }
117 117
118 @-webkit-keyframes fade-bottom { 118 @-webkit-keyframes fade-bottom {
119 0% { 119 0% {
120 -webkit-transform: scaleY(0.4); 120 -webkit-transform: scaleY(0.4);
121 transform: scaleY(0.4); 121 transform: scaleY(0.4);
122 -webkit-transform-origin: 100% 0%; 122 -webkit-transform-origin: 100% 0%;
123 transform-origin: 100% 0%; 123 transform-origin: 100% 0%;
124 } 124 }
125 100% { 125 100% {
126 -webkit-transform: scaleY(1); 126 -webkit-transform: scaleY(1);
127 transform: scaleY(1); 127 transform: scaleY(1);
128 -webkit-transform-origin: 100% 0%; 128 -webkit-transform-origin: 100% 0%;
129 transform-origin: 100% 0%; 129 transform-origin: 100% 0%;
130 } 130 }
131 } 131 }
132 132
133 @keyframes fade-bottom { 133 @keyframes fade-bottom {
134 0% { 134 0% {
135 -webkit-transform: scaleY(0.4); 135 -webkit-transform: scaleY(0.4);
136 transform: scaleY(0.4); 136 transform: scaleY(0.4);
137 -webkit-transform-origin: 100% 0%; 137 -webkit-transform-origin: 100% 0%;
138 transform-origin: 100% 0%; 138 transform-origin: 100% 0%;
139 } 139 }
140 100% { 140 100% {
141 -webkit-transform: scaleY(1); 141 -webkit-transform: scaleY(1);
142 transform: scaleY(1); 142 transform: scaleY(1);
143 -webkit-transform-origin: 100% 0%; 143 -webkit-transform-origin: 100% 0%;
144 transform-origin: 100% 0%; 144 transform-origin: 100% 0%;
145 } 145 }
146 } 146 }
147
148 .slide-in-bl {
149 -webkit-animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
150 animation: slide-in-bl 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
151 }
152
153 @-webkit-keyframes slide-in-bl {
154 0% {
155 -webkit-transform: translateY(1000px) translateX(-1000px);
156 transform: translateY(1000px) translateX(-1000px);
157 opacity: 0;
158 }
159 100% {
160 -webkit-transform: translateY(0) translateX(0);
161 transform: translateY(0) translateX(0);
162 opacity: 1;
163 }
164 }
165
166 @keyframes slide-in-bl {
167 0% {
168 -webkit-transform: translateY(1000px) translateX(-1000px);
169 transform: translateY(1000px) translateX(-1000px);
170 opacity: 0;
171 }
172 100% {
173 -webkit-transform: translateY(0) translateX(0);
174 transform: translateY(0) translateX(0);
175 opacity: 1;
176 }
177 }
147 178