Agregado modal de promocion

Marcelo Puebla
1 parent 6e8edd46b4
Showing 11 changed files with 155 additions and 9 deletions Show diff stats
package-lock.json
package.json
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
src/app/shared/promocion/promocion.component.html
src/app/shared/promocion/promocion.component.scss
src/app/shared/promocion/promocion.component.spec.ts
src/app/shared/promocion/promocion.component.ts
src/scss/icons.scss
src/scss/styles-bootstrap.scss
@@ -8378,6 +8378,11 @@
       "integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
       "dev": true
     },
+    "ngx-bootstrap": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.2.0.tgz",
+      "integrity": "sha512-fh+OmaEdxCZnVLQFLqexdw4Xv0Lp2Ueq7un52gF26lTENhTAypGWgf2c92HXzbp4W/B0tnwIZ9mzQPwdDMH91w=="
+    },
     "nice-try": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
@@ -29,6 +29,7 @@
     "hammerjs": "^2.0.8",
     "jquery": "^3.4.1",
     "js-sha256": "^0.9.0",
+    "ngx-bootstrap": "^5.2.0",
     "popper.js": "^1.16.0",
     "rxjs": "~6.4.0",
     "tslib": "^1.10.0",
@@ -65,7 +65,7 @@
           <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
             <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
               <!-- ARTICULO -->
