Marcelo Puebla / autoservicio-axion

Commit 48813d5b6feedc53419e3d52f1a2dd3121de8de7

Authored by Marcelo Puebla 2020-01-24 15:44:33 -0300

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

Diff comments View file @ 48813d5

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="h-75 carrito-content">
     <!-- CABECERA -->
     <div class="row mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 px-0 py-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">ESTE ES TÚ CARRITO DE COMPRAS</p>
         </div>
       </div>
     </div>
     <!-- CARRITO -->
     <div
       class="row mx-2 mt-4 h-80 h-lg-60 align-content-start scroll-y-visible"
       (scroll)="scrollEvent($event)">
       <!-- MENSAJE DE ADVERTENCIA -->
       <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length">
         <p class="h5 text-center">No hay artículos en el carrito</p>
       </div>
       <!-- ARTICULOS -->
       <div
         class="col-12 col-xl-6 p-2 h-50 h-md-25 h-xl-40 text-center text-truncate carrito-articulo"
         *ngFor="let articulo of articuloService.carrito; let i = index;"
         @EnterLeave>
         <!-- ARTICULO -->
         <div class="h-100 border border-primary rounded-sm">
           <div class="row align-items-center mx-0 h-100">
             <!-- NOMBRE E IMAGEN -->
             <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="d-none d-md-block mx-auto h-55 rounded-sm shadow-sm"
                 src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                 onerror="this.src='assets/img/image-not-found.jpg'">
               <div class="row mx-0 h-100 h-md-45">
                 <p class="col text-primary text-truncate align-self-center">
                   <small>{{articulo.DetArt}}</small>
                 </p>
               </div>
             </div>
             <!-- CANTIDAD -->
             <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
               <p class="h-40"><small>CANT</small></p>
-              <div class="row mx-0 justify-content-between bg-primary badge-pill">
+              <articulo-cantidad [articulo]="articulo"></articulo-cantidad>
-                <!-- BOTON MENOS -->
-                <div class="col-auto px-0 my-auto">
-                  <img
-                    draggable="false"
-                    ondragstart="return false;"
-                    (contextmenu)="false"
-                    class="d-block ml-auto py-2 icon-20 btn-effect"
-                    src="assets/img/menos-blanco.svg"
-                    (click)="substractCant(articulo)">
-                </div>
-                <!-- CANTIDAD -->
-                <div class="col px-0 py-2 my-auto text-white">
-                  <p><small>{{articulo.cantidad}}</small></p>
-                </div>
-                <!-- BOTON MAS -->
-                <div class="col-auto px-0 my-auto">
-                  <img
-                    draggable="false"
-                    ondragstart="return false;"
-                    (contextmenu)="false"
-                    class="d-block ml-auto py-2 icon-20 btn-effect"
-                    src="assets/img/mas-blanco.svg"
-                    (click)="addCant(articulo)">
-                </div>
-              </div>
             </div>
             <!-- PRECIO -->
             <div class="col-6 col-md-3 h-50 h-md-100 border-right border-primary">
               <p class="h-40"><small>PRECIO</small></p>
-              <div class="py-2 badge-pill bg-dark text-white">
+              <div class="py-1 badge-pill bg-dark text-white">
                 <p><small>{{articulo.PreVen | currency}}</small></p>
               </div>
             </div>
             <!-- ELIMINAR -->
             <div class="col-6 col-md-3 align-self-center">
               <div class="row mx-0 justify-content-center">
                 <div
                   class="col-auto px-3 py-1 btn-effect bg-primary badge-pill text-white"
                   (click)="deleteArticulo(i)">
                   <span>
                     <small class="pr-2">ELIMINAR</small>
                     <img
                       draggable="false"
                       ondragstart="return false;"
                       (contextmenu)="false"
                       class="icon-20 rotate-45"
                       src="assets/img/mas-blanco.svg">
                   </span>
                 </div>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- TOTAL -->
     <div class="row mx-3 mt-2 h-auto justify-content-end">
       <div class="col-auto align-self-center text-primary"><small>TOTAL</small></div>
       <div class="col-auto px-3 bg-primary badge-pill">
         <p class="text-center text-white py-1">{{articuloService.subTotal | currency}}</p>
       </div>
     </div>
     <!-- CONTINUAR -->
     <div
       *ngIf="articuloService.carrito.length"
       class="row mx-3 mt-4 h-auto justify-content-end">
       <div
         class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
         [routerLink]="['/forma-pago']">
         <span>
           <small class="pr-2">CONTINUAR</small>
           <img
             draggable="false"
             ondragstart="return false;"
             (contextmenu)="false"
             class="icon-20"
             src="assets/img/ir.svg">
         </span>
       </div>
     </div>
   </div>
 </div>

