Marcelo Aiello / gestion-comprobantes

Browse Code »

Commit fd60509b5dc274e4d6b29298e5a2afaad0248bb5

Authored by Eric Fernandez 2019-06-06 17:10:09 -0300

1 parent f1d2da7f17

Exists in master and in 1 other branch

paginación comprobantes

Showing 3 changed files with 23 additions and 74 deletions Show diff stats

src/app/app.module.ts

Diff comments View file @ fd60509

 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule } from '@angular/forms';
 import { LaddaModule } from 'angular2-ladda';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { AppBotonera } from './botonera/botonera.component';
 import { ComprobantesComponent } from './comprobantes/comprobantes.component';
 import { NombreEmpresaComponent } from './nombre-empresa/nombre-empresa.component';
 import { AccionesComponent } from './acciones/acciones.component';
 import { LoginComponent } from './login/login.component';
 import { BusquedaComprobanteComponent } from './busqueda-comprobante/busqueda-comprobante.component';
 @NgModule({
   declarations: [
     AppComponent,
     AppBotonera,
     ComprobantesComponent,
     NombreEmpresaComponent,
     AccionesComponent,
     LoginComponent,
     BusquedaComprobanteComponent
   ],
   imports: [
     BrowserModule,
     AppRoutingModule,
     NgbModule,
     HttpClientModule,
     FormsModule,
     LaddaModule
   ],
+  entryComponents:[BusquedaComprobanteComponent],
   providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule { }

src/app/comprobantes/comprobantes.component.html

Diff comments View file @ fd60509

 <div class="row panel-informativo">
   <div class="col-12">
     <div class="row titulares">
       <div class="col-12 col-sm numero-pedido text-center text-md-left border border-white align-middle ng-binding ng-scope">
         Recepción
         <button
           class="btn btn-xs btn-outline-light float-right"
           type="button"
-          ng-click="$ctrl.busqueda()"
+          (click)="busquedaComprobantes()"
-          ng-if="$ctrl.busqueda"
           title="Buscar"
         >
         <i class="fa fa-search"></i>
         </button>
       </div>
       <div class="col-7 col-sm border border-white align-middle">
         Fecha:
         <span
         ng-click="datepickerAbierto = true"
         >&nbsp;{{ fecha | date: 'dd/MM/yyyy' }}</span>
       </div>
       <div class="col-5 col-sm border border-white border-right-0 align-middle">
         Hora:
         <span
         ng-click="datepickerAbierto = true"
         >&nbsp;{{ fecha | date: 'shortTime'}}</span>
       </div>
     </div>
   </div>
 </div>
 <div class="row">
   <form class="col-12 col-sm-10">
     <div class="row border">
       <div class="col-6 col-sm-3 d-flex">
         <strong>Letra Factura:&nbsp;</strong>
         <label>{{cabecera.TIP}}</label>
       </div>
       <div class="col-6 col-sm-3 d-flex">
         <strong>Tipo Factura:&nbsp;</strong>
         <label>{{cabecera.TCO}}</label>
       </div>
       <div class="col-6 col-sm-3 d-flex">
         <strong>Sucursal:&nbsp;</strong>
         <label>{{cabecera.SUC}}</label>
       </div>
       <div class="col-6 col-sm-3 d-flex">
         <strong>Número:&nbsp;</strong>
         <label>{{cabecera.NCO}}</label>
       </div>
       <div class="col-6 col-sm-3 d-flex">
         <strong>Cuit:&nbsp;</strong>
         <label>{{cabecera.CUI}}</label>
       </div>
-      <div class="col-12 col-sm-3 d-flex">
+      <div class="col-12 col-sm-6 d-flex">
         <strong>Nombre:&nbsp;</strong>
         <label>{{cabecera.NOM}}</label>
       </div>
     </div>
-    <div class="row border">
+    <div class="row border pr-2">
       <div class="col-4">
         <button
         type="button"
         class="btn btn-outline-secondary btn-sm"
         [ngClass]="{'active': estadoArticulos == 'pendiente'}"
         (click)="estadoArticulos = 'pendiente'; paginaActiva = 1; filter = '';">
         Pendientes&nbsp;({{getCantidadArticulosByEstado('pendiente')}})
       </button>
     </div>
     <div class="col-4">
       <button
       type="button"
       class="btn btn-outline-success btn-sm"
       [ngClass]="{'active': estadoArticulos == 'aprobado'}"
       (click)="estadoArticulos = 'aprobado'; paginaActiva = 1; filter = '';">
       Aprobados&nbsp;({{getCantidadArticulosByEstado('aprobado')}})
       </button>
     </div>
     <div class="col-4">
       <button
       type="button"
       class="btn btn-outline-danger btn-sm"
       [ngClass]="{'active': estadoArticulos == 'rechazado'}"
       (click)="estadoArticulos = 'rechazado'; paginaActiva = 1; filter = '';">
       Rechazados&nbsp;({{getCantidadArticulosByEstado('rechazado')}})
     </button>
   </div>
 </div>
 <div class="row">
   <input
       type="text"
       class="form-control-sm col-12"
       placeholder="Busque producto por nombre, codigo"
       [(ngModel)]="filter"
       [ngModelOptions]="{standalone: true}"/>
     </div>
     <div class="row">
       <table class="table table-dark">
         <thead>
           <tr>
             <th *ngIf="estadoArticulos != 'rechazado'">Rechazar</th>
             <th>Producto</th>
             <th>Cantidad</th>
             <th *ngIf="estadoArticulos != 'aprobado'">Aceptar</th>
           </tr>
         </thead>
         <tbody>
           <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.estado == 'aprobado'}">
             <th *ngIf="estadoArticulos != 'rechazado'"><button type="button" class="" (click)="articulo.estado = 'rechazado'">
               <i class="fa fa-window-close"></i>
             </button></th>
-            <th>{{articulo.LI0}}</th>
+            <th>{{articulo.TIO}}</th>
             <th *ngIf="!articulo.input" (click)="articulo.input = true">
               {{articulo.recibido ? articulo.recibido + '/' : ''}}{{articulo.CAN}}</th>
               <th *ngIf="articulo.input">
                 <input
                 class="form-control-sm col-12"
                 type="number"
                 (keyup.enter)="articulo.input = false"
                 [(ngModel)]="articulo.recibido"
                 [ngModelOptions]="{standalone: true}"
                 autofocus/>
                 /{{articulo.CAN}}
               </th>
               <th *ngIf="estadoArticulos != 'aprobado'">
                 <button type="button" class="" (click)="articulo.estado = 'aprobado'">
                   <i class="fa fa-check"></i>
                 </button>
               </th>
             </tr>
             <tr>
               <th colspan="3" *ngIf="articulosFiltro.length == 0">Por el momento no hay elementos aquí</th>
             </tr>
           </tbody>
           <tfoot>
             <nav *ngIf="articulosFiltro.length > 0" class="mr-auto position-absolute mb-5">
               <ul class="pagination pagination-sm justify-content mb-0">
                 <li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}">
                   <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva - 1">
                     <span aria-hidden="true">&laquo;</span>
                     <span class="sr-only">Anterior</span>
                   </a>
                 </li>
                 <li
                 class="page-item"
                 *ngFor="let pagina of paginas; index as i"
                 [ngClass]="{'active': pagina == paginaActiva}"
                 >
                 <a
                 class="page-link"
                 href="javascript:void();"
                 (click)="paginaActiva = pagina"
                 >{{pagina}}</a>
               </li>
               <li class="page-item" [ngClass]="{'disabled': paginaActiva == paginas.length}">
                 <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva + 1">
                   <span aria-hidden="true">&raquo;</span>
                   <span class="sr-only">Siguiente</span>
                 </a>
               </li>
             </ul>
           </nav>
         </tfoot>
       </table>
     </div>
   </form>
   <app-acciones (guardar)="guardarComprobante()"></app-acciones>
 </div>

