Marcelo Aiello / gestion-comprobantes

Download as
Browse Code »

Commit 3e5d641314feb6bc6facc2c824de0167a2c1e474

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

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
Diff comments   View file @ 3e5d641
... ... @@ -0,0 +1,61 @@
  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">&laquo;</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">&raquo;</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>
src/app/busqueda-comprobante/busqueda-comprobante.component.scss
Diff comments   View file @ 3e5d641
src/app/busqueda-comprobante/busqueda-comprobante.component.ts
Diff comments   View file @ 3e5d641
... ... @@ -0,0 +1,78 @@
  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 +}
src/app/busqueda-comprobante/busqueda-comprobantes.service.ts
Diff comments   View file @ 3e5d641
... ... @@ -0,0 +1,14 @@
  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 +}
src/app/login/login.component.html
Diff comments   View file @ 3e5d641
... ... @@ -0,0 +1,65 @@
  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>
src/app/login/login.component.scss
Diff comments   View file @ 3e5d641
... ... @@ -0,0 +1,56 @@
  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 +}
src/app/login/login.component.ts
Diff comments   View file @ 3e5d641
... ... @@ -0,0 +1,38 @@
  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 +}
src/app/login/login.service.ts
Diff comments   View file @ 3e5d641
... ... @@ -0,0 +1,13 @@
  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 +}
src/etc/AppSetings.ts
Diff comments   View file @ 3e5d641
... ... @@ -0,0 +1,3 @@
  1 +export class AppSetings {
  2 + public static END_POINT='http://localhost:6060/gateway-debo';
  3 +}