Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit 0a1cad4bbc0f88747441d827dc92038fd153a60f

Authored by Marcelo Puebla
1 parent aa492da523
Exists in master and in 2 other branches 20200117-axion-responsive, develop

Agregado get de articulos y get de categorias

Showing 8 changed files with 223 additions and 38 deletions   Show diff stats
src/app/app.module.ts
Diff comments   View file @ 0a1cad4
1 1 import { BrowserModule } from '@angular/platform-browser';
2 2 import { NgModule } from '@angular/core';
3 3 import { AppRoutingModule } from './app-routing.module';
  4 +import { HttpClientModule } from '@angular/common/http';
  5 +import { FormsModule, ReactiveFormsModule } from '@angular/forms';
  6 +import { SplitPipe } from './pipes/split.pipe';
4 7 import { AppComponent } from './app.component';
5 8 import { SplashScreenComponent } from './modules/splash-screen/splash-screen.component';
6   -import { SplitPipe } from './pipes/split.pipe';
7 9 import { AdminComponent } from './modules/admin/admin.component';
8 10 import { FooterComponent } from './shared/footer/footer.component';
9 11  
... ... @@ -17,7 +19,11 @@ import { FooterComponent } from './shared/footer/footer.component';
17 19 ],
18 20 imports: [
19 21 BrowserModule,
20   - AppRoutingModule
  22 + AppRoutingModule,
  23 + HttpClientModule,
  24 + FormsModule,
  25 + ReactiveFormsModule,
  26 + ReactiveFormsModule.withConfig({ warnOnNgModelWithFormControl: 'never' }),
21 27 ],
22 28 providers: [],
23 29 bootstrap: [AppComponent]
src/app/interfaces/ICategoria.ts
Diff comments   View file @ 0a1cad4
... ... @@ -0,0 +1,9 @@
  1 +export interface ICategoria {
  2 + id: number;
  3 + detalle: string;
  4 + es_promocion: boolean;
  5 + vigencia_desde: Date;
  6 + vigencia_hasta: Date;
  7 + ES_PEDIDO: boolean;
  8 + selected?: boolean;
  9 +}
src/app/modules/seleccion-articulos/seleccion-articulos.component.html
Diff comments   View file @ 0a1cad4
... ... @@ -19,7 +19,7 @@
19 19 <div class="col-5 col-sm-3 col-xl-2 h-100">
20 20 <p class="h6 h-6 m-0 text-center"><small>CATEGORÍAS</small></p>
21 21 <div class="row mx-0 h-94 justify-content-center align-items-center">
22   - <div class="col-auto h-5">
  22 + <div class="col-auto btn-effect h-5">
23 23 <img
24 24 draggable="false"
25 25 ondragstart="return false;"
... ... @@ -36,8 +36,20 @@
36 36 class="col-12 px-0 box-categorias border border-primary border-left-0 rounded-right scroll-y">
37 37 <div
38 38 class="row mx-4 mb-2 h-32 justify-content-center tab"
  39 + [ngClass]="{ 'active': allActive, 'border-bottom-effect': !allActive }"
  40 + (click)="selectCategoria(-1, 0)">
  41 + <img
  42 + draggable="false"
  43 + ondragstart="return false;"
  44 + (contextmenu)="false"
  45 + class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
  46 + src="assets/img/ir-color.svg">
  47 + <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">Todos</small>
  48 + </div>
  49 + <div
  50 + class="row mx-4 mb-2 h-32 justify-content-center tab"
39 51 [ngClass]="{ 'active': categoria.selected, 'border-bottom-effect': !categoria.selected }"
40   - (click)="selectCategoria(i)"
  52 + (click)="selectCategoria(i, categoria.id)"
