Marcelo Aiello / gestion-comprobantes

Download as
Browse Code »

Commit 781c8e8aa43e603c70dbf86568ad5eb666be43dc

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

nuevo enfoque, quito paginación, fix guardar, modales abiertos

Showing 5 changed files with 116 additions and 107 deletions   Show diff stats
src/app/app-routing.module.ts
Diff comments   View file @ 781c8e8
1 1 import { NgModule } from '@angular/core';
2   -import { Routes, RouterModule } from '@angular/router';
  2 +import { Routes, RouterModule, Router, NavigationEnd} from '@angular/router';
3 3 import { ComprobantesComponent } from './comprobantes/comprobantes.component';
4 4 import { AppBotonera } from './botonera/botonera.component';
5 5 import { LoginComponent } from './login/login.component';
  6 +import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
6 7  
7 8 const routes: Routes = [
8 9 { path: 'comprobantes', component: ComprobantesComponent, pathMatch: 'full' },
... ... @@ -15,4 +16,13 @@ const routes: Routes = [
15 16 imports: [RouterModule.forRoot(routes)],
16 17 exports: [RouterModule]
17 18 })
18   -export class AppRoutingModule { }
  19 +export class AppRoutingModule {
  20 +
  21 + constructor(private router: Router, private modalService: NgbModal) {
  22 +
  23 + router.events.subscribe(() => {
  24 + modalService.dismissAll();
  25 + })
  26 + }
  27 +
  28 +}
src/app/comprobantes/comprobantes.component.html
Diff comments   View file @ 781c8e8
1 1 <div class="row panel-informativo">
2 2 <div class="col-12">
3 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
  5 + class="col-12 col-sm numero-pedido text-center text-md-left border border-white align-middle ng-binding ng-scope">
5 6 Recepción
6   - <button
7   - class="btn btn-xs btn-outline-light float-right"
8   - type="button"
9   - (click)="busquedaComprobantes()"
10   - title="Buscar"
11   - >
12   - <i class="fa fa-search"></i>
  7 + <button class="btn btn-xs btn-outline-light float-right" type="button" (click)="busquedaComprobantes()"
  8 + title="Buscar">
  9 + <i class="fa fa-search"></i>
13 10 </button>
14 11 </div>
15 12 <div class="col-7 col-sm border border-white align-middle">
16 13 Fecha:
17   - <span
18   - ng-click="datepickerAbierto = true"
19   - >&nbsp;{{ fecha | date: 'dd/MM/yyyy' }}</span>
  14 + <span ng-click="datepickerAbierto = true">&nbsp;{{ fecha | date: 'dd/MM/yyyy' }}</span>
20 15 </div>
21 16 <div class="col-5 col-sm border border-white border-right-0 align-middle">
22 17 Hora:
23   - <span
24   - ng-click="datepickerAbierto = true"
25   - >&nbsp;{{ fecha | date: 'shortTime'}}</span>
  18 + <span ng-click="datepickerAbierto = true">&nbsp;{{ fecha | date: 'shortTime'}}</span>
26 19 </div>
27 20 </div>
28 21 </div>
29 22 </div>
30 23 <div class="row">
31 24 <form class="col-12 col-sm-10">
32   - <div class="row border">
  25 + <div class="row border" *ngIf="showCabecera">
33 26 <div class="col-6 col-sm-3 d-flex">
34 27 <strong>Letra Factura:&nbsp;</strong>
35 28 <label>{{cabecera['TIP']}}</label>
... ... @@ -55,82 +48,77 @@
55 48 <label>{{cabecera['NOM']}}</label>
56 49 </div>
57 50 </div>
58   - <div class="row border pr-2">
59   - <div class="col-4">
60   - <button
61   - type="button"
62   - class="btn btn-outline-secondary btn-sm"
63   - [ngClass]="{'active': estadoArticulos == 'pendiente'}"
64   - (click)="estadoArticulos = 'pendiente'; paginaActiva = 1; filter = '';">
65   - Pendientes&nbsp;({{getCantidadArticulosByEstado('pendiente')}})
  51 + <div>
  52 + <button type="button" class="btn btn-dark form-control" (click)="showCabecera = !showCabecera">
  53 + <i class="fa" [ngClass]="{'fa-chevron-down': !showCabecera, 'fa-chevron-up': showCabecera }"></i>
