Commit 48813d5b6feedc53419e3d52f1a2dd3121de8de7
1 parent
c337433eaf
Exists in
develop
Add
Componente para cambiar la cantidad de un articulo
Showing
7 changed files
with
83 additions
and
55 deletions
Show diff stats
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 '../shared/shared.module'; |
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 '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 '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 | +} |