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 | +} |