src/app/comprobantes/comprobantes.component.ts

Diff comments View file @ fd60509

1	import { Component, OnInit} from '@angular/core';	1	import { Component, OnInit} from '@angular/core';
		2	import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
		3	import { BusquedaComprobanteComponent } from '../busqueda-comprobante/busqueda-comprobante.component';
2		4
3	@Component({	5	@Component({
4	templateUrl: './comprobantes.component.html',	6	templateUrl: './comprobantes.component.html',
5	styleUrls: ['./comprobantes.component.scss']	7	styleUrls: ['./comprobantes.component.scss']
6	})	8	})
7	export class ComprobantesComponent implements OnInit {	9	export class ComprobantesComponent implements OnInit {
8		10
9	constructor() { }	11	constructor(private modalService: NgbModal) { }
10		12
11	ngOnInit() {	13	ngOnInit() { }
12
13	this.obtenerConsulta();
14	}
15		14
16	filter = '';	15	filter = '';
17	estadoArticulos = 'pendiente';	16	estadoArticulos = 'pendiente';
18	comprobantes = [1, 2, 3];	17	comprobantes = [1, 2, 3];
19	cabecera = {};	18	cabecera = {};
20	cuerpo = [];	19	cuerpo = [];
21	articulosFiltro = [];	20	articulosFiltro = [];
22	paginaActiva = 1;	21	paginaActiva = 1;
23	paginas = [];	22	paginas = [];
24		23
25	fecha = new Date();	24	fecha = new Date();
26		25
27	paginar() {	26	paginar() {
28		27
29	var cantPaginas = Math.ceil(this.articulosFiltro.length / 5);	28	var cantPaginas = Math.ceil(this.articulosFiltro.length / 5);
30	this.paginas = [];	29	this.paginas = [];
31	for (let i = 0; i < cantPaginas; i++) {	30	for (let i = 0; i < cantPaginas; i++) {
32	this.paginas.push(i + 1);	31	this.paginas.push(i + 1);
33	}	32	}
34	}	33	}
35		34
36	getPaginaFiltro() {	35	getPaginaFiltro() {
37		36
38	this.articulosFiltro = this.cuerpo.filter((articulo) => {	37	this.articulosFiltro = this.cuerpo.filter((articulo) => {
39	return articulo.estado == this.estadoArticulos &&	38	return articulo.estado == this.estadoArticulos &&
40	(articulo.LI0.toLocaleUpperCase().includes(this.filter.toLocaleUpperCase()) \|\|	39	(articulo.TIO.toLocaleUpperCase().includes(this.filter.toLocaleUpperCase()) \|\|
41	articulo.codigoBarras == this.filter);	40	articulo.codigoBarras == this.filter);
42	});	41	});
43		42
44	this.paginar();	43	this.paginar();
45		44
46	return this.articulosFiltro.slice((this.paginaActiva - 1) * 5 , this.paginaActiva * 5);	45	return this.articulosFiltro.slice((this.paginaActiva - 1) * 5 , this.paginaActiva * 5);
47	}	46	}
48		47
49	getCantidadArticulosByEstado(estado: String) {	48	getCantidadArticulosByEstado(estado: String) {
50	return this.cuerpo.filter((articulo) => {	49	return this.cuerpo.filter((articulo) => {
51	return articulo.estado == estado;	50	return articulo.estado == estado;
52	}).length;	51	}).length;
53	}	52	}
54		53
55	guardarComprobante(event: any) {	54	guardarComprobante(event: any) {
56	alert('Guardando');	55	alert('Guardando');
57	}	56	}
58		57
59	obtenerConsulta() {	58	busquedaComprobantes() {
60		59	this.modalService.open(BusquedaComprobanteComponent).result.then(comprobante => {
61	setTimeout(() => {	60
62	this.cabecera = {	61	this.cabecera = comprobante.cabecera;
63	TIP: 'A',	62	this.cuerpo = comprobante.cuerpo;
64	TCO: 'FT',	63
65	SUC: 623,	64	this.cuerpo.forEach(articulo => {
66	NCO: 53979,	65	articulo['estado'] = 'pendiente';
67	COD: 1,	66	});
68	FEC: new Date(),	67
69	NOM: 'POTIGIAN GOLOCINAS',	68	this.getPaginaFiltro();
70	CUI: '30-54775125-2'	69	}, (reason) => { });
71	};
72
73	this.cuerpo = [
74	{
75	LI0: 'Mantel Combo Bolso CocaCola',
76	CAN: 5,
77	estado: 'pendiente',
78	codigoBarras: '7790667006462'
79	},
80	{
81	LI0: 'Papas',
82	CAN: 5,
83	estado: 'pendiente',
84	},
85	{
86	LI0: 'Peras',
87	CAN: 5,
88	estado: 'pendiente',
89	},
90	{
91	LI0: 'Cafe',
92	CAN: 5,
93	estado: 'pendiente',
94	},
95	{
96	LI0: 'Cafe capuchino',
97	CAN: 5,
98	estado: 'pendiente',
99	},
100	{
101	LI0: 'Menta',
102	CAN: 5,
103	estado: 'pendiente',
104	},
105	{
106	LI0: 'Fernet',
107	CAN: 5,
108	estado: 'pendiente',
109	},
110	{
111	LI0: 'Andes',
112	CAN: 5,
113	estado: 'pendiente',
114	}
115	];
116
117	this.articulosFiltro = this.cuerpo;
118
119	this.paginar();
120	}, 500);
121	}	70	}
122		71