41 53 *ngFor="let categoria of categorias; let i = index;">
42 54 <img
43 55 draggable="false"
... ... @@ -45,7 +57,7 @@
45 57 (contextmenu)="false"
46 58 class="col-12 h-50 align-self-end d-none d-sm-block rounded-circle"
47 59 src="assets/img/ir-color.svg">
48   - <small class="col-10 my-1 h-25 align-self-end text-center">{{categoria.id}}</small>
  60 + <small class="col-12 px-0 my-1 h-25 align-self-end text-center text-truncate">{{categoria.detalle}}</small>
49 61 </div>
50 62 </div>
51 63 <div class="col-auto btn-effect h-5">
... ... @@ -63,28 +75,30 @@
63 75 </div>
64 76 <!-- LISTA DE ARTICULOS -->
65 77 <div class="col-7 col-sm-9 col-xl-10 pb-3 h-80 align-self-center scroll-y">
66   - <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6 h-100">
  78 + <div class="row row-cols-1 row-cols-sm-3 row-cols-xl-6">
67 79 <!-- ARTICULO -->
68 80 <div
69 81 class="col px-2 my-1 my-md-3 h-auto"
70   - *ngFor="let articulo of [{},{},{promo: true},{},{},{},{},{},{},{},{},{},{},{},{},{}]">
71   - <div class="card h-100">
  82 + *ngFor="let articulo of auxArticulos | slice:0:showQuantity;">
  83 + <div class="swing-in-top-fwd card h-auto">
72 84 <img
73 85 draggable="false"
74 86 ondragstart="return false;"
75 87 (contextmenu)="false"
76   - src="assets/img/icono-volver.svg"
77   - class="card-img-top h-55">
  88 + src="{{urlImagenes}}{{articulo.imagenes[0].imagen}}"
  89 + class="card-img-top h-55 shadow-sm rounded-sm">
78 90 <div class="row mx-0 py-1 h-auto justify-content-center">
79   - <p class="col-12 px-1 h6 h-auto text-primary text-center">{{'CORTADO'}}</p>
80   - <p class="col-12 px-1 h-auto text-center"><small>{{'Café con un poco de leche'}}</small></p>
  91 + <p class="col-12 px-1 h6 h-auto text-primary text-center">{{articulo.DetArt}}</p>
  92 + <p class="col-12 px-1 h-auto text-center line-height-sm">
  93 + <small>{{articulo.DET_LAR}}</small>
  94 + </p>
81 95 <div class="col-12 px-1 align-self-end btn-effect h-auto">
82 96 <div
83 97 [ngClass]="{'bg-secondary': articulo.promo}"
84 98 class="row mx-0 justify-content-between bg-primary badge-pill"
85 99 (click)="elegirArticulo(articulo)">
86 100 <div class="col px-0 align-self-center text-white text-right">
87   - {{55 | currency}}
  101 + {{articulo.PreVen | currency}}
88 102 </div>
89 103 <div class="col-5 px-0">
90 104 <img
... ... @@ -100,6 +114,18 @@
100 114 </div>
101 115 </div>
102 116 </div>
  117 + <!-- BOTON VER MAS -->
  118 + <div class="row mx-0">
  119 + <div
  120 + *ngIf="showQuantity <= auxArticulos.slice(0, showQuantity).length"
  121 + class="col-12 px-0 mb-2">
  122 + <button
  123 + (click)="increaseShow()"
  124 + class="btn btn-block btn-outline-primary">
  125 + Ver Más
  126 + </button>
  127 + </div>
  128 + </div>
103 129 </div>
104 130 </div>
105 131 </div>
src/app/modules/seleccion-articulos/seleccion-articulos.component.scss
Diff comments   View file @ 0a1cad4
... ... @@ -34,3 +34,7 @@ $primary: #aa006b;
34 34 .card {
35 35 border: none;
36 36 }
  37 +
  38 +.line-height-sm {
  39 + line-height: 1.2;
  40 +}
