Add

Mensaje de error con articulos en carrito sin stock

Add
Mensaje de error con articulos en carrito sin stock
Marcelo Puebla
1 parent aad68e973a
Showing 8 changed files with 91 additions and 4 deletions Show diff stats
src/app/modules/carrito/carrito.component.html
src/app/modules/carrito/carrito.component.ts
src/app/modules/carrito/carrito.module.ts
src/app/services/articulo/articulo.service.ts
src/app/shared/error-stock/error-stock.component.html
src/app/shared/error-stock/error-stock.component.scss
src/app/shared/error-stock/error-stock.component.spec.ts
src/app/shared/error-stock/error-stock.component.ts
@@ -91,7 +91,7 @@
       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']">
+        (click)="validateCarrito()">
         <span>
           <small class="pr-2">CONTINUAR</small>
           <img
@@ -3,9 +3,11 @@ import { Location } from &#39;@angular/common&#39;;
 import { ArticuloService } from 'src/app/services/articulo/articulo.service';
 import { APP_SETTINGS } from 'src/etc/AppSettings';
 import { Router } from '@angular/router';
-import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
 import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
 import { ANIMATIONS } from 'src/app/utils/animations';
+import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component';
+import { ErrorStockComponent } from 'src/app/shared/error-stock/error-stock.component';
  
 @Component({
   selector: 'app-carrito',
@@ -23,6 +25,7 @@ export class CarritoComponent implements OnInit, OnDestroy {
     private location: Location,
     private router: Router,
     private inactiveScreen: InactiveScreenService,
+    private modalService: BsModalService
   ) { }
  
   ngOnInit() {
@@ -41,6 +44,20 @@ export class CarritoComponent implements OnInit, OnDestroy {
     this.articuloService.deleteArticulo(index);
   }
  
+  validateCarrito() {
+    const res = this.articuloService.validateCarrito()
+    if (res.valid) {
+      this.router.navigate(['forma-pago']);
+    } else {
+      this.modalService.show(
+        ErrorStockComponent,
+        {
+          initialState: { articulo: res.articulo },
+          class: 'modal-dialog-centered'
+        });
+    }
+  }
+
   goBack() {
     this.location.back();
   }
@@ -5,14 +5,19 @@ import { CarritoRoutingModule } from &#39;./carrito-routing.module&#39;;
 import { CarritoComponent } from './carrito.component';
 import { SeleccionArticulosModule } from '../seleccion-articulos/seleccion-articulos.module';
 import { SharedModule } from '../shared/shared.module';
+import { ErrorStockComponent } from 'src/app/shared/error-stock/error-stock.component';
  
 @NgModule({
-  declarations: [CarritoComponent],
+  declarations: [
+    CarritoComponent,
+    ErrorStockComponent
+  ],
   imports: [
     CommonModule,
     CarritoRoutingModule,
     SeleccionArticulosModule,
     SharedModule,
-  ]
+  ],
+  entryComponents: [ErrorStockComponent]
 })
 export class CarritoModule { }
@@ -104,6 +104,17 @@ export class ArticuloService {
     });
   }
  