66 54 </button>
67 55 </div>
68   - <div class="col-4">
69   - <button
70   - type="button"
71   - class="btn btn-outline-success btn-sm"
72   - [ngClass]="{'active': estadoArticulos == 'aprobado'}"
73   - (click)="estadoArticulos = 'aprobado'; paginaActiva = 1; filter = '';">
74   - Aprobados&nbsp;({{getCantidadArticulosByEstado('aprobado')}})
75   - </button>
  56 + <div class="row border pr-2">
  57 + <div class="col-6">
  58 + <button type="button" class="btn btn-outline-success btn-sm"
  59 + [ngClass]="{'active': estadoArticulos == 'modificado'}"
  60 + (click)="estadoArticulos == 'modificado' ? estadoArticulos = undefined : estadoArticulos = 'modificado'; filter = '';">
  61 + Modificados&nbsp;({{getCantidadArticulosByEstado('modificado')}})
  62 + </button>
  63 + </div>
  64 + <div class="col-6">
  65 + <button type="button" class="btn btn-outline-danger btn-sm"
  66 + [ngClass]="{'active': estadoArticulos == 'rechazado'}"
  67 + (click)="estadoArticulos == 'rechazado' ? estadoArticulos = undefined : estadoArticulos = 'rechazado'; filter = '';">
  68 + Rechazados&nbsp;({{getCantidadArticulosByEstado('rechazado')}})
  69 + </button>
  70 + </div>
76 71 </div>
77   - <div class="col-4">
78   - <button
79   - type="button"
80   - class="btn btn-outline-danger btn-sm"
81   - [ngClass]="{'active': estadoArticulos == 'rechazado'}"
82   - (click)="estadoArticulos = 'rechazado'; paginaActiva = 1; filter = '';">
83   - Rechazados&nbsp;({{getCantidadArticulosByEstado('rechazado')}})
84   - </button>
85   - </div>
86   -</div>
87   -<div class="row">
88   - <input
89   - type="text"
90   - class="form-control-sm col-12"
91   - placeholder="Busque producto por nombre, codigo"
92   - [(ngModel)]="filter"
93   - [ngModelOptions]="{standalone: true}"/>
  72 + <div class="row">
  73 + <input type="text" class="form-control-sm col-12" placeholder="Busque producto por nombre, codigo"
  74 + [(ngModel)]="filter" [ngModelOptions]="{standalone: true}" />
94 75 </div>
95 76 <div class="row">
96 77 <table class="table table-dark">
97 78 <thead>
98 79 <tr>
99   - <th *ngIf="estadoArticulos != 'rechazado'">Rechazar</th>
100 80 <th>Producto</th>
101 81 <th>Cantidad</th>
102   - <th *ngIf="estadoArticulos != 'aprobado'">Aceptar</th>
  82 + <th></th>
