Eric Fernandez / foca-modal-forma-pago

Download as
Browse Code »

Commit d816745ff98b21fbcdffa349464863e4e2518db6

Authored by Eric Fernandez
1 parent 2a79d24e61
Exists in master

recibo parámetros \n envío datos de tarjeta

Showing 3 changed files with 90 additions and 59 deletions   Show diff stats
src/js/controller.js
Diff comments   View file @ d816745
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', 4 '$uibModalInstance', 'focaModalFormaPagoService', 'parametros',
5 function ($timeout, $filter, $scope, $uibModal, 5 function ($timeout, $filter, $scope, $uibModal,
6 $uibModalInstance, focaModalFormaPagoService) { 6 $uibModalInstance, focaModalFormaPagoService, parametros) {
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 = abrirModal('modal-tarjetas.html', 19 var modalInstance = abrirModal('modal-tarjetas.html',
20 'focaModalTarjetasController'); 20 'focaModalTarjetasController');
21 modalInstance.result 21 modalInstance.result
22 .then(function (data) { 22 .then(function (data) {
23 console.log(data); 23 console.log(data);
24 }) 24 })
25 .catch(function (e) { console.error(e); }); 25 .catch(function (e) { console.error(e); });
26 }; 26 };
27 27
28 $scope.seleccionarTarjetas = function () { 28 $scope.seleccionarTarjetas = function () {
29 var modalInstance = abrirModal('modal-tarjetas.html', 29 var modalInstance = abrirModal('modal-tarjetas.html',
30 'focaModalTarjetasController'); 30 'focaModalTarjetasController');
31 modalInstance.result 31 modalInstance.result
32 .then(function (data) { 32 .then(function (data) {
33 $uibModalInstance.close(data); 33 $uibModalInstance.close(data);
34 }) 34 })
35 .catch(function (e) { console.error(e); }); 35 .catch(function (e) { console.error(e); });
36 }; 36 };
37 37
38 $scope.seleccionarCheque = function () { 38 $scope.seleccionarCheque = function () {
39 var modalInstance = abrirModal('modal-tarjetas.html', 39 var modalInstance = abrirModal('modal-tarjetas.html',
40 'focaModalTarjetasController'); 40 'focaModalTarjetasController');
41 modalInstance.result 41 modalInstance.result
42 .then(function (data) { 42 .then(function (data) {
43 console.log(data); 43 console.log(data);
44 }) 44 })
45 .catch(function (e) { console.error(e); }); 45 .catch(function (e) { console.error(e); });
46 }; 46 };
47 47
48 $scope.seleccionarVales = function () { 48 $scope.seleccionarVales = function () {
49 var modalInstance = abrirModal('modal-tarjetas.html', 49 var modalInstance = abrirModal('modal-tarjetas.html',
50 'focaModalTarjetasController'); 50 'focaModalTarjetasController');
51 modalInstance.result 51 modalInstance.result
52 .then(function (data) { 52 .then(function (data) {
53 console.log(data); 53 console.log(data);
54 }) 54 })
55 .catch(function (e) { console.error(e); }); 55 .catch(function (e) { console.error(e); });
56 }; 56 };
57 57
58 $scope.seleccionarPagoElectronico = function () { 58 $scope.seleccionarPagoElectronico = function () {
59 var modalInstance = abrirModal('modal-tarjetas.html', 59 var modalInstance = abrirModal('modal-tarjetas.html',
60 'focaModalTarjetasController'); 60 'focaModalTarjetasController');
61 modalInstance.result 61 modalInstance.result
62 .then(function (data) { 62 .then(function (data) {
63 console.log(data); 63 console.log(data);
64 }) 64 })
65 .catch(function (e) { console.error(e); }); 65 .catch(function (e) { console.error(e); });
66 }; 66 };
67 67
68 function abrirModal(templateUrl, controller) { 68 function abrirModal(templateUrl, controller) {
69 return $uibModal.open( 69 return $uibModal.open(
70 { 70 {
71 templateUrl: templateUrl, 71 templateUrl: templateUrl,
72 controller: controller, 72 controller: controller,
73 resolve: { 73 resolve: {
74 filters: function () { return null; }, 74 parametros: function () { return {
75 importe: parametros.importe
76 }; },
75 }, 77 },
76 size: 'lg', 78 size: 'lg',
77 } 79 }
78 ); 80 );
79 81
80 } 82 }
81 83
82 $scope.cancel = function () { 84 $scope.cancel = function () {
83 $uibModalInstance.dismiss('cancel'); 85 $uibModalInstance.dismiss('cancel');
84 }; 86 };
85 }] 87 }]
86 ) 88 )
87 .controller('focaModalTarjetasController', [ 89 .controller('focaModalTarjetasController', [
88 '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalTarjetasService', 90 '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalTarjetasService',
89 function ($timeout, $filter, $scope, $uibModalInstance, focaModalTarjetasService) { 91 'parametros',
92 function ($timeout, $filter, $scope, $uibModalInstance, focaModalTarjetasService,
93 parametros)
94 {
95
96 $scope.parametros = parametros;
90 97
91 //#region Variables 98 //#region Variables
92 $scope.botonesTarjetas = []; 99 $scope.botonesTarjetas = [];
93 $scope.showForm = false; 100 $scope.showForm = false;
94 101
95 //#endregion 102 //#endregion
96 103
97 init(); 104 init();
98 105
99 function init() { 106 function init() {
100 $scope.botonesTarjetas = focaModalTarjetasService.getBotonera(); 107
108 focaModalTarjetasService.getTarjetas().then(function(res) {
109
110 res.data.forEach(function (boton) {
111 $scope.botonesTarjetas.push({
112 id: boton.ID,
113 label: 'tarjeta',
114 nombre: boton.NOM,
115 image: boton.nombreImagen,
116 imageDefault: 'tarjetaDefault.svg'
117 });
118 });
119
120 });
121
101 } 122 }
102 123
103 $scope.seleccionarTarjeta = function () { 124 $scope.seleccionarTarjeta = function (tarjeta) {
125 $scope.tarjeta = tarjeta;
104 animateForm(); 126 animateForm();
105 }; 127 };
106 128
107 $scope.cancel = function () { 129 $scope.cancel = function () {
108 $uibModalInstance.dismiss('cancel'); 130 $uibModalInstance.dismiss('cancel');
109 }; 131 };
110 132
111 $scope.aceptarFormaDePago = function () { 133 $scope.aceptarFormaDePago = function () {
112 $uibModalInstance.close('data de tarjeta'); 134 $uibModalInstance.close({
135 tarjeta: $scope.tarjeta,
136 terminal: $scope.terminal,
137 numeroCupon: $scope.numeroCupon,
138 cuotas: $scope.cuotas
139 });
113 }; 140 };
114 141
115 function animateForm() { 142 function animateForm() {
116 $scope.showForm = false; 143 $scope.showForm = false;
117 $timeout(function () { 144 $timeout(function () {
118 $scope.showForm = true; 145 $scope.showForm = true;
119 }, 100); 146 }, 100);
120 } 147 }
121 }] 148 }]
122 ); 149 );
123 150
1 angular.module('focaModalFormaPago') 1 angular.module('focaModalFormaPago')
2 .factory('focaModalFormaPagoService', ['$http', 'API_ENDPOINT', function ($http, API_ENDPOINT) { 2 .factory('focaModalFormaPagoService', ['$http', 'API_ENDPOINT', function ($http, API_ENDPOINT) {
3 return { 3 return {
4 getBotonera: function () { 4 getBotonera: function () {
5 return [ 5 return [
6 { 6 {
7 label: 'Efectivo', 7 label: 'Efectivo',
8 image: 'efectivo.png', 8 image: 'efectivo.png',
9 disabled: true 9 disabled: true
10 }, 10 },
11 { 11 {
12 label: 'Tarjetas', 12 label: 'Tarjetas',
13 image: 'tarjeta.png', 13 image: 'tarjeta.png',
14 disabled: false 14 disabled: false
15 }, 15 },
16 { 16 {
17 label: 'Cheque', 17 label: 'Cheque',
18 image: 'cheque.png', 18 image: 'cheque.png',
19 disabled: true 19 disabled: true
20 }, 20 },
21 { 21 {
22 label: 'Vales', 22 label: 'Vales',
23 image: 'vale.png', 23 image: 'vale.png',
24 disabled: true 24 disabled: true
25 }, 25 },
26 { 26 {
27 label: 'Pago Electronico', 27 label: 'Pago Electronico',
28 image: 'qr.png', 28 image: 'qr.png',
29 disabled: true 29 disabled: true
30 } 30 }
31 ]; 31 ];
32 } 32 }
33 }; 33 };
34 }]) 34 }])
35 .factory('focaModalTarjetasService', ['$http', 'API_ENDPOINT', function ($http, API_ENDPOINT) { 35 .factory('focaModalTarjetasService', ['$http', 'API_ENDPOINT', function ($http, API_ENDPOINT) {
36 return { 36 return {
37 getBotonera: function () { 37 getTarjetas: function () {
38 return [ 38 return $http.get(API_ENDPOINT.URL + '/tarjetas');
39 { 39 // return [
40 label: 'tarjeta', 40 // {
41 image: 'visa.svg', 41 // label: 'tarjeta',
42 active: false, 42 // image: 'visa.svg',
43 }, 43 // active: false,
44 { 44 // },
45 label: 'tarjeta', 45 // {
46 image: 'mastercard.svg', 46 // label: 'tarjeta',
47 active: false, 47 // image: 'mastercard.svg',
48 }, 48 // active: false,
49 { 49 // },
50 label: 'tarjeta', 50 // {
51 image: 'maestro.svg', 51 // label: 'tarjeta',
52 active: false, 52 // image: 'maestro.svg',
53 }, 53 // active: false,
54 { 54 // },
55 label: 'tarjeta', 55 // {
56 image: 'americanExpress.svg', 56 // label: 'tarjeta',
57 active: false, 57 // image: 'americanExpress.svg',
58 }, 58 // active: false,
59 { 59 // },
60 label: 'tarjeta', 60 // {
61 image: 'naranja.png', 61 // label: 'tarjeta',
62 active: false, 62 // image: 'naranja.png',
63 }, 63 // active: false,
64 { 64 // },
65 label: 'tarjeta', 65 // {
66 image: 'cabal.svg', 66 // label: 'tarjeta',
67 active: false, 67 // image: 'cabal.svg',
68 }, 68 // active: false,
69 { 69 // },
70 label: 'tarjeta', 70 // {
71 image: 'argencard.svg', 71 // label: 'tarjeta',
72 active: false, 72 // image: 'argencard.svg',
73 }, 73 // active: false,
74 { 74 // },
75 label: 'tarjeta', 75 // {
76 image: 'nativa.png', 76 // label: 'tarjeta',
77 active: false, 77 // image: 'nativa.png',
78 }, 78 // active: false,
79 { 79 // },
80 label: 'tarjeta', 80 // {
81 image: 'cencosud.png', 81 // label: 'tarjeta',
82 active: false, 82 // image: 'cencosud.png',
83 }, 83 // active: false,
84 ]; 84 // },
85 // ];
85 } 86 }
86 }; 87 };
87 }]); 88 }]);
88 89
src/views/modal-tarjetas.html
Diff comments   View file @ d816745
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 <input class="form-control form-control-sm"> 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 <input class="form-control form-control-sm"> 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>$1560.45</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"
45 ng-model="terminal"
45 type="number" 46 type="number"
46 ng-disabled="readonly"> 47 ng-disabled="readonly">
47 </div> 48 </div>
48 </div> 49 </div>
49 <div class="row pb-3"> 50 <div class="row pb-3">
50 <div class="col-5 col-sm-3 pr-1 my-auto"> 51 <div class="col-5 col-sm-3 pr-1 my-auto">
51 <span>Número de Cupón</span> 52 <span>Número de Cupón</span>
52 </div> 53 </div>
53 <div class="col col-sm-3 pl-1"> 54 <div class="col col-sm-3 pl-1">
54 <input 55 <input
55 class="form-control form-control-sm" 56 class="form-control form-control-sm"
57 ng-model="numeroCupon"
56 type="number" 58 type="number"
57 ng-disabled="readonly"> 59 ng-disabled="readonly">
58 </div> 60 </div>
59 </div> 61 </div>
60 <div class="row pb-3"> 62 <div class="row pb-3">
61 <div class="col-2 col-sm-1 pr-1 my-auto"> 63 <div class="col-2 col-sm-1 pr-1 my-auto">
62 <span>Cuotas</span> 64 <span>Cuotas</span>
63 </div> 65 </div>
64 <div class="col col-sm-5 pl-1"> 66 <div class="col col-sm-5 pl-1">
65 <input 67 <input
66 class="form-control form-control-sm" 68 class="form-control form-control-sm"
67 type="number" 69 type="number"
70 ng-model="cuotas"
68 ng-disabled="readonly"> 71 ng-disabled="readonly">
69 </div> 72 </div>
70 </div> 73 </div>
71 </form> 74 </form>
72 </div> 75 </div>
73 </div> 76 </div>
74 </div> 77 </div>
75 </div> 78 </div>
76 79
77 80
78 <div class="modal-footer d-flex" ng-class="{ 'justify-content-between': showForm }"> 81 <div class="modal-footer d-flex" ng-class="{ 'justify-content-between': showForm }">
79 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 82 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
80 <button 83 <button
81 class="btn btn-sm btn-primary" 84 class="btn btn-sm btn-primary"
82 type="button" 85 type="button"
83 ng-click="aceptarFormaDePago()" 86 ng-click="aceptarFormaDePago()"
84 ng-show="showForm">Aceptar 87 ng-show="showForm">Aceptar
85 </button> 88 </button>
86 </div> 89 </div>
87 90