Marcelo Puebla / autoservicio-axion

Commit 5b96c077809eb2aed62ea310fca135620fc72ee1

Authored by Marcelo Puebla 2020-02-13 16:14:57 -0300

Exists in develop

Add

Modal de advertencia de producto sin stock

Showing 7 changed files with 108 additions and 1 deletions Show diff stats

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

Diff comments View file @ 5b96c07

File was created	1	<div class="bg-primary rounded">
	2	<div class="modal-body">
	3	<img
	4	draggable="false"
	5	ondragstart="return false;"
	6	(contextmenu)="false"
	7	(click)="close()"
	8	class="btn-effect icon-30 mt-2 mr-2 position-absolute top-0 right-0 z-index"
	9	src="assets/img/icono-cancelar-blanco.svg">
	10	<div class="row mx-0 my-2">
	11	<img
	12	draggable="false"
	13	ondragstart="return false;"
	14	(contextmenu)="false"
	15	class="d-block mx-auto icon-60"
	16	src="assets/img/sin-stock-2.svg">
	17	<div class="col-12 py-3">
	18	<p class="text-white text-center h4">
	19	Disculpá, este articulo no está disponible por el momento
	20	</p>
	21	</div>
	22	</div>
	23	</div>
	24	</div>
	25

src/app/modules/seleccion-articulos/no-stock/no-stock.component.scss

Diff comments View file @ 5b96c07

src/app/modules/seleccion-articulos/no-stock/no-stock.component.spec.ts

Diff comments View file @ 5b96c07

File was created	1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2
	3	import { NoStockComponent } from './no-stock.component';
	4
	5	describe('NoStockComponent', () => {
	6	let component: NoStockComponent;
	7	let fixture: ComponentFixture<NoStockComponent>;
	8
	9	beforeEach(async(() => {
	10	TestBed.configureTestingModule({
	11	declarations: [ NoStockComponent ]
	12	})
	13	.compileComponents();
	14	}));
	15
	16	beforeEach(() => {
	17	fixture = TestBed.createComponent(NoStockComponent);
	18	component = fixture.componentInstance;
	19	fixture.detectChanges();
	20	});
	21
	22	it('should create', () => {
	23	expect(component).toBeTruthy();
	24	});
	25	});
	26

src/app/modules/seleccion-articulos/no-stock/no-stock.component.ts

Diff comments View file @ 5b96c07

File was created	1	import { Component, OnInit } from '@angular/core';
	2	import { BsModalRef } from 'ngx-bootstrap/modal';
	3	import { Subject } from 'rxjs';
	4
	5	@Component({
	6	selector: 'app-no-stock',
	7	templateUrl: './no-stock.component.html',
	8	styleUrls: ['./no-stock.component.scss']
	9	})
	10	export class NoStockComponent implements OnInit {
	11	onClose: Subject<any>;
	12
	13	constructor(
	14	private modalRef: BsModalRef,
	15	) {
	16	this.onClose = new Subject();
	17	}
	18
	19	ngOnInit() {
	20	}
	21
	22	close() {
	23	this.onClose.next();
	24	this.modalRef.hide();
	25	}
	26
	27	}
	28

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

Diff comments View file @ 5b96c07

 import { Component, OnInit, OnDestroy, HostListener, ViewChild, AfterViewInit } from '@angular/core';
 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { IArticulo } from 'src/app/interfaces/IArticulo';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { ICategoria } from 'src/app/interfaces/ICategoria';
 import { ISinonimo } from 'src/app/interfaces/ISinonimo';
 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 import { SinonimoService } from 'src/app/services/sinonimo/sinonimo.service';
 import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
 import * as _ from 'lodash';
 import { ANIMATIONS } from 'src/app/utils/animations';