103 83 </tr>
104 84 </thead>
105   - <tbody>
106   - <tr *ngFor="let articulo of getPaginaFiltro()" [ngClass]="{'bg-success': articulo.estado == 'aprobado'}">
107   - <th *ngIf="estadoArticulos != 'rechazado'"><button type="button" class="" (click)="articulo.estado = 'rechazado'">
108   - <i class="fa fa-window-close"></i>
109   - </button></th>
110   - <th>{{articulo.TIO}}</th>
111   - <th *ngIf="!articulo.input" (click)="articulo.input = true">
112   - {{articulo.recibido ? articulo.recibido + '/' : ''}}{{articulo.CAN}}</th>
113   - <th *ngIf="articulo.input">
114   - <input
115   - class="form-control-sm col-12"
  85 + <tbody class="scroll-tabla w-100 mb-5">
  86 + <tr *ngFor="let articulo of getPaginaFiltro();" class="row mx-0" [ngClass]="{'bg-danger': articulo.estado == 'rechazado'}">
  87 + <td class="col-5">{{articulo.TIO.trim() || articulo.LI0}}</td>
  88 + <td
  89 + class="col-5"
  90 + *ngIf="!articulo.input"
  91 + (click)="articulo.estado != 'rechazado' ? articulo.input = true : false"
  92 + >
  93 + {{articulo.recibido ? articulo.recibido + '/' : ''}}{{articulo.CAN}}
  94 + </td>
  95 + <td *ngIf="articulo.input" class="col-5">
  96 + <input
  97 + class="form-control-sm col-10"
116 98 type="number"
117   - (keyup.enter)="articulo.input = false"
118   - [(ngModel)]="articulo.recibido"
119   - [ngModelOptions]="{standalone: true}"
120   - autofocus/>
121   - /{{articulo.CAN}}
122   - </th>
123   - <th *ngIf="estadoArticulos != 'aprobado'">
124   - <button type="button" class="" (click)="articulo.estado = 'aprobado'">
125   - <i class="fa fa-check"></i>
126   - </button>
127   - </th>
128   - </tr>
129   - <tr>
130   - <th colspan="3" *ngIf="articulosFiltro.length == 0">Por el momento no hay elementos aquí</th>
131   - </tr>
132   - </tbody>
133   - <tfoot>
  99 + (focus)="$event.target.select();"
  100 + (keyup.enter)="articulo.input = false; articulo.recibido = articulo.tempRecibido"
  101 + [(ngModel)]="articulo.tempRecibido"
  102 + [ngModelOptions]="{standalone: true}" autofocus/>
  103 + /{{articulo.CAN}}
  104 + </td>
  105 + <td class="col-2" *ngIf="articulo.estado != 'rechazado'">
  106 + <button type="button"
  107 + (click)="articulo.estado = 'rechazado'">
  108 + <i class="fa fa-window-close"></i>
  109 + </button>
  110 + </td>
  111 + <td class="col-2" *ngIf="articulo.estado == 'rechazado'">
  112 + <button type="button" (click)="articulo.estado = undefined">
  113 + <i class="fa fa-check"></i>
  114 + </button>
  115 + </td>
  116 + </tr>
  117 + <tr>
  118 + <th colspan="3" *ngIf="articulosFiltro.length == 0">Por el momento no hay elementos aquí</th>
  119 + </tr>
  120 + </tbody>
  121 + <!-- <tfoot>
134 122 <nav *ngIf="articulosFiltro.length > 0" class="mr-auto position-absolute mb-5">
135 123 <ul class="pagination pagination-sm justify-content mb-0">
136 124 <li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}">
... ... @@ -158,9 +146,9 @@
158 146 </li>
159 147 </ul>
160 148 </nav>
161   - </tfoot>
  149 + </tfoot> -->
162 150 </table>
163 151 </div>
164 152 </form>
165 153 <app-acciones (guardar)="guardarComprobante()" [(saveLoading)]="saveLoading"></app-acciones>
166 154 -</div>
  155 +</div>
167 156 \ No newline at end of file
src/app/comprobantes/comprobantes.component.scss
Diff comments   View file @ 781c8e8
... ... @@ -53,4 +53,11 @@
53 53 border-top: 2px solid #FFF !important;
54 54 }
55 55 }
56   -}
57 56 \ No newline at end of file
  57 +}
  58 +
  59 +.scroll-tabla {
  60 + position: absolute;
  61 + max-height: 200%;
  62 + overflow: auto;
  63 + background-color: #343a40;
  64 +}
