Mauricio Cattafi / autoservicio

Commit 5aee6bac60ec7cf84999572a91baefc72280ed6e

Authored by Marcelo Puebla 2019-08-08 10:24:58 -0300

Merge branch 'master' into 'master'

Master(efernandez)

See merge request !11

Showing 8 changed files Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ 5aee6ba

 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 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';
 const routes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: 'inicio', component: InicioComponent },
   { path: 'busqueda-productos', component: BusquedaProductosComponent },
+  { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.module.ts

Diff comments View file @ 5aee6ba

 //#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';
 //#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';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     CarouselComponent,
     HomeComponent,
     InicioComponent,
-    BusquedaProductosComponent
+    BusquedaProductosComponent,
+    ConfirmacionCarritoComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/confirmacion-carrito/confirmacion-carrito.component.html

Diff comments View file @ 5aee6ba

File was created	1	<app-header></app-header>
	2	<div class="row">
	3	<div class="col-10">
	4
	5	<!-- NOMBRE DE SECCION -->
	6	<div class="row m-0">
	7	<div class="col-12 p-0">
	8	<p class="h5 py-1 bg-light text-muted text-center">Pago <i class="fa fa-usd"></i></p>
	9	</div>
	10	</div>
	11
	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">
	21
	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>
	34	</div>
	35	</div>
	36	</div>
	37	</div>
	38	</div>
	39	</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	</div>
	49

src/app/components/confirmacion-carrito/confirmacion-carrito.component.scss

Diff comments View file @ 5aee6ba

src/app/components/confirmacion-carrito/confirmacion-carrito.component.spec.ts

Diff comments View file @ 5aee6ba

File was created	1	import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	2
	3	import { ConfirmacionCarritoComponent } from './confirmacion-carrito.component';
	4
	5	describe('ConfirmacionCarritoComponent', () => {
	6	let component: ConfirmacionCarritoComponent;
	7	let fixture: ComponentFixture<ConfirmacionCarritoComponent>;
	8
	9	beforeEach(async(() => {
	10	TestBed.configureTestingModule({
	11	declarations: [ ConfirmacionCarritoComponent ]
	12	})
	13	.compileComponents();
	14	}));
	15
	16	beforeEach(() => {
	17	fixture = TestBed.createComponent(ConfirmacionCarritoComponent);
	18	component = fixture.componentInstance;
	19	fixture.detectChanges();
	20	});
	21
	22	it('should create', () => {
	23	expect(component).toBeTruthy();
	24	});
	25	});
	26

src/app/components/confirmacion-carrito/confirmacion-carrito.component.ts

Diff comments View file @ 5aee6ba

File was created	1	import { Component, OnInit } from '@angular/core';
	2
	3	@Component({
	4	selector: 'app-confirmacion-carrito',
	5	templateUrl: './confirmacion-carrito.component.html',
	6	styleUrls: ['./confirmacion-carrito.component.scss']
	7	})
	8	export class ConfirmacionCarritoComponent implements OnInit {
	9
	10	productos = [{}, {}, {}]
	11	constructor() { }
	12
	13	ngOnInit() {
	14	}
	15
	16	}
	17

src/app/components/inicio/inicio.component.html

Diff comments View file @ 5aee6ba

 <div class="row m-0 fade-in">
   <div class="col-10 p-0">
     <!-- TOP HEADER -->
     <app-header></app-header>
     <!-- NOMBRE DE SECCION -->
     <div class="row m-0">
       <div class="col-12 p-0">
         <p class="h5 py-1 bg-light text-muted text-center">Inicio</p>
       </div>
     </div>
     <div class="row m-4 d-flex align-items-center disable-user-select">
       <div class="col-md-5 d-flex align-items-end flex-column">
         <!-- PROMOCIONES -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left p-4">
             <p class="h3 card-title">Promociones</p>
             <p class="h5 card-text text-muted font-weight-light">Conozca las ofertas del momento.</p>
           </div>
           <div id="carouselIndicators" class="carousel slide mb-4" data-ride="carousel">
             <ol class="carousel-indicators m-0">
               <li data-target="#carouselIndicators" data-slide-to="0" class="bg-dark active"></li>
               <li data-target="#carouselIndicators" data-slide-to="1" class="bg-dark"></li>
               <li data-target="#carouselIndicators" data-slide-to="2" class="bg-dark"></li>
             </ol>
             <div class="carousel-inner">
               <div class="carousel-item active">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
               <div class="carousel-item">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
               <div class="carousel-item">
                 <img src="../../assets/img/descarga.jpg" class="d-block w-50 m-auto rounded" alt="...">
               </div>
             </div>
           </div>
         </div>
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left p-4">
             <p class="h3 card-title">Ordenar</p>
             <p class="h5 card-text text-muted font-weight-light">Arme su pedido y solo pase a retirar.</p>
           </div>
           <img class="card-img-bottom d-block w-50 mx-auto mb-4 rounded" src="../../assets/img/descarga.jpg">
         </div>
       </div>
       <div class="col-md-7 d-flex align-items-end flex-column">
         <!-- CARGAR PRODUCTOS -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left p-4">
             <p class="h3 card-title">Cargar Productos</p>
             <p class="h5 card-text text-muted font-weight-light">
               Coloque el código de<br>
               barras o QR frente al scanner.
             </p>
           </div>
           <div class="card bg-white border-0 w-75 mx-auto mb-4">
             <img class="card-img-top d-block w-50 mx-auto rounded" src="../../assets/img/descarga.jpg">
             <div class="card-body text-left p-2">
               <p class="m-0 card-text text-muted">Galletas Oreo x117 grs Chocolate.</p>
               <p class="m-0 card-text text-muted">COD. 12121222</p>
             </div>
           </div>
         </div>
         <!-- BUSCAR PRODUCTOS -->
         <div
           (click)="goPage('busqueda-productos')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
           <div class="card-body text-left p-4">
             <p class="h3 card-title">Buscar Productos</p>
             <p class="h5 card-text text-muted font-weight-light">
               Busque aquí los productos<br>
               que no tienen código
             </p>
           </div>
         </div>
       </div>
     </div>
   </div>
   <!-- SIDEBAR -->
   <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
-</div>
+</div>

src/app/components/sidebar/sidebar.component.html

Diff comments View file @ 5aee6ba

1	<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">	1	<div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center">
2		2
3	<h4 class="border-bottom border-white"> Mi compra </h4>	3	<h4 class="border-bottom border-white"> Mi compra </h4>
4	<div class="overflow-auto mb-2">	4	<div class="overflow-auto mb-2">
5	<div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">	5	<div class="card my-2 bg-primary border-0" *ngFor="let prod of productos; let i = index">
6	<img src="{{prod.img}}" class="card-img-top" alt="...">	6	<img src="{{prod.img}}" class="card-img-top" alt="...">
7	<div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">	7	<div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
8	<div class="col-8 p-0 text-left my-auto">	8	<div class="col-8 p-0 text-left my-auto">
9	<p class="m-0 card-description">{{prod.desc}}</p>	9	<p class="m-0 card-description">{{prod.desc}}</p>
10	<p class="m-0 card-description">COD: {{prod.cod}}</p>	10	<p class="m-0 card-description">COD: {{prod.cod}}</p>
11	</div>	11	</div>
12	<div class="col-4 p-1 text-center my-auto">	12	<div class="col-4 p-1 text-center my-auto">
13	{{prod.precio \| currency}}	13	{{prod.precio \| currency}}
14	</div>	14	</div>
15	</div>	15	</div>
16	<div class="row m-0 p-0">	16	<div class="row m-0 p-0">
17	<div class="col p-1 pb-1 mt-2">	17	<div class="col p-1 pb-1 mt-2">
18	<button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>	18	<button type="button" class="btn btn-light btn-sm float-left my-auto" (click)="deleteProducto(i)">X</button>
19	<button type="button" class="btn btn-light btn-sm my-auto">Y</button>	19	<button type="button" class="btn btn-light btn-sm my-auto">Y</button>
20	<div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">	20	<div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
21	<button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>	21	<button type="button" class="btn btn-light btn-sm mb-2" (click)="aumentarContador(i)">+</button>
22	<label for="" class="border border.white px-1">{{prod.cantidad}}</label>	22	<label for="" class="border border.white px-1">{{prod.cantidad}}</label>
23	<button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>	23	<button type="button" class="btn btn-light btn-sm mb-2" (click)="decrementarContador(i)">-</button>
24	</div>	24	</div>
25	</div>	25	</div>
26	</div>	26	</div>
27	</div>	27	</div>
28	</div>	28	</div>
29		29
30	<div class="card mt-auto blue-gradient border-0">	30	<div class="card mt-auto blue-gradient border-0">
31	<div class="card-body row">	31	<div class="card-body row">
32	<div class="col">	32	<div class="col">
33	<h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>	33	<h4 class="border-bottom border-secondary text-secondary" *ngIf="cont === 1">({{cont}}) item</h4>
34	<h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>	34	<h4 class="border-bottom border-secondary text-secondary" *ngIf="cont > 1">({{cont}}) items</h4>
35	<h3 class="text-secondary">Total</h3>	35	<h3 class="text-secondary">Total</h3>
36	<h3 class="text-dark"><strong>{{total \| currency}}</strong></h3>	36	<h3 class="text-dark"><strong>{{total \| currency}}</strong></h3>
37	</div>	37	</div>
38	<div class="col 12 p-0">	38	<div class="col 12 p-0">
39	<button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button>	39	<button type="button" class="btn btn-light shadow mb-2" routerLink="/confirmacion-carrito"><strong>Finalizar y pagar</strong></button>
40	<button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>	40	<button type="button" class="btn btn-light shadow btn-sm" (click)="clearCar()">Cancelar</button>
41	</div>	41	</div>
42	</div>	42	</div>
43	</div>	43	</div>