Martin Macola / autoservicio

Download as
Browse Code ยป

Commit c68c1dba2c182613057c12130b901dc852489cc1

Authored by Marcelo Puebla
1 parent 35a1764f99
Exists in master

Cambio en estructura de las rutas del proyecto.

Showing 12 changed files with 180 additions and 135 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ c68c1db
... ... @@ -4,12 +4,20 @@ import { HomeComponent } from './components/home/home.component';
4 4 import { InicioComponent } from './components/inicio/inicio.component';
5 5 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
6 6 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
  7 +import { MasterComponent } from './components/master/master.component';
7 8  
8 9 const routes: Routes = [
  10 + { path: '', component: HomeComponent },
9 11 { path: 'home', component: HomeComponent },
10   - { path: 'inicio', component: InicioComponent },
11   - { path: 'busqueda-productos', component: BusquedaProductosComponent },
12   - { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
  12 + {
  13 + path: '',
  14 + component: MasterComponent,
  15 + children: [
  16 + { path: 'inicio', component: InicioComponent },
  17 + { path: 'busqueda-productos', component: BusquedaProductosComponent },
  18 + { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
  19 + ]
  20 + },
13 21 { path: '**', redirectTo: '/home', pathMatch: 'full' },
14 22 ];
15 23  
src/app/app.module.ts
Diff comments   View file @ c68c1db
... ... @@ -15,6 +15,7 @@ import { HomeComponent } from './components/home/home.component';
15 15 import { InicioComponent } from './components/inicio/inicio.component';
16 16 import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component';
17 17 import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component';
  18 +import { MasterComponent } from './components/master/master.component';
18 19 //#endregion
19 20  
20 21 @NgModule({
... ... @@ -26,7 +27,8 @@ import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/
26 27 HomeComponent,
27 28 InicioComponent,
28 29 BusquedaProductosComponent,
29   - ConfirmacionCarritoComponent
  30 + ConfirmacionCarritoComponent,
  31 + MasterComponent
30 32 ],
31 33 imports: [
32 34 BrowserModule,
src/app/components/busqueda-productos/busqueda-productos.component.html
Diff comments   View file @ c68c1db
1 1 <div class="row m-0 fade-in">
2   - <div class="col-10 p-0">
3   - <!-- TOP HEADER -->
4   - <app-header></app-header>
  2 + <div class="col-12 p-0">
5 3  
6 4 <!-- NOMBRE DE SECCION -->
7 5 <div class="row m-0">
... ... @@ -95,7 +93,9 @@
95 93 <div
96 94 class="col-4 p-2"
97 95 *ngFor="let producto of auxProductos">
98   - <div class="card-effect bg-white rounded-sm shadow border-0">
  96 + <div
  97 + class="card-effect bg-white rounded-sm shadow border-0"
  98 + (click)="agregarAlCarrito(producto)">
99 99 <img src="{{apiUrl}}/imagenes/accesoPLAYA.png" class="w-75 m-auto">
100 100 <div class="p-2">
101 101 <p class="h6 text-left m-0">{{producto.DetArt}}</p>
... ... @@ -126,6 +126,4 @@
126 126  
127 127 </div>
128 128  
129   - <!-- SIDEBAR -->
130   - <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
131 129 </div>
src/app/components/busqueda-productos/busqueda-productos.component.ts
Diff comments   View file @ c68c1db
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit, Input, ViewChild, AfterViewInit } from '@angular/core';
2 2 import { ProductoService } from 'src/app/services/producto.service';
3 3 import { Producto } from 'src/app/wrappers/producto';
4 4 import { appSettings } from 'src/etc/AppSettings';
  5 +import { SidebarComponent } from '../sidebar/sidebar.component';
5 6  
6 7 @Component({
7 8 selector: 'app-busqueda-productos',
... ... @@ -15,10 +16,16 @@ export class BusquedaProductosComponent implements OnInit {
15 16 private searchTerm: string = '';
16 17 private showSpinner: boolean = true;
17 18 private categoria: Categorias = Categorias.todos;
18   - private apiUrl : string = appSettings.apiUrl;
  19 + private apiUrl: string = appSettings.apiUrl;
  20 +
  21 + productosParaCarrito : Producto[] = [];
19 22  
20 23 constructor(private productoService: ProductoService) { }
21 24  
  25 + // ngAfterViewInit() {
  26 + // this.sideBar.productos = [];
  27 + // }
  28 +
22 29 ngOnInit() {
23 30  
24 31 this.productoService.getAll()
... ... @@ -36,6 +43,11 @@ export class BusquedaProductosComponent implements OnInit {
36 43 this.auxProductos = this.productos.filter(x => x.DetArt.toLowerCase().includes(this.searchTerm.toLowerCase()));
37 44 }
38 45  
  46 + agregarAlCarrito(producto : Producto){
  47 + producto.cantidad = 1;
  48 + this.productosParaCarrito.push(producto);
  49 + }
  50 +
39 51 }
40 52  
41 53 enum Categorias {
src/app/components/confirmacion-carrito/confirmacion-carrito.component.html
Diff comments   View file @ c68c1db
1   -<app-header></app-header>
2 1 <div class="row">
3   - <div class="col-10">
  2 + <div class="col-12">
4 3  
5 4 <!-- NOMBRE DE SECCION -->
6 5 <div class="row m-0">
7   - <div class="col-12 p-0">
8   - <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
  6 + <div class="col-12 p-0">
  7 + <p class="h5 py-1 bg-gray text-muted text-center">Pago <i class="fa fa-usd"></i></p>
  8 + </div>
9 9 </div>
10   - </div>
11 10  
12   - <div class="row m-4 d-flex align-items-center">
13   - <div class="col-4">
14   - <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
15   - </div>
16   - <div class="col-8">
17   - <h2>ยฟDesea finalizar su compra?</h2>
18   - <h3>Por favor, controle y confirme su compra.</h3>
19   - </div>
20   - <div class="col-sm-7">
  11 + <div class="row m-4 d-flex align-items-center">
  12 + <div class="col-4">
  13 + <h1>Mi Compra <i class="fa fa-shopping-cart "></i></h1>
  14 + </div>
  15 + <div class="col-8">
  16 + <h2>ยฟDesea finalizar su compra?</h2>
  17 + <h3>Por favor, controle y confirme su compra.</h3>
  18 + </div>
  19 + <div class="col-sm-7">
21 20  
22   - <div class="row pr-3 vh-50 overflow-scroll">
23   - <div
24   - class="col-4 p-2"
25   - *ngFor="let producto of productos">
26   - <div class="card card-effect bg-white rounded-sm shadow border-0">
27   - <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
28   - <div class="card-body">
29   - <p class="h5 text-left m-0">{{producto.variable}}</p>
30   - <div class="text-left">
31   - <p class="m-0"><small>ASDASDSADASDSA</small></p>
32   - <p class="m-0"><small>COD. 1222</small></p>
33   - <p class="m-0"><strong>$ 563</strong></p>
  21 + <div class="row pr-3 vh-50 overflow-scroll">
  22 + <div class="col-4 p-2" *ngFor="let producto of productos">
  23 + <div class="card card-effect bg-white rounded-sm shadow border-0">
  24 + <img src="../../../assets/img/descarga.jpg" class="card-img-top w-75 m-auto">
  25 + <div class="card-body">
  26 + <p class="h5 text-left m-0">{{producto.variable}}</p>
  27 + <div class="text-left">
  28 + <p class="m-0"><small>ASDASDSADASDSA</small></p>
  29 + <p class="m-0"><small>COD. 1222</small></p>
  30 + <p class="m-0"><strong>$ 563</strong></p>
  31 + </div>
  32 + </div>
34 33 </div>
35 34 </div>
36 35 </div>
37 36 </div>
  37 + <div class="col-sm-5">
  38 + <h3>TOTAL: $553</h3>
  39 + </div>
38 40 </div>
39 41 </div>
40   - <div class="col-sm-5">
41   - <h3>TOTAL: $553</h3>
42   - </div>
43   -</div>
44   -
45   -<!-- SIDEBAR -->
46   -</div>
47   - <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
48 42 </div>
src/app/components/inicio/inicio.component.html
Diff comments   View file @ c68c1db
1 1 <div class="row m-0 fade-in">
2   - <div class="col-10 p-0">
3   - <!-- TOP HEADER -->
4   - <app-header></app-header>
  2 + <div class="col-12 p-0">
5 3  
6 4 <!-- NOMBRE DE SECCION -->
7 5 <div class="row m-0">
... ... @@ -15,7 +13,7 @@
15 13  
16 14 <!-- TOOL TIp -->
17 15 <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto"
18   - *ngIf="tooltip === true">
  16 + *ngIf="tooltip === false">
19 17 <div class="arrow"></div>
20 18 <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
21 19 <div class="popover-content mw-100 h-100 mb-auto">
... ... @@ -40,7 +38,7 @@
40 38 </div>
41 39  
42 40 <!-- PROMOCIONES -->
43   - <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
  41 + <div class="card bg-white border-0 shadow rounded w-100 mb-auto">
44 42 <div class="card-body text-left p-4">
45 43 <div class="row">
46 44 <div class="col-7">
... ... @@ -140,7 +138,4 @@
140 138 </div>
141 139  
142 140 </div>
143   -
144   - <!-- SIDEBAR -->
145   - <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
146   -</div>
147 141 \ No newline at end of file
  142 +</div>
src/app/components/master/master.component.html
Diff comments   View file @ c68c1db
... ... @@ -0,0 +1,14 @@
  1 +<div class="row m-0 fade-in">
  2 + <div class="col-10 p-0">
  3 +
  4 + <!-- TOP HEADER -->
  5 + <app-header></app-header>
  6 +
  7 + <router-outlet></router-outlet>
  8 +
  9 + </div>
  10 +
  11 + <!-- SIDEBAR -->
  12 + <app-sidebar class="col-2 col-md-2 vh-100 bg-primary-gradient"></app-sidebar>
  13 +
  14 +</div>
src/app/components/master/master.component.scss
Diff comments   View file @ c68c1db
src/app/components/master/master.component.spec.ts
Diff comments   View file @ c68c1db
... ... @@ -0,0 +1,25 @@
  1 +import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 +
  3 +import { MasterComponent } from './master.component';
  4 +
  5 +describe('MasterComponent', () => {
  6 + let component: MasterComponent;
  7 + let fixture: ComponentFixture<MasterComponent>;
  8 +
  9 + beforeEach(async(() => {
  10 + TestBed.configureTestingModule({
  11 + declarations: [ MasterComponent ]
  12 + })
  13 + .compileComponents();
  14 + }));
  15 +
  16 + beforeEach(() => {
  17 + fixture = TestBed.createComponent(MasterComponent);
  18 + component = fixture.componentInstance;
  19 + fixture.detectChanges();
  20 + });
  21 +
  22 + it('should create', () => {
  23 + expect(component).toBeTruthy();
  24 + });
  25 +});
src/app/components/master/master.component.ts
Diff comments   View file @ c68c1db
... ... @@ -0,0 +1,15 @@
  1 +import { Component, OnInit } from '@angular/core';
  2 +
  3 +@Component({
  4 + selector: 'app-master',
  5 + templateUrl: './master.component.html',
  6 + styleUrls: ['./master.component.scss']
  7 +})
  8 +export class MasterComponent implements OnInit {
  9 +
  10 + constructor() { }
  11 +
  12 + ngOnInit() {
  13 + }
  14 +
  15 +}
src/app/components/sidebar/sidebar.component.html
Diff comments   View file @ c68c1db
1   -<div class="d-flex align-items-center flex-column h-100 pt-2 text-center">
  1 +<div class="disable-user-select d-flex align-items-center flex-column h-100 pt-2 text-center">
2 2  
3   - <h4 class="border-bottom border-white text-white"> Mi compra </h4>
  3 + <p class="h4 border-bottom border-white text-white mt-4 pb-2">
  4 + Mi compra
  5 + <i class="fa fa-shopping-cart" aria-hidden="true"></i>
  6 + </p>
4 7  
5 8 <div class="overflow-auto overflow-scroll mb-2 w-100">
6   - <div class="my-2 bg-white border-0 rounded-sm" *ngFor="let prod of productos; let i = index">
7   - <img class="m-auto pt-2" [src]="prod.img">
  9 + <!-- PRODUCTOS CARRITO -->
  10 + <div class="fade-left my-2 bg-white border-0 rounded-sm" *ngFor="let producto of productosCarrito; let i = index">
  11 + <img class="m-auto pt-2" src="{{apiUrl}}/imagenes/{{producto.nombreImagen}}">
8 12 <div class="row m-0 p-0 px-1 py-1 shadow rounded-sm">
9 13 <div class="col-12 p-0 pt-2 text-left my-auto">
10   - <p class="m-0 h6"><small>{{prod.desc}}</small></p>
11   - <p class="m-0 h6"><small>COD: {{prod.cod}}</small></p>
  14 + <p class="m-0 h6"><small>{{producto.DetArt}}</small></p>
  15 + <p class="m-0 h6"><small>COD: {{producto.CodRub}}</small></p>
12 16 </div>
13 17 <div class="col-12 pr-1 text-right h6 my-auto ">
14   - <p class="m-0">{{prod.precio | currency}}</p>
  18 + <p class="m-0">{{producto.PreVen | currency}}</p>
15 19 </div>
16 20 </div>
17 21 <div class="row m-0 p-0">
18   - <div class="col px-2 my-2">
  22 + <div class="col-6 px-2 my-2">
19 23 <div class="btn-group-sm btn-group float-left my-auto" role="group">
20 24 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="aumentarContador(i)">
21 25 <i class="fa fa-plus" aria-hidden="true"></i>
22 26 </button>
23 27 <div class="bg-white border border-white px-3 my-auto text-dark h5">
24   - <small>{{prod.cantidad}}</small>
  28 + <small>{{producto.cantidad}}</small>
25 29 </div>
26 30 <button type="button" class="btn btn-light btn-sm my-auto border" (click)="decrementarContador(i)">
27 31 <i class="fa fa-minus" aria-hidden="true"></i>
28 32 </button>
29 33 </div>
30 34 </div>
31   - <div class="col px-2 my-2">
  35 + <div class="col-6 px-2 my-2">
32 36 <div class="btn-group-sm btn-group float-right my-auto" role="group">
33 37 <button type="button" class="btn btn-light btn-sm my-auto float-left border mr-2">
34 38 <i class="fa fa-hand-o-up" aria-hidden="true"></i>
... ... @@ -42,19 +46,24 @@
42 46 </div>
43 47 </div>
44 48  
  49 + <!-- TOTAL -->
45 50 <div class="card rounded-top-sm mt-auto blue-gradient border-0">
46 51 <div class="card-body row">
47   - <div class="col">
48   - <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</h4>
49   - <h4 class="border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</h4>
50   - <h3 class="text-secondary">Total</h3>
51   - <h3 class=""><strong>{{total | currency}}</strong></h3>
  52 + <div class="col-12">
  53 + <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont === 1">({{cont}}) item</p>
  54 + <p class="h4 border-bottom border-secondary text-secondary pb-2" *ngIf="cont > 1">({{cont}}) items</p>
  55 + <p class="h3 text-secondary">Total</p>
  56 + <p class="h3 font-weight-bold">{{getTotal() | currency}}</p>
52 57 </div>
53   - <div class="col 12 p-0">
54   - <button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito">
55   - <strong>Finalizar y pagar</strong>
56   - </button>
57   - <button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
  58 + <div class="col-12">
  59 + <button type="button" class="btn btn-block btn-light btn-lg shadow mb-2 p-1" routerLink="/confirmacion-carrito">
  60 + <span class="font-weight-bold pr-1">Finalizar y Pagar</span>
  61 + <i class="fa fa-check text-success" aria-hidden="true"></i>
  62 + </button>
  63 + <button type="button" class="btn btn-block btn-light shadow btn-sm shadow" (click)="cleanCarrito()">
  64 + <span class="pr-1">Cancelar</span>
  65 + <i class="fa fa-times text-danger" aria-hidden="true"></i>
  66 + </button>
58 67 </div>
59 68 </div>
60 69 </div>
src/app/components/sidebar/sidebar.component.ts
Diff comments   View file @ c68c1db
1   -import { Component, OnInit } from '@angular/core';
  1 +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
2 2 import { Producto } from 'src/app/wrappers/producto';
  3 +import { appSettings } from 'src/etc/AppSettings';
3 4  
4 5  
5 6 @Component({
6 7 selector: 'app-sidebar',
7 8 templateUrl: './sidebar.component.html',
8   - styleUrls: ['./sidebar.component.scss']
  9 + styleUrls: ['./sidebar.component.scss'],
  10 + inputs: ['productosCarrito']
9 11 })
10 12 export class SidebarComponent implements OnInit {
11 13  
... ... @@ -13,69 +15,40 @@ export class SidebarComponent implements OnInit {
13 15 private min: number = 1;
14 16 private max: number = 50;
15 17 private total: number = 0;
  18 + private apiUrl: string = appSettings.apiUrl;
16 19  
17   - private productos = [
18   - {
19   - "id": 1,
20   - "Detart": "Galletas Oreo",
21   - "cod": 225412,
22   - "precio": 15,
23   - "img": "./assets/img/logodebo.png",
24   - "cantidad": 1
25   - },
26   - {
27   - "id": 2,
28   - "desc": "Coca cola 500ml",
29   - "cod": 512632,
30   - "precio": 40,
31   - "img": "./assets/img/logodebo.png",
32   - "cantidad": 1
33   - },
34   - {
35   - "id": 3,
36   - "desc": "Pancho grande",
37   - "cod": 775987,
38   - "precio": 45,
39   - "img": "./assets/img/logodebo.png",
40   - "cantidad": 1
41   - }
42   - ];
  20 + public productosCarrito: Producto[] = [];
43 21  
44 22 constructor() { }
45 23  
46   - ngOnInit() {
47   -
48   - this.getCantidadProductos();
49   - this.getTotal();
50   -
51   - }
  24 + ngOnInit() { }
52 25  
53 26 getCantidadProductos() {
54   - var aux = 0;
55   - for (let i = 0; i < this.productos.length; i++) {
56   - ++aux;
  27 +
  28 + for (let i = 0; i < this.productosCarrito.length; i++) {
  29 + this.productosCarrito[i].cantidad = 1
  30 + this.cont++;
57 31 }
58   - return this.cont = aux;
  32 + return this.cont;
59 33 }
60 34  
61 35 getTotal() {
62 36  
63 37 let subTotal = 0;
64   - for (let i = 0; i < this.productos.length; i++) {
65   - subTotal = subTotal + (this.productos[i].precio * this.productos[i].cantidad);
  38 + for (let i = 0; i < this.productosCarrito.length; i++) {
  39 + subTotal = subTotal + (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
66 40 }
67   - console.log(subTotal);
68 41 return this.total = subTotal;
69 42 }
70 43  
71 44 public aumentarContador(index) {
72 45  
73   - ++this.cont;
74   - for (let i = 0; i < this.productos.length; i++) {
  46 + this.cont++;
  47 + for (let i = 0; i < this.productosCarrito.length; i++) {
75 48 if (i === index) {
76   - this.total = this.total + this.productos[i].precio;
77   - return (this.productos[i].cantidad === this.max) ?
78   - this.productos[i].cantidad : ++this.productos[i].cantidad;
  49 + this.total = this.total + this.productosCarrito[i].PreVen;
  50 + return (this.productosCarrito[i].cantidad === this.max) ?
  51 + this.productosCarrito[i].cantidad : this.productosCarrito[i].cantidad++;
79 52  
80 53 }
81 54 }
... ... @@ -83,10 +56,10 @@ export class SidebarComponent implements OnInit {
83 56  
84 57 decrementarContador(index) {
85 58  
86   - for (let i = 0; i < this.productos.length; i++) {
87   - if (i === index && this.productos[i].cantidad > 1) {
88   - --this.productos[i].cantidad;
89   - --this.cont;
  59 + for (let i = 0; i < this.productosCarrito.length; i++) {
  60 + if (i === index && this.productosCarrito[i].cantidad > 1) {
  61 + this.productosCarrito[i].cantidad--;
  62 + this.cont--;
90 63 break;
91 64 }
92 65 }
... ... @@ -97,27 +70,27 @@ export class SidebarComponent implements OnInit {
97 70 setCantidadItems() {
98 71  
99 72 this.cont = 0;
100   - for (let i = 0; i < this.productos.length; i++) {
101   - this.cont += this.productos[i].cantidad;
  73 + for (let i = 0; i < this.productosCarrito.length; i++) {
  74 + this.cont += this.productosCarrito[i].cantidad;
102 75 }
103 76 }
104 77  
105 78 deleteProducto(index) {
106 79  
107   - for (let i = 0; i < this.productos.length; i++) {
  80 + for (let i = 0; i < this.productosCarrito.length; i++) {
108 81 if (i === index) {
109   - this.cont -= this.productos[i].cantidad;
110   - //Elimina del total el precio de todo el item
111   - this.total = this.total - (this.productos[i].precio * this.productos[i].cantidad);
112   - this.productos.splice(i, 1);
  82 + this.cont -= this.productosCarrito[i].cantidad;
  83 + //Elimina del total el PreVen de todo el item
  84 + this.total = this.total - (this.productosCarrito[i].PreVen * this.productosCarrito[i].cantidad);
  85 + this.productosCarrito.splice(i, 1);
113 86 return;
114 87 }
115 88 }
116 89 }
117 90  
118   - clearCar() {
119   -
120   - this.productos = [];
  91 + cleanCarrito() {
  92 +
  93 + this.productosCarrito = [];
121 94 this.total = 0;
122 95 this.cont = 0;
123 96 }