Marcelo Aiello / gestion-comprobantes

Download as
Browse Code »

Commit ab1def30d4b47c2f3928e40e5bd5d76233ab8383

Authored by Eric Fernandez
1 parent a361ae9bc1
Exists in master and in 1 other branch fec14082020_1215

pendiente, aprobados, rechazados

Showing 2 changed files with 82 additions and 25 deletions   Show diff stats
src/app/comprobantes/comprobantes.component.html
Diff comments   View file @ ab1def3
1 <div class="row panel-informativo"> 1 <div class="row panel-informativo">
2 <div class="col-12"> 2 <div class="col-12">
3 <div class="row titulares"> 3 <div class="row titulares">
4 <div class="col-12 col-sm numero-pedido text-center text-md-left border border-white align-middle ng-binding ng-scope"> 4 <div class="col-12 col-sm numero-pedido text-center text-md-left border border-white align-middle ng-binding ng-scope">
5 Recepción 5 Recepción
6 <button 6 <button
7 class="btn btn-xs btn-outline-light float-right" 7 class="btn btn-xs btn-outline-light float-right"
8 type="button" 8 type="button"
9 ng-click="$ctrl.busqueda()" 9 ng-click="$ctrl.busqueda()"
10 ng-if="$ctrl.busqueda" 10 ng-if="$ctrl.busqueda"
11 title="Buscar" 11 title="Buscar"
12 > 12 >
13 <i class="fa fa-search"></i> 13 <i class="fa fa-search"></i>
14 </button> 14 </button>
15 </div> 15 </div>
16 <div class="col-7 col-sm border border-white align-middle"> 16 <div class="col-7 col-sm border border-white align-middle">
17 Fecha: 17 Fecha:
18 <span 18 <span
19 ng-click="datepickerAbierto = true" 19 ng-click="datepickerAbierto = true"
20 >&nbsp;{{ fecha | date: 'dd/MM/yyyy' }}</span> 20 >&nbsp;{{ fecha | date: 'dd/MM/yyyy' }}</span>
21 </div> 21 </div>
22 <div class="col-5 col-sm border border-white border-right-0 align-middle"> 22 <div class="col-5 col-sm border border-white border-right-0 align-middle">
23 Hora: 23 Hora:
24 <span 24 <span
25 ng-click="datepickerAbierto = true" 25 ng-click="datepickerAbierto = true"
26 >&nbsp;{{ fecha | date: 'shortTime'}}</span> 26 >&nbsp;{{ fecha | date: 'shortTime'}}</span>
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 31
32 <form> 32 <form>
33 <div class="row border"> 33 <div class="row border">
34 <div class="col-6 col-sm-3 d-flex"> 34 <div class="col-6 col-sm-3 d-flex">
35 <strong>Letra Factura:&nbsp;</strong> 35 <strong>Letra Factura:&nbsp;</strong>
36 <label>{{cabecera.TIP}}</label> 36 <label>{{cabecera.TIP}}</label>
37 </div> 37 </div>
38 <div class="col-6 col-sm-3 d-flex"> 38 <div class="col-6 col-sm-3 d-flex">
39 <strong>Tipo Factura:&nbsp;</strong> 39 <strong>Tipo Factura:&nbsp;</strong>
40 <label>{{cabecera.TCO}}</label> 40 <label>{{cabecera.TCO}}</label>
41 </div> 41 </div>
42 <div class="col-6 col-sm-3 d-flex"> 42 <div class="col-6 col-sm-3 d-flex">
43 <strong>Sucursal:&nbsp;</strong> 43 <strong>Sucursal:&nbsp;</strong>
44 <label>{{cabecera.SUC}}</label> 44 <label>{{cabecera.SUC}}</label>
45 </div> 45 </div>
46 <div class="col-6 col-sm-3 d-flex"> 46 <div class="col-6 col-sm-3 d-flex">
47 <strong>Número:&nbsp;</strong> 47 <strong>Número:&nbsp;</strong>
48 <label>{{cabecera.NCO}}</label> 48 <label>{{cabecera.NCO}}</label>
49 </div> 49 </div>
50 <div class="col-6 col-sm-3 d-flex"> 50 <div class="col-6 col-sm-3 d-flex">
51 <strong>Cuit:&nbsp;</strong> 51 <strong>Cuit:&nbsp;</strong>
52 <label>{{cabecera.CUI}}</label> 52 <label>{{cabecera.CUI}}</label>
53 </div> 53 </div>
54 <div class="col-12 col-sm-3 d-flex"> 54 <div class="col-12 col-sm-3 d-flex">
55 <strong>Nombre:&nbsp;</strong> 55 <strong>Nombre:&nbsp;</strong>
56 <label>{{cabecera.NOM}}</label> 56 <label>{{cabecera.NOM}}</label>
57 </div> 57 </div>
58 </div> 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&nbsp;({{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&nbsp;({{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&nbsp;({{getCantidadArticulosByEstado('rechazado')}})
85 </button>
86 </div>
87 </div>
59 <div class="row"> 88 <div class="row">
60 <input 89 <input
61 type="text" 90 type="text"
62 class="form-control-sm col-12" 91 class="form-control-sm col-12"
63 placeholder="Busque producto por nombre, codigo" 92 placeholder="Busque producto por nombre, codigo"
64 (keyup)="filtrar($event)"/> 93 [(ngModel)]="filter"
94 [ngModelOptions]="{standalone: true}"/>
65 </div> 95 </div>
66 <div class="row"> 96 <div class="row">
67 <table class="table table-dark"> 97 <table class="table table-dark">
68 <thead> 98 <thead>
69 <tr> 99 <tr>
70 <th>Rechazar</th> 100 <th *ngIf="estadoArticulos != 'rechazado'">Rechazar</th>
71 <th>Producto</th> 101 <th>Producto</th>
72 <th>Cantidad</th> 102 <th>Cantidad</th>
73 <th>Aceptar</th> 103 <th *ngIf="estadoArticulos != 'aprobado'">Aceptar</th>
74 </tr> 104 </tr>
75 </thead> 105 </thead>
76 <tbody> 106 <tbody>
77 <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.done}"> 107 <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.estado == 'aprobado'}">
78 <th><button type="button" class="" (click)="articulo.input = true"> 108 <th *ngIf="estadoArticulos != 'rechazado'"><button type="button" class="" (click)="articulo.estado = 'rechazado'">
79 <i class="fa fa-window-close"></i> 109 <i class="fa fa-window-close"></i>
80 </button></th> 110 </button></th>
81 <th>{{articulo.LI0}}</th> 111 <th>{{articulo.LI0}}</th>
82 <th *ngIf="!articulo.input">{{articulo.CAN}}/{{articulo.CAN}}</th> 112 <th *ngIf="!articulo.input">{{articulo.CAN}}/{{articulo.CAN}}</th>
83 <th *ngIf="articulo.input"> 113 <th *ngIf="articulo.input">
84 <input class="form-control-sm col-12"/> 114 <input class="form-control-sm col-12"/>
85 </th> 115 </th>
86 <th> 116 <th *ngIf="estadoArticulos != 'aprobado'">
87 <button type="button" class="" (click)="articulo.done = true"> 117 <button type="button" class="" (click)="articulo.estado = 'aprobado'">
88 <i class="fa fa-check"></i> 118 <i class="fa fa-check"></i>
89 </button> 119 </button>
90 </th> 120 </th>
91 </tr> 121 </tr>
122 <tr>
123 <th colspan="3" *ngIf="articulosFiltro.length == 0">Por el momento no hay elementos aquí</th>
124 </tr>
92 </tbody> 125 </tbody>
93 <tfoot> 126 <tfoot>
94 <nav *ngIf="articulosFiltro.length > 0" class="mr-auto"> 127 <nav *ngIf="articulosFiltro.length > 0" class="mr-auto position-absolute">
95 <ul class="pagination pagination-sm justify-content mb-0"> 128 <ul class="pagination pagination-sm justify-content mb-0">
96 <li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}"> 129 <li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}">
97 <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva - 1"> 130 <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva - 1">
98 <span aria-hidden="true">&laquo;</span> 131 <span aria-hidden="true">&laquo;</span>
99 <span class="sr-only">Anterior</span> 132 <span class="sr-only">Anterior</span>
100 </a> 133 </a>
101 </li> 134 </li>
102 <li 135 <li
103 class="page-item" 136 class="page-item"
104 *ngFor="let pagina of paginas; index as i" 137 *ngFor="let pagina of paginas; index as i"
105 [ngClass]="{'active': pagina == paginaActiva}" 138 [ngClass]="{'active': pagina == paginaActiva}"
106 > 139 >
107 <a 140 <a
108 class="page-link" 141 class="page-link"
109 href="javascript:void();" 142 href="javascript:void();"
110 (click)="paginaActiva = pagina" 143 (click)="paginaActiva = pagina"
111 >{{pagina}}</a> 144 >{{pagina}}</a>
112 </li> 145 </li>
113 <li class="page-item" [ngClass]="{'disabled': paginaActiva == paginas.length}"> 146 <li class="page-item" [ngClass]="{'disabled': paginaActiva == paginas.length}">
114 <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva + 1"> 147 <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva + 1">
115 <span aria-hidden="true">&raquo;</span> 148 <span aria-hidden="true">&raquo;</span>
116 <span class="sr-only">Siguiente</span> 149 <span class="sr-only">Siguiente</span>
117 </a> 150 </a>
118 </li> 151 </li>
119 </ul> 152 </ul>
120 </nav> 153 </nav>
121 </tfoot> 154 </tfoot>
122 </table> 155 </table>
123 </div> 156 </div>
124 </form> 157 </form>
125 158
src/app/comprobantes/comprobantes.component.ts
Diff comments   View file @ ab1def3
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit} from '@angular/core';
2 2
3 @Component({ 3 @Component({
4 selector: 'app-comprobantes',
5 templateUrl: './comprobantes.component.html', 4 templateUrl: './comprobantes.component.html',
6 styleUrls: ['./comprobantes.component.scss'] 5 styleUrls: ['./comprobantes.component.scss']
7 }) 6 })
8 export class ComprobantesComponent implements OnInit { 7 export class ComprobantesComponent implements OnInit {
9 8
10 constructor() { } 9 constructor() { }
11 10
12 ngOnInit() { 11 ngOnInit() {
13 12
14 this.obtenerConsulta(); 13 this.obtenerConsulta();
15 } 14 }
16 15
17 filter = ''; 16 filter = '';
17 estadoArticulos = 'pendiente';
18 comprobantes = [1, 2, 3]; 18 comprobantes = [1, 2, 3];
19 cabecera = {}; 19 cabecera = {};
20 cuerpo = []; 20 cuerpo = [];
21 articulosFiltro = []; 21 articulosFiltro = [];
22 paginaActiva = 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 this.articulosFiltro = this.cuerpo.filter((param)=> { 28 this.articulosFiltro = this.cuerpo.filter((param)=> {
29 return (param.LI0).toLocaleUpperCase().includes( 29 return
30 (event.target.value).toLocaleUpperCase()) ||
31 param.codigoBarras == event.target.value;
32 }); 30 });
33 31
34 this.paginar(); 32 this.paginar();
35 } 33 }
36 34
37 paginar() { 35 paginar() {
38 36
39 var cantPaginas = Math.round(this.articulosFiltro.length / 5) + 1; 37 var cantPaginas = Math.ceil(this.articulosFiltro.length / 5);
40 this.paginas = []; 38 this.paginas = [];
41 for (let i = 0; i < cantPaginas; i++) { 39 for (let i = 0; i < cantPaginas; i++) {
42 this.paginas.push(i + 1); 40 this.paginas.push(i + 1);
43 } 41 }
44 } 42 }
45 43
46 getPaginaFiltro() { 44 getPaginaFiltro() {
47 return this.articulosFiltro.slice( 45
48 (this.paginaActiva - 1) * 5 , this.paginaActiva * 5); 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 obtenerConsulta() { 63 obtenerConsulta() {
52 64
53 setTimeout(() => { 65 setTimeout(() => {
54 this.cabecera = { 66 this.cabecera = {
55 TIP: 'A', 67 TIP: 'A',
56 TCO: 'FT', 68 TCO: 'FT',
57 SUC: 623, 69 SUC: 623,
58 NCO: 53979, 70 NCO: 53979,
59 COD: 1, 71 COD: 1,
60 FEC: new Date(), 72 FEC: new Date(),
61 NOM: 'POTIGIAN GOLOCINAS', 73 NOM: 'POTIGIAN GOLOCINAS',
62 CUI: '30-54775125-2' 74 CUI: '30-54775125-2'
63 }; 75 };
64 76
65 this.cuerpo = [ 77 this.cuerpo = [
66 { 78 {
67 LI0: 'Mantel Combo Bolso CocaCola', 79 LI0: 'Mantel Combo Bolso CocaCola',
68 CAN: 5, 80 CAN: 5,
81 estado: 'pendiente',
69 codigoBarras: '7790667006462' 82 codigoBarras: '7790667006462'
70 }, 83 },
71 { 84 {
72 LI0: 'Papas', 85 LI0: 'Papas',
73 CAN: 5 86 CAN: 5,
87 estado: 'pendiente',
74 }, 88 },
75 { 89 {
76 LI0: 'Peras', 90 LI0: 'Peras',
77 CAN: 5 91 CAN: 5,
92 estado: 'pendiente',
78 }, 93 },
79 { 94 {
80 LI0: 'Cafe', 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 LI0: 'Menta', 105 LI0: 'Menta',
85 CAN: 5 106 CAN: 5,
107 estado: 'pendiente',
86 }, 108 },
87 { 109 {
88 LI0: 'Fernet', 110 LI0: 'Fernet',
89 CAN: 5 111 CAN: 5,
112 estado: 'pendiente',
90 }, 113 },
91 { 114 {
92 LI0: 'Birra', 115 LI0: 'Andes',
93 CAN: 5 116 CAN: 5,
117 estado: 'pendiente',
94 } 118 }
95 ]; 119 ];
96 120
97 this.articulosFiltro = this.cuerpo; 121 this.articulosFiltro = this.cuerpo;
98 122
99 this.paginar(); 123 this.paginar();
100 }, 500); 124 }, 500);
101 } 125 }