Mauricio Cattafi / autoservicio

Download as
Browse Code »

Commit 8260928b08e040458bbde61396e7e711a2f84d47

Authored by Marcelo Puebla
1 parent 6a61f21a9e
Exists in master and in 1 other branch validar_pve

agregadas validaciones a los inpus

Showing 2 changed files with 83 additions and 23 deletions   Show diff stats
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.html
Diff comments   View file @ 8260928
1 <div class="modal-header p-2"> 1 <div class="modal-header p-2">
2 <div class="row m-0 w-100"> 2 <div class="row m-0 w-100">
3 <div class="col"> 3 <div class="col">
4 <span class="h4 m-0">Pago con tarjeta</span> 4 <span class="h4 m-0">Pago con tarjeta</span>
5 </div> 5 </div>
6 </div> 6 </div>
7 </div> 7 </div>
8 8
9 <div class="modal-body" id="modal-body"> 9 <div class="modal-body" id="modal-body">
10 <!-- TARJETAS -->
10 <div class="w-75 mx-auto card-columns"> 11 <div class="w-75 mx-auto card-columns">
11 <div 12 <div
12 class="card card-effect shadow-sm rounded-sm" 13 class="card card-effect shadow-sm rounded-sm"
13 *ngFor="let tarjeta of tarjetas"
14 [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}" 14 [ngClass]="{'active': tarjetaSeleccionada && tarjetaSeleccionada.ID === tarjeta.ID}"
15 (click)="seleccionarTarjeta(tarjeta)"> 15 (click)="seleccionarTarjeta(tarjeta)"
16 *ngFor="let tarjeta of tarjetas">
16 <img 17 <img
17 class="w-100 p-1" 18 class="w-100 p-1"
18 src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}"> 19 src="../../../assets/img/{{tarjeta.nombreImagen ? tarjeta.nombreImagen : 'generica.png'}}">
19 </div> 20 </div>
20 </div> 21 </div>
22 <!-- FORMULARIO -->
21 <div class="border-top w-75 mx-auto" *ngIf="showForm"> 23 <div class="border-top w-75 mx-auto" *ngIf="showForm">
22 <div class="row mt-2 fade-in"> 24 <div class="row mt-2 fade-in">
23 <form class="col"> 25 <form [formGroup]="form" class="col" novalidate>
24 <div class="row py-3"> 26 <!-- TARJETA SELECCIONADA -->
27 <div class="row py-2">
25 <div class="col-auto pr-1"> 28 <div class="col-auto pr-1">
26 <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span> 29 <span class="font-weight-bold">{{tarjetaSeleccionada.ID}}</span>
27 </div> 30 </div>
28 <div class="col-auto pl-2"> 31 <div class="col-auto pl-2">
29 <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span> 32 <span class="font-weight-bold">{{tarjetaSeleccionada.NOM}}</span>
30 </div> 33 </div>
31 </div> 34 </div>
32 <div class="row pb-3"> 35 <!-- IMPORTE -->
36 <div class="row pb-2">
33 <div class="col-auto pr-1"> 37 <div class="col-auto pr-1">
34 <span>Importe</span> 38 <span>Importe</span>
35 </div> 39 </div>
36 <div class="col-auto pl-2"> 40 <div class="col-auto pl-2">
37 <span class="font-weight-bold">{{ importeTotal | currency}}</span> 41 <span class="font-weight-bold">{{ importeTotal | currency}}</span>
38 </div> 42 </div>
39 </div> 43 </div>
40 <div class="row pb-3"> 44 <!-- NUMERO TERMINAL -->
41 <div class="col-auto pr-1 my-auto"> 45 <div class="row pb-2">
46 <div class="col-auto pr-1">
42 <span>Terminal Nº</span> 47 <span>Terminal Nº</span>
43 </div> 48 </div>
44 <div class="col-12 col-md-auto pl-md-1"> 49 <div class="col-12 col-md-auto pl-md-1">
45 <input 50 <div class="input-group">
46 class="form-control form-control-sm" 51 <input
47 type="number"> 52 formControlName="terminal"
53 class="form-control form-control-sm"
54 maxlength="45">
55 </div>
56 <p
57 *ngIf="form.get('terminal').errors?.required && form.get('terminal').dirty"
58 class="m-0 wobble-hor-bottom text-danger font-weight-light">
59 <small>Campo requerido*</small>
60 </p>
61 <p
62 *ngIf="form.get('terminal').errors?.pattern && form.get('terminal').dirty"
63 class="m-0 wobble-hor-bottom text-danger font-weight-light">
64 <small>Solo números*</small>
65 </p>
48 </div> 66 </div>
49 </div> 67 </div>
50 <div class="row pb-3"> 68 <!-- NUMERO DE CUPON -->
51 <div class="col-auto pr-1 my-auto"> 69 <div class="row pb-2">
70 <div class="col-auto pr-1">
52 <span>Número de Cupón</span> 71 <span>Número de Cupón</span>
53 </div> 72 </div>
54 <div class="col-12 col-md-auto pl-md-1"> 73 <div class="col-12 col-md-auto pl-md-1">
55 <input 74 <div class="input-group">
56 class="form-control form-control-sm" 75 <input
57 type="number"> 76 formControlName="numeroCupon"
77 class="form-control form-control-sm"
78 maxlength="45">
79 </div>
80 <p
81 *ngIf="form.get('numeroCupon').errors?.required && form.get('numeroCupon').dirty"
82 class="m-0 wobble-hor-bottom text-danger font-weight-light">
83 <small>Campo requerido*</small>
84 </p>
85 <p
86 *ngIf="form.get('numeroCupon').errors?.pattern && form.get('numeroCupon').dirty"
87 class="m-0 wobble-hor-bottom text-danger font-weight-light">
88 <small>Solo números*</small>
89 </p>
58 </div> 90 </div>
59 </div> 91 </div>
60 <div class="row pb-3"> 92 <!-- CUOTAS -->
61 <div class="col-auto pr-1 my-auto"> 93 <div class="row pb-2">
94 <div class="col-auto pr-1">
62 <span>Cuotas</span> 95 <span>Cuotas</span>
63 </div> 96 </div>
64 <div class="col-12 col-md-auto pl-md-1"> 97 <div class="col-12 col-md-auto pl-md-1">
65 <input 98 <div class="input-group">
66 class="form-control form-control-sm" 99 <input
67 type="number"> 100 formControlName="cuotas"
101 class="form-control form-control-sm"
102 maxlength="45">
103 </div>
104 <p
105 *ngIf="form.get('cuotas').errors?.required && form.get('cuotas').dirty"
106 class="m-0 wobble-hor-bottom text-danger font-weight-light">
107 <small>Campo requerido*</small>
108 </p>
109 <p
110 *ngIf="form.get('cuotas').errors?.pattern && form.get('cuotas').dirty"
111 class="m-0 wobble-hor-bottom text-danger font-weight-light">
112 <small>Solo números*</small>
113 </p>
68 </div> 114 </div>
69 </div> 115 </div>
70 </form> 116 </form>
71 </div> 117 </div>
72 </div> 118 </div>
73 </div> 119 </div>
74 120
75 <div class="modal-footer py-1"> 121 <div class="modal-footer py-1">
76 <button 122 <button
77 class="btn btn-sm btn-secondary" 123 class="btn btn-sm btn-secondary"
78 type="button" 124 type="button"
79 (click)="close()"> 125 (click)="close()">
80 Cancelar 126 Cancelar
81 </button> 127 </button>
82 <button 128 <button
83 class="btn btn-sm btn-primary" 129 class="btn btn-sm btn-primary"
84 type="button"> 130 type="button"
131 [disabled]="!form.valid">
85 Guardar 132 Guardar
86 </button> 133 </button>
87 </div> 134 </div>
src/app/components/pago-con-tarjeta/pago-con-tarjeta.component.ts
Diff comments   View file @ 8260928
1 import { Component, OnInit } from '@angular/core'; 1 import { Component, OnInit } from '@angular/core';
2 import { BsModalRef } from 'ngx-bootstrap'; 2 import { BsModalRef } from 'ngx-bootstrap';
3 import { TarjetasService } from 'src/app/services/tarjetas.service'; 3 import { TarjetasService } from 'src/app/services/tarjetas.service';
4 import { Tarjeta } from 'src/app/wrappers/tarjeta'; 4 import { Tarjeta } from 'src/app/wrappers/tarjeta';
5 import { FormGroup, FormControl, Validators } from '@angular/forms';
5 6
6 @Component({ 7 @Component({
7 selector: 'app-pago-con-tarjeta', 8 selector: 'app-pago-con-tarjeta',
8 templateUrl: './pago-con-tarjeta.component.html', 9 templateUrl: './pago-con-tarjeta.component.html',
9 styleUrls: ['./pago-con-tarjeta.component.scss'], 10 styleUrls: ['./pago-con-tarjeta.component.scss'],
10 }) 11 })
11 export class PagoConTarjetaComponent implements OnInit { 12 export class PagoConTarjetaComponent implements OnInit {
12 13
13 private tarjetas: Tarjeta[] = [];
14 private tarjetaSeleccionada: Tarjeta;
15 private showForm = false; 14 private showForm = false;
16 private importeTotal: number; 15 private importeTotal: number;
16 private tarjetas: Tarjeta[] = [];
17 private tarjetaSeleccionada: Tarjeta;
18 private form: FormGroup;
17 19
18 constructor( 20 constructor(
19 private modalRef: BsModalRef, 21 private modalRef: BsModalRef,
20 private tarjetasService: TarjetasService, 22 private tarjetasService: TarjetasService,
21 ) { } 23 ) { }
22 24
23 ngOnInit() { 25 ngOnInit() {
24 26
25 this.tarjetasService.getTarjetas() 27 this.tarjetasService.getTarjetas()
26 .subscribe((res: Tarjeta[]) => { 28 .subscribe((res: Tarjeta[]) => {
27 29
28 this.tarjetas = res; 30 this.tarjetas = res;
29 }, err => console.error(err)); 31 }, err => console.error(err));
32
33 this.setForm();
34 }
35
36 setForm() {
37
38 this.form = new FormGroup({
39 terminal: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
40 numeroCupon: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
41 cuotas: new FormControl('', [Validators.required, Validators.pattern("^[0-9]*$")]),
42 })
30 } 43 }
31 44
32 seleccionarTarjeta(tarjeta: Tarjeta) { 45 seleccionarTarjeta(tarjeta: Tarjeta) {
33 46
34 this.tarjetaSeleccionada = tarjeta; 47 this.tarjetaSeleccionada = tarjeta;
35 this.showForm = true; 48 this.showForm = true;
36 } 49 }
37 50
38 close() { 51 close() {
39 52
40 this.modalRef.hide() 53 this.modalRef.hide()
41 } 54 }