Commit 63caddaf6922821442162b573ada7346c2db43b7
Exists in
master
Merge branch 'master' into 'master'
Master(mpuebla) See merge request !68
Showing
13 changed files
Show diff stats
src/app/app-routing.module.ts
... | ... | @@ -5,19 +5,19 @@ import { InicioComponent } from './components/inicio/inicio.component'; |
5 | 5 | import { BusquedaProductosComponent } from './components/busqueda-productos/busqueda-productos.component'; |
6 | 6 | import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/confirmacion-carrito.component'; |
7 | 7 | import { MasterComponent } from './components/master/master.component'; |
8 | -import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; | |
9 | 8 | import { PagoComponent } from './components/pago/pago.component'; |
10 | 9 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
11 | 10 | import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; |
11 | +import { ComandaComponent } from './components/comanda/comanda.component'; | |
12 | 12 | |
13 | 13 | const routes: Routes = [ |
14 | 14 | { path: '', component: HomeComponent }, |
15 | 15 | { path: 'home', component: HomeComponent }, |
16 | - { path: 'abm-imagenes', component: AmbImagenesComponent }, | |
17 | 16 | { path: 'confirmacion-carrito', component: ConfirmacionCarritoComponent }, |
18 | 17 | { path: 'pago', component: PagoComponent }, |
19 | 18 | { path: 'cancelar-compra', component: CancelarCompraComponent }, |
20 | 19 | { path: 'mensaje-final', component: MensajeFinalComponent }, |
20 | + { path: 'comanda', component: ComandaComponent }, | |
21 | 21 | { |
22 | 22 | path: '', |
23 | 23 | component: MasterComponent, |
src/app/app.module.ts
... | ... | @@ -27,10 +27,10 @@ import { ConfirmacionCarritoComponent } from './components/confirmacion-carrito/ |
27 | 27 | import { MasterComponent } from './components/master/master.component'; |
28 | 28 | import { PopoverPromosComponent } from './components/popover-promos/popover-promos.component'; |
29 | 29 | import { PopoverSinonimosComponent } from './components/popover-sinonimos/popover-sinonimos.component'; |
30 | -import { AmbImagenesComponent } from './components/amb-imagenes/amb-imagenes.component'; | |
31 | 30 | import { PagoComponent } from './components/pago/pago.component'; |
32 | 31 | import { CancelarCompraComponent } from './components/cancelar-compra/cancelar-compra.component'; |
33 | 32 | import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final.component'; |
33 | +import { ComandaComponent } from './components/comanda/comanda.component'; | |
34 | 34 | //#endregion |
35 | 35 | |
36 | 36 | @NgModule({ |
... | ... | @@ -45,10 +45,10 @@ import { MensajeFinalComponent } from './components/mensaje-final/mensaje-final. |
45 | 45 | MasterComponent, |
46 | 46 | PopoverPromosComponent, |
47 | 47 | PopoverSinonimosComponent, |
48 | - AmbImagenesComponent, | |
49 | 48 | PagoComponent, |
50 | 49 | CancelarCompraComponent, |
51 | - MensajeFinalComponent | |
50 | + MensajeFinalComponent, | |
51 | + ComandaComponent | |
52 | 52 | ], |
53 | 53 | imports: [ |
54 | 54 | BrowserModule, |
src/app/components/amb-imagenes/amb-imagenes.component.html
... | ... | @@ -1,104 +0,0 @@ |
1 | -<app-header></app-header> | |
2 | - | |
3 | -<div class="container-fluid"> | |
4 | - <div class="row m-3"> | |
5 | - <div class="col"> | |
6 | - <p class="h2">Configuración de imágenes</p> | |
7 | - </div> | |
8 | - </div> | |
9 | - | |
10 | - <div class="row mx-3 search"> | |
11 | - <div class="col"> | |
12 | - <span class="fa fa-search form-control-lg form-control-search pl-3"></span> | |
13 | - <input | |
14 | - type="text" | |
15 | - class="form-control form-control-lg shadow-sm rounded-pill px-5" | |
16 | - placeholder="Búsqueda productos" | |
17 | - [(ngModel)]="searchTerm" | |
18 | - (ngModelChange)="filterItems()"> | |
19 | - </div> | |
20 | - </div> | |
21 | - | |
22 | - <div class="row m-3 vh-60 overflow-scroll"> | |
23 | - <div class="col"> | |
24 | - <h5>Productos</h5> | |
25 | - <table class="table table-striped table-hover table-borderless shadow"> | |
26 | - <thead> | |
27 | - <tr class="bg-primary text-center text-white shadow-sm"> | |
28 | - <th>Nombre</th> | |
29 | - <th colspan="2">Imagen</th> | |
30 | - </tr> | |
31 | - </thead> | |
32 | - <tbody> | |
33 | - <tr class="shadow-sm" *ngFor="let articulo of auxProductos"> | |
34 | - <td class="align-middle"> | |
35 | - <p class="m-0">{{articulo.DET_LAR}}</p> | |
36 | - <p class="m-0"><small>Descripción: {{articulo.DET_LAR}}</small></p> | |
37 | - <p class="m-0"><small>Sector: {{articulo.CodSec}}</small></p> | |
38 | - <p class="m-0"><small>Código: {{articulo.CodArt}}</small></p> | |
39 | - </td> | |
40 | - <td> | |
41 | - <img | |
42 | - *ngIf="articulo.imagenes.length == 0" | |
43 | - class="fade-in w-100 mx-auto img-fluid" | |
44 | - src="{{apiImagenes}}/imagenes/noImage.jpg"> | |
45 | - <carousel [interval]="false"> | |
46 | - <slide *ngFor="let item of articulo.imagenes; let index = index"> | |
47 | - <img | |
48 | - *ngIf="!item.fromGallery" | |
49 | - class="fade-in img-fluid w-100" | |
50 | - src="{{apiImagenes}}/imagenes/{{item.imagen}}"> | |
51 | - <img | |
52 | - *ngIf="item.fromGallery" | |
53 | - class="fade-in img-fluid w-100" | |
54 | - src="{{item.base64}}"> | |
55 | - <button | |
56 | - (click)="deleteImage(articulo.imagenes, index)" | |
57 | - type="button" | |
58 | - class="btn btn-light btn-delete-image position-absolute close"> | |
59 | - <span aria-hidden="true">×</span> | |
60 | - </button> | |
61 | - </slide> | |
62 | - </carousel> | |
63 | - </td> | |
64 | - <td class="align-middle text-center"> | |
65 | - <div class="custom-file"> | |
66 | - <input | |
67 | - type="file" | |
68 | - class="custom-file-input" | |
69 | - id="customFileLang" | |
70 | - accept="image/*" | |
71 | - (change)="onFileSelected($event, articulo)" | |
72 | - lang="es" | |
73 | - multiple> | |
74 | - <label class="custom-file-label text-left pr-5" for="customFileLang"> | |
75 | - <small>Seleccionar archivo</small> | |
76 | - </label> | |
77 | - </div> | |
78 | - </td> | |
79 | - </tr> | |
80 | - </tbody> | |
81 | - </table> | |
82 | - </div> | |
83 | - </div> | |
84 | - | |
85 | - <div class="row" *ngIf="paginationData"> | |
86 | - <div class="col"> | |
87 | - <pagination | |
88 | - [rotate]="false" | |
89 | - [(ngModel)]="paginationData.page" | |
90 | - [totalItems]="paginationData.rowCount" | |
91 | - [maxSize]="paginationData.pageCount" | |
92 | - [itemsPerPage]="paginationData.pageSize" | |
93 | - (pageChanged)="pageChanged($event)" | |
94 | - [boundaryLinks]="true" | |
95 | - [disabled]="disabledPaginador" | |
96 | - previousText="‹" | |
97 | - nextText="›" | |
98 | - firstText="«" | |
99 | - lastText="»" | |
100 | - ></pagination> | |
101 | - </div> | |
102 | - </div> | |
103 | - | |
104 | -</div> |
src/app/components/amb-imagenes/amb-imagenes.component.scss
... | ... | @@ -1,18 +0,0 @@ |
1 | -.search .form-control-search { | |
2 | - position: absolute; | |
3 | - z-index: 2; | |
4 | - display: block; | |
5 | - text-align: center; | |
6 | - pointer-events: none; | |
7 | - color: #aaa; | |
8 | - line-height: inherit; | |
9 | -} | |
10 | - | |
11 | -.custom-file-input:lang(es) ~ .custom-file-label::after { | |
12 | - content: "Elegir"; | |
13 | -} | |
14 | - | |
15 | -.btn-delete-image { | |
16 | - top: 0; | |
17 | - left: 95%; | |
18 | -} |
src/app/components/amb-imagenes/amb-imagenes.component.spec.ts
... | ... | @@ -1,25 +0,0 @@ |
1 | -import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | - | |
3 | -import { AmbImagenesComponent } from './amb-imagenes.component'; | |
4 | - | |
5 | -describe('AmbImagenesComponent', () => { | |
6 | - let component: AmbImagenesComponent; | |
7 | - let fixture: ComponentFixture<AmbImagenesComponent>; | |
8 | - | |
9 | - beforeEach(async(() => { | |
10 | - TestBed.configureTestingModule({ | |
11 | - declarations: [ AmbImagenesComponent ] | |
12 | - }) | |
13 | - .compileComponents(); | |
14 | - })); | |
15 | - | |
16 | - beforeEach(() => { | |
17 | - fixture = TestBed.createComponent(AmbImagenesComponent); | |
18 | - component = fixture.componentInstance; | |
19 | - fixture.detectChanges(); | |
20 | - }); | |
21 | - | |
22 | - it('should create', () => { | |
23 | - expect(component).toBeTruthy(); | |
24 | - }); | |
25 | -}); |
src/app/components/amb-imagenes/amb-imagenes.component.ts
... | ... | @@ -1,124 +0,0 @@ |
1 | -import { Component, OnInit } from '@angular/core'; | |
2 | -import { appSettings } from 'src/etc/AppSettings'; | |
3 | -import { ProductoService } from 'src/app/services/producto.service'; | |
4 | -import { Producto } from 'src/app/wrappers/producto'; | |
5 | -import { HttpClient } from '@angular/common/http'; | |
6 | - | |
7 | -@Component({ | |
8 | - selector: 'app-amb-imagenes', | |
9 | - templateUrl: './amb-imagenes.component.html', | |
10 | - styleUrls: ['./amb-imagenes.component.scss'] | |
11 | -}) | |
12 | - | |
13 | -export class AmbImagenesComponent implements OnInit { | |
14 | - | |
15 | - apiUrl = appSettings.apiImagenes; | |
16 | - articulos: Producto[] = []; | |
17 | - private auxProductos: Producto[] = []; | |
18 | - private searchTerm: string = ''; | |
19 | - private paginationData: any; | |
20 | - private disabledPaginador: boolean = false; | |
21 | - | |
22 | - constructor(private productoService: ProductoService, private http: HttpClient) { } | |
23 | - | |
24 | - ngOnInit() { | |
25 | - | |
26 | - this.productoService.getAllWithPaginator() | |
27 | - .subscribe((res) => { | |
28 | - | |
29 | - this.articulos = res.data; | |
30 | - this.paginationData = res.pagination; | |
31 | - this.filterItems(); | |
32 | - }, error => console.error(error)); | |
33 | - } | |
34 | - | |
35 | - onFileSelected(event, articulo: Producto) { | |
36 | - | |
37 | - let auxFiles: FileList = event.target.files; | |
38 | - Array.from(auxFiles).forEach(file => { | |
39 | - | |
40 | - this.onLoad(file) | |
41 | - .then(result => { | |
42 | - // articulo.imagenes.push({ | |
43 | - // name: file.name + articulo.CodArt + articulo.CodSec, | |
44 | - // fromGallery: true, | |
45 | - // imagen: result, | |
46 | - // id_articulo: articulo.id | |
47 | - // }); | |
48 | - let imagenAguardar = { | |
49 | - imagen: { | |
50 | - name: `${articulo.CodSec}${articulo.CodArt}${file.name}`, | |
51 | - base64: result, | |
52 | - codigo: articulo.CodArt, | |
53 | - sector: articulo.CodSec, | |
54 | - id_articulo: articulo.id | |
55 | - }, | |
56 | - articulo: articulo | |
57 | - }; | |
58 | - this.saveInBase(imagenAguardar); | |
59 | - }); | |
60 | - }) | |
61 | - } | |
62 | - | |
63 | - filterItems() { | |
64 | - | |
65 | - this.auxProductos = this.articulos.filter(x => { | |
66 | - return x.DET_LAR.toLowerCase().includes(this.searchTerm.toLowerCase()) || | |
67 | - x.CodArt.toString().includes(this.searchTerm.toLowerCase()) || | |
68 | - x.CodSec.toString().includes(this.searchTerm.toLowerCase()); | |
69 | - }); | |
70 | - } | |
71 | - | |
72 | - saveInBase(imagenAguardar) { | |
73 | - | |
74 | - this.productoService.saveInBase(imagenAguardar.imagen) | |
75 | - .subscribe(res => { | |
76 | - imagenAguardar.imagen['id'] = res[0]; | |
77 | - imagenAguardar.imagen['fromGallery'] = true; | |
78 | - imagenAguardar.articulo.imagenes.push(imagenAguardar.imagen); | |
79 | - }, error => console.error(error)); | |
80 | - } | |
81 | - | |
82 | - onLoad(file) { | |
83 | - | |
84 | - return new Promise((resolve, reject) => { | |
85 | - | |
86 | - var fr = new FileReader(); | |
87 | - | |
88 | - fr.onload = function () { | |
89 | - | |
90 | - resolve(fr.result); | |
91 | - }; | |
92 | - | |
93 | - fr.readAsDataURL(file); | |
94 | - }); | |
95 | - | |
96 | - } | |
97 | - | |
98 | - deleteImage(imagenes, index: number) { | |
99 | - | |
100 | - if (!imagenes[index].name) { | |
101 | - imagenes[index].name = imagenes[index].imagen; | |
102 | - } | |
103 | - | |
104 | - this.productoService.deleteImage(imagenes[index]) | |
105 | - .subscribe(res => { | |
106 | - | |
107 | - if (res) { | |
108 | - imagenes.splice(index, 1); | |
109 | - } | |
110 | - }, error => console.error(error)); | |
111 | - } | |
112 | - | |
113 | - pageChanged(event: any): void { | |
114 | - this.disabledPaginador = true; | |
115 | - this.productoService.getAllWithPaginator(event.page) | |
116 | - .subscribe((res) => { | |
117 | - this.disabledPaginador = false; | |
118 | - this.articulos = res.data; | |
119 | - this.paginationData = res.pagination; | |
120 | - this.filterItems(); | |
121 | - }, error => console.error(error)); | |
122 | - } | |
123 | - | |
124 | -} |
src/app/components/busqueda-productos/busqueda-productos.component.html
src/app/components/busqueda-productos/busqueda-productos.component.ts
... | ... | @@ -17,11 +17,12 @@ export class BusquedaProductosComponent implements OnInit { |
17 | 17 | private searchTerm: string = ''; |
18 | 18 | private categoriaActive: number = null; |
19 | 19 | private showSpinner: boolean = true; |
20 | - private queMostrar: string = 'todo'; | |
20 | + private queMostrar: string = 'todos'; | |
21 | 21 | private apiImagenes: string = appSettings.apiImagenes; |
22 | 22 | private categorias: Categoria[] = []; |
23 | 23 | private blurFocus = new EventEmitter(); |
24 | 24 | private ordenandoByVendidos = true; |
25 | + private title: string = 'Búsqueda' | |
25 | 26 | |
26 | 27 | constructor( |
27 | 28 | private productoService: ProductoService, |
... | ... | @@ -38,18 +39,21 @@ export class BusquedaProductosComponent implements OnInit { |
38 | 39 | case 'todos': |
39 | 40 | this.categorias = categorias; |
40 | 41 | this.categoriaActive = 0; |
42 | + this.title = 'Búsqueda'; | |
41 | 43 | break; |
42 | - case 'promociones': | |
43 | - this.categorias = categorias; | |
44 | - this.categoriaActive = 1; | |
45 | - break; | |
46 | - case 'ordenar': | |
47 | - | |
48 | - this.categorias = categorias.filter((categoria: Categoria) => { | |
49 | - return categoria.ES_PEDIDO; | |
50 | - }); | |
51 | - | |
52 | - this.categoriaActive = 0; | |
44 | + case 'promociones': | |
45 | + this.categorias = categorias; | |
46 | + this.categoriaActive = 1; | |
47 | + this.title = 'Promociones'; | |
48 | + break; | |
49 | + case 'ordenar': | |
50 | + | |
51 | + this.categorias = categorias.filter((categoria: Categoria) => { | |
52 | + return categoria.ES_PEDIDO; | |
53 | + }); | |
54 | + | |
55 | + this.categoriaActive = 0; | |
56 | + this.title = 'Ordenar'; | |
53 | 57 | |
54 | 58 | break; |
55 | 59 | default: |
src/app/components/comanda/comanda.component.html
... | ... | @@ -0,0 +1,37 @@ |
1 | +<div class="container-fluid p-0"> | |
2 | + <div class="row m-1 fade-in disable-user-select"> | |
3 | + <div class="col-2 col-1-5 p-1" *ngFor="let item of itemsArray"> | |
4 | + <div | |
5 | + class="card rounded-sm shadow-sm" | |
6 | + [ngClass]="{ 'green-card': false, 'red-card': false }" | |
7 | + > | |
8 | + <img | |
9 | + class="card-img-top rounded-sm shadow" | |
10 | + src="{{ apiImagenes }}/imagenes/cerealitas.jpg" | |
11 | + /> | |
12 | + <div class="card-body px-1 py-2"> | |
13 | + <p class="h6 card-title">Title</p> | |
14 | + <p class="card-text">Text</p> | |
15 | + <button class="btn btn-block btn-danger shadow p-1">Elaborar</button> | |
16 | + <button class="btn btn-block btn-success shadow p-1"> | |
17 | + Terminado | |
18 | + </button> | |
19 | + <div class="row mt-2 m-0"> | |
20 | + <div class="col-6 p-0 pr-1"> | |
21 | + <button class="btn btn-block btn-secondary btn-sm shadow p-0"> | |
22 | + <span class="pr-1 h7"><small>Eliminar</small></span> | |
23 | + <i class="fa fa-trash" aria-hidden="true"></i> | |
24 | + </button> | |
25 | + </div> | |
26 | + <div class="col-6 p-0 pl-1"> | |
27 | + <button class="btn btn-block btn-light btn-sm shadow p-0"> | |
28 | + <span class="pr-1 h7"><small>En espera</small></span> | |
29 | + <i class="fa fa-undo text-warning" aria-hidden="true"></i> | |
30 | + </button> | |
31 | + </div> | |
32 | + </div> | |
33 | + </div> | |
34 | + </div> | |
35 | + </div> | |
36 | + </div> | |
37 | +</div> |
src/app/components/comanda/comanda.component.scss
... | ... | @@ -0,0 +1,28 @@ |
1 | +@media (min-width: 1200px) { | |
2 | + .col-1-5 { | |
3 | + flex: 0 0 12.5%; | |
4 | + max-width: 12.5%; | |
5 | + position: relative; | |
6 | + width: 100%; | |
7 | + padding-right: 15px; | |
8 | + padding-left: 15px; | |
9 | + } | |
10 | +} | |
11 | + | |
12 | +.h7 { | |
13 | + font-size: 0.75rem; | |
14 | +} | |
15 | + | |
16 | +.red-card { | |
17 | + background-color: #8c000e; | |
18 | + .card-body { | |
19 | + color: #fff; | |
20 | + } | |
21 | +} | |
22 | + | |
23 | +.green-card { | |
24 | + background-color: #00751B; | |
25 | + .card-body { | |
26 | + color: #fff; | |
27 | + } | |
28 | +} |
src/app/components/comanda/comanda.component.spec.ts
... | ... | @@ -0,0 +1,25 @@ |
1 | +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; | |
2 | + | |
3 | +import { ComandaComponent } from './comanda.component'; | |
4 | + | |
5 | +describe('ComandaComponent', () => { | |
6 | + let component: ComandaComponent; | |
7 | + let fixture: ComponentFixture<ComandaComponent>; | |
8 | + | |
9 | + beforeEach(async(() => { | |
10 | + TestBed.configureTestingModule({ | |
11 | + declarations: [ ComandaComponent ] | |
12 | + }) | |
13 | + .compileComponents(); | |
14 | + })); | |
15 | + | |
16 | + beforeEach(() => { | |
17 | + fixture = TestBed.createComponent(ComandaComponent); | |
18 | + component = fixture.componentInstance; | |
19 | + fixture.detectChanges(); | |
20 | + }); | |
21 | + | |
22 | + it('should create', () => { | |
23 | + expect(component).toBeTruthy(); | |
24 | + }); | |
25 | +}); |
src/app/components/comanda/comanda.component.ts
... | ... | @@ -0,0 +1,19 @@ |
1 | +import { Component, OnInit } from '@angular/core'; | |
2 | +import { appSettings } from 'src/etc/AppSettings'; | |
3 | + | |
4 | +@Component({ | |
5 | + selector: 'app-comanda', | |
6 | + templateUrl: './comanda.component.html', | |
7 | + styleUrls: ['./comanda.component.scss'] | |
8 | +}) | |
9 | +export class ComandaComponent implements OnInit { | |
10 | + | |
11 | + private apiImagenes = appSettings.apiImagenes; | |
12 | + private itemsArray = [{},{},{},{},{},{},{},{}] | |
13 | + | |
14 | + constructor() { } | |
15 | + | |
16 | + ngOnInit() { | |
17 | + } | |
18 | + | |
19 | +} |
src/app/services/producto.service.ts
... | ... | @@ -21,7 +21,7 @@ export class ProductoService { |
21 | 21 | return this.http.get(`${appSettings.apiUrl}/articulos/${id}`); |
22 | 22 | } |
23 | 23 | |
24 | - getAll(page: number = 1): Observable<any> { | |
24 | + getAll(): Observable<any> { | |
25 | 25 | |
26 | 26 | return this.http.get(`${appSettings.apiUrl}/articulos/`); |
27 | 27 | } |
... | ... | @@ -74,14 +74,6 @@ export class ProductoService { |
74 | 74 | return this.http.get(url); |
75 | 75 | } |
76 | 76 | |
77 | - saveInBase(body): Observable<any> { | |
78 | - return this.http.post(`${appSettings.apiUrl}/imagenes/guardar`, body); | |
79 | - } | |
80 | - | |
81 | - deleteImage(body): Observable<any> { | |
82 | - return this.http.post(`${appSettings.apiUrl}/imagen/borrar`, body); | |
83 | - } | |
84 | - | |
85 | 77 | getCategorias() { |
86 | 78 | return this.http.get(`${appSettings.apiUrl}/categorias`); |
87 | 79 | } |