Commit 6c52db3e2fed5e35a70b52aa4d9bc63a7106c064

Authored by Marcelo Puebla
1 parent be7b891885

Creados servicios

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 &#39;@angular/common&#39;;
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 &quot;@angular/common&quot;;
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 &#39;./seleccion-articulos.component&#39;;
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 &#39;src/app/services/articulo/articulo.service&#39;;
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 &#39;../../interfaces/IArticulo&#39;;
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 +}