Martin Macola / autoservicio

Browse Code »

Commit 111ec4b8a31c877f3f9bdf71bafb862103968232

Authored by Marcelo Puebla 2019-08-16 13:06:32 -0300

1 parent 10f7e2aa3d

Exists in master

Agregado componente para cancelar la compra del carrito.

Showing 8 changed files with 137 additions and 26 deletions Show diff stats

src/app/app-routing.module.ts

Diff comments View file @ 111ec4b

 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';
 import { MasterComponent } from './components/master/master.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
 import { PagoComponent } from './components/pago/pago.component';
+import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
 const routes: Routes = [
   { path: '', component: HomeComponent },
   { path: 'home', component: HomeComponent },
   { path: 'abm-imagenes', component: AmbImagenesComponent },
   { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent },
+  { path: 'cancelar-compra', component: CancelarCompraComponent },
   {
     path: '',
     component: MasterComponent,
     children: [
       { path: 'inicio', component: InicioComponent },
       { path: 'busqueda-productos', component: BusquedaProductosComponent },
       { path: 'pago', component: PagoComponent }
     ]
   },
   { path: '**', redirectTo: '/home', pathMatch: 'full' },
 ];
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
   exports: [RouterModule]
 })
 export class AppRoutingModule { }

src/app/app.module.ts

Diff comments View file @ 111ec4b

 //#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 { 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 { PopoverPromosComponent } from './components/popover-promos/popover-promos.component';
 import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component';
 import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component';
 import { PagoComponent } from './components/pago/pago.component';
