Marcelo Aiello / gestion-comprobantes

Browse Code »

Commit a361ae9bc10a15961a9ad5ebc77965da47183862

Authored by Eric Fernandez 2019-06-03 12:34:47 -0300

1 parent bf509b731c

Exists in master and in 1 other branch

paginación ok

Showing 2 changed files with 35 additions and 22 deletions Show diff stats

src/app/comprobantes/comprobantes.component.html

Diff comments View file @ a361ae9

 <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()"
           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>
 <form>
   <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">
       <strong>Nombre:&nbsp;</strong>
       <label>{{cabecera.NOM}}</label>
     </div>
   </div>
   <div class="row">
     <input
       type="text"
       class="form-control-sm col-12"
       placeholder="Busque producto por nombre, codigo"
       (keyup)="filtrar($event)"/>
   </div>
   <div class="row">
     <table class="table table-dark">
       <thead>
         <tr>
           <th>Rechazar</th>
           <th>Producto</th>
           <th>Cantidad</th>
           <th>Aceptar</th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let articulo of articulosFiltro" [ngClass]="{'bg-success': articulo.done}">
+        <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.done}">
           <th><button type="button" class="" (click)="articulo.input = true">
             <i class="fa fa-window-close"></i>
           </button></th>
           <th>{{articulo.LI0}}</th>
-          <th *ngIf="!articulo.input">{{articulo.CAN}}</th>
+          <th *ngIf="!articulo.input">{{articulo.CAN}}/{{articulo.CAN}}</th>
           <th *ngIf="articulo.input">
             <input class="form-control-sm col-12"/>
           </th>
-          <th><button type="button" class="" (click)="articulo.done = true">
+          <th>
-            <i class="fa fa-check"></i>
+            <button type="button" class="" (click)="articulo.done = true">
-          </button></th>
+              <i class="fa fa-check"></i>
+            </button>
+          </th>
         </tr>
       </tbody>
     <tfoot>
       <nav *ngIf="articulosFiltro.length > 0" class="mr-auto">
         <ul class="pagination pagination-sm justify-content mb-0">
-          <li class="page-item" [ngClass]="{'disabled': pagina == 1}">
+          <li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}">
-              <a class="page-link" href="javascript:void();" (click)="paginar(articulosFiltro); pagina - 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 == currentPage}"
+            [ngClass]="{'active': pagina == paginaActiva}"
           >
             <a
               class="page-link"
               href="javascript:void();"
-              (click)="selectPage(pagina)"
+              (click)="paginaActiva = pagina"
             >{{pagina}}</a>
           </li>
-          <li class="page-item" [ngClass]="{'disabled': currentPage == lastPage}">
+          <li class="page-item" [ngClass]="{'disabled': paginaActiva == paginas.length}">
-            <a class="page-link" href="javascript:void();" (click)="paginar(articulosFiltro); pagina + 1">
+            <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>

src/app/comprobantes/comprobantes.component.ts

Diff comments View file @ a361ae9