-              <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
+              <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let articulo of [{},{},{promo: true},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
                 <div class="card h-100">
                   <img
                     draggable="false"
@@ -77,7 +77,10 @@
                     <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
                     <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
                     <div class="col-12 px-1 align-self-end btn-effect h-auto">
-                      <div class="row mx-0 justify-content-between bg-primary badge-pill">
+                      <div
+                        [ngClass]="{'bg-secondary': articulo.promo}"
+                        class="row mx-0 justify-content-between bg-primary badge-pill"
+                        (click)="elegirArticulo(articulo)">
                         <div class="col px-0 align-self-center text-white text-right">
                           {{55 | currency}}
                         </div>
@@ -129,7 +132,7 @@
                   (contextmenu)="false"
                   class="d-block h-55 p-2 mx-auto"
                   src="assets/img/ir-color.svg">
-                <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
+                <p class="d-block mt-auto text-center text-primary"><small>{{'articulo'}}</small></p>
               </div>
             </div>
           </div>
 import { Component, OnInit } from "@angular/core";
+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
+import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
  
 @Component({
   selector: "app-seleccion-articulos",
@@ -15,10 +17,13 @@ export class SeleccionArticulosComponent implements OnInit {
     { id: 5, selected: false },
     { id: 6, selected: false }
   ];
+  modalRef: BsModalRef;
  
-  constructor() {}
+  constructor(
+    private modalService: BsModalService,
+  ) { }
  
-  ngOnInit() {}
+  ngOnInit() { }
  
   selectCategoria(index: number) {
     this.categorias.forEach((categoria, i) => {
@@ -26,6 +31,15 @@ export class SeleccionArticulosComponent implements OnInit {
     });
   }
  
+  elegirArticulo(articulo: any) {
+    if (articulo.promo) {
+      this.modalRef = this.modalService.show(PromocionComponent, {
+        class: 'custom-modal modal-dialog-centered',
+        ignoreBackdropClick: true,
+      })
+    }
+  }
+
   mouseup() {
     if (!this.timeoutHandler) return;
     clearInterval(this.timeoutHandler);
 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 { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
  
 @NgModule({
-  declarations: [SeleccionArticulosComponent, HeaderPublicidadComponent],
-  imports: [CommonModule, SeleccionArticulosRoutingModule],
-  exports: [HeaderPublicidadComponent]
+  declarations: [
+    SeleccionArticulosComponent,
+    HeaderPublicidadComponent,
+    PromocionComponent
+  ],
+  imports: [
+    CommonModule,
+    SeleccionArticulosRoutingModule,
+    ModalModule.forRoot(),
+  ],
+  exports: [HeaderPublicidadComponent],
+  entryComponents: [PromocionComponent]
 })
 export class SeleccionArticulosModule { }
@@ -0,0 +1,55 @@
+<div class="p-3">
+  <div class="row mx-0 justify-content-end">
+    <div
+      class="col-auto px-0 btn-effect"
+      (click)="modalRef.hide()">
+      <img class="icon-30 rotate-45" src="assets/img/mas-blanco.svg">
+    </div>
+  </div>
+  <div class="row mb-4 mx-0 text-center">
+    <div class="col-7 align-self-center">
+      <p class="h6 text-muted mb-2"><small>{{'ENSALADA CAESAR'}}</small></p>
+      <p class="h6"><small>¿QUERÉS LLEVAR ESTA ENSALADA</small></p>
+      <p class="h4 mb-2 font-weight-bold">en combo con 1 bebida?</p>
+      <div class="row">
+        <div class="col-6 pl-0">
+          <div
+            class="row mx-0 justify-content-between bg-light badge-pill btn-effect"
+            (click)="elegirArticulo(articulo)">
+            <div class="col px-0 align-self-center text-primary">
+              <p class="d-block">
+                <small class="pr-2">{{'Sola'}} {{155 | currency}}</small>
+                <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="icon-20"
+                src="assets/img/ir-color.svg">
+              </p>
+            </div>
+          </div>
+        </div>
+        <div class="col-6 px-0">
+          <div
+            class="row mx-0 justify-content-between bg-light badge-pill btn-effect"
+            (click)="elegirArticulo(articulo)">
+            <div class="col px-0 align-self-center text-primary">
+              <p class="d-block">
+                <small class="pr-2">{{'Con bebida'}} {{155 | currency}}</small>
+                <img
+                draggable="false"
+                ondragstart="return false;"
+                (contextmenu)="false"
+                class="icon-20"
+                src="assets/img/ir-color.svg">
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="col-5 align-self-center">
+      <img class="icon-150" src="assets/img/mas-blanco.svg">
+    </div>
+  </div>
+</div>
 \ No newline at end of file
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { PromocionComponent } from './promocion.component';
+
+describe('PromocionComponent', () => {
+  let component: PromocionComponent;
+  let fixture: ComponentFixture<PromocionComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ PromocionComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(PromocionComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
@@ -0,0 +1,18 @@
+import { Component, OnInit } from '@angular/core';
+import { BsModalRef } from 'ngx-bootstrap/modal';
+
+@Component({
+  selector: 'app-promocion',
+  templateUrl: './promocion.component.html',
+  styleUrls: ['./promocion.component.scss']
+})
+export class PromocionComponent implements OnInit {
+
+  constructor(
+    private modalRef: BsModalRef,
+  ) { }
+
+  ngOnInit() {
+  }
+
+}
@@ -17,3 +17,7 @@
 .icon-60 {
   width: 60px;
 }
+
+.icon-150 {
+  width: 150px;
+}
@@ -18,4 +18,15 @@ $border-radius: 1.5rem;
 $border-radius-lg: 2.5rem;
 $border-radius-sm: 0.5rem;
  
+.custom-modal {
+  max-width: 90% !important;
+  & > .modal-content {
+    background-color: $primary !important;
+    color: white;
+    border: none !important;
+    border-radius: $border-radius !important;
+    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
+  }
+}
+
 @import "node_modules/bootstrap/scss/bootstrap";
...	...	@@ -8378,6 +8378,11 @@
8378	8378	"integrity": "sha512-iyam8fBuCUpWeKPGpaNMetEocMt364qkCsfL9JuhjXX6dRnguRVOfk2GZaDpPjcOKiiXCPINZC1GczQ7iTq3Zw==",
8379	8379	"dev": true
8380	8380	},
	8381	+ "ngx-bootstrap": {
	8382	+ "version": "5.2.0",
	8383	+ "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-5.2.0.tgz",
	8384	+ "integrity": "sha512-fh+OmaEdxCZnVLQFLqexdw4Xv0Lp2Ueq7un52gF26lTENhTAypGWgf2c92HXzbp4W/B0tnwIZ9mzQPwdDMH91w=="
	8385	+ },
8381	8386	"nice-try": {
8382	8387	"version": "1.0.5",
8383	8388	"resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
...	...	@@ -29,6 +29,7 @@
29	29	"hammerjs": "^2.0.8",
30	30	"jquery": "^3.4.1",
31	31	"js-sha256": "^0.9.0",
	32	+ "ngx-bootstrap": "^5.2.0",
32	33	"popper.js": "^1.16.0",
33	34	"rxjs": "~6.4.0",
34	35	"tslib": "^1.10.0",
...	...	@@ -65,7 +65,7 @@
65	65	<div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
66	66	<div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
67	67	<!-- ARTICULO -->
68		- <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let lala of [{},{},{},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
	68	+ <div class="col px-2 my-1 my-md-3 h-auto" *ngFor="let articulo of [{},{},{promo: true},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
69	69	<div class="card h-100">
70	70	<img
71	71	draggable="false"
...	...	@@ -77,7 +77,10 @@
77	77	<p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
78	78	<p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
79	79	<div class="col-12 px-1 align-self-end btn-effect h-auto">
80		- <div class="row mx-0 justify-content-between bg-primary badge-pill">
	80	+ <div
	81	+ [ngClass]="{'bg-secondary': articulo.promo}"
	82	+ class="row mx-0 justify-content-between bg-primary badge-pill"
	83	+ (click)="elegirArticulo(articulo)">
81	84	<div class="col px-0 align-self-center text-white text-right">
82	85	{{55 \| currency}}
83	86	</div>
...	...	@@ -129,7 +132,7 @@
129	132	(contextmenu)="false"
130	133	class="d-block h-55 p-2 mx-auto"
131	134	src="assets/img/ir-color.svg">
132		- <p class="d-block mt-auto text-center text-primary"><small>{{'lala'}}</small></p>
	135	+ <p class="d-block mt-auto text-center text-primary"><small>{{'articulo'}}</small></p>
133	136	</div>
134	137	</div>
135	138	</div>
1	1	import { Component, OnInit } from "@angular/core";
	2	+import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
	3	+import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
2	4
3	5	@Component({
4	6	selector: "app-seleccion-articulos",
...	...	@@ -15,10 +17,13 @@ export class SeleccionArticulosComponent implements OnInit {
15	17	{ id: 5, selected: false },
16	18	{ id: 6, selected: false }
17	19	];
	20	+ modalRef: BsModalRef;
18	21
19		- constructor() {}
	22	+ constructor(
	23	+ private modalService: BsModalService,
	24	+ ) { }
20	25
21		- ngOnInit() {}
	26	+ ngOnInit() { }
22	27
23	28	selectCategoria(index: number) {
24	29	this.categorias.forEach((categoria, i) => {
...	...	@@ -26,6 +31,15 @@ export class SeleccionArticulosComponent implements OnInit {
26	31	});
27	32	}
28	33
	34	+ elegirArticulo(articulo: any) {
	35	+ if (articulo.promo) {
	36	+ this.modalRef = this.modalService.show(PromocionComponent, {
	37	+ class: 'custom-modal modal-dialog-centered',
	38	+ ignoreBackdropClick: true,
	39	+ })
	40	+ }
	41	+ }
	42	+
29	43	mouseup() {
30	44	if (!this.timeoutHandler) return;
31	45	clearInterval(this.timeoutHandler);
1	1	import { NgModule } from '@angular/core';
2	2	import { CommonModule } from '@angular/common';
3		-
4	3	import { SeleccionArticulosRoutingModule } from './seleccion-articulos-routing.module';
5	4	import { SeleccionArticulosComponent } from './seleccion-articulos.component';
6	5	import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component';
	6	+import { ModalModule } from 'ngx-bootstrap/modal';
	7	+import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
7	8
8	9	@NgModule({
9		- declarations: [SeleccionArticulosComponent, HeaderPublicidadComponent],
10		- imports: [CommonModule, SeleccionArticulosRoutingModule],
11		- exports: [HeaderPublicidadComponent]
	10	+ declarations: [
	11	+ SeleccionArticulosComponent,
	12	+ HeaderPublicidadComponent,
	13	+ PromocionComponent
	14	+ ],
	15	+ imports: [
	16	+ CommonModule,
	17	+ SeleccionArticulosRoutingModule,
	18	+ ModalModule.forRoot(),
	19	+ ],
	20	+ exports: [HeaderPublicidadComponent],
	21	+ entryComponents: [PromocionComponent]
12	22	})
13	23	export class SeleccionArticulosModule { }
...	...	@@ -0,0 +1,55 @@
	1	+<div class="p-3">
	2	+ <div class="row mx-0 justify-content-end">
	3	+ <div
	4	+ class="col-auto px-0 btn-effect"
	5	+ (click)="modalRef.hide()">
	6	+ <img class="icon-30 rotate-45" src="assets/img/mas-blanco.svg">
	7	+ </div>
	8	+ </div>
	9	+ <div class="row mb-4 mx-0 text-center">
	10	+ <div class="col-7 align-self-center">
	11	+ <p class="h6 text-muted mb-2"><small>{{'ENSALADA CAESAR'}}</small></p>
	12	+ <p class="h6"><small>¿QUERÉS LLEVAR ESTA ENSALADA</small></p>
	13	+ <p class="h4 mb-2 font-weight-bold">en combo con 1 bebida?</p>
	14	+ <div class="row">
	15	+ <div class="col-6 pl-0">
	16	+ <div
	17	+ class="row mx-0 justify-content-between bg-light badge-pill btn-effect"
	18	+ (click)="elegirArticulo(articulo)">
	19	+ <div class="col px-0 align-self-center text-primary">
	20	+ <p class="d-block">
	21	+ <small class="pr-2">{{'Sola'}} {{155 \| currency}}</small>
	22	+ <img
	23	+ draggable="false"
	24	+ ondragstart="return false;"
	25	+ (contextmenu)="false"
	26	+ class="icon-20"
	27	+ src="assets/img/ir-color.svg">
	28	+ </p>
	29	+ </div>
	30	+ </div>
	31	+ </div>
	32	+ <div class="col-6 px-0">
	33	+ <div
	34	+ class="row mx-0 justify-content-between bg-light badge-pill btn-effect"
	35	+ (click)="elegirArticulo(articulo)">
	36	+ <div class="col px-0 align-self-center text-primary">
	37	+ <p class="d-block">
	38	+ <small class="pr-2">{{'Con bebida'}} {{155 \| currency}}</small>
	39	+ <img
	40	+ draggable="false"
	41	+ ondragstart="return false;"
	42	+ (contextmenu)="false"
	43	+ class="icon-20"
	44	+ src="assets/img/ir-color.svg">
	45	+ </p>
	46	+ </div>
	47	+ </div>
	48	+ </div>
	49	+ </div>
	50	+ </div>
	51	+ <div class="col-5 align-self-center">
	52	+ <img class="icon-150" src="assets/img/mas-blanco.svg">
	53	+ </div>
	54	+ </div>
	55	+</div>
0	56	\ No newline at end of file
...	...	@@ -0,0 +1,25 @@
	1	+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2	+
	3	+import { PromocionComponent } from './promocion.component';
	4	+
	5	+describe('PromocionComponent', () => {
	6	+ let component: PromocionComponent;
	7	+ let fixture: ComponentFixture<PromocionComponent>;
	8	+
	9	+ beforeEach(async(() => {
	10	+ TestBed.configureTestingModule({
	11	+ declarations: [ PromocionComponent ]
	12	+ })
	13	+ .compileComponents();
	14	+ }));
	15	+
	16	+ beforeEach(() => {
	17	+ fixture = TestBed.createComponent(PromocionComponent);
	18	+ component = fixture.componentInstance;
	19	+ fixture.detectChanges();
	20	+ });
	21	+
	22	+ it('should create', () => {
	23	+ expect(component).toBeTruthy();
	24	+ });
	25	+});
...	...	@@ -0,0 +1,18 @@
	1	+import { Component, OnInit } from '@angular/core';
	2	+import { BsModalRef } from 'ngx-bootstrap/modal';
	3	+
	4	+@Component({
	5	+ selector: 'app-promocion',
	6	+ templateUrl: './promocion.component.html',
	7	+ styleUrls: ['./promocion.component.scss']
	8	+})
	9	+export class PromocionComponent implements OnInit {
	10	+
	11	+ constructor(
	12	+ private modalRef: BsModalRef,
	13	+ ) { }
	14	+
	15	+ ngOnInit() {
	16	+ }
	17	+
	18	+}
...	...	@@ -17,3 +17,7 @@
17	17	.icon-60 {
18	18	width: 60px;
19	19	}
	20	+
	21	+.icon-150 {
	22	+ width: 150px;
	23	+}
...	...	@@ -18,4 +18,15 @@ $border-radius: 1.5rem;
18	18	$border-radius-lg: 2.5rem;
19	19	$border-radius-sm: 0.5rem;
20	20
	21	+.custom-modal {
	22	+ max-width: 90% !important;
	23	+ & > .modal-content {
	24	+ background-color: $primary !important;
	25	+ color: white;
	26	+ border: none !important;
	27	+ border-radius: $border-radius !important;
	28	+ box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
	29	+ }
	30	+}
	31	+
21	32	@import "node_modules/bootstrap/scss/bootstrap";