Add

Modal de advertencia de producto sin stock

Add
Modal de advertencia de producto sin stock
Marcelo Puebla
1 parent 3fe8e18ec7
Showing 7 changed files with 108 additions and 1 deletions Show diff stats
src/app/modules/seleccion-articulos/no-stock/no-stock.component.html
src/app/modules/seleccion-articulos/no-stock/no-stock.component.scss
src/app/modules/seleccion-articulos/no-stock/no-stock.component.spec.ts
src/app/modules/seleccion-articulos/no-stock/no-stock.component.ts
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
src/assets/img/sin-stock-2.svg
@@ -0,0 +1,24 @@
+<div class="bg-primary rounded">
+  <div class="modal-body">
+    <img
+      draggable="false"
+      ondragstart="return false;"
+      (contextmenu)="false"
+      (click)="close()"
+      class="btn-effect icon-30 mt-2 mr-2 position-absolute top-0 right-0 z-index"
+      src="assets/img/icono-cancelar-blanco.svg">
+      <div class="row mx-0 my-2">
+        <img
+          draggable="false"
+          ondragstart="return false;"
+          (contextmenu)="false"
+          class="d-block mx-auto icon-60"
+          src="assets/img/sin-stock-2.svg">
+        <div class="col-12 py-3">
+          <p class="text-white text-center h4">
+            Disculpá, este articulo no está disponible por el momento
+          </p>
+        </div>
+    </div>
+  </div>
+</div>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NoStockComponent } from './no-stock.component';
+
+describe('NoStockComponent', () => {
+  let component: NoStockComponent;
+  let fixture: ComponentFixture<NoStockComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NoStockComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NoStockComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,27 @@
+import { Component, OnInit } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { Subject } from 'rxjs';
+
+@Component({
+  selector: 'app-no-stock',
+  templateUrl: './no-stock.component.html',
+  styleUrls: ['./no-stock.component.scss']
+})
+export class NoStockComponent implements OnInit {
+  onClose: Subject<any>;
+
+  constructor(
+    private modalRef: BsModalRef,
+  ) {
+    this.onClose = new Subject();
+  }
+
+  ngOnInit() {
+  }
+
+  close() {
+    this.onClose.next();
+    this.modalRef.hide();
+  }
+
+}
@@ -12,6 +12,7 @@ import { SinonimoComponent } from &#39;src/app/shared/sinonimo/sinonimo.component&#39;;
 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',
@@ -97,6 +98,16 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
   }
  
   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);
   }
  
@@ -12,6 +12,7 @@ import { FormsModule } from &#39;@angular/forms&#39;;
 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: [
@@ -22,6 +23,7 @@ import { FiltroCategoriasComponent } from &#39;./filtro-categorias/filtro-categorias
     ConfirmacionComponent,
     ArticuloCantidadComponent,
     FiltroCategoriasComponent,
+    NoStockComponent,
   ],
   imports: [
     CommonModule,
@@ -32,6 +34,6 @@ import { FiltroCategoriasComponent } from &#39;./filtro-categorias/filtro-categorias
     SharedModule
   ],
   exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
-  entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
+  entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent, NoStockComponent]
 })
 export class SeleccionArticulosModule { }
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Creator: CorelDRAW X7 -->
+<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"
+viewBox="0 0 733 733"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <style type="text/css">
+   <![CDATA[
+    .fil0 {fill:#F4B223}
+   ]]>
+  </style>
+ </defs>
+ <g id="Capa_x0020_1">
+  <metadata id="CorelCorpID_0Corel-Layer"/>
+  <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"/>
+ </g>
+</svg>
...	...	@@ -0,0 +1,24 @@
	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>
...	...	@@ -0,0 +1,25 @@
	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	+});
...	...	@@ -0,0 +1,27 @@
	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	+}
...	...	@@ -12,6 +12,7 @@ import { SinonimoComponent } from 'src/app/shared/sinonimo/sinonimo.component';
12	12	import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
13	13	import * as _ from 'lodash';
14	14	import { ANIMATIONS } from 'src/app/utils/animations';
	15	+import { NoStockComponent } from './no-stock/no-stock.component';
15	16
16	17	@Component({
17	18	selector: 'app-seleccion-articulos',
...	...	@@ -97,6 +98,16 @@ export class SeleccionArticulosComponent implements OnInit, AfterViewInit, OnDes
97	98	}
98	99
99	100	selectArticulo(articulo: IArticulo) {
	101	+ if (articulo.ExiVta < 1) {
	102	+ if (this.modalRef) return;
	103	+ this.modalRef = this.modalService.show(NoStockComponent, {
	104	+ class: 'modal-dialog-centered',
	105	+ backdrop: false,
	106	+ ignoreBackdropClick: true,
	107	+ });
	108	+ this.modalRef.content.onClose
	109	+ .subscribe(() => this.modalRef = null);
	110	+ }
100	111	this.getByID(articulo.id);
101	112	}
102	113
...	...	@@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms';
12	12	import { ConfirmacionComponent } from 'src/app/shared/confirmacion/confirmacion.component';
13	13	import { ArticuloCantidadComponent } from 'src/app/shared/articulo-cantidad/articulo-cantidad.component';
14	14	import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias.component';
	15	+import { NoStockComponent } from './no-stock/no-stock.component';
15	16
16	17	@NgModule({
17	18	declarations: [
...	...	@@ -22,6 +23,7 @@ import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias
22	23	ConfirmacionComponent,
23	24	ArticuloCantidadComponent,
24	25	FiltroCategoriasComponent,
	26	+ NoStockComponent,
25	27	],
26	28	imports: [
27	29	CommonModule,
...	...	@@ -32,6 +34,6 @@ import { FiltroCategoriasComponent } from './filtro-categorias/filtro-categorias
32	34	SharedModule
33	35	],
34	36	exports: [HeaderPublicidadComponent, ArticuloCantidadComponent],
35		- entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent]
	37	+ entryComponents: [PromocionComponent, ConfirmacionComponent, SinonimoComponent, NoStockComponent]
36	38	})
37	39	export class SeleccionArticulosModule { }
...	...	@@ -0,0 +1,18 @@
	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>