+import { NoStockComponent } from './no-stock/no-stock.component';
 @Component({
   selector: 'app-seleccion-articulos',
   templateUrl: './seleccion-articulos.component.html',
   styleUrls: ['./seleccion-articulos.component.scss'],
   animations: [ANIMATIONS.EnterLeaveY]
 })
 export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDestroy {
   loading = true;
   timeoutHandler: any;
   urlImagenes = `${APP_SETTINGS.apiImagenes}/imagenes/`;
   articulos: IArticulo[] = [];
   auxArticulos: IArticulo[] = [];
   showQuantity = 100;
   searchTerm = '';
   ordenandoByVendidos = true;
   modalRef: BsModalRef;
   total = 0;
   @ViewChild(FiltroCategoriasComponent, { static: false }) filtroCategorias: FiltroCategoriasComponent;
   constructor(
     public articuloService: ArticuloService,
     private sinonimoService: SinonimoService,
     private modalService: BsModalService,
     private inactiveScreen: InactiveScreenService,
   ) { }
   ngOnInit() { }
   ngAfterViewInit(): void {
     this.filtroCategorias.getCategorias();
     this.mediaPantalla();
   }
   ngOnDestroy() {
     for (let i = 1; i <= this.modalService.getModalsCount(); i++) {
       this.modalService.hide(i);
     }
   }
   getProductos() {
     this.articuloService.getAll()
       .subscribe((result: IArticulo[]) => {
         this.articuloService.setArticulosSinImagen(result);
         if (this.filtroCategorias.queMostrar === 'ordenar') {
           this.filtroCategorias.categorias.forEach((categoria: ICategoria) => {
             const tempArticulos = result.filter((articulo: IArticulo) => {
               return articulo.categoria_selfservice === categoria.id;
             });
             result = tempArticulos;
           });
         }
         localStorage.setItem('articulos', JSON.stringify(result));
         this.setProductos();
       }, (error) => {
         console.error(error);
       });
   }
   setProductos() {
     this.articulos = JSON.parse(localStorage.getItem('articulos'));
     this.filterItems();
     this.loading = false;
   }
   filterItems() {
     if (this.filtroCategorias.categoriaActive === 0) {
       this.auxArticulos = this.articulos;
       return;
     }
     this.auxArticulos = this.articulos.filter(x => {
       return x.categoria_selfservice === this.filtroCategorias.categoriaActive;
     });
     this.ordenar();
   }
   ordenar() {
     if (this.ordenandoByVendidos) {
       this.auxArticulos.sort((a, b) => {
         return b.cantidadVendida - a.cantidadVendida;
       });
     }
   }
   selectArticulo(articulo: IArticulo) {
+    if (articulo.ExiVta < 1) {
+      if (this.modalRef) return;
+      this.modalRef = this.modalService.show(NoStockComponent, {
+        class: 'modal-dialog-centered',
+        backdrop: false,
+        ignoreBackdropClick: true,
+      });
+      this.modalRef.content.onClose
+        .subscribe(() => this.modalRef = null);
+    }
     this.getByID(articulo.id);
   }
   getByID(id: number) {
     this.articuloService.getById(id)
       .subscribe((res: IArticulo) => {
         if (res.FPP) {
           this.openModalPromos(res);
         } else {
           this.getSinonimos(res);
         }
       }, err => console.error(err));
   }
   getSinonimos(articulo: IArticulo) {
     this.sinonimoService.getSinonimos(articulo.CodSec, articulo.CodArt)
       .subscribe((res: any[]) => {
         if (res.length) {
           const sinonimos = [];
           const gruposArticulos = _.groupBy(res[0].productos, 'ID_SIN');
           Object.keys(gruposArticulos).forEach((key, i) => {
             sinonimos.push({ productos: gruposArticulos[key], });
             for (const a of articulo.productos) {
               if (key === a.idSinonimo.toString()) {
                 sinonimos[i].cantidad = sinonimos[i].cantidadRestante = a.cantidad;
                 continue;
               }
             }
           });
           res = sinonimos;
           this.openModalSinonimos(res, articulo);
         } else {
           this.articuloService.setArticulo(articulo);
         }
       });
   }
   openModalPromos(articulo: IArticulo) {
     if (this.modalRef) return;
     this.articuloService.setArticulosSinImagen([articulo]);
     this.modalRef = this.modalService.show(PromocionComponent, {
       initialState: { articulosPromo: [articulo] },
       class: 'modal-dialog-centered',
       ignoreBackdropClick: true,
     });
     this.modalRef.content.onClose
       .subscribe(() => this.modalRef = null);
     this.mediaPantalla();
   }
   openModalSinonimos(sinonimosData: ISinonimo[], articulo: IArticulo) {
     if (this.modalRef) return;
     this.modalRef = this.modalService.show(SinonimoComponent, {
       initialState: {
         sinonimos: sinonimosData,
         articulo
       },
       class: 'modal-dialog-centered',
       ignoreBackdropClick: true,
     });
     this.modalRef.content.onClose
       .subscribe((res: any) => {
         this.modalRef = null;
         if (!res) return;
         articulo.productos = res.articulos;
         this.articuloService.setArticulo(articulo);
       });
     this.mediaPantalla();
   }
   deleteArticulo(index: number) {
     this.articuloService.deleteArticulo(index);
   }
   increaseShow() {
     this.showQuantity += 100;
   }
   @HostListener('scroll', ['$event'])
   scrollEvent(event: Event) {
     clearTimeout(this.inactiveScreen.timerReposo);
     this.inactiveScreen.startTimeOutInactividad();
   }
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
   }
   scrollY(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', top: value + el.scrollTop });
     }, 500);
   }
   scrollX(el: HTMLElement, value) {
     el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     this.timeoutHandler = setInterval(() => {
       el.scroll({ behavior: 'smooth', left: value + el.scrollLeft });
     }, 500);
   }
   mediaPantalla() {
     if ($('body').hasClass('media-pantalla')) {
       $(`.cat-content,#cat-content,#content,.cat-btn,#boxCarrito,
         .cat-box,.img-categoria, .modal-content`)
         .addClass('media-pantalla')
         .addBack('media-pantalla');
     }
   }
 }

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

