Commit 6c52db3e2fed5e35a70b52aa4d9bc63a7106c064
1 parent
be7b891885
Exists in
master
and in
2 other branches
Creados servicios
Showing
15 changed files
with
180 additions
and
67 deletions
Show diff stats
src/app/app.module.ts
... | ... | @@ -8,6 +8,7 @@ import { AppComponent } from './app.component'; |
8 | 8 | import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component'; |
9 | 9 | import { AdminComponent } from './modules/admin/admin.component'; |
10 | 10 | import { FooterComponent } from './shared/footer/footer.component'; |
11 | +import { SharedModule } from './modules/shared/shared.module'; | |
11 | 12 | |
12 | 13 | @NgModule({ |
13 | 14 | declarations: [ |
... | ... | @@ -24,8 +25,8 @@ import { FooterComponent } from './shared/footer/footer.component'; |
24 | 25 | FormsModule, |
25 | 26 | ReactiveFormsModule, |
26 | 27 | ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }), |
28 | + SharedModule.forRoot(), | |
27 | 29 | ], |
28 | - providers: [], | |
29 | 30 | bootstrap: [AppComponent] |
30 | 31 | }) |
31 | 32 | export class AppModule { } |
src/app/modules/carrito/carrito.component.html
... | ... | @@ -12,11 +12,16 @@ |
12 | 12 | </div> |
13 | 13 | </div> |
14 | 14 | |
15 | - <!-- ARTICULOS --> | |
16 | - <div class="row mx-2 mt-4 h-80 scroll-y"> | |
15 | + <!-- CARRITO --> | |
16 | + <div class="row mx-2 mt-4 h-80 justify-content-center align-content-start scroll-y"> | |
17 | + <!-- MENSAJE DE ADVERTENCIA --> | |
18 | + <div class="col-10 align-self-center alert alert-primary" *ngIf="!articuloService.carrito.length"> | |
19 | + <p class="h5 text-center">No hay artículos en el carrito</p> | |
20 | + </div> | |
21 | + <!-- ARTICULOS --> | |
17 | 22 | <div |
18 | 23 | class="col-12 col-xl-6 p-2 h-25 text-center text-truncate" |
19 | - *ngFor="let item of [{},{},{},{},{},{},{},{},{}]"> | |
24 | + *ngFor="let articulo of articuloService.carrito"> | |
20 | 25 | <!-- ARTICULO --> |
21 | 26 | <div class="h-100 px-2 py-4 border border-primary rounded-sm"> |
22 | 27 | <div class="row mx-0 h-100"> |
... | ... | @@ -26,10 +31,12 @@ |
26 | 31 | draggable="false" |
27 | 32 | ondragstart="return false;" |
28 | 33 | (contextmenu)="false" |
29 | - class="d-block mx-auto h-55" | |
30 | - src="assets/img/icono-efectivo.svg"> | |
34 | + class="d-block mx-auto h-55 rounded-sm shadow-sm" | |
35 | + src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> | |
31 | 36 | <div class="row mx-0 h-45"> |
32 | - <p class="col text-primary align-self-end"><small>{{'CORTADO'}}</small></p> | |
37 | + <p class="col text-primary text-truncate align-self-end"> | |
38 | + <small>{{articulo.DetArt}}</small> | |
39 | + </p> | |
33 | 40 | </div> |
34 | 41 | </div> |
35 | 42 | <!-- CANTIDAD --> |
... | ... | @@ -38,8 +45,8 @@ |
38 | 45 | <div class="row mt-2 mx-0"> |
39 | 46 | <div class="col-12 h-auto"> |
40 | 47 | <div class="row mx-0 justify-content-between bg-primary badge-pill"> |
48 | + <!-- BOTON MENOS --> | |
41 | 49 | <div class="col-auto px-0"> |
42 | - <!-- BOTON MENOS --> | |
43 | 50 | <img |
44 | 51 | draggable="false" |
45 | 52 | ondragstart="return false;" |
... | ... | @@ -47,11 +54,12 @@ |
47 | 54 | class="d-block ml-auto py-2 icon-20 btn-effect" |
48 | 55 | src="assets/img/menos-blanco.svg"> |
49 | 56 | </div> |
57 | + <!-- CANTIDAD --> | |
50 | 58 | <div class="col px-0 align-self-center text-white"> |
51 | - <p><small>{{55}}</small></p> | |
59 | + <p><small>{{articulo.cantidad}}</small></p> | |
52 | 60 | </div> |
61 | + <!-- BOTON MAS --> | |
53 | 62 | <div class="col-auto px-0"> |
54 | - <!-- BOTON MAS --> | |
55 | 63 | <img |
56 | 64 | draggable="false" |
57 | 65 | ondragstart="return false;" |
... | ... | @@ -101,7 +109,10 @@ |
101 | 109 | </div> |
102 | 110 | </div> |
103 | 111 | </div> |
104 | - <div class="row mx-3 mt-4 h-auto justify-content-end"> | |
112 | + <!-- CONTINUAR --> | |
113 | + <div | |
114 | + *ngIf="articuloService.carrito.length" | |
115 | + class="row mx-3 mt-4 h-auto justify-content-end"> | |
105 | 116 | <div |
106 | 117 | class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" |
107 | 118 | [routerLink]="['/forma-pago']"> |
... | ... | @@ -116,7 +127,7 @@ |
116 | 127 | </span> |
117 | 128 | </div> |
118 | 129 | </div> |
119 | - | |
130 | + <!-- SEGUIR COMPRANDO --> | |
120 | 131 | <div class="row mx-3 mt-2 h-auto justify-content-end"> |
121 | 132 | <div |
122 | 133 | class="col-auto py-2 px-3 align-self-center btn-effect bg-primary badge-pill text-white" |
src/app/modules/carrito/carrito.component.ts
1 | 1 | import { Component, OnInit } from '@angular/core'; |
2 | 2 | import { Location } from '@angular/common'; |
3 | +import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | |
4 | +import { APP_SETTINGS } from 'src/etc/AppSettings'; | |
3 | 5 | |
4 | 6 | @Component({ |
5 | 7 | selector: 'app-carrito', |
... | ... | @@ -7,13 +9,14 @@ import { Location } from '@angular/common'; |
7 | 9 | styleUrls: ['./carrito.component.scss'] |
8 | 10 | }) |
9 | 11 | export class CarritoComponent implements OnInit { |
12 | + urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`; | |
10 | 13 | |
11 | 14 | constructor( |
12 | 15 | private location: Location, |
16 | + public articuloService: ArticuloService, | |
13 | 17 | ) { } |
14 | 18 | |
15 | - ngOnInit() { | |
16 | - } | |
19 | + ngOnInit() { } | |
17 | 20 | |
18 | 21 | goBack() { |
19 | 22 | this.location.back(); |
src/app/modules/carrito/carrito.module.ts
... | ... | @@ -4,9 +4,15 @@ import { CommonModule } from "@angular/common"; |
4 | 4 | import { CarritoRoutingModule } from "./carrito-routing.module"; |
5 | 5 | import { CarritoComponent } from "./carrito.component"; |
6 | 6 | import { SeleccionArticulosModule } from '../seleccion-articulos/seleccion-articulos.module'; |
7 | +import { SharedModule } from '../shared/shared.module'; | |
7 | 8 | |
8 | 9 | @NgModule({ |
9 | 10 | declarations: [CarritoComponent], |
10 | - imports: [CommonModule, CarritoRoutingModule, SeleccionArticulosModule] | |
11 | + imports: [ | |
12 | + CommonModule, | |
13 | + CarritoRoutingModule, | |
14 | + SeleccionArticulosModule, | |
15 | + SharedModule, | |
16 | + ] | |
11 | 17 | }) |
12 | 18 | export class CarritoModule { } |
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
... | ... | @@ -133,11 +133,14 @@ |
133 | 133 | <!-- FOOTER CARRITO DE COMPRAS --> |
134 | 134 | <div class="row w-90 mx-auto h-auto justify-content-center"> |
135 | 135 | <div class="col-12 h-75 px-0 border border-primary rounded"> |
136 | + <!-- CABECERA --> | |
136 | 137 | <div class="row mx-0 h-15 border-bottom border-primary"> |
137 | 138 | <p class="col align-self-center text-truncate"><small>ARTÍCULOS EN TÚ CARRITO DE COMPRAS</small></p> |
138 | 139 | </div> |
139 | - <div class="row h-85 mx-0 justify-content-between"> | |
140 | - <div class="col-auto btn-effect h-20 align-self-center"> | |
140 | + <!-- CUERPO --> | |
141 | + <div class="row h-85 mx-0 justify-content-around"> | |
142 | + <!-- BOTON SCROLL IZQUIERDA --> | |
143 | + <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> | |
141 | 144 | <img |
142 | 145 | draggable="false" |
143 | 146 | ondragstart="return false;" |
... | ... | @@ -148,27 +151,33 @@ |
148 | 151 | (mouseup)="mouseup()" |
149 | 152 | (mouseleave)="mouseup()"> |
150 | 153 | </div> |
154 | + <!-- CARRITO --> | |
151 | 155 | <div class="col-6 col-sm-8 col-md-9 col-lg-10 h-100"> |
152 | - <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 scroll-x"> | |
156 | + <div #templateCarrito class="row flex-row flex-nowrap h-100 mx-0 my-2 scroll-x"> | |
157 | + <!-- MENSAJE DE ADVERTENCIA --> | |
153 | 158 | <div *ngIf="!articuloService.carrito.length" class="col h-100"> |
154 | - <p>No hay articulos en el carrito</p> | |
159 | + <p class="text-center py-5">No hay articulos en el carrito</p> | |
155 | 160 | </div> |
161 | + <!-- ARTICULOS --> | |
156 | 162 | <div |
157 | - class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 my-2 h-100 align-self-center border-right border-primary swing-in-top-fwd" | |
163 | + class="col-10 col-sm-4 col-lg-2 px-2 px-xl-4 align-self-center border-right border-primary" | |
158 | 164 | *ngFor="let articulo of articuloService.carrito; let i = index;"> |
159 | - <img | |
160 | - draggable="false" | |
161 | - ondragstart="return false;" | |
162 | - (contextmenu)="false" | |
163 | - class="d-block h-55 img-fluid p-2 mx-auto" | |
164 | - src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> | |
165 | - <p class="d-block mt-auto text-center text-primary text-truncate"> | |
166 | - <small>{{articulo.DetArt}}</small> | |
167 | - </p> | |
165 | + <div class="swing-in-top-fwd"> | |
166 | + <img | |
167 | + draggable="false" | |
168 | + ondragstart="return false;" | |
169 | + (contextmenu)="false" | |
170 | + class="d-block h-55 img-fluid p-2 mx-auto rounded" | |
171 | + src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"> | |
172 | + <p class="d-block mt-auto text-center text-primary text-truncate"> | |
173 | + <small>{{articulo.DetArt}}</small> | |
174 | + </p> | |
175 | + </div> | |
168 | 176 | </div> |
169 | 177 | </div> |
170 | 178 | </div> |
171 | - <div class="col-auto btn-effect h-20 align-self-center"> | |
179 | + <!-- BOTON SCROLL DERECHA --> | |
180 | + <div *ngIf="articuloService.carrito.length" class="col-auto btn-effect h-20 align-self-center"> | |
172 | 181 | <img |
173 | 182 | draggable="false" |
174 | 183 | ondragstart="return false;" |
... | ... | @@ -181,6 +190,7 @@ |
181 | 190 | </div> |
182 | 191 | </div> |
183 | 192 | </div> |
193 | + <!-- VER CARRITO --> | |
184 | 194 | <div class="col-auto p-0 mt-2 ml-auto h-20"> |
185 | 195 | <div |
186 | 196 | class="btn-effect col-auto align-self-center px-0 bg-white" |
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
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 | +import { BsModalRef } from 'ngx-bootstrap/modal'; | |
4 | 3 | import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
5 | 4 | import { IArticulo } from 'src/app/interfaces/IArticulo'; |
6 | 5 | import { APP_SETTINGS } from 'src/etc/AppSettings'; |
7 | 6 | import { ICategoria } from 'src/app/interfaces/ICategoria'; |
7 | +import { CategoriaService } from 'src/app/services/categoria/categoria.service'; | |
8 | 8 | |
9 | 9 | @Component({ |
10 | 10 | selector: "app-seleccion-articulos", |
... | ... | @@ -27,23 +27,16 @@ export class SeleccionArticulosComponent implements OnInit { |
27 | 27 | modalRef: BsModalRef; |
28 | 28 | |
29 | 29 | constructor( |
30 | - private modalService: BsModalService, | |
31 | - private articuloService: ArticuloService, | |
30 | + public articuloService: ArticuloService, | |
31 | + private categoriaService: CategoriaService, | |
32 | 32 | ) { } |
33 | 33 | |
34 | 34 | ngOnInit() { |
35 | 35 | this.getCategorias(); |
36 | - this.articuloService.getAll() | |
37 | - .subscribe((res: IArticulo[]) => { | |
38 | - this.articuloService.setArticulosSinImagen(res); | |
39 | - localStorage.setItem('articulos', JSON.stringify(res)); | |
40 | - this.setProductos(); | |
41 | - this.articulos = res; | |
42 | - }, err => console.error(err)); | |
43 | 36 | } |
44 | 37 | |
45 | 38 | getCategorias() { |
46 | - this.articuloService.getCategorias() | |
39 | + this.categoriaService.getCategorias() | |
47 | 40 | .subscribe((categorias: ICategoria[]) => { |
48 | 41 | switch (this.queMostrar) { |
49 | 42 | case 'todos': |
... | ... | @@ -126,6 +119,7 @@ export class SeleccionArticulosComponent implements OnInit { |
126 | 119 | } |
127 | 120 | |
128 | 121 | elegirArticulo(articulo: IArticulo) { |
122 | + articulo.cantidad = 1; | |
129 | 123 | this.articuloService.setArticulo(articulo); |
130 | 124 | } |
131 | 125 |
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
... | ... | @@ -5,7 +5,7 @@ import { SeleccionArticulosComponent } from './seleccion-articulos.component'; |
5 | 5 | import { HeaderPublicidadComponent } from 'src/app/shared/header-publicidad/header-publicidad.component'; |
6 | 6 | import { ModalModule } from 'ngx-bootstrap/modal'; |
7 | 7 | import { PromocionComponent } from 'src/app/shared/promocion/promocion.component'; |
8 | -import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | |
8 | +import { SharedModule } from '../shared/shared.module'; | |
9 | 9 | |
10 | 10 | @NgModule({ |
11 | 11 | declarations: [ |
... | ... | @@ -17,9 +17,9 @@ import { ArticuloService } from 'src/app/services/articulo/articulo.service'; |
17 | 17 | CommonModule, |
18 | 18 | SeleccionArticulosRoutingModule, |
19 | 19 | ModalModule.forRoot(), |
20 | + SharedModule | |
20 | 21 | ], |
21 | 22 | exports: [HeaderPublicidadComponent], |
22 | - providers: [ArticuloService], | |
23 | 23 | entryComponents: [PromocionComponent] |
24 | 24 | }) |
25 | 25 | export class SeleccionArticulosModule { } |
src/app/modules/shared/shared.module.ts
... | ... | @@ -0,0 +1,12 @@ |
1 | +import { NgModule, ModuleWithProviders } from '@angular/core'; | |
2 | +import { ArticuloService } from 'src/app/services/articulo/articulo.service'; | |
3 | + | |
4 | +@NgModule({}) | |
5 | +export class SharedModule { | |
6 | + static forRoot(): ModuleWithProviders { | |
7 | + return { | |
8 | + ngModule: SharedModule, | |
9 | + providers: [ArticuloService] | |
10 | + }; | |
11 | + } | |
12 | +} |
src/app/services/articulo/articulo.service.ts
... | ... | @@ -5,9 +5,7 @@ import { IArticulo } from '../../interfaces/IArticulo'; |
5 | 5 | import { ClienteService } from '../cliente/cliente.service'; |
6 | 6 | import { Observable } from 'rxjs'; |
7 | 7 | |
8 | -@Injectable({ | |
9 | - providedIn: 'root' | |
10 | -}) | |
8 | +@Injectable() | |
11 | 9 | export class ArticuloService { |
12 | 10 | carrito: IArticulo[] = []; |
13 | 11 | articuloAcargar: IArticulo; |
... | ... | @@ -44,26 +42,6 @@ export class ArticuloService { |
44 | 42 | this.carrito.unshift(articulo); |
45 | 43 | } |
46 | 44 | |
47 | - getPromocionByCodigos(sector, codigo) { | |
48 | - return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`); | |
49 | - } | |
50 | - | |
51 | - getPromociones(sector, codigo) { | |
52 | - return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`); | |
53 | - } | |
54 | - | |
55 | - getPromocionSinonimos(sector, codigo) { | |
56 | - return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`); | |
57 | - } | |
58 | - | |
59 | - getCategorias() { | |
60 | - return this.http.get(`${this.urlDeboSuite}/categorias`); | |
61 | - } | |
62 | - | |
63 | - getComponentes(sector, codigo) { | |
64 | - return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`); | |
65 | - } | |
66 | - | |
67 | 45 | pay(dataPago: any) { |
68 | 46 | return new Observable((observer) => { |
69 | 47 | this.clienteService.getById(-1) |
src/app/services/categoria/categoria.service.spec.ts
... | ... | @@ -0,0 +1,12 @@ |
1 | +import { TestBed } from '@angular/core/testing'; | |
2 | + | |
3 | +import { CategoriaService } from './categoria.service'; | |
4 | + | |
5 | +describe('CategoriaService', () => { | |
6 | + beforeEach(() => TestBed.configureTestingModule({})); | |
7 | + | |
8 | + it('should be created', () => { | |
9 | + const service: CategoriaService = TestBed.get(CategoriaService); | |
10 | + expect(service).toBeTruthy(); | |
11 | + }); | |
12 | +}); |
src/app/services/categoria/categoria.service.ts
... | ... | @@ -0,0 +1,18 @@ |
1 | +import { Injectable } from '@angular/core'; | |
2 | +import { HttpClient } from '@angular/common/http'; | |
3 | +import { APP_SETTINGS } from 'src/etc/AppSettings'; | |
4 | + | |
5 | +@Injectable({ | |
6 | + providedIn: 'root' | |
7 | +}) | |
8 | +export class CategoriaService { | |
9 | + urlDeboSuite = APP_SETTINGS.apiDeboSuite; | |
10 | + | |
11 | + constructor( | |
12 | + private http: HttpClient, | |
13 | + ) { } | |
14 | + | |
15 | + getCategorias() { | |
16 | + return this.http.get(`${this.urlDeboSuite}/categorias`); | |
17 | + } | |
18 | +} |
src/app/services/promocion/promocion.service.spec.ts
... | ... | @@ -0,0 +1,12 @@ |
1 | +import { TestBed } from '@angular/core/testing'; | |
2 | + | |
3 | +import { PromocionService } from './promocion.service'; | |
4 | + | |
5 | +describe('PromocionService', () => { | |
6 | + beforeEach(() => TestBed.configureTestingModule({})); | |
7 | + | |
8 | + it('should be created', () => { | |
9 | + const service: PromocionService = TestBed.get(PromocionService); | |
10 | + expect(service).toBeTruthy(); | |
11 | + }); | |
12 | +}); |
src/app/services/promocion/promocion.service.ts
... | ... | @@ -0,0 +1,26 @@ |
1 | +import { Injectable } from '@angular/core'; | |
2 | +import { APP_SETTINGS } from 'src/etc/AppSettings'; | |
3 | +import { HttpClient } from '@angular/common/http'; | |
4 | + | |
5 | +@Injectable({ | |
6 | + providedIn: 'root' | |
7 | +}) | |
8 | +export class PromocionService { | |
9 | + urlDeboSuite = APP_SETTINGS.apiDeboSuite; | |
10 | + | |
11 | + constructor( | |
12 | + private http: HttpClient, | |
13 | + ) { } | |
14 | + | |
15 | + getPromocionByCodigos(sector, codigo) { | |
16 | + return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`); | |
17 | + } | |
18 | + | |
19 | + getPromociones(sector, codigo) { | |
20 | + return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`); | |
21 | + } | |
22 | + | |
23 | + getComponentes(sector, codigo) { | |
24 | + return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`); | |
25 | + } | |
26 | +} |
src/app/services/sinonimo/sinonimo.service.spec.ts
... | ... | @@ -0,0 +1,12 @@ |
1 | +import { TestBed } from '@angular/core/testing'; | |
2 | + | |
3 | +import { SinonimoService } from './sinonimo.service'; | |
4 | + | |
5 | +describe('SinonimoService', () => { | |
6 | + beforeEach(() => TestBed.configureTestingModule({})); | |
7 | + | |
8 | + it('should be created', () => { | |
9 | + const service: SinonimoService = TestBed.get(SinonimoService); | |
10 | + expect(service).toBeTruthy(); | |
11 | + }); | |
12 | +}); |
src/app/services/sinonimo/sinonimo.service.ts
... | ... | @@ -0,0 +1,18 @@ |
1 | +import { Injectable } from '@angular/core'; | |
2 | +import { APP_SETTINGS } from 'src/etc/AppSettings'; | |
3 | +import { HttpClient } from '@angular/common/http'; | |
4 | + | |
5 | +@Injectable({ | |
6 | + providedIn: 'root' | |
7 | +}) | |
8 | +export class SinonimoService { | |
9 | + urlDeboSuite = APP_SETTINGS.apiDeboSuite; | |
10 | + | |
11 | + constructor( | |
12 | + private http: HttpClient, | |
13 | + ) { } | |
14 | + | |
15 | + getPromocionSinonimos(sector, codigo) { | |
16 | + return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`); | |
17 | + } | |
18 | +} |