+import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component';
 //#endregion
 @NgModule({
   declarations: [
     AppComponent,
     HeaderComponent,
     SidebarComponent,
     HomeComponent,
     InicioComponent,
     BusquedaProductosComponent,
     ConfirmacionCarritoComponent,
     MasterComponent,
     PopoverPromosComponent,
     PopoverSinonimosComponent,
     AmbImagenesComponent,
-    PagoComponent
+    PagoComponent,
+    CancelarCompraComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     HttpClientModule,
     FormsModule,
     ReactiveFormsModule,
     ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
     TooltipModule.forRoot(),
     PopoverModule.forRoot()
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/components/cancelar-compra/cancelar-compra.component.html

Diff comments View file @ 111ec4b

File was created	1	<div class="container-fluid background-image">
	2	<div class="row">
	3	<div class="col p-0">
	4	<div class="vh-100 d-flex align-content-strech flex-wrap disable-user-select">
	5
	6	<!-- HEADER -->
	7	<div class="row m-0 w-100 bg-primary-gradient-horizontal">
	8	<div class="col-6 bg-white rounded-bottom-right">
	9	<div class="row h-100">
	10	<div class="col d-flex align-items-center">
	11	<img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logoaxion.png">
	12	</div>
	13	</div>
	14	</div>
	15	</div>
	16
	17	<!-- INFO DE BIENVENIDA -->
	18	<div class="row w-100">
	19	<div class="col-4 offset-2">
	20	<div class="row h-100">
	21	<div class="col-12 py-4">
	22	<div class="card h-100 rounded">
	23	<img src="{{apiUrl}}/imagenes/atencion.svg" class="w-50 mx-auto my-auto">
	24	<div class="my-auto">
	25	<p class="display-3 card-text text-center font-weight-bold">
	26	Atención
	27	</p>
	28	</div>
	29	</div>
	30	</div>
	31	</div>
	32	</div>
	33	<div class="col-6 text-center text-white my-auto">
	34	<p class="display-3 font-weight-bold mb-5">
	35	Usted esta a punto<br>de cancelar su compra
	36	</p>
	37	<p class="display-4 m-0">
	38	Perderá los datos y<br>productos ya ingresados
	39	</p>
	40	<div class="d-flex justify-content-center mt-2">
	41	<button type="button" class="btn btn-lg btn-light shadow mr-4">
	42	<span class="pr-2">Volver a mi compra</span>
	43	<i class="fa fa-undo text-warning"></i>
	44	</button>
	45	<button type="button" class="btn btn-lg btn-light shadow ml-4">
	46	<span class="pr-2">Si, terminar</span>
	47	<i class="fa fa-times text-danger"></i>
	48	</button>
	49	</div>
	50	</div>
	51	</div>
	52
	53	<!-- FOOTER -->
	54	<div class="row m-0 w-100 bg-gray">
	55	<div class="col-6 bg-white offset-6 rounded-top-left">
	56	<div class="row h-100">
	57	<div class="col d-flex align-items-center">
	58	<img class="w-25 mx-auto d-block" src="{{apiUrl}}/imagenes/logodebo.png">
	59	</div>
	60	</div>
	61	</div>
	62	</div>
	63
	64	</div>
	65	</div>
	66	</div>
	67	</div>
	68

src/app/components/cancelar-compra/cancelar-compra.component.scss

Diff comments View file @ 111ec4b

src/app/components/cancelar-compra/cancelar-compra.component.spec.ts

Diff comments View file @ 111ec4b

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

src/app/components/cancelar-compra/cancelar-compra.component.ts

Diff comments View file @ 111ec4b

File was created	1	import { Component, OnInit } from '@angular/core';
	2	import { appSettings } from 'src/etc/AppSettings';
	3
	4	@Component({
	5	selector: 'app-cancelar-compra',
	6	templateUrl: './cancelar-compra.component.html',
	7	styleUrls: ['./cancelar-compra.component.scss']
	8	})
	9	export class CancelarCompraComponent implements OnInit {
	10
	11	private apiUrl: string = appSettings.apiUrl;
	12
	13	constructor() { }
	14
	15	ngOnInit() {
	16	}
	17
	18	}
	19

src/app/components/home/home.component.scss

Diff comments View file @ 111ec4b

1	.background-image {
2	background-image: url(http://10.231.45.117:4705/autoservicio/imagenes/homeBackground.jpg);
3	background-repeat: no-repeat;
4	background-size: cover;
5	}
6
7	.w-20 {
8	width: 20% !important;
9	}
10
11	.rounded-bottom-right {
12	border-bottom-right-radius: 10rem;
13	&:before {
14	border-radius: 0 40px 40px 0;
15	background-color: #fff;
16	}
17	}
18
19	.rounded-top-left {
20	border-top-left-radius: 10rem;
21	}
22
23	.bg-gray {
24	background-color: #cccccc;
25	}
26

src/styles.scss

Diff comments View file @ 111ec4b

 @import "./assets/scss/animation.scss";
 @import "./assets/scss/bootstrap-override.scss";
 @import "../node_modules/bootstrap/scss/_variables.scss";
 html,
 body {
   background-color: #f0f0f0;
   font-family: bahnschrift;
 }
 .blur {
   filter: blur(10px);
   -webkit-filter: blur(10px);
 }
 .disable-user-select {
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
 }
 .blue-gradient {
   background: linear-gradient(0deg, #ffffff00, $white);
 }
 .rounded {
   border-radius: 1.5rem !important;
 }
 .rounded-top-sm {
   border-top-left-radius: 0.75rem !important;
   border-top-right-radius: 0.75rem !important;
 }
 .rounded-sm {
   border-radius: 0.75rem !important;
 }
 .card-effect {
   &:active {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
   &:focus {
     background-color: #c9c9c9b3 !important;
     transition: background-color 0.5s;
   }
 }
 .overflow-scroll {
   overflow-y: auto !important;
   overflow-x: hidden !important;
   &::-webkit-scrollbar {
     width: 0.5em;
   }
   &::-webkit-scrollbar-track {
     border-radius: 10px;
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
     background-color: $white;
   }
   &::-webkit-scrollbar-thumb {
     box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.7);
     outline: 1px solid slategrey;
     border-radius: 10px;
     height: 12px;
     &:active {
       box-shadow: inset 0 0 8px $primary;
       -webkit-box-shadow: inset 0 0 8px $primary;
     }
   }
   &::-webkit-scrollbar-corner {
     border-radius: 10px;
   }
 }
 .bg-gray {
   background-color: #e6e6e6;
 }
 .bg-primary-gradient {
   background: linear-gradient(135deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
 }
 .bg-primary-gradient-horizontal {
   background: linear-gradient(90deg, rgba(40, 112, 175, 1) 0%, rgba(0, 32, 66, 1) 100%);
 }
 .icon-dim {
   height: 40px !important;
   width: auto !important;
   background-color: white !important;
 }
 .text-purple {
   color: $purple;
 }
 .vh-70 {
   min-height: auto !important;
   max-height: 70vh !important;
 }
 .vh-60 {
   min-height: auto !important;
   max-height: 60vh !important;
 }
 .spinner-lg {
   width: 3rem !important;
   height: 3rem !important;
 }
 .sidebar {
   right: 0;
 }
+.background-image {
+  background-image: url(http://10.231.45.117:4705/autoservicio/imagenes/homeBackground.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.rounded-bottom-right {
+  border-bottom-right-radius: 10rem;
+  &:before {
+    border-radius: 0 40px 40px 0;
+    background-color: #fff;
+  }
+}
+.rounded-top-left {
+  border-top-left-radius: 10rem;
+}
+.bg-gray {
+  background-color: #cccccc;
+}