Commit 48813d5b6feedc53419e3d52f1a2dd3121de8de7

Authored by Marcelo Puebla
1 parent c337433eaf
Exists in develop

Add

Componente para cambiar la cantidad de un articulo
src/app/modules/carrito/carrito.component.html
... ... @@ -46,37 +46,12 @@
46 46 <!-- CANTIDAD -->
47 47 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
48 48 <p class="h-40"><small>CANT</small></p>
49   - <div class="row mx-0 justify-content-between bg-primary badge-pill">
50   - <!-- BOTON MENOS -->
51   - <div class="col-auto px-0 my-auto">
52   - <img
53   - draggable="false"
54   - ondragstart="return false;"
55   - (contextmenu)="false"
56   - class="d-block ml-auto py-2 icon-20 btn-effect"
57   - src="assets/img/menos-blanco.svg"
58   - (click)="substractCant(articulo)">
59   - </div>
60   - <!-- CANTIDAD -->
61   - <div class="col px-0 py-2 my-auto text-white">
62   - <p><small>{{articulo.cantidad}}</small></p>
63   - </div>
64   - <!-- BOTON MAS -->
65   - <div class="col-auto px-0 my-auto">
66   - <img
67   - draggable="false"
68   - ondragstart="return false;"
69   - (contextmenu)="false"
70   - class="d-block ml-auto py-2 icon-20 btn-effect"
71   - src="assets/img/mas-blanco.svg"
72   - (click)="addCant(articulo)">
73   - </div>
74   - </div>
  49 + <articulo-cantidad [articulo]="articulo"></articulo-cantidad>
75 50 </div>
76 51 <!-- PRECIO -->
77 52 <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
78 53 <p class="h-40"><small>PRECIO</small></p>
79   - <div class="py-2 badge-pill bg-dark text-white">
  54 + <div class="py-1 badge-pill bg-dark text-white">
80 55 <p><small>{{articulo.PreVen | currency}}</small></p>
81 56 </div>
82 57 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
... ... @@ -189,32 +189,7 @@
189 189 <p class="d-block mt-auto text-center text-primary text-truncate">
190 190 <small>{{articulo.DetArt}}</small>
191 191 </p>
192   - <div class="row mx-0 justify-content-between bg-primary badge-pill">
193   - <!-- BOTON MENOS -->
194   - <div class="col-auto px-0 my-auto">
195   - <img
196   - draggable="false"
197   - ondragstart="return false;"
198   - (contextmenu)="false"
199   - class="d-block ml-auto py-2 icon-15 btn-effect"
200   - src="assets/img/menos-blanco.svg"
201   - (click)="substractCant(articulo)">
202   - </div>
203   - <!-- CANTIDAD -->
204   - <div class="col px-0 my-auto text-white text-center">
205   - <p><small>{{articulo.cantidad}}</small></p>
206   - </div>
207   - <!-- BOTON MAS -->
208   - <div class="col-auto px-0 my-auto">
209   - <img
210   - draggable="false"
211   - ondragstart="return false;"
212   - (contextmenu)="false"
213   - class="d-block ml-auto py-2 icon-15 btn-effect"
214   - src="assets/img/mas-blanco.svg"
215   - (click)="addCant(articulo)">
216   - </div>
217   - </div>
  192 + <articulo-cantidad [articulo]="articulo"></articulo-cantidad>
218 193 </div>
219 194 <!-- MENSAJE DE ADVERTENCIA -->
220 195 <div *ngIf="!articuloService.carrito.length" class="col h-100">
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
... ... @@ -10,6 +10,7 @@ import { SharedModule } from &#39;../shared/shared.module&#39;;
10 10 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
11 11 import { FormsModule } from '@angular/forms';
12 12 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
  13 +import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component';
13 14  
14 15 @NgModule({
15 16 declarations: [
... ... @@ -17,7 +18,8 @@ import { ConfirmacionComponent } from &#39;src/app/shared/confirmacion/confirmacion.
17 18 HeaderPublicidadComponent,
18 19 PromocionComponent,
19 20 SinonimoComponent,
20   - ConfirmacionComponent
  21 + ConfirmacionComponent,
  22 + ArticuloCantidadComponent,
21 23 ],
22 24 imports: [
23 25 CommonModule,
... ... @@ -27,7 +29,7 @@ import { ConfirmacionComponent } from &#39;src/app/shared/confirmacion/confirmacion.
27 29 CarouselModule.forRoot(),
28 30 SharedModule
29 31 ],
30   - exports: [HeaderPublicidadComponent],
  32 + exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
31 33 entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
32 34 })
33 35 export class SeleccionArticulosModule { }
src/app/shared/articulo-cantidad/articulo-cantidad.component.html
... ... @@ -0,0 +1,26 @@
  1 +<div class="row mx-0 justify-content-between bg-primary badge-pill">
  2 + <!-- BOTON MENOS -->
  3 + <div class="col-auto px-0 my-auto">
  4 + <img
  5 + draggable="false"
  6 + ondragstart="return false;"
  7 + (contextmenu)="false"
  8 + class="d-block ml-auto py-2 icon-15 btn-effect"
  9 + src="assets/img/menos-blanco.svg"
  10 + (click)="substractCant(articulo)">
  11 + </div>
  12 + <!-- CANTIDAD -->
  13 + <div class="col px-0 my-auto text-white text-center">
  14 + <p><small>{{articulo.cantidad}}</small></p>
  15 + </div>
  16 + <!-- BOTON MAS -->
  17 + <div class="col-auto px-0 my-auto">
  18 + <img
  19 + draggable="false"
  20 + ondragstart="return false;"
  21 + (contextmenu)="false"
  22 + class="d-block ml-auto py-2 icon-15 btn-effect"
  23 + src="assets/img/mas-blanco.svg"
  24 + (click)="addCant(articulo)">
  25 + </div>
  26 +</div>
src/app/shared/articulo-cantidad/articulo-cantidad.component.scss
src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { ArticuloCantidadComponent } from './articulo-cantidad.component';
  4 +
  5 +describe('ArticuloCantidadComponent', () => {
  6 + let component: ArticuloCantidadComponent;
  7 + let fixture: ComponentFixture<ArticuloCantidadComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ ArticuloCantidadComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(ArticuloCantidadComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/shared/articulo-cantidad/articulo-cantidad.component.ts
... ... @@ -0,0 +1,25 @@
  1 +import { Component, OnInit, Input } from '@angular/core';
  2 +import { IArticulo } from 'src/app/interfaces/IArticulo';
  3 +import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  4 +
  5 +@Component({
  6 + selector: 'articulo-cantidad',
  7 + templateUrl: './articulo-cantidad.component.html',
  8 + styleUrls: ['./articulo-cantidad.component.scss']
  9 +})
  10 +export class ArticuloCantidadComponent implements OnInit {
  11 + @Input() articulo: IArticulo;
  12 +
  13 + constructor(private articuloService: ArticuloService) { }
  14 +
  15 + ngOnInit() { }
  16 +
  17 + substractCant(articulo: IArticulo) {
  18 + this.articuloService.substractCant(articulo);
  19 + }
  20 +
  21 + addCant(articulo: IArticulo) {
  22 + this.articuloService.addCant(articulo);
  23 + }
  24 +
  25 +}