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
1 { 1 {
2 "name": "foca-modal-forma-pago", 2 "name": "foca-modal-forma-pago",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Modal para seleccionar la forma de pago", 4 "description": "Modal para seleccionar la forma de pago",
5 "main": "index.js", 5 "main": "index.js",
6 "scripts": { 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 "test": "echo \"Error: no test specified\" && exit 1", 8 "test": "echo \"Error: no test specified\" && exit 1",
8 "gulp-pre-commit": "gulp pre-commit", 9 "gulp-pre-commit": "gulp pre-commit",
9 "compile": "gulp uglify", 10 "compile": "gulp uglify",
10 "postinstall": "npm run compile && gulp clean-post-install", 11 "postinstall": "npm run compile && gulp clean-post-install",
11 "install-dev": "npm i --ignore-scripts" 12 "install-dev": "npm i --ignore-scripts"
12 }, 13 },
13 "pre-commit": [ 14 "pre-commit": [
14 "gulp-pre-commit" 15 "gulp-pre-commit"
15 ], 16 ],
16 "repository": { 17 "repository": {
17 "type": "git", 18 "type": "git",
18 "url": "http://git.focasoftware.com/npm/foca-modal-forma-pago.git" 19 "url": "http://git.focasoftware.com/npm/foca-modal-forma-pago.git"
19 }, 20 },
20 "author": "Foca Software", 21 "author": "Foca Software",
21 "license": "ISC", 22 "license": "ISC",
22 "peerDependencies": { 23 "peerDependencies": {
23 "angular": "^1.7.4", 24 "angular": "^1.7.4",
24 "bootstrap": "^4.1.3", 25 "bootstrap": "^4.1.3",
25 "font-awesome": "^4.7.0", 26 "font-awesome": "^4.7.0",
26 "ui-bootstrap4": "^3.0.4", 27 "ui-bootstrap4": "^3.0.4",
27 "gulp": "^3.9.1", 28 "gulp": "^3.9.1",
28 "gulp-angular-templatecache": "^2.2.1", 29 "gulp-angular-templatecache": "^2.2.1",
29 "gulp-concat": "^2.6.1", 30 "gulp-concat": "^2.6.1",
30 "gulp-connect": "^5.6.1", 31 "gulp-connect": "^5.6.1",
31 "gulp-htmlmin": "^5.0.1", 32 "gulp-htmlmin": "^5.0.1",
32 "gulp-rename": "^1.4.0", 33 "gulp-rename": "^1.4.0",
33 "gulp-replace": "^1.0.0", 34 "gulp-replace": "^1.0.0",
34 "gulp-uglify": "^3.0.1", 35 "gulp-uglify": "^3.0.1",
35 "jquery": "^3.3.1", 36 "jquery": "^3.3.1",
36 "pump": "^3.0.0", 37 "pump": "^3.0.0",
37 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git" 38 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git"
38 }, 39 },
39 "devDependencies": { 40 "devDependencies": {
40 "angular": "^1.7.5", 41 "angular": "^1.7.5",
41 "angular-ladda": "^0.4.3", 42 "angular-ladda": "^0.4.3",
42 "bootstrap": "^4.1.3", 43 "bootstrap": "^4.1.3",
43 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git", 44 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git",
44 "font-awesome": "^4.7.0", 45 "font-awesome": "^4.7.0",
45 "gulp": "^3.9.1", 46 "gulp": "^3.9.1",
46 "gulp-angular-templatecache": "^2.2.5", 47 "gulp-angular-templatecache": "^2.2.5",
47 "gulp-clean": "^0.4.0", 48 "gulp-clean": "^0.4.0",
48 "gulp-concat": "^2.6.1", 49 "gulp-concat": "^2.6.1",
49 "gulp-connect": "^5.6.1", 50 "gulp-connect": "^5.6.1",
50 "gulp-htmlmin": "^5.0.1", 51 "gulp-htmlmin": "^5.0.1",
51 "gulp-jshint": "^2.1.0", 52 "gulp-jshint": "^2.1.0",
52 "gulp-rename": "^1.4.0", 53 "gulp-rename": "^1.4.0",
53 "gulp-replace": "^1.0.0", 54 "gulp-replace": "^1.0.0",
54 "gulp-uglify": "^3.0.1", 55 "gulp-uglify": "^3.0.1",
55 "jasmine-core": "^3.3.0", 56 "jasmine-core": "^3.3.0",
56 "jquery": "^3.3.1", 57 "jquery": "^3.3.1",
57 "jshint": "^2.9.6", 58 "jshint": "^2.9.6",
58 "ladda": "^1.0.6", 59 "ladda": "^1.0.6",
59 "pre-commit": "^1.2.2", 60 "pre-commit": "^1.2.2",
60 "pump": "^3.0.0", 61 "pump": "^3.0.0",
61 "ui-bootstrap4": "^3.0.5" 62 "ui-bootstrap4": "^3.0.5"
62 } 63 }
63 } 64 }
64 65
src/js/controller.js
Diff comments   View file @ abae923
1 angular.module('focaModalFormaPago') 1 angular.module('focaModalFormaPago')
2 .controller('focaModalFormaPagoController', [ 2 .controller('focaModalFormaPagoController', [
3 '$timeout', 3 '$timeout', '$filter', '$scope', '$uibModalInstance', 'focaModalFormaPagoService',
4 '$filter', 4 function ($timeout, $filter, $scope, $uibModalInstance, focaModalFormaPagoService) {
5 '$scope', 5
6 '$uibModalInstance', 6 //#region Variables
7 'focaModalFormaPagoService', 7 $scope.botonesTarjetas = [];
8 'filters', 8 $scope.showForm = false;
9 function($timeout, $filter, $scope, $uibModalInstance, focaModalFormaPagoService, filters) { 9
10 10 //#endregion
11 $scope.filters = filters; 11
12 $scope.formasPago = []; 12 init();
13 13
14 focaModalFormaPagoService.getFormasPago().then(function(res) { 14 function init() {
15 $scope.formasPago = res.data; 15 $scope.botonesTarjetas = focaModalFormaPagoService.getBotonera();
16 }); 16 }
17 17
18 $scope.cancel = function() { 18 $scope.seleccionarTarjeta = function () {
19 animateForm();
20 };
21
22 $scope.cancel = function () {
19 $uibModalInstance.dismiss('cancel'); 23 $uibModalInstance.dismiss('cancel');
20 }; 24 };
21 25
22 $scope.select = function(iva) { 26 $scope.select = function (iva) {
23 $uibModalInstance.close(iva); 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 );
27 38
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 getFormasPago: function() { 4 getFormasPago: function () {
5 //TODO: pasar filtro 5 //TODO: pasar filtro
6 return $http.get(API_ENDPOINT.URL + '/forma-pago'); 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 }]);
10 59
src/views/modal-forma-pago.html
Diff comments   View file @ abae923
1 <div class="modal-header"> 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 </div> 3 </div>
4
4 <div class="modal-body" id="modal-body"> 5 <div class="modal-body" id="modal-body">
5 <div class="input-group"> 6 <div class="row mb-2">
6 <input 7 <div class="col-12 p-0">
7 ladda="searchLoading" 8 <div class="row mx-0 botonera-secundaria">
8 type="text" 9 <div class="col-12">
9 class="form-control form-control-sm" 10 <foca-botonera-tarjetas
10 id="search" 11 botones="botonesTarjetas"
11 placeholder="Búsqueda" 12 max="1"
12 ng-model="filters" 13 class="row justify-content-start mx-0"
13 ng-change="search()" 14 >
14 ng-keydown="busquedaDown($event.keyCode)" 15 </foca-botonera-tarjetas>
15 ng-keypress="busquedaPress($event.keyCode)" 16 </div>
16 foca-focus="selectedProvincia == -1" 17 </div>
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>
29 </div> 18 </div>
30 </div> 19 </div>
31 <table class="table table-striped table-sm col-12"> 20
32 <thead> 21 <div class="border-top" ng-show="showForm">
33 <tr> 22 <div class="row mt-4 fadeIn">
34 <th>Código</th> 23 <div class="col">
35 <th>Nombre</th> 24 <form>
36 <th></th> 25 <div class="row">
37 </tr> 26 <div class="col-3 col-sm-2 pr-1">
38 </thead> 27 <input class="form-control">
39 <tbody> 28 </div>
40 <tr ng-show="formasPago.length == 0"> 29 <div class="col-9 col-sm-4 pl-2">
41 <td colspan="3"> 30 <input class="form-control">
42 No se encontraron resultados. 31 </div>
43 </td> 32 </div>
44 </tr> 33 </form>
45 <tr class="selected" 34 </div>
46 ng-repeat="(key, formaPago) in formasPago | filter: filters" 35 </div>
47 ng-click="select(formaPago)" 36 </div>
48 > 37
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>
70 </div> 38 </div>
39
71 <div class="modal-footer"> 40 <div class="modal-footer">
72 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button> 41 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>