Marcelo Puebla / foca-modal-forma-pago

Browse Code »

Commit f4de5418e8f2c20e3dd78ddd7f9dfe441f70a2c9

Authored by Marcelo Puebla 2019-07-25 18:12:54 -0300

1 parent 57db069691

Exists in master

Agregado que se pueda navegar entre los inputs.

Showing 2 changed files with 18 additions and 6 deletions Show diff stats

src/js/controller.js

Diff comments View file @ f4de541

 angular.module('focaModalFormaPago')
     .controller('focaModalFormaPagoController', [
         '$timeout', '$filter', '$scope', '$uibModal',
         '$uibModalInstance', 'focaModalFormaPagoService', 'parametros', 'focaModalService',
         function ($timeout, $filter, $scope, $uibModal,
             $uibModalInstance, focaModalFormaPagoService, parametros, focaModalService) {
             //#region Variables
             $scope.botones = [];
             //#endregion
             init();
             function init() {
                 $scope.botones = focaModalFormaPagoService.getBotonera();
             }
             $scope.seleccionarEfectivo = function () {
                 var modalInstance = focaModalService.prompt({
                     titulo: 'Ingrese monto',
                     value: parametros.importe
                 });
                 modalInstance
                     .then(function (data) {
                         $uibModalInstance.close({ data: data, tipo: 'efectivo' });
                     })
                     .catch(function (e) { console.error(e); });
             };
             $scope.seleccionarTarjetas = function () {
                 var modalInstance = abrirModal('modal-tarjetas.html',
                     'focaModalTarjetasController');
                 modalInstance.result
                     .then(function (data) {
                         $uibModalInstance.close({ data: data, tipo: 'tarjeta' });
                     })
                     .catch(function (e) { console.error(e); });
             };
             $scope.seleccionarCheque = function () {
                 var modalInstance = abrirModal('modal-tarjetas.html',
                     'focaModalTarjetasController');
                 modalInstance.result
                     .then(function (data) {
                         console.log(data);
                     })
                     .catch(function (e) { console.error(e); });
             };
             $scope.seleccionarVales = function () {
                 var modalInstance = abrirModal('modal-tarjetas.html',
                     'focaModalTarjetasController');
                 modalInstance.result
                     .then(function (data) {
                         console.log(data);
                     })
                     .catch(function (e) { console.error(e); });
             };
             $scope.seleccionarPagoElectronico = function () {
                 var modalInstance = abrirModal('modal-tarjetas.html',
                     'focaModalTarjetasController');
                 modalInstance.result
                     .then(function (data) {
                         console.log(data);
                     })
                     .catch(function (e) { console.error(e); });
             };
             function abrirModal(templateUrl, controller) {
                 return $uibModal.open(
                     {
                         templateUrl: templateUrl,
                         controller: controller,
                         resolve: {
                             parametros: function () {
                                 return {
                                     importe: parametros.importe
                                 };
                             },
                         },
                         size: 'lg',
                     }
                 );
             }
             $scope.cancel = function () {
                 $uibModalInstance.dismiss('cancel');
             };
         }]
     )
     .controller('focaModalTarjetasController', [
         '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalTarjetasService',
         'parametros',
         function ($timeout, $filter, $scope, $uibModalInstance, focaModalTarjetasService,
             parametros) {
-            $scope.parametros = parametros;
             //#region Variables
+            $scope.parametros = parametros;
             $scope.botonesTarjetas = [];
             $scope.showForm = false;
+            $scope.focused = 1;
             //#endregion
             init();
             function init() {
                 focaModalTarjetasService.getTarjetas().then(function (res) {
                     res.data.forEach(function (boton) {
                         $scope.botonesTarjetas.push({
                             id: boton.ID,
                             label: 'tarjeta',
                             nombre: boton.NOM,
                             image: boton.nombreImagen,
                             imageDefault: 'tarjetaDefault.svg'
                         });
                     });
                 });
             }
             $scope.seleccionarTarjeta = function (tarjeta) {
                 $scope.tarjeta = tarjeta;
                 animateForm();
             };
+            $scope.next = function (key) {
+                if (key === 13) $scope.focused++;
+            };
             $scope.cancel = function () {
                 $uibModalInstance.dismiss('cancel');
             };
             $scope.aceptarFormaDePago = function () {
                 $uibModalInstance.close({
                     tarjeta: $scope.tarjeta,
                     terminal: $scope.terminal,
                     numeroCupon: $scope.numeroCupon,
                     cuotas: $scope.cuotas
                 });
             };
             function animateForm() {
                 $scope.showForm = false;
                 $timeout(function () {
                     $scope.showForm = true;
                 }, 100);
             }
         }]

src/views/modal-tarjetas.html

Diff comments View file @ f4de541

 <div class="modal-header">
     <h5 class="modal-title">Pago con Tarjeta</h5>
 </div>
 <div class="modal-body" id="modal-body">
     <div class="row mb-2">
         <div class="col-12 p-0">
             <div class="row mx-0 botonera-secundaria">
                 <div class="col-12">
                     <foca-botonera-tarjetas
                         botones="botonesTarjetas"
                         max="1"
                         class="row justify-content-start mx-0"
                     >
                     </foca-botonera-tarjetas>
                 </div>
             </div>
         </div>
     </div>
     <div class="border-top" ng-show="showForm">
         <div class="row mt-4 fadeIn">
             <div class="col">
                 <form>
                     <div class="row pb-3">
                         <div class="col-3 col-sm-2 pr-1">
                             <strong ng-bind="tarjeta.id"></strong>
                         </div>
                         <div class="col-9 col-sm-4 pl-2">
                             <strong ng-bind="tarjeta.nombre"></strong>
                         </div>
                     </div>
                     <div class="row pb-3">
                         <div class="col">
                             <span>Importe</span>
                             <strong ng-bind="parametros.importe | currency: '$'"></strong>
                         </div>
                     </div>
                     <div class="row pb-3">
                         <div class="col-3 col-sm-2 pr-1 my-auto">
                             <span>Terminal Nº</span>
                         </div>
                         <div class="col col-sm-4 pl-1">
                             <input
                                 class="form-control form-control-sm"
                                 ng-model="terminal"
                                 type="number"
-                                ng-disabled="readonly">
+                                ng-disabled="readonly"
+                                foca-focus="focused == 1"
+                                ng-focus="focus(1)"
+                                ng-keypress="next($event.keyCode)">
                         </div>
                     </div>
                     <div class="row pb-3">
                         <div class="col-5 col-sm-3 pr-1 my-auto">
                             <span>Número de Cupón</span>
                         </div>
                         <div class="col col-sm-3 pl-1">
                             <input
                                 class="form-control form-control-sm"
                                 ng-model="numeroCupon"
                                 type="number"
-                                ng-disabled="readonly">
+                                ng-disabled="readonly"
+                                foca-focus="focused == 2"
+                                ng-focus="focus(2)"
+                                ng-keypress="next($event.keyCode)">
                         </div>
                     </div>
                     <div class="row pb-3">
                         <div class="col-2 col-sm-1 pr-1 my-auto">
                             <span>Cuotas</span>
                         </div>
                         <div class="col col-sm-5 pl-1">
                             <input
                                 class="form-control form-control-sm"
                                 type="number"
                                 ng-model="cuotas"
-                                ng-disabled="readonly">
+                                ng-disabled="readonly"
+                                foca-focus="focused == 3"
+                                ng-focus="focus(3)">
                         </div>
                     </div>
                 </form>
             </div>
         </div>
     </div>
 </div>
 <div class="modal-footer d-flex" ng-class="{ 'justify-content-between': showForm }">
     <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
     <button
         class="btn btn-sm btn-primary"
         type="button"
         ng-click="aceptarFormaDePago()"
         ng-show="showForm">Aceptar
     </button>
 </div>