37 41 \ No newline at end of file
src/app/modules/seleccion-articulos/seleccion-articulos.component.ts
Diff comments   View file @ 0a1cad4
1 1 import { Component, OnInit } from "@angular/core";
2 2 import { BsModalRef, BsModalService } from 'ngx-bootstrap/modal';
3 3 import { PromocionComponent } from 'src/app/shared/promocion/promocion.component';
  4 +import { ArticuloService } from 'src/app/services/articulo/articulo.service';
  5 +import { IArticulo } from 'src/app/interfaces/IArticulo';
  6 +import { APP_SETTINGS } from 'src/etc/AppSettings';
  7 +import { ICategoria } from 'src/app/interfaces/ICategoria';
4 8  
5 9 @Component({
6 10 selector: "app-seleccion-articulos",
... ... @@ -8,27 +12,117 @@ import { PromocionComponent } from &#39;src/app/shared/promocion/promocion.component
8 12 styleUrls: ["./seleccion-articulos.component.scss"]
9 13 })
10 14 export class SeleccionArticulosComponent implements OnInit {
  15 + showSpinner = true;
11 16 timeoutHandler: any;
12   - categorias = [
13   - { id: 1, selected: false },
14   - { id: 2, selected: false },
15   - { id: 3, selected: false },
16   - { id: 4, selected: false },
17   - { id: 5, selected: false },
18   - { id: 6, selected: false }
19   - ];
  17 + urlImagenes = `${APP_SETTINGS.apiDeboSuite}/imagenes/`;
  18 + articulos: IArticulo[] = [];
  19 + auxArticulos: IArticulo[] = [];
  20 + showQuantity = 100;
  21 + queMostrar = 'todos';
  22 + categoriaActive: number = null;
  23 + categorias: ICategoria[] = [];
  24 + searchTerm = '';
  25 + ordenandoByVendidos = true;
  26 + allActive = true;
20 27 modalRef: BsModalRef;
21 28  
22 29 constructor(
23 30 private modalService: BsModalService,
  31 + private articuloService: ArticuloService,
24 32 ) { }
25 33  
26   - ngOnInit() { }
  34 + ngOnInit() {
  35 + this.getCategorias();
  36 + this.articuloService.getAll()
  37 + .subscribe((res: IArticulo[]) => {
  38 + this.articuloService.setArticulosSinImagen(res);
  39 + localStorage.setItem('productos', JSON.stringify(res));
  40 + this.setProductos();
  41 + this.articulos = res;
  42 + }, err => console.error(err));
  43 + }
  44 +
  45 + getCategorias() {
  46 + this.articuloService.getCategorias()
  47 + .subscribe((categorias: ICategoria[]) => {
  48 + switch (this.queMostrar) {
  49 + case 'todos':
  50 + this.categorias = categorias;
  51 + this.categoriaActive = 0;
  52 + break;
  53 + case 'promociones':
  54 + this.categorias = categorias;
  55 + this.categoriaActive = 19;
  56 + break;
  57 + case 'ordenar':
  58 + this.categorias = categorias.filter((categoria: ICategoria) => {
  59 + return categoria.ES_PEDIDO;
  60 + });
  61 + this.categoriaActive = 4;
  62 + break;
  63 + default:
  64 + this.categorias = categorias;
  65 + this.categoriaActive = 0;
  66 + break;
  67 + }
  68 + !localStorage.getItem('productos') ?
  69 + this.getProductos() :
  70 + this.setProductos();
  71 + });
  72 + }
  73 +
  74 + getProductos() {
  75 + this.articuloService.getAll()
  76 + .subscribe((result: IArticulo[]) => {
  77 + this.articuloService.setArticulosSinImagen(result);
  78 + if (this.queMostrar == 'ordenar') {
  79 + this.categorias.forEach((categoria: ICategoria) => {
  80 + let tempArticulos = result.filter((articulo: IArticulo) => {
  81 + return articulo.categoria_selfservice == categoria.id;
  82 + });
  83 + result = tempArticulos;
  84 + });
  85 + }
  86 + localStorage.setItem('productos', JSON.stringify(result));
  87 + this.setProductos();
  88 + }, (error) => {
  89 + this.showSpinner = false;
  90 + console.error(error);
  91 + });
  92 + }
  93 +
  94 + setProductos() {
  95 + this.articulos = JSON.parse(localStorage.getItem('productos'));
  96 + this.filterItems();
  97 + }
  98 +
  99 + filterItems() {
  100 + if (this.categoriaActive == 0) {
  101 + this.auxArticulos = this.articulos;
  102 + return;
  103 + }
  104 + this.auxArticulos = this.articulos.filter(x => {
  105 + return x.categoria_selfservice === this.categoriaActive;
  106 + });
  107 + this.ordenar();
  108 + }
  109 +
  110 + ordenar() {
  111 + if (this.ordenandoByVendidos) {
  112 + this.auxArticulos.sort((a, b) => {
  113 + return b.cantidadVendida - a.cantidadVendida;
  114 + });
  115 + }
  116 + }
27 117  
28   - selectCategoria(index: number) {
  118 + selectCategoria(index: number, idCategoria?: number) {
  119 + if (this.categoriaActive == idCategoria) return;
  120 + this.categoriaActive = idCategoria;
  121 + this.allActive = idCategoria === 0 ? true : false;
29 122 this.categorias.forEach((categoria, i) => {
30 123 categoria.selected = index === i ? true : false;
31 124 });
  125 + this.filterItems();
32 126 }
33 127  
34 128 elegirArticulo(articulo: any) {
... ... @@ -40,6 +134,10 @@ export class SeleccionArticulosComponent implements OnInit {
40 134 }
41 135 }
42 136  
  137 + increaseShow() {
  138 + this.showQuantity += 100;
  139 + }
  140 +
43 141 mouseup() {
44 142 if (!this.timeoutHandler) return;
45 143 clearInterval(this.timeoutHandler);
src/app/modules/seleccion-articulos/seleccion-articulos.module.ts
Diff comments   View file @ 0a1cad4
... ... @@ -5,6 +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 9  
9 10 @NgModule({
10 11 declarations: [
... ... @@ -18,6 +19,7 @@ import { PromocionComponent } from &#39;src/app/shared/promocion/promocion.component
18 19 ModalModule.forRoot(),
19 20 ],
20 21 exports: [HeaderPublicidadComponent],
  22 + providers: [ArticuloService],
21 23 entryComponents: [PromocionComponent]
22 24 })
23 25 export class SeleccionArticulosModule { }
src/app/services/articulo/articulo.service.ts
Diff comments   View file @ 0a1cad4
... ... @@ -14,24 +14,23 @@ export class ArticuloService {
14 14 promoAcargar: IArticulo;
15 15 mostrar: string;
16 16 esPromoPersonalizada: boolean = false;
17   - urlArticulos = `${APP_SETTINGS.apiDeboSuite}/articulos`;
18   - urlPromociones = `${APP_SETTINGS.apiDeboSuite}/promociones`;
19   - urlSinonimos = `${APP_SETTINGS.apiDeboSuite}/sinonimos`;
20   - urlCategorias = `${APP_SETTINGS.apiDeboSuite}/categorias`;
21   - urlComprobante = `${APP_SETTINGS.apiDeboSuite}/comprobante`;
  17 + urlDeboSuite = APP_SETTINGS.apiDeboSuite;
22 18  
23   - constructor(private http: HttpClient, private clienteService: ClienteService) { }
  19 + constructor(
  20 + private http: HttpClient,
  21 + private clienteService: ClienteService,
  22 + ) { }
24 23  
25 24 getById(id) {
26   - return this.http.get(`${this.urlArticulos}/${id}`);
  25 + return this.http.get(`${this.urlDeboSuite}/articulos/${id}`);
27 26 }
28 27  
29 28 getAll() {
30   - return this.http.get(`${this.urlArticulos}`);
  29 + return this.http.get(`${this.urlDeboSuite}/articulos/`);
31 30 }
32 31  
33 32 getAllWithPaginator(page: number = 1) {
34   - return this.http.get(`${this.urlArticulos}/${page}`);
  33 + return this.http.get(`${this.urlDeboSuite}/articulos/${page}`);
35 34 }
36 35  
37 36 setArticulos(articulo: IArticulo) {
... ... @@ -46,23 +45,23 @@ export class ArticuloService {
46 45 }
47 46  
48 47 getPromocionByCodigos(sector, codigo) {
49   - return this.http.get(`${this.urlPromociones}/by-codigos/${sector}/${codigo}`);
  48 + return this.http.get(`${this.urlDeboSuite}/promociones/by-codigos/${sector}/${codigo}`);
50 49 }
51 50  
52 51 getPromociones(sector, codigo) {
53   - return this.http.get(`${this.urlPromociones}/in-articulo/${sector}/${codigo}`);
  52 + return this.http.get(`${this.urlDeboSuite}/promociones/in-articulo/${sector}/${codigo}`);
54 53 }
55 54  
56 55 getPromocionSinonimos(sector, codigo) {
57   - return this.http.get(`${this.urlSinonimos}/promo/${sector}/${codigo}`);
  56 + return this.http.get(`${this.urlDeboSuite}/sinonimos/promo/${sector}/${codigo}`);
58 57 }
59 58  
60 59 getCategorias() {
61   - return this.http.get(`${this.urlCategorias}`);
  60 + return this.http.get(`${this.urlDeboSuite}/categorias`);
62 61 }
63 62  
64 63 getComponentes(sector, codigo) {
65   - return this.http.get(`${this.urlPromociones}/articulos/${sector}/${codigo}`);
  64 + return this.http.get(`${this.urlDeboSuite}/promociones/articulos/${sector}/${codigo}`);
66 65 }
67 66  
68 67 pay(dataPago: any) {
... ... @@ -71,7 +70,7 @@ export class ArticuloService {
71 70 .subscribe(cliente => {
72 71 let puntoVenta = parseInt(localStorage.getItem('impresoraPVE'));
73 72 this.markArticuloInPromoAsRemoved();
74   - this.http.post(`${this.urlComprobante}/guardar/${dataPago.medioPago}`, {
  73 + this.http.post(`${this.urlDeboSuite}/comprobante/guardar/${dataPago.medioPago}`, {
75 74 productos: this.articulos,
76 75 cliente: cliente,
77 76 origen: 'autoservicio',
src/scss/animations.scss
Diff comments   View file @ 0a1cad4
... ... @@ -122,3 +122,44 @@
122 122 opacity: 1;
123 123 }
124 124 }
  125 +
  126 +/*
  127 + * animation swing-in-top-fwd
  128 + */
  129 +.swing-in-top-fwd {
  130 + -webkit-animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  131 + animation: swing-in-top-fwd 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
  132 +}
  133 +
  134 +@-webkit-keyframes swing-in-top-fwd {
  135 + 0% {
  136 + -webkit-transform: rotateX(-100deg);
  137 + transform: rotateX(-100deg);
  138 + -webkit-transform-origin: top;
  139 + transform-origin: top;
  140 + opacity: 0;
  141 + }
  142 + 100% {
  143 + -webkit-transform: rotateX(0deg);
  144 + transform: rotateX(0deg);
  145 + -webkit-transform-origin: top;
  146 + transform-origin: top;
  147 + opacity: 1;
  148 + }
  149 +}
  150 +@keyframes swing-in-top-fwd {
  151 + 0% {
  152 + -webkit-transform: rotateX(-100deg);
  153 + transform: rotateX(-100deg);
  154 + -webkit-transform-origin: top;
  155 + transform-origin: top;
  156 + opacity: 0;
  157 + }
  158 + 100% {
  159 + -webkit-transform: rotateX(0deg);
  160 + transform: rotateX(0deg);
  161 + -webkit-transform-origin: top;
  162 + transform-origin: top;
  163 + opacity: 1;
  164 + }
  165 +}