src/app/modules/seleccion-articulos/seleccion-articulos.component.html

Diff comments View file @ 48813d5

 <div class="h-92 bg-white fade-in-left">
   <!-- PUBLICIDADES -->
   <app-header-publicidad></app-header-publicidad>
   <div class="row mx-0 h-80 align-items-end">
     <!-- CABECERA -->
     <div class="row w-100 mx-3 h-auto border border-primary rounded-sm">
       <div class="col-12 p-2 align-self-center">
         <div class="px-3">
           <p class="h6 text-truncate">SELECCIONÁ TÚ COMIDA Y/O BEBIDA</p>
         </div>
       </div>
     </div>
     <!-- CUERPO -->
     <div class="row w-100 mr-4 h-50 h-md-70" id="content">
       <div class="col-12 h-100 px-0 py-3">
         <div class="row mx-0 h-100">
           <!-- FILTRO CATEGORIAS -->
           <div class="col-5 col-sm-3 col-xl-2 h-100">
             <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
             <div class="row mx-0 h-94 justify-content-center align-items-center">
               <div class="col-auto btn-effect h-5 cat-btn">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90-neg"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, -100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
               <!-- CATEGORIAS -->
               <div
                 #templateCategorias
                 class="col-12 px-0 box-categorias border border-primary py-1
                       border-left-0 rounded-right scroll-y cat-box"
                 (scroll)="scrollEvent($event)">
                 <div
                   class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
                   [ngClass]="{ 'active rounded-sm shadow': allActive, 'border-bottom-effect': !allActive,
                             'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
                   (click)="selectCategoria(-1, 0)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
                     src="assets/img/logo-spot.svg">
                   <small class="col-12 px-0 my-1 h-100 h-md-25 align-self-end text-center text-truncate">Todos</small>
                 </div>
                 <div
                   class="row mx-4 mb-2 h-25 h-md-32 h-lg-45 justify-content-center tab cat-content"
                   [ngClass]="{ 'active rounded-sm shadow': categoria.selected, 'border-bottom-effect': !categoria.selected,
                             'media-pantalla' : boxCarrito.classList.contains('media-pantalla') }"
                   (click)="selectCategoria(i, categoria.id)"
                   *ngFor="let categoria of categorias; let i = index;">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     class="col-12 img-fluid align-self-end d-none d-sm-block rounded-circle"
                     [ngClass]="{'media-pantalla' : boxCarrito.classList.contains('media-pantalla')}"
                     src="{{urlImagenes}}{{categoria.path_imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'">
                   <small class="col-12 px-1 my-1 h-100 h-md-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
                 </div>
               </div>
               <div class="col-auto btn-effect h-5 cat-btn">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="h-100 d-block mx-auto rotate-90"
                   src="assets/img/ir-color.svg"
                   (mousedown)="scrollY(templateCategorias, 100)"
                   (mouseup)="mouseup()"
                   (mouseleave)="mouseup()">
               </div>
             </div>
           </div>
           <!-- LISTA DE ARTICULOS -->
           <div
             class="col-7 col-sm-9 col-xl-10 pb-3 h-100 align-self-center scroll-y-visible"
             (scroll)="scrollEvent($event)">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
               <!-- ARTICULO -->
               <div
                 class="col px-2 my-1 my-md-3 h-auto"
                 *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
                 <div
                   class="swing-in-top-fwd btn-effect card h-auto"
                   (click)="selectArticulo(articulo)">
                   <img
                     draggable="false"
                     ondragstart="return false;"
                     (contextmenu)="false"
                     src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                     onerror="this.src='assets/img/image-not-found.jpg'"
                     class="card-img-top h-30 h-md-55 rounded-sm">
                   <div class="row mx-0 py-1 h-auto justify-content-center">
                     <p
                     [ngClass]="{'text-primary': articulo.PRO, 'text-secondary': !articulo.PRO}"
                       class="col-12 px-1 h6 h-auto text-center min-h-60">
                       {{articulo.DetArt.toUpperCase()}}
                     </p>
                     <div class="col-12 px-1 align-self-end h-auto">
                       <div
                         [ngClass]="{'bg-primary': articulo.PRO, 'bg-secondary': !articulo.PRO}"
                         class="row mx-0 justify-content-between badge-pill">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{articulo.PreVen | currency}}
                         </div>
                         <div class="col-5 px-0">
                           <img
                             draggable="false"
                             ondragstart="return false;"
                             (contextmenu)="false"
                             class="d-block ml-auto py-1 icon-30"
                             src="assets/img/ir.svg">
                         </div>
                       </div>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
             <!-- BOTON VER MAS -->
             <div class="row mx-0">
               <div
                 *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
                 class="col-12 px-0 mb-2">
                 <button
                   (click)="increaseShow()"
                   class="btn btn-block btn-outline-primary">
                   Ver Más
                 </button>
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <!-- FOOTER CARRITO DE COMPRAS -->
     <div class="row w-90 mx-auto h-auto justify-content-center">
       <div class="h-75 px-0 border border-primary rounded" #boxCarrito
            [ngClass]="boxCarrito.classList.contains('media-pantalla')
                       ? 'col-8' : 'col-12'" id="boxCarrito">
         <!-- CABECERA -->
         <div class="row mx-0 h-15 border-bottom border-primary">
           <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p>
         </div>
         <!-- CUERPO -->
         <div class="row h-85 mx-0 justify-content-around">
           <!-- BOTON SCROLL IZQUIERDA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30 rotate-180-neg"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, -100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
           <!-- CARRITO -->
           <div class="col-6 col-sm-8 col-lg-10 h-100">
             <div
               #templateCarrito
               class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"
               (scroll)="scrollEvent($event)">
               <!-- ARTICULOS -->
               <div
                 class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary"
                 *ngFor="let articulo of articuloService.carrito; let i = index;"
                 @EnterLeave>
                 <img
                   class="btn-effect icon-20 mr-2 position-absolute right-0"
                   src="assets/img/icono-cancelar-color.svg"
                   (click)="deleteArticulo(i)">
                 <img
                   draggable="false"
                   ondragstart="return false;"
                   (contextmenu)="false"
                   class="d-block img-fluid p-2 mx-auto rounded"
                   src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
                   onerror="this.src='assets/img/image-not-found.jpg'">
                 <p class="d-block mt-auto text-center text-primary text-truncate">
                   <small>{{articulo.DetArt}}</small>
                 </p>
