Mauricio Cattafi / autoservicio

src/app/app.module.ts

 //#region MODULES
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { AppRoutingModule } from './app-routing.module';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { TooltipModule } from 'ngx-bootstrap/tooltip';
 import { PopoverModule } from 'ngx-bootstrap/popover';
 //#endregion
 //#region COMPONENTS
 import { AppComponent } from './app.component';
 import { HeaderComponent } from './components/header/header.component';
 import { SidebarComponent } from './components/sidebar/sidebar.component';
 import { CarouselComponent } from './components/carousel/carousel.component';
 import { HomeComponent } from './components/home/home.component';
 import { InicioComponent } from './components/inicio/inicio.component';
 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({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     CarouselComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
-    PopoverComponent
+    PopoverPromosComponent,
+    PopoverSinonimosComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/inicio/inicio.component.ts

Diff comments View file @ b65dcbc

1	import { Component, OnInit, ViewChild } from '@angular/core';	1	import { Component, OnInit, ViewChild } from '@angular/core';
2	import { PopoverDirective } from 'ngx-bootstrap';	2	import { PopoverDirective } from 'ngx-bootstrap';
3	import { appSettings } from 'src/etc/AppSettings';	3	import { appSettings } from 'src/etc/AppSettings';
4	import { Producto } from 'src/app/wrappers/producto';	4	import { Producto } from 'src/app/wrappers/producto';
5	import { ProductoService } from 'src/app/services/producto.service';	5	import { ProductoService } from 'src/app/services/producto.service';
6	import { Router } from '@angular/router';	6	import { Router } from '@angular/router';
7	import { Promocion } from 'src/app/wrappers/promocion';	7	import { Promocion } from 'src/app/wrappers/promocion';
8		8
9		9
10	@Component({	10	@Component({
11	selector: 'app-inicio',	11	selector: 'app-inicio',
12	templateUrl: './inicio.component.html',	12	templateUrl: './inicio.component.html',
13	styleUrls: ['./inicio.component.scss']	13	styleUrls: ['./inicio.component.scss']
14	})	14	})
15	export class InicioComponent implements OnInit {	15	export class InicioComponent implements OnInit {
16		16
17	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;	17	@ViewChild('pop', { static: false }) popoverDirective: PopoverDirective;
18	private productoAcargar: Producto;	18	private productoAcargar: Producto;
		19	private promoAcargar: Promocion;
19	private tienePromo = false;	20	private tienePromo = false;
20	private productoEsPromo = false;	21	private productoEsPromo = false;
21		22
22	popoverContent: Promocion[] = []	23	popoverContent: Promocion[] = []
23	apiUrl: string = appSettings.apiUrl	24	apiUrl: string = appSettings.apiUrl
24		25
25	constructor(	26	constructor(
26	private router: Router,	27	private router: Router,
27	private productoService: ProductoService) { }	28	private productoService: ProductoService) { }
28		29
29	ngOnInit() {	30	ngOnInit() {
30		31
31	this.productoAcargar = this.productoService.productoAcargar;	32	this.productoAcargar = this.productoService.productoAcargar;
32	if (this.productoAcargar) {	33	if (this.productoAcargar) {
33	var sector = this.productoAcargar.CodSec;	34	var sector = this.productoAcargar.CodSec;
34	var codigo = this.productoAcargar.CodArt;	35	var codigo = this.productoAcargar.CodArt;
35	this.productoService.getPromocion(sector, codigo)	36	this.productoService.getPromocion(sector, codigo)
36	.subscribe((promociones: Promocion[]) => {	37	.subscribe((promociones: Promocion[]) => {
37		38
38	if (promociones.length === 0) {	39	if (promociones.length === 0) {
39	//Si no tiene promociones la cargará al carrito despues de un tiempo	40	//Si no tiene promociones la cargará al carrito despues de un tiempo
40	setTimeout(() => {	41	setTimeout(() => {
41	this.productoService.productos.push(this.productoAcargar);	42	this.productoService.productos.push(this.productoAcargar);
42	this.productoAcargar = undefined;	43	this.productoAcargar = undefined;
43	this.tienePromo = false;	44	this.tienePromo = false;
44	}, 2000)	45	}, 2000)
45	} else {	46	} else {
46		47
47	this.popoverContent = promociones;	48	this.popoverContent = promociones;
48	this.tienePromo = true;	49	this.tienePromo = true;
49	this.popoverDirective.show();	50	this.popoverDirective.show();
50	}	51	}
51	}, error => { console.error(error); })	52	}, error => { console.error(error); })
52	}	53	}
53	}	54	}
54		55
55	showPopover() {	56	showPopover() {
56		57
57	this.popoverDirective.show();	58	this.popoverDirective.show();
58	}	59	}
59		60
60	private goPage(pageUrl) {	61	private goPage(pageUrl) {
		62
61	this.router.navigate([pageUrl]);	63	this.router.navigate([pageUrl]);
62	}	64	}
63		65
64	deshacerCarga() {	66	deshacerCarga() {
65		67	if(this.productoEsPromo) {
66	this.productoAcargar = undefined;	68	this.promoAcargar = undefined;
67	this.tienePromo = false;	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	this.popoverDirective.hide();	82	this.popoverDirective.hide();
69	}	83	}
70		84
71	}	85	}
72		86

src/app/components/popover-promos/popover-promos.component.html

Diff comments View file @ b65dcbc

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

src/app/components/popover-promos/popover-promos.component.scss

Diff comments View file @ b65dcbc

File was created	1	.popover-size {
	2	max-height: 57vh !important;
	3	min-height: 40vh !important;
	4	}
	5

src/app/components/popover-promos/popover-promos.component.spec.ts

Diff comments View file @ b65dcbc

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

src/app/components/popover-promos/popover-promos.component.ts

Diff comments View file @ b65dcbc

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

src/app/components/popover/popover.component.html

View file @ b65dcbc

1	<div class="card-body">		File was deleted
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>
48		1	<div class="card-body">

src/app/components/popover/popover.component.scss

View file @ b65dcbc

1	.popover-size {		File was deleted
2	max-height: 430px !important;
3	min-height: 200px !important;
4	}
5		1	.popover-size {

src/app/components/popover/popover.component.spec.ts

View file @ b65dcbc

1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';		File was deleted
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	});
26		1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';

src/app/components/popover/popover.component.ts

View file @ b65dcbc

1	import { Component, OnInit, Input } from '@angular/core';		File was deleted
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	}
25		1	import { Component, OnInit, Input } from '@angular/core';

src/assets/scss/bootstrap-override.scss

Diff comments View file @ b65dcbc

GITLAB

Mauricio Cattafi / autoservicio

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

1	@import "../../../node_modules/bootstrap/scss/functions";	1	@import "../../../node_modules/bootstrap/scss/functions";
2	@import "../../../node_modules/bootstrap/scss/variables";	2	@import "../../../node_modules/bootstrap/scss/variables";
3	@import "../../../node_modules/bootstrap/scss/mixins";	3	@import "../../../node_modules/bootstrap/scss/mixins";
4		4
5	$primary: #2872ae;	5	$primary: #2872ae;
6		6
7	$theme-colors: (	7	$theme-colors: (
8	primary: $primary,	8	primary: $primary,
9	light: white	9	light: white
10	);	10	);
11		11
12	.popover {	12	.popover {
13	transform: translate3d(-464px, 0, -34px) !important;	13	transform: translate3d(-480px, 0, -34px) !important;
14	min-width: 200px !important;	14	min-width: 30vh !important;
15	max-width: 525px !important;	15	max-width: 50vh !important;
16	border: none !important;	16	border: none !important;
17	border-radius: 1.5rem !important;	17	border-radius: 1.5rem !important;
18	padding: 0 !important;	18	padding: 0 !important;
19	background-color: $primary !important;	19	background-color: $primary !important;
20	.popover-body {	20	.popover-body {
21	padding: 0 !important;	21	padding: 0 !important;
22	}	22	}
23	}	23	}
24		24
25	.bs-popover-left .arrow::after,	25	.bs-popover-left .arrow::after,
26	.bs-popover-auto[x-placement^="left"] .arrow::after {	26	.bs-popover-auto[x-placement^="left"] .arrow::after {
27	border-left-color: $primary !important;	27	border-left-color: $primary !important;
28	}	28	}
29		29
30	.bs-popover-right .arrow::after,	30	.bs-popover-right .arrow::after,
31	.bs-popover-auto[x-placement^="right"] .arrow::after {	31	.bs-popover-auto[x-placement^="right"] .arrow::after {
32	border-right-color: $primary !important;	32	border-right-color: $primary !important;
33	}	33	}
34		34
35	.bs-popover-top .arrow::after,	35	.bs-popover-top .arrow::after,
36	.bs-popover-auto[x-placement^="top"] .arrow::after {	36	.bs-popover-auto[x-placement^="top"] .arrow::after {
37	border-top-color: $primary !important;	37	border-top-color: $primary !important;
38	}	38	}
39		39
40	.bs-popover-bottom .arrow::after,	40	.bs-popover-bottom .arrow::after,
41	.bs-popover-auto[x-placement^="bottom"] .arrow::after {	41	.bs-popover-auto[x-placement^="bottom"] .arrow::after {
42	border-bottom-color: $primary !important;	42	border-bottom-color: $primary !important;
43	}	43	}
44		44
45	.list-group-item.active {	45	.list-group-item.active {
46	background-color: $primary !important;	46	background-color: $primary !important;
47	border-color: $primary !important;	47	border-color: $primary !important;
48	}	48	}
49		49
50	@import "../../../node_modules/bootstrap/scss/bootstrap";	50	@import "../../../node_modules/bootstrap/scss/bootstrap";
51		51