+  validateCarrito() {
+    for (const articulo of this.carrito) {
+      if (articulo.productos) {
+        for (const a of articulo.productos) {
+          if (a.ExiVta - (a.cantidad * articulo.cantidad) < 0) return { valid: false, articulo };
+        }
+      } else if (articulo.ExiVta - articulo.cantidad < 0) return { valid: false, articulo };
+    }
+    return { valid: true };
+  }
+
   cleanShoppingCar() {
     this.articuloAcargar = undefined;
     this.promoAcargar = undefined;
@@ -0,0 +1,10 @@
+<div class="bg-primary text-center rounded">
+  <div class="modal-body">
+    <p class="h4 text-white text-center mx-3 mb-3">El articulo {{articulo.MKT_DESC}} no tiene stock</p>
+    <div
+      class="m-0 h4 d-inline-block py-2 btn-effect bg-white badge-pill"
+      (click)="modalRef.hide()">
+      Aceptar
+    </div>
+  </div>
+</div>
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorStockComponent } from './error-stock.component';
+
+describe('ErrorStockComponent', () => {
+  let component: ErrorStockComponent;
+  let fixture: ComponentFixture<ErrorStockComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ErrorStockComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ErrorStockComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+import { IArticulo } from 'src/app/interfaces/IArticulo';
+
+@Component({
+  selector: 'app-error-stock',
+  templateUrl: './error-stock.component.html',
+  styleUrls: ['./error-stock.component.scss']
+})
+export class ErrorStockComponent implements OnInit {
+  articulo: IArticulo;
+
+  constructor(
+    private modalRef: BsModalRef,
+  ) { }
+
+  ngOnInit() { }
+
+}
...	...	@@ -91,7 +91,7 @@
91	91	class="row mx-3 mt-4 h-auto justify-content-end">
92	92	<div
93	93	class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white"
94		- [routerLink]="['/forma-pago']">
	94	+ (click)="validateCarrito()">
95	95	<span>
96	96	<small class="pr-2">CONTINUAR</small>
97	97	<img
...	...	@@ -3,9 +3,11 @@ import { Location } from '@angular/common';
3	3	import { ArticuloService } from 'src/app/services/articulo/articulo.service';
4	4	import { APP_SETTINGS } from 'src/etc/AppSettings';
5	5	import { Router } from '@angular/router';
6		-import { BsModalRef } from 'ngx-bootstrap/modal/public_api';
	6	+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
7	7	import { InactiveScreenService } from 'src/app/services/inactive-screen/inactive-screen.service';
8	8	import { ANIMATIONS } from 'src/app/utils/animations';
	9	+import { ErrorFormaPagoComponent } from 'src/app/shared/error-forma-pago/error-forma-pago.component';
	10	+import { ErrorStockComponent } from 'src/app/shared/error-stock/error-stock.component';
9	11
10	12	@Component({
11	13	selector: 'app-carrito',
...	...	@@ -23,6 +25,7 @@ export class CarritoComponent implements OnInit, OnDestroy {
23	25	private location: Location,
24	26	private router: Router,
25	27	private inactiveScreen: InactiveScreenService,
	28	+ private modalService: BsModalService
26	29	) { }
27	30
28	31	ngOnInit() {
...	...	@@ -41,6 +44,20 @@ export class CarritoComponent implements OnInit, OnDestroy {
41	44	this.articuloService.deleteArticulo(index);
42	45	}
43	46
	47	+ validateCarrito() {
	48	+ const res = this.articuloService.validateCarrito()
	49	+ if (res.valid) {
	50	+ this.router.navigate(['forma-pago']);
	51	+ } else {
	52	+ this.modalService.show(
	53	+ ErrorStockComponent,
	54	+ {
	55	+ initialState: { articulo: res.articulo },
	56	+ class: 'modal-dialog-centered'
	57	+ });
	58	+ }
	59	+ }
	60	+
44	61	goBack() {
45	62	this.location.back();
46	63	}
...	...	@@ -5,14 +5,19 @@ import { CarritoRoutingModule } from './carrito-routing.module';
5	5	import { CarritoComponent } from './carrito.component';
6	6	import { SeleccionArticulosModule } from '../seleccion-articulos/seleccion-articulos.module';
7	7	import { SharedModule } from '../shared/shared.module';
	8	+import { ErrorStockComponent } from 'src/app/shared/error-stock/error-stock.component';
8	9
9	10	@NgModule({
10		- declarations: [CarritoComponent],
	11	+ declarations: [
	12	+ CarritoComponent,
	13	+ ErrorStockComponent
	14	+ ],
11	15	imports: [
12	16	CommonModule,
13	17	CarritoRoutingModule,
14	18	SeleccionArticulosModule,
15	19	SharedModule,
16		- ]
	20	+ ],
	21	+ entryComponents: [ErrorStockComponent]
17	22	})
18	23	export class CarritoModule { }
...	...	@@ -104,6 +104,17 @@ export class ArticuloService {
104	104	});
105	105	}
106	106
	107	+ validateCarrito() {
	108	+ for (const articulo of this.carrito) {
	109	+ if (articulo.productos) {
	110	+ for (const a of articulo.productos) {
	111	+ if (a.ExiVta - (a.cantidad * articulo.cantidad) < 0) return { valid: false, articulo };
	112	+ }
	113	+ } else if (articulo.ExiVta - articulo.cantidad < 0) return { valid: false, articulo };
	114	+ }
	115	+ return { valid: true };
	116	+ }
	117	+
107	118	cleanShoppingCar() {
108	119	this.articuloAcargar = undefined;
109	120	this.promoAcargar = undefined;
...	...	@@ -0,0 +1,10 @@
	1	+<div class="bg-primary text-center rounded">
	2	+ <div class="modal-body">
	3	+ <p class="h4 text-white text-center mx-3 mb-3">El articulo {{articulo.MKT_DESC}} no tiene stock</p>
	4	+ <div
	5	+ class="m-0 h4 d-inline-block py-2 btn-effect bg-white badge-pill"
	6	+ (click)="modalRef.hide()">
	7	+ Aceptar
	8	+ </div>
	9	+ </div>
	10	+</div>
...	...	@@ -0,0 +1,25 @@
	1	+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2	+
	3	+import { ErrorStockComponent } from './error-stock.component';
	4	+
	5	+describe('ErrorStockComponent', () => {
	6	+ let component: ErrorStockComponent;
	7	+ let fixture: ComponentFixture<ErrorStockComponent>;
	8	+
	9	+ beforeEach(async(() => {
	10	+ TestBed.configureTestingModule({
	11	+ declarations: [ ErrorStockComponent ]
	12	+ })
	13	+ .compileComponents();
	14	+ }));
	15	+
	16	+ beforeEach(() => {
	17	+ fixture = TestBed.createComponent(ErrorStockComponent);
	18	+ component = fixture.componentInstance;
	19	+ fixture.detectChanges();
	20	+ });
	21	+
	22	+ it('should create', () => {
	23	+ expect(component).toBeTruthy();
	24	+ });
	25	+});
...	...	@@ -0,0 +1,19 @@
	1	+import { Component, OnInit } from '@angular/core';
	2	+import { BsModalRef } from 'ngx-bootstrap/modal';
	3	+import { IArticulo } from 'src/app/interfaces/IArticulo';
	4	+
	5	+@Component({
	6	+ selector: 'app-error-stock',
	7	+ templateUrl: './error-stock.component.html',
	8	+ styleUrls: ['./error-stock.component.scss']
	9	+})
	10	+export class ErrorStockComponent implements OnInit {
	11	+ articulo: IArticulo;
	12	+
	13	+ constructor(
	14	+ private modalRef: BsModalRef,
	15	+ ) { }
	16	+
	17	+ ngOnInit() { }
	18	+
	19	+}