Marcelo Puebla / foca-modal-forma-pago

Download as
Browse Code »

Commit abae9237c5b73fbc5a8e3c7e9526c323ee608a8f

Authored by Marcelo Puebla
1 parent 3a68588e10
Exists in master

First commit

Showing 4 changed files with 113 additions and 83 deletions   Show diff stats
... ... @@ -4,6 +4,7 @@
4 4 "description": "Modal para seleccionar la forma de pago",
5 5 "main": "index.js",
6 6 "scripts": {
  7 + "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",
7 8 "test": "echo \"Error: no test specified\" && exit 1",
8 9 "gulp-pre-commit": "gulp pre-commit",
9 10 "compile": "gulp uglify",
src/js/controller.js
Diff comments   View file @ abae923
1 1 angular.module('focaModalFormaPago')
2 2 .controller('focaModalFormaPagoController', [
3   - '$timeout',
4   - '$filter',
5   - '$scope',
6   - '$uibModalInstance',
7   - 'focaModalFormaPagoService',
8   - 'filters',
9   - function($timeout, $filter, $scope, $uibModalInstance, focaModalFormaPagoService, filters) {
10   -
11   - $scope.filters = filters;
12   - $scope.formasPago = [];
13   -
14   - focaModalFormaPagoService.getFormasPago().then(function(res) {
15   - $scope.formasPago = res.data;
16   - });
17   -
18   - $scope.cancel = function() {
  3 + '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalFormaPagoService',
  4 + function ($timeout, $filter, $scope, $uibModalInstance, focaModalFormaPagoService) {
  5 +
  6 + //#region Variables
  7 + $scope.botonesTarjetas = [];
  8 + $scope.showForm = false;
  9 +
  10 + //#endregion
  11 +
  12 + init();
  13 +
  14 + function init() {
  15 + $scope.botonesTarjetas = focaModalFormaPagoService.getBotonera();
  16 + }
  17 +
  18 + $scope.seleccionarTarjeta = function () {
  19 + animateForm();
  20 + };
  21 +
  22 + $scope.cancel = function () {
19 23 $uibModalInstance.dismiss('cancel');
20 24 };
21 25  
22   - $scope.select = function(iva) {
  26 + $scope.select = function (iva) {
23 27 $uibModalInstance.close(iva);
24 28 };
  29 +
  30 + function animateForm() {
  31 + $scope.showForm = false;
  32 + $timeout(function () {
  33 + $scope.showForm = true;
  34 + }, 100);
  35 + }
25 36 }]
26 37 );
1 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 3 return {
4   - getFormasPago: function() {
  4 + getFormasPago: function () {
5 5 //TODO: pasar filtro
6 6 return $http.get(API_ENDPOINT.URL + '/forma-pago');
  7 + },
  8 + getBotonera: function () {
  9 + return [
  10 + {
  11 + label: 'tarjeta',
  12 + image: 'visa.svg',
  13 + active: false,
  14 + },
  15 + {
  16 + label: 'tarjeta',
  17 + image: 'mastercard.svg',
  18 + active: false,
  19 + },
  20 + {
  21 + label: 'tarjeta',
  22 + image: 'maestro.svg',
  23 + active: false,
  24 + },
  25 + {
  26 + label: 'tarjeta',
  27 + image: 'americanExpress.svg',
  28 + active: false,
  29 + },
  30 + {
  31 + label: 'tarjeta',
  32 + image: 'naranja.png',
  33 + active: false,
  34 + },
  35 + {
  36 + label: 'tarjeta',
  37 + image: 'cabal.svg',
  38 + active: false,
  39 + },
  40 + {
  41 + label: 'tarjeta',
  42 + image: 'argencard.svg',
  43 + active: false,
  44 + },
  45 + {
  46 + label: 'tarjeta',
  47 + image: 'nativa.png',
  48 + active: false,
  49 + },
  50 + {
  51 + label: 'tarjeta',
  52 + image: 'cencosud.png',
  53 + active: false,
  54 + },
  55 + ];
7 56 }
8 57 };
9 58 }]);
src/views/modal-forma-pago.html
Diff comments   View file @ abae923
1 1 <div class="modal-header">
2   - <h5 class="modal-title my-1">Búsqueda de formas de pago</h5>
  2 + <h5 class="modal-title">Pago con Tarjeta</h5>
3 3 </div>
  4 +
4 5 <div class="modal-body" id="modal-body">
5   - <div class="input-group">
6   - <input
7   - ladda="searchLoading"
8   - type="text"
9   - class="form-control form-control-sm"
10   - id="search"
11   - placeholder="Búsqueda"
12   - ng-model="filters"
13   - ng-change="search()"
14   - ng-keydown="busquedaDown($event.keyCode)"
15   - ng-keypress="busquedaPress($event.keyCode)"
16   - foca-focus="selectedProvincia == -1"
17   - ng-focus="selectedProvincia = -1"
18   - teclado-virtual
19   - >
20   - <div class="input-group-append">
21   - <button
22   - ladda="searchLoading"
23   - class="btn btn-outline-secondary"
24   - type="button"
25   - ng-click="busquedaPress(13)"
26   - >
27   - <i class="fa fa-search" aria-hidden="true"></i>
28   - </button>
  6 + <div class="row mb-2">
  7 + <div class="col-12 p-0">
  8 + <div class="row mx-0 botonera-secundaria">
  9 + <div class="col-12">
  10 + <foca-botonera-tarjetas
  11 + botones="botonesTarjetas"
  12 + max="1"
  13 + class="row justify-content-start mx-0"
  14 + >
  15 + </foca-botonera-tarjetas>
  16 + </div>
  17 + </div>
29 18 </div>
30 19 </div>
31   - <table class="table table-striped table-sm col-12">
32   - <thead>
33   - <tr>
34   - <th>Código</th>
35   - <th>Nombre</th>
36   - <th></th>
37   - </tr>
38   - </thead>
39   - <tbody>
40   - <tr ng-show="formasPago.length == 0">
41   - <td colspan="3">
42   - No se encontraron resultados.
43   - </td>
44   - </tr>
45   - <tr class="selected"
46   - ng-repeat="(key, formaPago) in formasPago | filter: filters"
47   - ng-click="select(formaPago)"
48   - >
49   - <td ng-bind="formaPago.ID | rellenarDigitos: 3: 0"></td>
50   - <td ng-bind="formaPago.NOMBRE"></td>
51   - <td class="d-md-none text-primary">
52   - <i class="fa fa-circle-thin" aria-hidden="true"></i>
53   - </td>
54   - <td class="d-none d-md-table-cell">
55   - <button
56   - type="button"
57   - class="btn btn-xs p-1 float-right"
58   - ng-class="{
59   - 'btn-secondary': selectedProvincia != key,
60   - 'btn-primary': selectedProvincia == key
61   - }"
62   - foca-focus="selectedProvincia == {{key}}"
63   - ng-keydown="itemProvincia($event.keyCode)">
64   - <i class="fa fa-circle-thin" aria-hidden="true"></i>
65   - </button>
66   - </td>
67   - </tr>
68   - </tbody>
69   - </table>
  20 +
  21 + <div class="border-top" ng-show="showForm">
  22 + <div class="row mt-4 fadeIn">
  23 + <div class="col">
  24 + <form>
  25 + <div class="row">
  26 + <div class="col-3 col-sm-2 pr-1">
  27 + <input class="form-control">
  28 + </div>
  29 + <div class="col-9 col-sm-4 pl-2">
  30 + <input class="form-control">
  31 + </div>
  32 + </div>
  33 + </form>
  34 + </div>
  35 + </div>
  36 + </div>
  37 +
70 38 </div>
  39 +
71 40 <div class="modal-footer">
72 41 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>
73 42 </div>