src/app/comprobantes/comprobantes.component.ts
Diff comments   View file @ 781c8e8
... ... @@ -19,37 +19,32 @@ export class ComprobantesComponent implements OnInit {
19 19 ngOnInit() { }
20 20  
21 21 filter = '';
22   - estadoArticulos = 'pendiente';
23   - comprobantes = [1, 2, 3];
  22 + estadoArticulos : string;
  23 + tempRecibido = [];
24 24 cabecera = {};
25 25 cuerpo = [];
26 26 articulosFiltro = [];
27   - paginaActiva = 1;
28   - paginas = [];
29 27 saveLoading = false;
  28 + showCabecera = true;
30 29  
31 30 fecha = new Date();
32 31  
33   - paginar() {
34   -
35   - var cantPaginas = Math.ceil(this.articulosFiltro.length / 5);
36   - this.paginas = [];
37   - for (let i = 0; i < cantPaginas; i++) {
38   - this.paginas.push(i + 1);
39   - }
40   - }
41   -
42 32 getPaginaFiltro() {
43 33  
44 34 this.articulosFiltro = this.cuerpo.filter((articulo) => {
45   - return articulo.estado == this.estadoArticulos &&
46   - (articulo.TIO.toLocaleUpperCase().includes(this.filter.toLocaleUpperCase()) ||
47   - articulo.codigoBarras == this.filter);
48   - });
49 35  
50   - this.paginar();
  36 + var tio = articulo.TIO.trim().toLocaleUpperCase().includes(this.filter.toLocaleUpperCase());
  37 + var lio = articulo.LI0.trim().toLocaleUpperCase().includes(this.filter.toLocaleUpperCase());
  38 + var codigoBarras = articulo.codigoBarras == this.filter;
  39 +
  40 + articulo.recibido && !articulo.estado ? articulo.estado = 'modificado' : false;
  41 +
  42 + var estado = articulo.estado == this.estadoArticulos;
  43 +
  44 + return (tio || lio || codigoBarras) && estado;
  45 + });
51 46  
52   - return this.articulosFiltro.slice((this.paginaActiva - 1) * 5 , this.paginaActiva * 5);
  47 + return this.articulosFiltro;
53 48 }
54 49  
55 50 getCantidadArticulosByEstado(estado: String) {
... ... @@ -62,15 +57,28 @@ export class ComprobantesComponent implements OnInit {
62 57  
63 58 if (this.getCantidadArticulosByEstado('pendiente')) {
64 59 alert('No deben quedar articulos pendientes');
  60 + return;
65 61 }
66 62  
  63 + if (!this.cuerpo.length) {
  64 + alert('Debe seleccionar un comprobante');
  65 + return;
  66 + }
  67 +
  68 + this.saveLoading = true;
  69 +
67 70 this.comprobanteService
68 71 .saveComprobantes({cabecera: this.cabecera, cuerpo: this.cuerpo})
69 72 .subscribe(data => {
  73 +
70 74 alert('Comprobante guardado con éxito');
  75 + this.saveLoading = false;
71 76 this.router.navigateByUrl('/home');
  77 +
72 78 }, err => {
  79 +
73 80 alert('Algo salió mal');
  81 + this.saveLoading = false;
74 82 console.log(err);
75 83 });
76 84 }
... ... @@ -81,10 +89,6 @@ export class ComprobantesComponent implements OnInit {
81 89 this.cabecera = comprobante.cabecera;
82 90 this.cuerpo = comprobante.cuerpo;
83 91  
84   - this.cuerpo.forEach(articulo => {
85   - articulo['estado'] = 'pendiente';
86   - });
87   -
88 92 this.getPaginaFiltro();
89 93 }, (reason) => { });
90 94 }
src/etc/AppSetings.ts
Diff comments   View file @ 781c8e8
1 1 export class AppSetings {
2   - public static END_POINT='http://10.231.45.234:6060/gateway-debo';
  2 + public static END_POINT='http://localhost:6060/gateway-debo';
3 3 }