1	import { Component, OnInit } from '@angular/core';	1	import { Component, OnInit } from '@angular/core';
2		2
3	@Component({	3	@Component({
4	selector: 'app-comprobantes',	4	selector: 'app-comprobantes',
5	templateUrl: './comprobantes.component.html',	5	templateUrl: './comprobantes.component.html',
6	styleUrls: ['./comprobantes.component.scss']	6	styleUrls: ['./comprobantes.component.scss']
7	})	7	})
8	export class ComprobantesComponent implements OnInit {	8	export class ComprobantesComponent implements OnInit {
9		9
10	constructor() { }	10	constructor() { }
11		11
12	ngOnInit() {	12	ngOnInit() {
13		13
14	this.obtenerConsulta()	14	this.obtenerConsulta();
15	}	15	}
16		16
17	filter = '';	17	filter = '';
18	comprobantes = [1, 2, 3];	18	comprobantes = [1, 2, 3];
19	cabecera = {};	19	cabecera = {};
20	cuerpo = [];	20	cuerpo = [];
21	articulosFiltro = [];	21	articulosFiltro = [];
22	pagina = 1;	22	paginaActiva = 1;
23	paginas = [];	23	paginas = [];
24		24
25	fecha = new Date();	25	fecha = new Date();
26		26
27	filtrar(event: any) {	27	filtrar(event: any) {
28	var filtro = this.cuerpo.filter((param)=> {	28	this.articulosFiltro = this.cuerpo.filter((param)=> {
29	return (param.LI0).toLocaleUpperCase().includes((event.target.value).toLocaleUpperCase());	29	return (param.LI0).toLocaleUpperCase().includes(
		30	(event.target.value).toLocaleUpperCase()) \|\|
		31	param.codigoBarras == event.target.value;
30	});	32	});
31		33
32	this.paginar(filtro, this.pagina);	34	this.paginar();
33	this.paginas.length = Math.round(filtro.length / 5);
34	}	35	}
35		36
36	paginar(filtro: any, pagina: any) {	37	paginar() {
37	this.articulosFiltro = filtro.slice(	38
38	filtro.length - 1 * pagina, filtro.length * this.pagina + 4);	39	var cantPaginas = Math.round(this.articulosFiltro.length / 5) + 1;
		40	this.paginas = [];
		41	for (let i = 0; i < cantPaginas; i++) {
		42	this.paginas.push(i + 1);
		43	}
		44	}
		45
		46	getPaginaFiltro() {
		47	return this.articulosFiltro.slice(
		48	(this.paginaActiva - 1) * 5 , this.paginaActiva * 5);
39	}	49	}
40		50
41	obtenerConsulta() {	51	obtenerConsulta() {
42		52
43	setTimeout(() => {	53	setTimeout(() => {
44	this.cabecera = {	54	this.cabecera = {
45	TIP: 'A',	55	TIP: 'A',
46	TCO: 'FT',	56	TCO: 'FT',
47	SUC: 623,	57	SUC: 623,
48	NCO: 53979,	58	NCO: 53979,
49	COD: 1,	59	COD: 1,
50	FEC: new Date(),	60	FEC: new Date(),
51	NOM: 'POTIGIAN GOLOCINAS',	61	NOM: 'POTIGIAN GOLOCINAS',
52	CUI: '30-54775125-2'	62	CUI: '30-54775125-2'
53	};	63	};
54		64
55	this.cuerpo = [	65	this.cuerpo = [
56	{	66	{
57	LI0: 'Mantel Combo Bolso CocaCola',	67	LI0: 'Mantel Combo Bolso CocaCola',
58	CAN: 5	68	CAN: 5,
		69	codigoBarras: '7790667006462'
59	},	70	},
60	{	71	{
61	LI0: 'Papas',	72	LI0: 'Papas',
62	CAN: 5	73	CAN: 5
63	},	74	},
64	{	75	{
65	LI0: 'Peras',	76	LI0: 'Peras',
66	CAN: 5	77	CAN: 5
67	},	78	},
68	{	79	{
69	LI0: 'Cafe',	80	LI0: 'Cafe',
70	CAN: 5	81	CAN: 5
71	},	82	},
72	{	83	{
73	LI0: 'Menta',	84	LI0: 'Menta',
74	CAN: 5	85	CAN: 5
75	},	86	},
76	{	87	{
77	LI0: 'Fernet',	88	LI0: 'Fernet',
78	CAN: 5	89	CAN: 5
79	},	90	},
80	{	91	{
81	LI0: 'Birra',	92	LI0: 'Birra',
82	CAN: 5	93	CAN: 5
83	}	94	}
84	];	95	];
85		96
86	this.articulosFiltro = this.cuerpo;	97	this.articulosFiltro = this.cuerpo;
87		98
88	this.paginar(this.articulosFiltro);	99	this.paginar();
89	}, 500);	100	}, 500);
90	}	101	}
91		102
92	}	103	}