-                <div class="row mx-0 justify-content-between bg-primary badge-pill">
+                <articulo-cantidad [articulo]="articulo"></articulo-cantidad>
-                  <!-- BOTON MENOS -->
-                  <div class="col-auto px-0 my-auto">
-                    <img
-                      draggable="false"
-                      ondragstart="return false;"
-                      (contextmenu)="false"
-                      class="d-block ml-auto py-2 icon-15 btn-effect"
-                      src="assets/img/menos-blanco.svg"
-                      (click)="substractCant(articulo)">
-                  </div>
-                  <!-- CANTIDAD -->
-                  <div class="col px-0 my-auto text-white text-center">
-                    <p><small>{{articulo.cantidad}}</small></p>
-                  </div>
-                  <!-- BOTON MAS -->
-                  <div class="col-auto px-0 my-auto">
-                    <img
-                      draggable="false"
-                      ondragstart="return false;"
-                      (contextmenu)="false"
-                      class="d-block ml-auto py-2 icon-15 btn-effect"
-                      src="assets/img/mas-blanco.svg"
-                      (click)="addCant(articulo)">
-                  </div>
-                </div>
               </div>
               <!-- MENSAJE DE ADVERTENCIA -->
               <div *ngIf="!articuloService.carrito.length" class="col h-100">
                 <p class="text-center py-5">No hay articulos en el carrito</p>
               </div>
             </div>
           </div>
           <!-- BOTON SCROLL DERECHA -->
           <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center">
             <img
               draggable="false"
               ondragstart="return false;"
               (contextmenu)="false"
               class="icon-30"
               src="assets/img/ir-fondo-color.svg"
               (mousedown)="scrollX(templateCarrito, 100)"
               (mouseup)="mouseup()"
               (mouseleave)="mouseup()">
           </div>
         </div>
       </div>
       <!-- TOTAL-->
       <div
         class="col-auto mt-2 ml-auto h-20">
         <div class="row mx-0">
           <div class="col-auto align-self-center text-primary">TOTAL</div>
           <div class="col-auto bg-primary badge-pill">
             <p class="text-center text-white mt-1 py-1">{{articuloService.subTotal | currency}}</p>
           </div>
         </div>
       </div>
       <!-- VER CARRITO -->
       <div
         class="col-auto px-0 mt-2 h-20"
         *ngIf="articuloService.carrito.length"
         [ngClass]="{'ml-auto pb-3' : boxCarrito.classList.contains('media-pantalla')}">
         <div
           class="btn-effect col-auto px-0 align-self-center bg-white"
           [routerLink]="['/carrito']">
           <div class="row mx-0 bg-light">
             <div class="col-auto p-0 bg-primary">
               <img
                 draggable="false"
                 ondragstart="return false;"
                 (contextmenu)="false"
                 class="p-2 icon-40"
                 src="assets/img/carrito.svg">
             </div>
             <div class="col-auto align-self-center text-primary d-none d-sm-block">IR AL CARRITO</div>
           </div>
         </div>
       </div>
     </div>
   </div>
 </div>

