Commit 57d67af9e78a046355ddd2c561bff4abad09dfdc
Exists in
master
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !32
Showing
12 changed files
Show diff stats
src/app/components/busqueda-productos/busqueda-productos.component.html
... | ... | @@ -61,7 +61,7 @@ |
61 | 61 | <div |
62 | 62 | class="card-effect bg-white rounded-sm shadow border-0" |
63 | 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 | 65 | <div class="p-2"> |
66 | 66 | <p class="h6 text-left m-0">{{producto.DetArt}}</p> |
67 | 67 | <div class="row justify-content-between m-0"> |
src/app/components/cancelar-compra/cancelar-compra.component.html
src/app/components/home/home.component.html
1 | 1 | <div class="container-fluid p-0"> |
2 | - <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image"> | |
2 | + <img src="{{apiUrl}}/imagenes/homeBackground.jpg" class="background-image vh-100"> | |
3 | 3 | <div class="row m-0"> |
4 | 4 | <div class="col p-0"> |
5 | 5 | <div |
... | ... | @@ -8,7 +8,7 @@ |
8 | 8 | |
9 | 9 | <!-- HEADER --> |
10 | 10 | <div class="row m-0 w-100 bg-primary-gradient-horizontal"> |
11 | - <div class="col-6 bg-white p-5 rounded-bottom-right"> | |
11 | + <div class="col-6 bg-white p-3 rounded-bottom-right"> | |
12 | 12 | <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png"> |
13 | 13 | </div> |
14 | 14 | </div> |
... | ... | @@ -20,13 +20,13 @@ |
20 | 20 | </div> |
21 | 21 | <div class="col-6 text-center text-white my-auto"> |
22 | 22 | <p class="display-2 font-weight-bold mb-5">¡BIENVENIDO!</p> |
23 | - <p class="display-3 m-0">Toque la pantalla<br>para comenzar</p> | |
23 | + <p class="display-3 m-0 font-weight-bold">Toque la pantalla<br>para comenzar</p> | |
24 | 24 | </div> |
25 | 25 | </div> |
26 | 26 | |
27 | 27 | <!-- FOOTER --> |
28 | 28 | <div class="row m-0 w-100 bg-gray"> |
29 | - <div class="col-6 bg-white offset-6 p-5 rounded-top-left"> | |
29 | + <div class="col-6 bg-white offset-6 p-3 rounded-top-left"> | |
30 | 30 | <img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png"> |
31 | 31 | </div> |
32 | 32 | </div> |
src/app/components/inicio/inicio.component.html
... | ... | @@ -96,8 +96,8 @@ |
96 | 96 | </div> |
97 | 97 | </div> |
98 | 98 | <p class="h5 card-text text-muted font-weight-light"> |
99 | - Coloque el código de<br> | |
100 | - barras o QR frente al scanner. | |
99 | + Coloque un producto frente<br> | |
100 | + al lector de códigos o selecciónelo en pantalla | |
101 | 101 | </p> |
102 | 102 | </div> |
103 | 103 | <div class="row m-4"> |
... | ... | @@ -112,7 +112,7 @@ |
112 | 112 | <div class="fade-in m-0" *ngIf="productoAcargar && !promoAcargar"> |
113 | 113 | <img |
114 | 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 | 117 | <div class="row justify-content-between m-3"> |
118 | 118 | <div class="col-12 text-left px-1"> |
... | ... | @@ -128,7 +128,7 @@ |
128 | 128 | <div class="fade-in m-0" *ngIf="promoAcargar"> |
129 | 129 | <img |
130 | 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 | 133 | <div class="row justify-content-between m-3"> |
134 | 134 | <div class="col-12 text-left px-1"> |
src/app/components/inicio/inicio.component.ts
... | ... | @@ -117,15 +117,17 @@ export class InicioComponent implements OnInit { |
117 | 117 | var codigo = this.promoAcargar.codigo; |
118 | 118 | this.productoService.getPromocionSinonimos(sector, codigo) |
119 | 119 | .subscribe((res: Sinonimo[]) => { |
120 | + | |
120 | 121 | res.forEach(resSinonimo => { |
121 | - resSinonimo.productos.forEach(productoSinonimo => { | |
122 | - this.promoAcargar.productos.forEach(productoPromo => { | |
123 | - if (productoPromo.id === productoSinonimo.id) { | |
124 | - productoSinonimo.esPadre = true; | |
125 | - } | |
126 | - }); | |
127 | - | |
128 | - }) | |
122 | + | |
123 | + this.promoAcargar.productos.forEach(productoPromo => { | |
124 | + | |
125 | + if (productoPromo.idSinonimo === resSinonimo.ID_SIN) { | |
126 | + resSinonimo.cantidad = productoPromo.cantidad; | |
127 | + resSinonimo.productoPadre = productoPromo.id; | |
128 | + } | |
129 | + }); | |
130 | + | |
129 | 131 | }) |
130 | 132 | this.sinonimos = res; |
131 | 133 | this.showPopover(); |
src/app/components/popover-sinonimos/popover-sinonimos.component.html
... | ... | @@ -10,41 +10,41 @@ |
10 | 10 | |
11 | 11 | <div class="row m-0 overflow-scroll popover-size pr-2 my-2"> |
12 | 12 | <div class="col"> |
13 | - <div class="row mb-2" *ngFor="let sinonimo of popoverContent"> | |
13 | + <div class="row mb-2" *ngFor="let sinonimo of popoverContent; let i = index"> | |
14 | 14 | <div class="col"> |
15 | 15 | |
16 | 16 | <div class="row m-0"> |
17 | 17 | <div class="col text-left"> |
18 | 18 | <p class="h5 card-title"> |
19 | - Elija una opción | |
19 | + Elija una opción - Cantidad Restante {{cantidadRestanteSinonimos[i]}} | |
20 | 20 | </p> |
21 | 21 | </div> |
22 | 22 | </div> |
23 | 23 | |
24 | 24 | <div class="row my-3 d-flex justify-content-between" *ngFor="let producto of sinonimo.productos"> |
25 | - <div class="col-8 pl-4 h6 m-0"> | |
26 | - <div class="custom-control custom-radio"> | |
27 | - <input | |
28 | - type="radio" | |
29 | - [id]="producto.id" | |
30 | - [checked]="producto.esPadre" | |
31 | - name="sinonimoOpciones" | |
32 | - class="custom-control-input" | |
33 | - (click)="setSinonimo(sinonimo)"> | |
34 | - <label class="font-weight-normal custom-control-label" [for]="producto.id"> | |
35 | - {{producto.DetArt}} | |
36 | - </label> | |
37 | - </div> | |
25 | + <div class="col-7 pl-4 h6 text-right"> | |
26 | + <p class="m-0 font-weight-normal"> | |
27 | + {{producto.DetArt}} | |
28 | + </p> | |
38 | 29 | </div> |
39 | 30 | <div class="col-auto"> |
40 | - <div class="btn-group-sm btn-group float-left my-auto" role="group"> | |
41 | - <button type="button" class="btn btn-light btn-sm my-auto border"> | |
31 | + <div class="btn-group float-left my-auto" role="group"> | |
32 | + <button | |
33 | + type="button" | |
34 | + class="btn btn-light my-auto border" | |
35 | + (click)="sumarCantidad(producto, i)"> | |
42 | 36 | <i class="fa fa-plus" aria-hidden="true"></i> |
43 | 37 | </button> |
44 | - <div class="bg-white border border-white px-3 my-auto text-dark h5"> | |
45 | - <small>{{producto.cantidad}}</small> | |
38 | + <div class="bg-white border border-white px-3 py-1 my-auto text-dark h5"> | |
39 | + <small | |
40 | + [ngClass]="{'font-weight-bold': producto.cantidad > 0}"> | |
41 | + {{producto.cantidad}} | |
42 | + </small> | |
46 | 43 | </div> |
47 | - <button type="button" class="btn btn-light btn-sm my-auto border"> | |
44 | + <button | |
45 | + type="button" | |
46 | + class="btn btn-light my-auto border" | |
47 | + (click)="restarCantidad(producto, i)"> | |
48 | 48 | <i class="fa fa-minus" aria-hidden="true"></i> |
49 | 49 | </button> |
50 | 50 | </div> |
src/app/components/popover-sinonimos/popover-sinonimos.component.ts
... | ... | @@ -16,13 +16,21 @@ export class PopoverSinonimosComponent implements OnInit { |
16 | 16 | @Output() sinonimoSeleccionado = new EventEmitter<Sinonimo>(); |
17 | 17 | sinonimo: Sinonimo; |
18 | 18 | |
19 | + private cantidadRestanteSinonimos: number[] = []; | |
20 | + | |
19 | 21 | constructor() { } |
20 | 22 | |
21 | 23 | ngOnInit() { |
22 | 24 | |
23 | 25 | //Seteo en la variable a emitir el sinonimo que sea padre |
24 | 26 | this.popoverContent.forEach(sinonimo => { |
25 | - // this.sinonimo = sinonimo.esPadre ? sinonimo : undefined; | |
27 | + | |
28 | + this.cantidadRestanteSinonimos.push(0); | |
29 | + this.sinonimo = sinonimo.productoPadre ? sinonimo : undefined; | |
30 | + sinonimo.productos.forEach(producto => { | |
31 | + | |
32 | + producto.cantidad = (producto.id === sinonimo.productoPadre) ? sinonimo.cantidad : 0; | |
33 | + }) | |
26 | 34 | }) |
27 | 35 | } |
28 | 36 | |
... | ... | @@ -37,4 +45,19 @@ export class PopoverSinonimosComponent implements OnInit { |
37 | 45 | this.sinonimo = sinonimo; |
38 | 46 | } |
39 | 47 | |
48 | + sumarCantidad(producto: Producto, i: number) { | |
49 | + | |
50 | + if (this.cantidadRestanteSinonimos[i] === 0) return; | |
51 | + producto.cantidad++; | |
52 | + this.cantidadRestanteSinonimos[i]--; | |
53 | + } | |
54 | + | |
55 | + restarCantidad(producto: Producto, i: number) { | |
56 | + | |
57 | + if (this.cantidadRestanteSinonimos[i] === this.popoverContent[i].cantidad) return; | |
58 | + if (producto.cantidad === 0) return; | |
59 | + producto.cantidad--; | |
60 | + this.cantidadRestanteSinonimos[i]++; | |
61 | + } | |
62 | + | |
40 | 63 | } |
src/app/components/sidebar/sidebar.component.html
... | ... | @@ -8,7 +8,7 @@ |
8 | 8 | <div class="overflow-auto overflow-scroll mb-2 w-100"> |
9 | 9 | <!-- PRODUCTOS CARRITO --> |
10 | 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 | 12 | *ngFor="let producto of productosCarrito.slice().reverse(); let i = index"> |
13 | 13 | <img class="w-100 m-auto rounded-sm shadow" src="{{apiUrl}}/imagenes/{{producto.imagenes[0].imagen}}"> |
14 | 14 | <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm"> |
src/app/components/sidebar/sidebar.component.ts
... | ... | @@ -87,7 +87,7 @@ export class SidebarComponent implements OnInit { |
87 | 87 | this.cont -= this.productosCarrito[i].cantidad; |
88 | 88 | //Elimina del total el PreVen de todo el item |
89 | 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 | 91 | return; |
92 | 92 | } |
93 | 93 | } |
src/app/wrappers/producto.ts
src/app/wrappers/sinonimo.ts
src/assets/scss/animation.scss
... | ... | @@ -144,3 +144,34 @@ |
144 | 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 | +} |