Cambio de nombre de proyecto, agregada logica para setear una promo.

Marcelo Puebla
1 parent 4e0dac3c3d
Showing 11 changed files with 143 additions and 108 deletions Show diff stats
src/app/app.module.ts
src/app/components/inicio/inicio.component.ts
src/app/components/popover-promos/popover-promos.component.html
src/app/components/popover-promos/popover-promos.component.scss
src/app/components/popover-promos/popover-promos.component.spec.ts
src/app/components/popover-promos/popover-promos.component.ts
src/app/components/popover/popover.component.html
src/app/components/popover/popover.component.scss
src/app/components/popover/popover.component.spec.ts
src/app/components/popover/popover.component.ts
src/assets/scss/bootstrap-override.scss
@@ -18,7 +18,8 @@ import { InicioComponent } from &#39;./components/inicio/inicio.component&#39;;
 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
 import { MasterComponent } from './components/master/master.component';
-import { PopoverComponent } from './components/popover/popover.component';
+import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
+import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 //#endregion
  
 @NgModule({
@@ -32,7 +33,8 @@ import { PopoverComponent } from &#39;./components/popover/popover.component&#39;;
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
-    PopoverComponent
+    PopoverPromosComponent,
+    PopoverSinonimosComponent
   ],
   imports: [
     BrowserModule,
@@ -16,6 +16,7 @@ export class InicioComponent implements OnInit {
  
   @ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
   private productoAcargar: Producto;
+  private promoAcargar: Promocion;
   private tienePromo = false;
   private productoEsPromo = false;
  
@@ -58,13 +59,26 @@ export class InicioComponent implements OnInit {
   }
  
   private goPage(pageUrl) {
+
     this.router.navigate([pageUrl]);
   }
  
   deshacerCarga() {
-
-    this.productoAcargar = undefined;
-    this.tienePromo = false;
+    if(this.productoEsPromo) {
+      this.promoAcargar = undefined;  
+      this.productoEsPromo = false;
+      this.popoverDirective.show();
+    }else{
+      this.productoAcargar = undefined;
+      this.tienePromo = false;
+      this.popoverDirective.hide();
+    }
+  }
+  
+  promoSeleccionada($event : Promocion){
+    
+    this.productoEsPromo = true;
+    this.promoAcargar = $event;
     this.popoverDirective.hide();
   }
  
@@ -0,0 +1,51 @@
+<div class="card-body">
+  <div class="row">
+    <div class="col text-left">
+      <p class="h5 card-title">
+        Este producto forma parte<br>
+        de Combos y Promociones
+      </p>
+    </div>
+  </div>
+
+  <div class="overflow-scroll popover-size pr-2">
+    <div
+      class="row my-2"
+      *ngFor="let promo of popoverContent">
+      <div class="col text-dark">
+        <div
+          class="bg-white card-effect rounded-sm p-2 px-3"
+          (click)="seleccionarPromo(promo)">
+          <div class="row justify-content-between">
+            <div class="col-auto text-left">
+              <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p>
+              <p
+                class="h6 mb-0"
+                *ngFor="let producto of promo.productos">
+                {{producto.DetArt}}
+              </p>              
+            </div>
+            <div class="col-auto text-right align-self-end">
+              <p class="h4 font-weight-bold mb-0">
+                {{calcularPrecioDePromo(promo.productos) | currency}}
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="row mt-3 justify-content-end">
+    <div class="col-auto">
+      <button
+        type="button"
+        class="btn btn-sm btn-light shadow"
+        (click)="hide()">
+        <span class="pr-2">No, gracias</span>
+        <i class="fa fa-times text-danger" aria-hidden="true"></i>
+      </button>
+    </div>
+  </div>
+
+</div>
@@ -0,0 +1,4 @@
+.popover-size {
+  max-height: 57vh !important;
+  min-height: 40vh !important;
+}
@@ -0,0 +1,24 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { PopoverPromosComponent } from './popover-promos.component';
+
+describe('PopoverPromosComponent', () => {
+  let component: PopoverPromosComponent;
+  let fixture: ComponentFixture<PopoverPromosComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PopoverPromosComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PopoverPromosComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,40 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { PopoverDirective } from 'ngx-bootstrap/popover';
+import { Promocion } from 'src/app/wrappers/promocion';
+import { Producto } from 'src/app/wrappers/producto';
+
+@Component({
+  selector: 'app-popover-promos',
+  templateUrl: './popover-promos.component.html',
+  styleUrls: ['./popover-promos.component.scss']
+})
+export class PopoverPromosComponent implements OnInit {
+
+  @Input() popover: PopoverDirective;
+  @Input() popoverContent: Promocion[];
+  @Output() promoSeleccionada = new EventEmitter<Promocion>();
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+  hide() {
+    this.popover.hide();
+  }
+
+  seleccionarPromo(promo: Promocion) {
+
+    this.promoSeleccionada.emit(promo);
+  }
+
+  calcularPrecioDePromo(productos: Producto[]) {
+
+    var precio = 0;
+    for (let i = 0; i < productos.length; i++) {
+      precio += productos[i].PreVen;
+    }
+    return precio;
+  }
+
+}
@@ -1,47 +0,0 @@
-<div class="card-body">
-  <div class="row">
-    <div class="col text-left">
-      <p class="h5 card-title">
-        Este producto forma parte<br>
-        de Combos y Promociones
-      </p>
-    </div>
-  </div>
-
-  <div class="overflow-scroll popover-size pr-2">
-    <div
-      class="row my-2"
-      *ngFor="let promo of popoverContent">
-      <div class="col text-dark">
-        <div class="bg-white rounded-sm p-2 px-3">
-          <div class="row justify-content-between">
-            <div class="col-auto text-left">
-              <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p>
-              <p
-                class="h6 mb-0"
-                *ngFor="let producto of promo.productos">
-                {{producto.DetArt}}
-              </p>              
-            </div>
-            <div class="col-auto text-right align-self-end">
-              <p class="h4 font-weight-bold mb-0">{{28 | currency}}</p>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-
-  <div class="row mt-3 justify-content-end">
-    <div class="col-auto">
-      <button
-        type="button"
-        class="btn btn-sm btn-light shadow"
-        (click)="hide()">
-        <span class="pr-2">No, gracias</span>
-        <i class="fa fa-times text-danger" aria-hidden="true"></i>
-      </button>
-    </div>
-  </div>
-
-</div>
@@ -1,4 +0,0 @@
-.popover-size {
-  max-height: 430px !important;
-  min-height: 200px !important;
-}
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { PopoverComponent } from './popover.component';
-
-describe('PopoverComponent', () => {
-  let component: PopoverComponent;
-  let fixture: ComponentFixture<PopoverComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ PopoverComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(PopoverComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
@@ -1,24 +0,0 @@
-import { Component, OnInit, Input } from '@angular/core';
-import { PopoverDirective } from 'ngx-bootstrap/popover';
-import { Promocion } from 'src/app/wrappers/promocion';
-
-@Component({
-  selector: 'app-popover',
-  templateUrl: './popover.component.html',
-  styleUrls: ['./popover.component.scss']
-})
-export class PopoverComponent implements OnInit {
-
-  @Input() popover: PopoverDirective;
-  @Input() popoverContent: Promocion[];
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-  hide() {
-    this.popover.hide();
-  }
-
-}
@@ -10,9 +10,9 @@ $theme-colors: (
 );
  
 .popover {
-  transform: translate3d(-464px, 0, -34px) !important;
-  min-width: 200px !important;
-  max-width: 525px !important;
+  transform: translate3d(-480px, 0, -34px) !important;
+  min-width: 30vh !important;
+  max-width: 50vh !important;
   border: none !important;
   border-radius: 1.5rem !important;
   padding: 0 !important;
...	...	@@ -18,7 +18,8 @@ import { InicioComponent } from './components/inicio/inicio.component';
18	18	import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
19	19	import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
20	20	import { MasterComponent } from './components/master/master.component';
21		-import { PopoverComponent } from './components/popover/popover.component';
	21	+import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
	22	+import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
22	23	//#endregion
23	24
24	25	@NgModule({
...	...	@@ -32,7 +33,8 @@ import { PopoverComponent } from './components/popover/popover.component';
32	33	BusquedaProductosComponent,
33	34	ConfirmacionCarritoComponent,
34	35	MasterComponent,
35		- PopoverComponent
	36	+ PopoverPromosComponent,
	37	+ PopoverSinonimosComponent
36	38	],
37	39	imports: [
38	40	BrowserModule,
...	...	@@ -16,6 +16,7 @@ export class InicioComponent implements OnInit {
16	16
17	17	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
18	18	private productoAcargar: Producto;
	19	+ private promoAcargar: Promocion;
19	20	private tienePromo = false;
20	21	private productoEsPromo = false;
21	22
...	...	@@ -58,13 +59,26 @@ export class InicioComponent implements OnInit {
58	59	}
59	60
60	61	private goPage(pageUrl) {
	62	+
61	63	this.router.navigate([pageUrl]);
62	64	}
63	65
64	66	deshacerCarga() {
65		-
66		- this.productoAcargar = undefined;
67		- this.tienePromo = false;
	67	+ if(this.productoEsPromo) {
	68	+ this.promoAcargar = undefined;
	69	+ this.productoEsPromo = false;
	70	+ this.popoverDirective.show();
	71	+ }else{
	72	+ this.productoAcargar = undefined;
	73	+ this.tienePromo = false;
	74	+ this.popoverDirective.hide();
	75	+ }
	76	+ }
	77	+
	78	+ promoSeleccionada($event : Promocion){
	79	+
	80	+ this.productoEsPromo = true;
	81	+ this.promoAcargar = $event;
68	82	this.popoverDirective.hide();
69	83	}
70	84
...	...	@@ -0,0 +1,51 @@
	1	+<div class="card-body">
	2	+ <div class="row">
	3	+ <div class="col text-left">
	4	+ <p class="h5 card-title">
	5	+ Este producto forma parte<br>
	6	+ de Combos y Promociones
	7	+ </p>
	8	+ </div>
	9	+ </div>
	10	+
	11	+ <div class="overflow-scroll popover-size pr-2">
	12	+ <div
	13	+ class="row my-2"
	14	+ *ngFor="let promo of popoverContent">
	15	+ <div class="col text-dark">
	16	+ <div
	17	+ class="bg-white card-effect rounded-sm p-2 px-3"
	18	+ (click)="seleccionarPromo(promo)">
	19	+ <div class="row justify-content-between">
	20	+ <div class="col-auto text-left">
	21	+ <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p>
	22	+ <p
	23	+ class="h6 mb-0"
	24	+ *ngFor="let producto of promo.productos">
	25	+ {{producto.DetArt}}
	26	+ </p>
	27	+ </div>
	28	+ <div class="col-auto text-right align-self-end">
	29	+ <p class="h4 font-weight-bold mb-0">
	30	+ {{calcularPrecioDePromo(promo.productos) \| currency}}
	31	+ </p>
	32	+ </div>
	33	+ </div>
	34	+ </div>
	35	+ </div>
	36	+ </div>
	37	+ </div>
	38	+
	39	+ <div class="row mt-3 justify-content-end">
	40	+ <div class="col-auto">
	41	+ <button
	42	+ type="button"
	43	+ class="btn btn-sm btn-light shadow"
	44	+ (click)="hide()">
	45	+ <span class="pr-2">No, gracias</span>
	46	+ <i class="fa fa-times text-danger" aria-hidden="true"></i>
	47	+ </button>
	48	+ </div>
	49	+ </div>
	50	+
	51	+</div>
...	...	@@ -0,0 +1,4 @@
	1	+.popover-size {
	2	+ max-height: 57vh !important;
	3	+ min-height: 40vh !important;
	4	+}
...	...	@@ -0,0 +1,24 @@
	1	+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2	+import { PopoverPromosComponent } from './popover-promos.component';
	3	+
	4	+describe('PopoverPromosComponent', () => {
	5	+ let component: PopoverPromosComponent;
	6	+ let fixture: ComponentFixture<PopoverPromosComponent>;
	7	+
	8	+ beforeEach(async(() => {
	9	+ TestBed.configureTestingModule({
	10	+ declarations: [ PopoverPromosComponent ]
	11	+ })
	12	+ .compileComponents();
	13	+ }));
	14	+
	15	+ beforeEach(() => {
	16	+ fixture = TestBed.createComponent(PopoverPromosComponent);
	17	+ component = fixture.componentInstance;
	18	+ fixture.detectChanges();
	19	+ });
	20	+
	21	+ it('should create', () => {
	22	+ expect(component).toBeTruthy();
	23	+ });
	24	+});
...	...	@@ -0,0 +1,40 @@
	1	+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
	2	+import { PopoverDirective } from 'ngx-bootstrap/popover';
	3	+import { Promocion } from 'src/app/wrappers/promocion';
	4	+import { Producto } from 'src/app/wrappers/producto';
	5	+
	6	+@Component({
	7	+ selector: 'app-popover-promos',
	8	+ templateUrl: './popover-promos.component.html',
	9	+ styleUrls: ['./popover-promos.component.scss']
	10	+})
	11	+export class PopoverPromosComponent implements OnInit {
	12	+
	13	+ @Input() popover: PopoverDirective;
	14	+ @Input() popoverContent: Promocion[];
	15	+ @Output() promoSeleccionada = new EventEmitter<Promocion>();
	16	+
	17	+ constructor() { }
	18	+
	19	+ ngOnInit() {
	20	+ }
	21	+
	22	+ hide() {
	23	+ this.popover.hide();
	24	+ }
	25	+
	26	+ seleccionarPromo(promo: Promocion) {
	27	+
	28	+ this.promoSeleccionada.emit(promo);
	29	+ }
	30	+
	31	+ calcularPrecioDePromo(productos: Producto[]) {
	32	+
	33	+ var precio = 0;
	34	+ for (let i = 0; i < productos.length; i++) {
	35	+ precio += productos[i].PreVen;
	36	+ }
	37	+ return precio;
	38	+ }
	39	+
	40	+}
...	...	@@ -1,47 +0,0 @@
1		-<div class="card-body">
2		- <div class="row">
3		- <div class="col text-left">
4		- <p class="h5 card-title">
5		- Este producto forma parte<br>
6		- de Combos y Promociones
7		- </p>
8		- </div>
9		- </div>
10		-
11		- <div class="overflow-scroll popover-size pr-2">
12		- <div
13		- class="row my-2"
14		- *ngFor="let promo of popoverContent">
15		- <div class="col text-dark">
16		- <div class="bg-white rounded-sm p-2 px-3">
17		- <div class="row justify-content-between">
18		- <div class="col-auto text-left">
19		- <p class="h5 font-weight-bold mb-0">{{promo.nombrePromo}}</p>
20		- <p
21		- class="h6 mb-0"
22		- *ngFor="let producto of promo.productos">
23		- {{producto.DetArt}}
24		- </p>
25		- </div>
26		- <div class="col-auto text-right align-self-end">
27		- <p class="h4 font-weight-bold mb-0">{{28 \| currency}}</p>
28		- </div>
29		- </div>
30		- </div>
31		- </div>
32		- </div>
33		- </div>
34		-
35		- <div class="row mt-3 justify-content-end">
36		- <div class="col-auto">
37		- <button
38		- type="button"
39		- class="btn btn-sm btn-light shadow"
40		- (click)="hide()">
41		- <span class="pr-2">No, gracias</span>
42		- <i class="fa fa-times text-danger" aria-hidden="true"></i>
43		- </button>
44		- </div>
45		- </div>
46		-
47		-</div>
...	...	@@ -1,4 +0,0 @@
1		-.popover-size {
2		- max-height: 430px !important;
3		- min-height: 200px !important;
4		-}
...	...	@@ -1,25 +0,0 @@
1		-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
2		-
3		-import { PopoverComponent } from './popover.component';
4		-
5		-describe('PopoverComponent', () => {
6		- let component: PopoverComponent;
7		- let fixture: ComponentFixture<PopoverComponent>;
8		-
9		- beforeEach(async(() => {
10		- TestBed.configureTestingModule({
11		- declarations: [ PopoverComponent ]
12		- })
13		- .compileComponents();
14		- }));
15		-
16		- beforeEach(() => {
17		- fixture = TestBed.createComponent(PopoverComponent);
18		- component = fixture.componentInstance;
19		- fixture.detectChanges();
20		- });
21		-
22		- it('should create', () => {
23		- expect(component).toBeTruthy();
24		- });
25		-});
...	...	@@ -1,24 +0,0 @@
1		-import { Component, OnInit, Input } from '@angular/core';
2		-import { PopoverDirective } from 'ngx-bootstrap/popover';
3		-import { Promocion } from 'src/app/wrappers/promocion';
4		-
5		-@Component({
6		- selector: 'app-popover',
7		- templateUrl: './popover.component.html',
8		- styleUrls: ['./popover.component.scss']
9		-})
10		-export class PopoverComponent implements OnInit {
11		-
12		- @Input() popover: PopoverDirective;
13		- @Input() popoverContent: Promocion[];
14		-
15		- constructor() { }
16		-
17		- ngOnInit() {
18		- }
19		-
20		- hide() {
21		- this.popover.hide();
22		- }
23		-
24		-}