Commit 3e5d641314feb6bc6facc2c824de0167a2c1e474
1 parent
fd60509b5d
Exists in
master
and in
1 other branch
paginación cbusqueda comprobantes
Showing
9 changed files
with
328 additions
and
0 deletions
Show diff stats
src/app/busqueda-comprobante/busqueda-comprobante.component.html
File was created | 1 | <div class="modal-header py-1"> | |
2 | <div class="row w-100"> | ||
3 | <div class="col-lg-6"> | ||
4 | <h5 class="modal-title">Búsqueda de Comprobantes</h5> | ||
5 | </div> | ||
6 | </div> | ||
7 | </div> | ||
8 | <div class="modal-body d-flex" id="modal-body"> | ||
9 | <table class="table table-striped table-sm"> | ||
10 | <thead> | ||
11 | <tr> | ||
12 | <th>Comprobante</th> | ||
13 | <th>Items</th> | ||
14 | <th></th> | ||
15 | </tr> | ||
16 | </thead> | ||
17 | <tbody> | ||
18 | <tr *ngFor="let comprobante of getPaginaFiltro()"> | ||
19 | <td> | ||
20 | {{comprobante.cabecera.TCO + '-' + comprobante.cabecera.TIP + '-' + rellenar(4, comprobante.cabecera.SUC) + '-' + rellenar(8, comprobante.cabecera.NCO)}} | ||
21 | </td> | ||
22 | <td>{{comprobante.cuerpo.length}}</td> | ||
23 | <td> | ||
24 | <button type="button" class="btn btn-xs p-1 float-right btn-primary" (click)="selectItem(comprobante)"> | ||
25 | <i class="fa fa-circle-thin" aria-hidden="true"></i> | ||
26 | </button> | ||
27 | </td> | ||
28 | </tr> | ||
29 | </tbody> | ||
30 | </table> | ||
31 | </div> | ||
32 | <div class="modal-footer py-1"> | ||
33 | <nav *ngIf="comprobantes.length > 0" class="mr-auto mb-5"> | ||
34 | <ul class="pagination pagination-sm justify-content mb-0"> | ||
35 | <li class="page-item" [ngClass]="{'disabled': paginaActiva == 1}"> | ||
36 | <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva - 1"> | ||
37 | <span aria-hidden="true">«</span> | ||
38 | <span class="sr-only">Anterior</span> | ||
39 | </a> | ||
40 | </li> | ||
41 | <li | ||
42 | class="page-item" | ||
43 | *ngFor="let pagina of paginas; index as i" | ||
44 | [ngClass]="{'active': pagina == paginaActiva}" | ||
45 | > | ||
46 | <a | ||
47 | class="page-link" | ||
48 | href="javascript:void();" | ||
49 | (click)="paginaActiva = pagina" | ||
50 | >{{pagina}}</a> | ||
51 | </li> | ||
52 | <li class="page-item" [ngClass]="{'disabled': paginaActiva == paginas.length}"> | ||
53 | <a class="page-link" href="javascript:void();" (click)="paginaActiva = paginaActiva + 1"> | ||
54 | <span aria-hidden="true">»</span> | ||
55 | <span class="sr-only">Siguiente</span> | ||
56 | </a> | ||
57 | </li> | ||
58 | </ul> | ||
59 | </nav> | ||
60 | <button class="btn btn-sm btn-secondary" type="button" (click)="close()">Cerrar</button> | ||
61 | </div> | ||
62 |
src/app/busqueda-comprobante/busqueda-comprobante.component.scss
src/app/busqueda-comprobante/busqueda-comprobante.component.ts
File was created | 1 | import { Component, OnInit} from '@angular/core'; | |
2 | import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; | ||
3 | import { BusquedaComprobantesService } from './busqueda-comprobantes.service'; | ||
4 | |||
5 | @Component({ | ||
6 | templateUrl: './busqueda-comprobante.component.html', | ||
7 | styleUrls: ['./busqueda-comprobante.component.scss'], | ||
8 | providers: [BusquedaComprobantesService] | ||
9 | }) | ||
10 | export class BusquedaComprobanteComponent implements OnInit { | ||
11 | |||
12 | comprobantes: Array<Object> = []; | ||
13 | paginaActiva = 1; | ||
14 | paginas = []; | ||
15 | cantidadPorPagina = 10; | ||
16 | |||
17 | constructor(public activeModal: NgbActiveModal, public comprobanteService: BusquedaComprobantesService) { } | ||
18 | |||
19 | ngOnInit() { | ||
20 | this.comprobanteService.getComprobantes().subscribe((data: Array<Object>) => { | ||
21 | this.comprobantes = data; | ||
22 | this.comprobantes.push(this.comprobantes[0]); | ||
23 | this.comprobantes.push(this.comprobantes[1]); | ||
24 | this.comprobantes.push(this.comprobantes[0]); | ||
25 | this.comprobantes.push(this.comprobantes[1]); | ||
26 | this.comprobantes.push(this.comprobantes[0]); | ||
27 | this.comprobantes.push(this.comprobantes[1]); | ||
28 | this.comprobantes.push(this.comprobantes[0]); | ||
29 | this.comprobantes.push(this.comprobantes[1]); | ||
30 | this.comprobantes.push(this.comprobantes[0]); | ||
31 | this.comprobantes.push(this.comprobantes[1]); | ||
32 | this.comprobantes.push(this.comprobantes[0]); | ||
33 | this.comprobantes.push(this.comprobantes[1]); | ||
34 | this.comprobantes.push(this.comprobantes[0]); | ||
35 | this.comprobantes.push(this.comprobantes[1]); | ||
36 | this.comprobantes.push(this.comprobantes[0]); | ||
37 | this.comprobantes.push(this.comprobantes[1]); | ||
38 | this.paginar(); | ||
39 | }); | ||
40 | } | ||
41 | |||
42 | getPaginaFiltro() { | ||
43 | return this.comprobantes.slice((this.paginaActiva - 1) * this.cantidadPorPagina, | ||
44 | this.paginaActiva * this.cantidadPorPagina); | ||
45 | } | ||
46 | |||
47 | paginar() { | ||
48 | |||
49 | var cantPaginas = Math.ceil(this.comprobantes.length / this.cantidadPorPagina); | ||
50 | this.paginas = []; | ||
51 | for (let i = 0; i < cantPaginas; i++) { | ||
52 | this.paginas.push(i + 1); | ||
53 | } | ||
54 | } | ||
55 | |||
56 | rellenar(relleno: number, numero: number) { | ||
57 | |||
58 | if (numero.toString().length >= relleno) { | ||
59 | return numero; | ||
60 | } | ||
61 | |||
62 | let rellenar = ''; | ||
63 | |||
64 | for (let i = 0; i < relleno - numero.toString().length; i++) { | ||
65 | rellenar += '0' | ||
66 | } | ||
67 | |||
68 | return rellenar + numero.toString(); | ||
69 | } | ||
70 | |||
71 | close() { | ||
72 | this.activeModal.dismiss(); | ||
73 | } | ||
74 | |||
75 | selectItem(comprobante: object) { | ||
76 | this.activeModal.close(comprobante); | ||
77 | } | ||
78 | } | ||
79 |
src/app/busqueda-comprobante/busqueda-comprobantes.service.ts
File was created | 1 | import { Injectable } from '@angular/core'; | |
2 | import { HttpClient, HttpHeaders } from '@angular/common/http'; | ||
3 | import { AppSetings } from '../../etc/AppSetings'; | ||
4 | |||
5 | @Injectable() | ||
6 | export class BusquedaComprobantesService { | ||
7 | |||
8 | constructor(private http: HttpClient) { | ||
9 | } | ||
10 | |||
11 | getComprobantes() { | ||
12 | return this.http.get(AppSetings.END_POINT + '/comprobantes/' + localStorage.getItem('gln')); | ||
13 | }; | ||
14 | } | ||
15 |
src/app/login/login.component.html
File was created | 1 | <div class="d-flex justify-content-center align-items-center"> | |
2 | <div class="login"> | ||
3 | <form name="login"> | ||
4 | <div class="login-titulo"> | ||
5 | <span>Ingreso de usuario</span> | ||
6 | </div> | ||
7 | <div class="login-campo"> | ||
8 | <label>Usuario</label> | ||
9 | <input | ||
10 | type="text" | ||
11 | [(ngModel)]="usuario.idUsuario" | ||
12 | [ngModelOptions]="{standalone: true}" | ||
13 | ng-keyup="$event.keyCode == 13 && irPaso(2)" | ||
14 | [ladda]="loginLoading" | ||
15 | /> | ||
16 | </div> | ||
17 | <div class="login-campo"> | ||
18 | <label>Contraseña</label> | ||
19 | <input | ||
20 | type="password" | ||
21 | [(ngModel)]="usuario.clave" | ||
22 | [ngModelOptions]="{standalone: true}" | ||
23 | foca-focus="paso == 2" | ||
24 | ng-keyup="$event.keyCode == 13 && enviar()" | ||
25 | [ladda]="loginLoading" | ||
26 | /> | ||
27 | </div> | ||
28 | <div class="d-flex"> | ||
29 | <button | ||
30 | type="button" | ||
31 | class="btn btn-outline-dark mt-3 mr-auto" | ||
32 | (click)="configuracionEstacion = !configuracionEstacion" | ||
33 | [ngClass]="{'active': configuracionEstacion}" | ||
34 | [disabled]="loginLoading" | ||
35 | >Configuración</button> | ||
36 | <button | ||
37 | type="button" | ||
38 | class="btn btn-dark mt-3 ml-auto" | ||
39 | (click)="ingresar()" | ||
40 | [ladda]="loginLoading" | ||
41 | >Ingresar</button> | ||
42 | </div> | ||
43 | <div *ngIf="configuracionEstacion" class="mt-3"> | ||
44 | <strong>Configuración estación</strong> | ||
45 | <br/> | ||
46 | <div> | ||
47 | <label class="justify-content-left">Código estación:</label> | ||
48 | <input | ||
49 | class="form-control" | ||
50 | placeholder="Código estación" | ||
51 | [(ngModel)]="usuario.codigoEntidad" | ||
52 | [ngModelOptions]="{standalone: true}"> | ||
53 | </div> | ||
54 | <div> | ||
55 | <label class="justify-content-left">GLN:</label> | ||
56 | <input | ||
57 | class="form-control" | ||
58 | placeholder="GLN ESTACIÓN" | ||
59 | [(ngModel)]="usuario.gln" | ||
60 | [ngModelOptions]="{standalone: true}"/> | ||
61 | </div> | ||
62 | </div> | ||
63 | </form> | ||
64 | </div> | ||
65 | </div> | ||
66 |
src/app/login/login.component.scss
File was created | 1 | .login { | |
2 | background-color: #bdbdbd; | ||
3 | border: 1px solid #000000; | ||
4 | border-radius: 3px; | ||
5 | height: calc(193px + 1em); | ||
6 | left: calc(50% - 130px); | ||
7 | opacity: 0.7; | ||
8 | text-align: center; | ||
9 | top: 190px; | ||
10 | width: 260px; | ||
11 | margin-top: 3.5rem; | ||
12 | &-titulo { | ||
13 | border-bottom: 1px solid #ffffff; | ||
14 | padding: 5px 0; | ||
15 | } | ||
16 | &-campo { | ||
17 | label { | ||
18 | display: block; | ||
19 | font-size: 12px; | ||
20 | margin: 5px 0 0; | ||
21 | } | ||
22 | input { | ||
23 | -moz-border-radius: 10px; | ||
24 | -khtml-border-radius: 10px; | ||
25 | -webkit-border-radius: 10px; | ||
26 | -webkit-appearance: none; | ||
27 | padding-right: 5%; | ||
28 | padding-left: 5%; | ||
29 | border-radius: 10px; | ||
30 | outline: 0; | ||
31 | border-color: transparent; | ||
32 | &:focus { | ||
33 | border-color: #ff9900; | ||
34 | } | ||
35 | } | ||
36 | } | ||
37 | |||
38 | &-button { | ||
39 | // width: 80%; | ||
40 | background-color: #cd9035; | ||
41 | color: white; | ||
42 | &:hover{ | ||
43 | background-color: #a7743d; | ||
44 | color: white | ||
45 | } | ||
46 | &:focus{ | ||
47 | color: white; | ||
48 | } | ||
49 | } | ||
50 | |||
51 | &-alerta-error { | ||
52 | width: 260px; | ||
53 | left: calc(50% - 130px); | ||
54 | top: calc(383px + 1.5em); | ||
55 | } | ||
56 | } | ||
57 |
src/app/login/login.component.ts
File was created | 1 | import { Component, OnInit } from '@angular/core'; | |
2 | import { LoginService } from './login.service'; | ||
3 | import { Router } from '@angular/router'; | ||
4 | |||
5 | @Component({ | ||
6 | templateUrl: './login.component.html', | ||
7 | styleUrls: ['./login.component.scss'], | ||
8 | providers: [LoginService] | ||
9 | }) | ||
10 | export class LoginComponent implements OnInit { | ||
11 | |||
12 | loginLoading: boolean = false; | ||
13 | usuario: object = {}; | ||
14 | |||
15 | constructor(private loginService: LoginService, private router: Router) { } | ||
16 | |||
17 | ngOnInit() { | ||
18 | |||
19 | let glnPrevius = localStorage.getItem('gln') | ||
20 | if (glnPrevius) { | ||
21 | this.usuario['gln'] = glnPrevius; | ||
22 | } | ||
23 | } | ||
24 | |||
25 | ingresar() { | ||
26 | |||
27 | this.loginLoading = true; | ||
28 | this.loginService.getLogin(this.usuario).subscribe(login => { | ||
29 | if(login['data'] == 'ok') { | ||
30 | localStorage.setItem('gln', this.usuario['gln']) | ||
31 | this.router.navigateByUrl('/home'); | ||
32 | } else { | ||
33 | alert('No se encontró la estación'); | ||
34 | this.loginLoading = false; | ||
35 | } | ||
36 | }); | ||
37 | } | ||
38 | } | ||
39 |
src/app/login/login.service.ts
File was created | 1 | import { Injectable } from '@angular/core'; | |
2 | import { HttpClient, HttpHeaders } from '@angular/common/http'; | ||
3 | import { AppSetings } from '../../etc/AppSetings'; | ||
4 | |||
5 | @Injectable() | ||
6 | export class LoginService { | ||
7 | |||
8 | constructor(private http: HttpClient) { } | ||
9 | |||
10 | getLogin(json: object) { | ||
11 | return this.http.post(AppSetings.END_POINT + '/login', json); | ||
12 | }; | ||
13 | } | ||
14 |
src/etc/AppSetings.ts
File was created | 1 | export class AppSetings { | |
2 | public static END_POINT='http://localhost:6060/gateway-debo'; | ||
3 | } | ||
4 |