pendiente, aprobados, rechazados

Eric Fernandez
1 parent a361ae9bc1
Showing 2 changed files with 82 additions and 25 deletions Show diff stats
src/app/comprobantes/comprobantes.component.html
src/app/comprobantes/comprobantes.component.ts
@@ -56,26 +56,56 @@
       <label>{{cabecera.NOM}}</label>
     </div>
   </div>
+  <div class="row border">
+    <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"
-      (keyup)="filtrar($event)"/>
+      [(ngModel)]="filter"
+      [ngModelOptions]="{standalone: true}"/>
   </div>
   <div class="row">
     <table class="table table-dark">
       <thead>
         <tr>
-          <th>Rechazar</th>
+          <th *ngIf="estadoArticulos != 'rechazado'">Rechazar</th>
           <th>Producto</th>
           <th>Cantidad</th>
-          <th>Aceptar</th>
+          <th *ngIf="estadoArticulos != 'aprobado'">Aceptar</th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.done}">
-          <th><button type="button" class="" (click)="articulo.input = true">
+        <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>
@@ -83,15 +113,18 @@
           <th *ngIf="articulo.input">
             <input class="form-control-sm col-12"/>
           </th>
-          <th>
-            <button type="button" class="" (click)="articulo.done = true">
+          <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">
+      <nav *ngIf="articulosFiltro.length > 0" class="mr-auto position-absolute">
         <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">
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit} from '@angular/core';
  
 @Component({
-  selector: 'app-comprobantes',
   templateUrl: './comprobantes.component.html',
   styleUrls: ['./comprobantes.component.scss']
 })
@@ -15,20 +14,19 @@ export class ComprobantesComponent implements OnInit {
   }
  
   filter = '';
+  estadoArticulos = 'pendiente';
   comprobantes = [1, 2, 3];
   cabecera = {};
   cuerpo = [];
   articulosFiltro = [];
   paginaActiva = 1;
   paginas = [];