src/app/modules/seleccion-articulos/seleccion-articulos.module.ts

Diff comments View file @ 48813d5

 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
 import { SeleccionArticulosComponent } from './seleccion-articulos.component';
 import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
 import { ModalModule } from 'ngx-bootstrap/modal';
 import { CarouselModule } from 'ngx-bootstrap/carousel';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { SharedModule } from '../shared/shared.module';
 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
 import { FormsModule } from '@angular/forms';
 import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
+import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component';
 @NgModule({
   declarations: [
     SeleccionArticulosComponent,
     HeaderPublicidadComponent,
     PromocionComponent,
     SinonimoComponent,
-    ConfirmacionComponent
+    ConfirmacionComponent,
+    ArticuloCantidadComponent,
   ],
   imports: [
     CommonModule,
     SeleccionArticulosRoutingModule,
     FormsModule,
     ModalModule.forRoot(),
     CarouselModule.forRoot(),
     SharedModule
   ],
-  exports: [HeaderPublicidadComponent],
+  exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
   entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
 })
 export class SeleccionArticulosModule { }

src/app/shared/articulo-cantidad/articulo-cantidad.component.html

Diff comments View file @ 48813d5

File was created	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>
	27

src/app/shared/articulo-cantidad/articulo-cantidad.component.scss

Diff comments View file @ 48813d5

src/app/shared/articulo-cantidad/articulo-cantidad.component.spec.ts

Diff comments View file @ 48813d5

File was created	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	});
	26

src/app/shared/articulo-cantidad/articulo-cantidad.component.ts

Diff comments View file @ 48813d5

File was created	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	}
	26