From abae9237c5b73fbc5a8e3c7e9526c323ee608a8f Mon Sep 17 00:00:00 2001
From: mpuebla <mpuebla@focasoftware.com>
Date: Fri, 19 Jul 2019 16:08:17 -0300
Subject: [PATCH] First commit

---
 package.json                    |  1 +
 src/js/controller.js            | 45 +++++++++++--------
 src/js/service.js               | 53 +++++++++++++++++++++-
 src/views/modal-forma-pago.html | 97 ++++++++++++++---------------------------
 4 files changed, 113 insertions(+), 83 deletions(-)

diff --git a/package.json b/package.json
index 9a7b424..8215811 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
     "description": "Modal para seleccionar la forma de pago",
     "main": "index.js",
     "scripts": {
+        "refresh": "gulp uglify && cp tmp/foca-modal-forma-pago.js ../wrapper-demo/node_modules/foca-modal-forma-pago/dist/foca-modal-forma-pago.min.js",
         "test": "echo \"Error: no test specified\" && exit 1",
         "gulp-pre-commit": "gulp pre-commit",
         "compile": "gulp uglify",
diff --git a/src/js/controller.js b/src/js/controller.js
index a59e13a..eb43114 100644
--- a/src/js/controller.js
+++ b/src/js/controller.js
@@ -1,26 +1,37 @@
 angular.module('focaModalFormaPago')
     .controller('focaModalFormaPagoController', [
-        '$timeout',
-        '$filter',
-        '$scope',
-        '$uibModalInstance',
-        'focaModalFormaPagoService',
-        'filters',
-        function($timeout, $filter, $scope, $uibModalInstance, focaModalFormaPagoService, filters) {
-
-            $scope.filters = filters;
-            $scope.formasPago = [];
-
-            focaModalFormaPagoService.getFormasPago().then(function(res) {
-                $scope.formasPago = res.data;
-            });
-
-            $scope.cancel = function() {
+        '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalFormaPagoService',
+        function ($timeout, $filter, $scope, $uibModalInstance, focaModalFormaPagoService) {
+
+            //#region Variables
+            $scope.botonesTarjetas = [];
+            $scope.showForm = false;
+
+            //#endregion
+
+            init();
+
+            function init() {
+                $scope.botonesTarjetas = focaModalFormaPagoService.getBotonera();
+            }
+
+            $scope.seleccionarTarjeta = function () {
+                animateForm();
+            };
+
+            $scope.cancel = function () {
                 $uibModalInstance.dismiss('cancel');
             };
 
-            $scope.select = function(iva) {
+            $scope.select = function (iva) {
                 $uibModalInstance.close(iva);
             };
+
+            function animateForm() {
+                $scope.showForm = false;
+                $timeout(function () {
+                    $scope.showForm = true;
+                }, 100);
+            }
         }]
     );
diff --git a/src/js/service.js b/src/js/service.js
index b66b727..3ae839a 100644
--- a/src/js/service.js
+++ b/src/js/service.js
@@ -1,9 +1,58 @@
 angular.module('focaModalFormaPago')
-    .factory('focaModalFormaPagoService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
+    .factory('focaModalFormaPagoService', ['$http', 'API_ENDPOINT', function ($http, API_ENDPOINT) {
         return {
-            getFormasPago: function() {
+            getFormasPago: function () {
                 //TODO: pasar filtro
                 return $http.get(API_ENDPOINT.URL + '/forma-pago');
+            },
+            getBotonera: function () {
+                return [
+                    {
+                        label: 'tarjeta',
+                        image: 'visa.svg',
+                        active: false,
+                    },
+                    {
+                        label: 'tarjeta',
+                        image: 'mastercard.svg',
+                        active: false,
+                    },        
+                    {
+                        label: 'tarjeta',
+                        image: 'maestro.svg',
+                        active: false,
+                    },        
+                    {
+                        label: 'tarjeta',
+                        image: 'americanExpress.svg',
+                        active: false,
+                    },
+                    {
+                        label: 'tarjeta',
+                        image: 'naranja.png',
+                        active: false,
+                    },        
+                    {
+                        label: 'tarjeta',
+                        image: 'cabal.svg',
+                        active: false,
+                    },        
+                    {
+                        label: 'tarjeta',
+                        image: 'argencard.svg',
+                        active: false,
+                    },        
+                    {
+                        label: 'tarjeta',
+                        image: 'nativa.png',
+                        active: false,
+                    },        
+                    {
+                        label: 'tarjeta',
+                        image: 'cencosud.png',
+                        active: false,
+                    },        
+                ];
             }
         };
     }]);
diff --git a/src/views/modal-forma-pago.html b/src/views/modal-forma-pago.html
index a42d37c..06c8267 100644
--- a/src/views/modal-forma-pago.html
+++ b/src/views/modal-forma-pago.html
@@ -1,73 +1,42 @@
 <div class="modal-header">
-    <h5 class="modal-title my-1">Búsqueda de formas de pago</h5>
+    <h5 class="modal-title">Pago con Tarjeta</h5>
 </div>
+
 <div class="modal-body" id="modal-body">
-    <div class="input-group">
-        <input
-            ladda="searchLoading"
-            type="text"
-            class="form-control form-control-sm"
-            id="search"
-            placeholder="Búsqueda"
-            ng-model="filters"
-            ng-change="search()"
-            ng-keydown="busquedaDown($event.keyCode)"
-            ng-keypress="busquedaPress($event.keyCode)"
-            foca-focus="selectedProvincia == -1"
-            ng-focus="selectedProvincia = -1"
-            teclado-virtual
-        >
-        <div class="input-group-append">
-            <button
-                ladda="searchLoading"
-                class="btn btn-outline-secondary"
-                type="button"
-                ng-click="busquedaPress(13)"
-            >
-                <i class="fa fa-search" aria-hidden="true"></i>
-            </button>
+    <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>
-    <table class="table table-striped table-sm col-12">
-        <thead>
-            <tr>
-                <th>Código</th>
-                <th>Nombre</th>
-                <th></th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr ng-show="formasPago.length == 0">
-                <td colspan="3">
-                    No se encontraron resultados.
-                </td>
-            </tr>
-            <tr class="selected"
-                ng-repeat="(key, formaPago) in formasPago | filter: filters"
-                ng-click="select(formaPago)"
-                >
-                <td ng-bind="formaPago.ID | rellenarDigitos: 3: 0"></td>
-                <td ng-bind="formaPago.NOMBRE"></td>
-                <td class="d-md-none text-primary">
-                    <i class="fa fa-circle-thin" aria-hidden="true"></i>
-                </td>
-                <td class="d-none d-md-table-cell">
-                    <button
-                        type="button"
-                        class="btn btn-xs p-1 float-right"
-                        ng-class="{
-                            'btn-secondary': selectedProvincia != key,
-                            'btn-primary': selectedProvincia == key
-                        }"
-                        foca-focus="selectedProvincia == {{key}}"
-                        ng-keydown="itemProvincia($event.keyCode)">
-                        <i class="fa fa-circle-thin" aria-hidden="true"></i>
-                    </button>
-                </td>
-            </tr>
-        </tbody>
-    </table>
+
+    <div class="border-top" ng-show="showForm">
+        <div class="row mt-4 fadeIn">
+            <div class="col">
+                <form>
+                    <div class="row">
+                        <div class="col-3 col-sm-2 pr-1">
+                            <input class="form-control">
+                        </div>
+                        <div class="col-9 col-sm-4 pl-2">
+                            <input class="form-control">
+                        </div>
+                    </div>
+                </form>
+            </div>            
+        </div>
+    </div>
+
 </div>
+
 <div class="modal-footer">
     <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>
 </div>
-- 
1.9.1