-
+  
   fecha = new Date();
  
   filtrar(event: any) {
     this.articulosFiltro =  this.cuerpo.filter((param)=> {
-      return (param.LI0).toLocaleUpperCase().includes(
-        (event.target.value).toLocaleUpperCase()) ||
-        param.codigoBarras == event.target.value;
+      return 
     });
  
     this.paginar();
@@ -36,7 +34,7 @@ export class ComprobantesComponent implements OnInit {
  
   paginar() {
  
-    var cantPaginas = Math.round(this.articulosFiltro.length / 5) + 1;
+    var cantPaginas = Math.ceil(this.articulosFiltro.length / 5);
     this.paginas = [];
     for (let i = 0; i < cantPaginas; i++) {
       this.paginas.push(i + 1);
@@ -44,8 +42,22 @@ export class ComprobantesComponent implements OnInit {
   }
  
   getPaginaFiltro() {
-    return this.articulosFiltro.slice(
-      (this.paginaActiva - 1) * 5 , this.paginaActiva * 5);
+
+    this.articulosFiltro = this.cuerpo.filter((articulo) => {
+      return articulo.estado == this.estadoArticulos &&
+        (articulo.LI0.toLocaleUpperCase().includes(this.filter.toLocaleUpperCase()) ||
+        articulo.codigoBarras == this.filter);
+    });
+
+    this.paginar();
+
+    return this.articulosFiltro.slice((this.paginaActiva - 1) * 5 , this.paginaActiva * 5);
+  }
+
+  getCantidadArticulosByEstado(estado: String) {
+    return this.cuerpo.filter((articulo) => {
+      return articulo.estado == estado;
+    }).length;
   }
  
   obtenerConsulta() {
@@ -61,36 +73,48 @@ export class ComprobantesComponent implements OnInit {
         NOM: 'POTIGIAN GOLOCINAS',
         CUI: '30-54775125-2'
       };
-  
+
       this.cuerpo = [
         {
           LI0: 'Mantel Combo Bolso CocaCola',
           CAN: 5,
+          estado: 'pendiente',
           codigoBarras: '7790667006462'
         },
         {
           LI0: 'Papas',
-          CAN: 5
+          CAN: 5,
+          estado: 'pendiente',
         },
         {
           LI0: 'Peras',
-          CAN: 5
+          CAN: 5,
+          estado: 'pendiente',
         },
         {
           LI0: 'Cafe',
-          CAN: 5
+          CAN: 5,
+          estado: 'pendiente',
+        },
+        {
+          LI0: 'Cafe capuchino',
+          CAN: 5,
+          estado: 'pendiente',
         },
         {
           LI0: 'Menta',
-          CAN: 5
+          CAN: 5,
+          estado: 'pendiente',
         },
         {
           LI0: 'Fernet',
-          CAN: 5
+          CAN: 5,
+          estado: 'pendiente',
         },
         {
-          LI0: 'Birra',
-          CAN: 5
+          LI0: 'Andes',
+          CAN: 5,
+          estado: 'pendiente',
         }
       ];
...	...	@@ -56,26 +56,56 @@
56	56	<label>{{cabecera.NOM}}</label>
57	57	</div>
58	58	</div>
	59	+ <div class="row border">
	60	+ <div class="col-4">
	61	+ <button
	62	+ type="button"
	63	+ class="btn btn-outline-secondary btn-sm"
	64	+ [ngClass]="{'active': estadoArticulos == 'pendiente'}"
	65	+ (click)="estadoArticulos = 'pendiente'; paginaActiva = 1; filter = '';">
	66	+ Pendientes ({{getCantidadArticulosByEstado('pendiente')}})
	67	+ </button>
	68	+ </div>
	69	+ <div class="col-4">
	70	+ <button
	71	+ type="button"
	72	+ class="btn btn-outline-success btn-sm"
	73	+ [ngClass]="{'active': estadoArticulos == 'aprobado'}"
	74	+ (click)="estadoArticulos = 'aprobado'; paginaActiva = 1; filter = '';">
	75	+ Aprobados ({{getCantidadArticulosByEstado('aprobado')}})
	76	+ </button>
	77	+ </div>
	78	+ <div class="col-4">
	79	+ <button
	80	+ type="button"
	81	+ class="btn btn-outline-danger btn-sm"
	82	+ [ngClass]="{'active': estadoArticulos == 'rechazado'}"
	83	+ (click)="estadoArticulos = 'rechazado'; paginaActiva = 1; filter = '';">
	84	+ Rechazados ({{getCantidadArticulosByEstado('rechazado')}})
	85	+ </button>
	86	+ </div>
	87	+ </div>
59	88	<div class="row">
60	89	<input
61	90	type="text"
62	91	class="form-control-sm col-12"
63	92	placeholder="Busque producto por nombre, codigo"
64		- (keyup)="filtrar($event)"/>
	93	+ [(ngModel)]="filter"
	94	+ [ngModelOptions]="{standalone: true}"/>
65	95	</div>
66	96	<div class="row">
67	97	<table class="table table-dark">
68	98	<thead>
69	99	<tr>
70		- <th>Rechazar</th>
	100	+ <th *ngIf="estadoArticulos != 'rechazado'">Rechazar</th>
71	101	<th>Producto</th>
72	102	<th>Cantidad</th>
73		- <th>Aceptar</th>
	103	+ <th *ngIf="estadoArticulos != 'aprobado'">Aceptar</th>
74	104	</tr>
75	105	</thead>
76	106	<tbody>
77		- <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.done}">
78		- <th><button type="button" class="" (click)="articulo.input = true">
	107	+ <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.estado == 'aprobado'}">
	108	+ <th *ngIf="estadoArticulos != 'rechazado'"><button type="button" class="" (click)="articulo.estado = 'rechazado'">
79	109	<i class="fa fa-window-close"></i>
80	110	</button></th>
81	111	<th>{{articulo.LI0}}</th>
...	...	@@ -83,15 +113,18 @@
83	113	<th *ngIf="articulo.input">
84	114	<input class="form-control-sm col-12"/>
85	115	</th>
86		- <th>
87		- <button type="button" class="" (click)="articulo.done = true">
	116	+ <th *ngIf="estadoArticulos != 'aprobado'">
	117	+ <button type="button" class="" (click)="articulo.estado = 'aprobado'">
88	118	<i class="fa fa-check"></i>
89	119	</button>
90	120	</th>
91	121	</tr>
	122	+ <tr>
	123	+ <th colspan="3" *ngIf="articulosFiltro.length == 0">Por el momento no hay elementos aquí</th>
	124	+ </tr>
92	125	</tbody>
93	126	<tfoot>
94		- <nav *ngIf="articulosFiltro.length > 0" class="mr-auto">
	127	+ <nav *ngIf="articulosFiltro.length > 0" class="mr-auto position-absolute">
95	128	<ul class="pagination pagination-sm justify-content mb-0">
96	129	<li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}">
97	130	<a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva - 1">
1		-import { Component, OnInit } from '@angular/core';
	1	+import { Component, OnInit} from '@angular/core';
2	2
3	3	@Component({
4		- selector: 'app-comprobantes',
5	4	templateUrl: './comprobantes.component.html',
6	5	styleUrls: ['./comprobantes.component.scss']
7	6	})
...	...	@@ -15,20 +14,19 @@ export class ComprobantesComponent implements OnInit {
15	14	}
16	15
17	16	filter = '';
	17	+ estadoArticulos = 'pendiente';
18	18	comprobantes = [1, 2, 3];
19	19	cabecera = {};
20	20	cuerpo = [];
21	21	articulosFiltro = [];
22	22	paginaActiva = 1;
23	23	paginas = [];
24		-
	24	+
25	25	fecha = new Date();
26	26
27	27	filtrar(event: any) {
28	28	this.articulosFiltro = this.cuerpo.filter((param)=> {
29		- return (param.LI0).toLocaleUpperCase().includes(
30		- (event.target.value).toLocaleUpperCase()) \|\|
31		- param.codigoBarras == event.target.value;
	29	+ return
32	30	});
33	31
34	32	this.paginar();
...	...	@@ -36,7 +34,7 @@ export class ComprobantesComponent implements OnInit {
36	34
37	35	paginar() {
38	36
39		- var cantPaginas = Math.round(this.articulosFiltro.length / 5) + 1;
	37	+ var cantPaginas = Math.ceil(this.articulosFiltro.length / 5);
40	38	this.paginas = [];
41	39	for (let i = 0; i < cantPaginas; i++) {
42	40	this.paginas.push(i + 1);
...	...	@@ -44,8 +42,22 @@ export class ComprobantesComponent implements OnInit {
44	42	}
45	43
46	44	getPaginaFiltro() {
47		- return this.articulosFiltro.slice(
48		- (this.paginaActiva - 1) * 5 , this.paginaActiva * 5);
	45	+
	46	+ this.articulosFiltro = this.cuerpo.filter((articulo) => {
	47	+ return articulo.estado == this.estadoArticulos &&
	48	+ (articulo.LI0.toLocaleUpperCase().includes(this.filter.toLocaleUpperCase()) \|\|
	49	+ articulo.codigoBarras == this.filter);
	50	+ });
	51	+
	52	+ this.paginar();
	53	+
	54	+ return this.articulosFiltro.slice((this.paginaActiva - 1) * 5 , this.paginaActiva * 5);
	55	+ }
	56	+
	57	+ getCantidadArticulosByEstado(estado: String) {
	58	+ return this.cuerpo.filter((articulo) => {
	59	+ return articulo.estado == estado;
	60	+ }).length;
49	61	}
50	62
51	63	obtenerConsulta() {
...	...	@@ -61,36 +73,48 @@ export class ComprobantesComponent implements OnInit {
61	73	NOM: 'POTIGIAN GOLOCINAS',
62	74	CUI: '30-54775125-2'
63	75	};
64		-
	76	+
65	77	this.cuerpo = [
66	78	{
67	79	LI0: 'Mantel Combo Bolso CocaCola',
68	80	CAN: 5,
	81	+ estado: 'pendiente',
69	82	codigoBarras: '7790667006462'
70	83	},
71	84	{
72	85	LI0: 'Papas',
73		- CAN: 5
	86	+ CAN: 5,
	87	+ estado: 'pendiente',
74	88	},
75	89	{
76	90	LI0: 'Peras',
77		- CAN: 5
	91	+ CAN: 5,
	92	+ estado: 'pendiente',
78	93	},
79	94	{
80	95	LI0: 'Cafe',
81		- CAN: 5
	96	+ CAN: 5,
	97	+ estado: 'pendiente',
	98	+ },
	99	+ {
	100	+ LI0: 'Cafe capuchino',
	101	+ CAN: 5,
	102	+ estado: 'pendiente',
82	103	},
83	104	{
84	105	LI0: 'Menta',
85		- CAN: 5
	106	+ CAN: 5,
	107	+ estado: 'pendiente',
86	108	},
87	109	{
88	110	LI0: 'Fernet',
89		- CAN: 5
	111	+ CAN: 5,
	112	+ estado: 'pendiente',
90	113	},
91	114	{
92		- LI0: 'Birra',
93		- CAN: 5
	115	+ LI0: 'Andes',
	116	+ CAN: 5,
	117	+ estado: 'pendiente',
94	118	}
95	119	];
96	120