Diff comments View file @ 5b96c07

 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';
 import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
+import { NoStockComponent } from './no-stock/no-stock.component';
 @NgModule({
   declarations: [
     SeleccionArticulosComponent,
     HeaderPublicidadComponent,
     PromocionComponent,
     SinonimoComponent,
     ConfirmacionComponent,
     ArticuloCantidadComponent,
     FiltroCategoriasComponent,
+    NoStockComponent,
   ],
   imports: [
     CommonModule,
     SeleccionArticulosRoutingModule,
     FormsModule,
     ModalModule.forRoot(),
     CarouselModule.forRoot(),
     SharedModule
   ],
   exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
-  entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
+  entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent, NoStockComponent]
 })
 export class SeleccionArticulosModule { }

src/assets/img/sin-stock-2.svg

Diff comments View file @ 5b96c07

File was created	1	<?xml version="1.0" encoding="UTF-8"?>
	2	<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
	3	<!-- Creator: CorelDRAW X7 -->
	4	<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="10.5274mm" height="10.5274mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
	5	viewBox="0 0 733 733"
	6	xmlns:xlink="http://www.w3.org/1999/xlink">
	7	<defs>
	8	<style type="text/css">
	9	<![CDATA[
	10	.fil0 {fill:#F4B223}
	11	]]>
	12	</style>
	13	</defs>
	14	<g id="Capa_x0020_1">
	15	<metadata id="CorelCorpID_0Corel-Layer"/>
	16	<path class="fil0" d="M360 592l7 0 191 -108 0 -237c-11,-6 -182,-99 -191,-107l-6 0 -191 107 -1 237c35,19 64,36 96,53l95 55zm179 -367l76 -76c50,58 81,134 81,217 0,183 -147,330 -330,330 -83,0 -159,-31 -217,-81l83 -83c-11,-6 -21,-12 -32,-18l-76 76c-54,-59 -87,-137 -87,-224 0,-182 147,-329 329,-329 87,0 165,33 224,87l-84 84c12,6 23,12 33,17zm-173 508c-202,0 -366,-164 -366,-367 0,-202 164,-366 366,-366 203,0 367,164 367,366 0,203 -164,367 -367,367zm8 -372l0 203c13,-5 29,-16 41,-22 20,-11 111,-64 123,-68l0 -203c-9,2 -31,17 -41,22 -19,10 -112,64 -123,68zm-184 113c12,4 28,15 40,22l124 68 0 -204c-14,-4 -102,-55 -122,-67 -12,-6 -30,-18 -43,-22l1 203zm11 -221c10,8 43,24 57,32 21,13 20,4 60,-17 16,-9 109,-60 116,-67 -19,-11 -37,-21 -57,-32 -19,-10 -18,-5 -59,19l-117 65zm93 52l58 33c17,9 12,7 29,-3l145 -82 -57 -32c-16,-10 -13,-8 -29,1l-87 49c-7,3 -53,28 -59,34zm159 42c-8,2 -54,30 -57,35 -3,8 -1,36 -1,45 0,14 -4,36 15,30 4,-2 23,-15 29,-18 7,-4 24,-12 26,-19 2,-5 1,-37 1,-45 0,-11 2,-33 -13,-28zm-38 45l0 37c38,-18 31,-16 31,-54 -11,4 -20,11 -31,17z"/>
	17	</g>
	18	</svg>
	19