Mauricio Cattafi / foca-modal-forma-pago

Download as
Browse Code »

Commit 5e8c50e6972f8850ce518fcc1183787d41717747

Authored by Eric Fernandez
2 parents da8f86728a 8f86edb61a
Exists in develop

Merge branch 'master' into 'develop' 

Master

See merge request !10
Showing 2 changed files   Show diff stats
src/js/controller.js
Diff comments   View file @ 5e8c50e
1 angular.module('focaModalFormaPago') 1 angular.module('focaModalFormaPago')
2 .controller('focaModalFormaPagoController', [ 2 .controller('focaModalFormaPagoController', [
3 '$timeout', '$filter', '$scope', '$uibModal', 3 '$timeout', '$filter', '$scope', '$uibModal',
4 '$uibModalInstance', 'focaModalFormaPagoService', 'parametros', 'focaModalService', 4 '$uibModalInstance', 'focaModalFormaPagoService', 'parametros', 'focaModalService',
5 function ($timeout, $filter, $scope, $uibModal, 5 function ($timeout, $filter, $scope, $uibModal,
6 $uibModalInstance, focaModalFormaPagoService, parametros, focaModalService) { 6 $uibModalInstance, focaModalFormaPagoService, parametros, focaModalService) {
7 7
8 //#region Variables 8 //#region Variables
9 $scope.botones = []; 9 $scope.botones = [];
10 //#endregion 10 //#endregion
11 11
12 init(); 12 init();
13 13
14 function init() { 14 function init() {
15 $scope.botones = focaModalFormaPagoService.getBotonera(); 15 $scope.botones = focaModalFormaPagoService.getBotonera();
16 } 16 }
17 17
18 $scope.seleccionarEfectivo = function () { 18 $scope.seleccionarEfectivo = function () {
19 var modalInstance = focaModalService.prompt({ 19 var modalInstance = focaModalService.prompt({
20 titulo: 'Ingrese monto', 20 titulo: 'Ingrese monto',
21 value: parametros.importe 21 value: parametros.importe
22 }); 22 });
23 modalInstance 23 modalInstance
24 .then(function (data) { 24 .then(function (data) {
25 $uibModalInstance.close({ data: data, tipo: 'efectivo' }); 25 $uibModalInstance.close({ data: data, tipo: 'efectivo' });
26 }) 26 })
27 .catch(function (e) { console.error(e); }); 27 .catch(function (e) { console.error(e); });
28 }; 28 };
29 29
30 $scope.seleccionarTarjetas = function () { 30 $scope.seleccionarTarjetas = function () {
31 var modalInstance = abrirModal('modal-tarjetas.html', 31 var modalInstance = abrirModal('modal-tarjetas.html',
32 'focaModalTarjetasController'); 32 'focaModalTarjetasController');
33 modalInstance.result 33 modalInstance.result
34 .then(function (data) { 34 .then(function (data) {
35 $uibModalInstance.close({ data: data, tipo: 'tarjeta' }); 35 $uibModalInstance.close({ data: data, tipo: 'tarjeta' });
36 }) 36 })
37 .catch(function (e) { console.error(e); }); 37 .catch(function (e) { console.error(e); });
38 }; 38 };
39 39
40 $scope.seleccionarCheque = function () { 40 $scope.seleccionarCheque = function () {
41 var modalInstance = abrirModal('modal-tarjetas.html', 41 var modalInstance = abrirModal('modal-tarjetas.html',
42 'focaModalTarjetasController'); 42 'focaModalTarjetasController');
43 modalInstance.result 43 modalInstance.result
44 .then(function (data) { 44 .then(function (data) {
45 console.log(data); 45 console.log(data);
46 }) 46 })
47 .catch(function (e) { console.error(e); }); 47 .catch(function (e) { console.error(e); });
48 }; 48 };
49 49
50 $scope.seleccionarVales = function () { 50 $scope.seleccionarVales = function () {
51 var modalInstance = abrirModal('modal-tarjetas.html', 51 var modalInstance = abrirModal('modal-tarjetas.html',
52 'focaModalTarjetasController'); 52 'focaModalTarjetasController');
53 modalInstance.result 53 modalInstance.result
54 .then(function (data) { 54 .then(function (data) {
55 console.log(data); 55 console.log(data);
56 }) 56 })
57 .catch(function (e) { console.error(e); }); 57 .catch(function (e) { console.error(e); });
58 }; 58 };
59 59
60 $scope.seleccionarPagoElectronico = function () { 60 $scope.seleccionarPagoElectronico = function () {
61 var modalInstance = abrirModal('modal-tarjetas.html', 61 var modalInstance = abrirModal('modal-tarjetas.html',
62 'focaModalTarjetasController'); 62 'focaModalTarjetasController');
63 modalInstance.result 63 modalInstance.result
64 .then(function (data) { 64 .then(function (data) {
65 console.log(data); 65 console.log(data);
66 }) 66 })
67 .catch(function (e) { console.error(e); }); 67 .catch(function (e) { console.error(e); });
68 }; 68 };
69 69
70 function abrirModal(templateUrl, controller) { 70 function abrirModal(templateUrl, controller) {
71 return $uibModal.open( 71 return $uibModal.open(
72 { 72 {
73 templateUrl: templateUrl, 73 templateUrl: templateUrl,
74 controller: controller, 74 controller: controller,
75 resolve: { 75 resolve: {
76 parametros: function () { 76 parametros: function () {
77 return { 77 return {
78 importe: parametros.importe 78 importe: parametros.importe
79 }; 79 };
80 }, 80 },
81 }, 81 },
82 size: 'lg', 82 size: 'lg',
83 } 83 }
84 ); 84 );
85 85
86 } 86 }
87 87
88 $scope.cancel = function () { 88 $scope.cancel = function () {
89 $uibModalInstance.dismiss('cancel'); 89 $uibModalInstance.dismiss('cancel');
90 }; 90 };
91 }] 91 }]
92 ) 92 )
93 .controller('focaModalTarjetasController', [ 93 .controller('focaModalTarjetasController', [
94 '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalTarjetasService', 94 '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalTarjetasService',
95 'parametros', 95 'parametros',
96 function ($timeout, $filter, $scope, $uibModalInstance, focaModalTarjetasService, 96 function ($timeout, $filter, $scope, $uibModalInstance, focaModalTarjetasService,
97 parametros) { 97 parametros) {
98 98
99 $scope.parametros = parametros;
100
101 //#region Variables 99 //#region Variables
100 $scope.parametros = parametros;
102 $scope.botonesTarjetas = []; 101 $scope.botonesTarjetas = [];
103 $scope.showForm = false; 102 $scope.showForm = false;
103 $scope.focused = 1;
104 104
105 //#endregion 105 //#endregion
106 106
107 init(); 107 init();
108 108
109 function init() { 109 function init() {
110 110
111 focaModalTarjetasService.getTarjetas().then(function (res) { 111 focaModalTarjetasService.getTarjetas().then(function (res) {
112 112
113 res.data.forEach(function (boton) { 113 res.data.forEach(function (boton) {
114 $scope.botonesTarjetas.push({ 114 $scope.botonesTarjetas.push({
115 id: boton.ID, 115 id: boton.ID,
116 label: 'tarjeta', 116 label: 'tarjeta',
117 nombre: boton.NOM, 117 nombre: boton.NOM,
118 image: boton.nombreImagen, 118 image: boton.nombreImagen,
119 imageDefault: 'tarjetaDefault.svg' 119 imageDefault: 'tarjetaDefault.svg'
120 }); 120 });
121 }); 121 });
122 122
123 }); 123 });
124 124
125 } 125 }
126 126
127 $scope.seleccionarTarjeta = function (tarjeta) { 127 $scope.seleccionarTarjeta = function (tarjeta) {
128 $scope.tarjeta = tarjeta; 128 $scope.tarjeta = tarjeta;
129 animateForm(); 129 animateForm();
130 }; 130 };
131 131
132 $scope.next = function (key) {
133 if (key === 13) $scope.focused++;
134 };
135
136 $scope.focus = function (val) {
137 $scope.focused = val;
138 };
139
132 $scope.cancel = function () { 140 $scope.cancel = function () {
133 $uibModalInstance.dismiss('cancel'); 141 $uibModalInstance.dismiss('cancel');
134 }; 142 };
135 143
136 $scope.aceptarFormaDePago = function () { 144 $scope.aceptarFormaDePago = function () {
137 $uibModalInstance.close({ 145 $uibModalInstance.close({
138 tarjeta: $scope.tarjeta, 146 tarjeta: $scope.tarjeta,
139 terminal: $scope.terminal, 147 terminal: $scope.terminal,
140 numeroCupon: $scope.numeroCupon, 148 numeroCupon: $scope.numeroCupon,
141 cuotas: $scope.cuotas 149 cuotas: $scope.cuotas
142 }); 150 });
143 }; 151 };
144 152
145 function animateForm() { 153 function animateForm() {
146 $scope.showForm = false; 154 $scope.showForm = false;
147 $timeout(function () { 155 $timeout(function () {
148 $scope.showForm = true; 156 $scope.showForm = true;
149 }, 100); 157 }, 100);
150 } 158 }
151 }] 159 }]
src/views/modal-tarjetas.html
Diff comments   View file @ 5e8c50e
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h5 class="modal-title">Pago con Tarjeta</h5> 2 <h5 class="modal-title">Pago con Tarjeta</h5>
3 </div> 3 </div>
4 4
5 <div class="modal-body" id="modal-body"> 5 <div class="modal-body" id="modal-body">
6 <div class="row mb-2"> 6 <div class="row mb-2">
7 <div class="col-12 p-0"> 7 <div class="col-12 p-0">
8 <div class="row mx-0 botonera-secundaria"> 8 <div class="row mx-0 botonera-secundaria">
9 <div class="col-12"> 9 <div class="col-12">
10 <foca-botonera-tarjetas 10 <foca-botonera-tarjetas
11 botones="botonesTarjetas" 11 botones="botonesTarjetas"
12 max="1" 12 max="1"
13 class="row justify-content-start mx-0" 13 class="row justify-content-start mx-0"
14 > 14 >
15 </foca-botonera-tarjetas> 15 </foca-botonera-tarjetas>
16 </div> 16 </div>
17 </div> 17 </div>
18 </div> 18 </div>
19 </div> 19 </div>
20 <div class="border-top" ng-show="showForm"> 20 <div class="border-top" ng-show="showForm">
21 <div class="row mt-4 fadeIn"> 21 <div class="row mt-4 fadeIn">
22 <div class="col"> 22 <div class="col">
23 <form> 23 <form>
24 <div class="row pb-3"> 24 <div class="row pb-3">
25 <div class="col-3 col-sm-2 pr-1"> 25 <div class="col-3 col-sm-2 pr-1">
26 <strong ng-bind="tarjeta.id"></strong> 26 <strong ng-bind="tarjeta.id"></strong>
27 </div> 27 </div>
28 <div class="col-9 col-sm-4 pl-2"> 28 <div class="col-9 col-sm-4 pl-2">
29 <strong ng-bind="tarjeta.nombre"></strong> 29 <strong ng-bind="tarjeta.nombre"></strong>
30 </div> 30 </div>
31 </div> 31 </div>
32 <div class="row pb-3"> 32 <div class="row pb-3">
33 <div class="col"> 33 <div class="col">
34 <span>Importe</span> 34 <span>Importe</span>
35 <strong ng-bind="parametros.importe | currency: '$'"></strong> 35 <strong ng-bind="parametros.importe | currency: '$'"></strong>
36 </div> 36 </div>
37 </div> 37 </div>
38 <div class="row pb-3"> 38 <div class="row pb-3">
39 <div class="col-3 col-sm-2 pr-1 my-auto"> 39 <div class="col-3 col-sm-2 pr-1 my-auto">
40 <span>Terminal Nº</span> 40 <span>Terminal Nº</span>
41 </div> 41 </div>
42 <div class="col col-sm-4 pl-1"> 42 <div class="col col-sm-4 pl-1">
43 <input 43 <input
44 class="form-control form-control-sm" 44 class="form-control form-control-sm foca-input"
45 ng-model="terminal" 45 ng-model="terminal"
46 type="number" 46 type="number"
47 ng-disabled="readonly"> 47 ng-disabled="readonly"
48 foca-focus="focused == 1"
49 ng-focus="focus(1)"
50 ng-keypress="next($event.keyCode)">
48 </div> 51 </div>
49 </div> 52 </div>
50 <div class="row pb-3"> 53 <div class="row pb-3">
51 <div class="col-5 col-sm-3 pr-1 my-auto"> 54 <div class="col-5 col-sm-3 pr-1 my-auto">
52 <span>Número de Cupón</span> 55 <span>Número de Cupón</span>
53 </div> 56 </div>
54 <div class="col col-sm-3 pl-1"> 57 <div class="col col-sm-3 pl-1">
55 <input 58 <input
56 class="form-control form-control-sm" 59 class="form-control form-control-sm foca-input"
57 ng-model="numeroCupon" 60 ng-model="numeroCupon"
58 type="number" 61 type="number"
59 ng-disabled="readonly"> 62 ng-disabled="readonly"
63 foca-focus="focused == 2"
64 ng-focus="focus(2)"
65 ng-keypress="next($event.keyCode)">
60 </div> 66 </div>
61 </div> 67 </div>
62 <div class="row pb-3"> 68 <div class="row pb-3">
63 <div class="col-2 col-sm-1 pr-1 my-auto"> 69 <div class="col-2 col-sm-1 pr-1 my-auto">
64 <span>Cuotas</span> 70 <span>Cuotas</span>
65 </div> 71 </div>
66 <div class="col col-sm-5 pl-1"> 72 <div class="col col-sm-5 pl-1">
67 <input 73 <input
68 class="form-control form-control-sm" 74 class="form-control form-control-sm foca-input"
69 type="number" 75 type="number"
70 ng-model="cuotas" 76 ng-model="cuotas"
71 ng-disabled="readonly"> 77 ng-disabled="readonly"
78 ng-focus="focus(3)"
79 foca-focus="focused == 3"
80 ng-keypress="next($event.keyCode)">
72 </div> 81 </div>
73 </div> 82 </div>
74 </form> 83 </form>
75 </div> 84 </div>
76 </div> 85 </div>
77 </div> 86 </div>
78 </div> 87 </div>
79 88
80
81 <div class="modal-footer d-flex" ng-class="{ 'justify-content-between': showForm }"> 89 <div class="modal-footer d-flex" ng-class="{ 'justify-content-between': showForm }">
82 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 90 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
83 <button 91 <button
84 class="btn btn-sm btn-primary" 92 class="btn btn-sm btn-primary"
85 type="button" 93 type="button"
86 ng-click="aceptarFormaDePago()" 94 ng-click="aceptarFormaDePago()"
95 ng-focus="focus(4)"
96 foca-focus="focused == 4"
87 ng-show="showForm">Aceptar 97 ng-show="showForm">Aceptar
88 </button> 98 </button>
89 </div> 99 </div>