Jose Pinto / foca-modal-banco

Download as
Browse Code »

Commit f6563384a99729d42fb6ff8fa0281ddc9e34de7e

Authored by Eric Fernandez
0 parents
Exists in master

First commit

Showing 11 changed files with 524 additions and 0 deletions   Show diff stats
File was created 1 /node_modules
2 /dist
3 /tmp
4 package-lock\.json
5 src/etc/develop\.js
6
File was created 1 {
2 /*
3 * ENVIRONMENTS
4 * =================
5 */
6
7 // Define globals exposed by modern browsers.
8 "browser": true,
9
10 // Define globals exposed by jQuery.
11 "jquery": true,
12
13 // Define globals exposed by Node.js.
14 "node": true,
15
16 // Allow ES6.
17 "esversion": 6,
18
19 /*
20 * ENFORCING OPTIONS
21 * =================
22 */
23
24 // Force all variable names to use either camelCase style or UPPER_CASE
25 // with underscores.
26 "camelcase": true,
27
28 // Prohibit use of == and != in favor of === and !==.
29 "eqeqeq": true,
30
31 // Enforce tab width of 2 spaces.
32 "indent": 4,
33
34 // Prohibit use of a variable before it is defined.
35 "latedef": false,
36
37 // Enforce line length to 100 characters
38 "maxlen": 100,
39
40 // Require capitalized names for constructor functions.
41 "newcap": true,
42
43 // Enforce use of single quotation marks for strings.
44 "quotmark": "single",
45
46 // Enforce placing 'use strict' at the top function scope
47 "strict": false,
48
49 // Prohibit use of explicitly undeclared variables.
50 "undef": true,
51
52 // Warn when variables are defined but never used.
53 "unused": true,
54
55 // Para que funcione en angular
56 "predef": ["angular", "alert", "spyOn", "expect", "it", "inject", "beforeEach", "describe"],
57 /*
58 * RELAXING OPTIONS
59 * =================
60 */
61
62 // Suppress warnings about == null comparisons.
63 "eqnull": true
64 }
65
File was created 1 # foca-modal-banco
2
3 Modal de lista de cobradores con filtros
File was created 1 const templateCache = require('gulp-angular-templatecache');
2 const concat = require('gulp-concat');
3 const htmlmin = require('gulp-htmlmin');
4 const rename = require('gulp-rename');
5 const uglify = require('gulp-uglify');
6 const gulp = require('gulp');
7 const pump = require('pump');
8 const jshint = require('gulp-jshint');
9 const replace = require('gulp-replace');
10 const connect = require('gulp-connect');
11 const clean = require('gulp-clean');
12
13 var paths = {
14 srcJS: 'src/js/*.js',
15 srcViews: 'src/views/*.html',
16 tmp: 'tmp',
17 dist: 'dist/'
18 };
19
20 gulp.task('templates', function() {
21 return pump(
22 [
23 gulp.src(paths.srcViews),
24 replace('views/', ''),
25 htmlmin(),
26 templateCache('views.js', {
27 module: 'focaModalBanco',
28 root: ''
29 }),
30 gulp.dest(paths.tmp)
31 ]
32 );
33 });
34
35 gulp.task('uglify', ['templates'], function() {
36 return pump(
37 [
38 gulp.src([
39 paths.srcJS,
40 'tmp/views.js'
41 ]),
42 concat('foca-modal-banco.js'),
43 replace('src/views/', ''),
44 replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
45 gulp.dest(paths.tmp),
46 rename('foca-modal-banco.min.js'),
47 uglify(),
48 gulp.dest(paths.dist)
49 ]
50 );
51 });
52
53 gulp.task('pre-commit', function() {
54 return pump(
55 [
56 gulp.src(paths.srcJS),
57 jshint('.jshintrc'),
58 jshint.reporter('default'),
59 jshint.reporter('fail')
60 ]
61 );
62
63 gulp.start('uglify');
64 });
65
66 gulp.task('webserver', function() {
67 pump [
68 connect.server({port: 3000})
69 ]
70 });
71
72 gulp.task('clean-post-install', function() {
73 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
74 'index.html'], {read: false})
75 .pipe(clean());
76 });
77
78 gulp.task('default', ['webserver']);
79
80 gulp.task('watch', function() {
81 gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
82 });
83
File was created 1 <html ng-app="focaModalBanco">
2
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6
7 <!--CSS-->
8 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
9 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
10 <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
11
12 <!--VENDOR JS-->
13 <script src="node_modules/jquery/dist/jquery.min.js"></script>
14 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
15 <script src="node_modules/angular/angular.min.js"></script>
16 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
17 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
18 <script src="node_modules/ladda/dist/spin.min.js"></script>
19 <script src="node_modules/ladda/dist/ladda.min.js"></script>
20 <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
21
22 <!-- BUILD -->
23 <script src="src/js/app.js"></script>
24 <script src="src/js/controller.js"></script>
25 <script src="src/js/service.js"></script>
26
27 <!-- /BUILD -->
28 <script src="src/etc/develop.js"></script>
29 </head>
30
31 <body ng-controller="controller">
32 </body>
33
34 </html>
File was created 1 {
2 "name": "foca-modal-banco",
3 "version": "0.0.1",
4 "description": "Modal para seleccionar bancos",
5 "main": "index.js",
6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1",
8 "gulp-pre-commit": "gulp pre-commit",
9 "compile": "gulp uglify",
10 "postinstall": "npm run compile && gulp clean-post-install",
11 "install-dev": "npm install -D angular angular-ladda ladda@1.0.6 bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-clean gulp-replace gulp-uglify jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+http://git.focasoftware.com/npm/foca-directivas.git"
12 },
13 "pre-commit": [
14 "gulp-pre-commit"
15 ],
16 "repository": {
17 "type": "git",
18 "url": "http://git.focasoftware.com/npm/foca-modal-cobrador.git"
19 },
20 "author": "Foca Software",
21 "license": "ISC",
22 "peerDependencies": {
23 "angular": "^1.7.4",
24 "bootstrap": "^4.1.3",
25 "font-awesome": "^4.7.0",
26 "ui-bootstrap4": "^3.0.4",
27 "gulp": "^3.9.1",
28 "gulp-angular-templatecache": "^2.2.1",
29 "gulp-concat": "^2.6.1",
30 "gulp-connect": "^5.6.1",
31 "gulp-htmlmin": "^5.0.1",
32 "gulp-rename": "^1.4.0",
33 "gulp-replace": "^1.0.0",
34 "gulp-uglify": "^3.0.1",
35 "jquery": "^3.3.1",
36 "pump": "^3.0.0",
37 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git"
38 },
39 "devDependencies": {
40 "angular": "^1.7.5",
41 "angular-ladda": "^0.4.3",
42 "bootstrap": "^4.1.3",
43 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git",
44 "font-awesome": "^4.7.0",
45 "gulp": "^3.9.1",
46 "gulp-angular-templatecache": "^2.2.5",
47 "gulp-clean": "^0.4.0",
48 "gulp-concat": "^2.6.1",
49 "gulp-connect": "^5.6.1",
50 "gulp-htmlmin": "^5.0.1",
51 "gulp-jshint": "^2.1.0",
52 "gulp-rename": "^1.4.0",
53 "gulp-replace": "^1.0.0",
54 "gulp-uglify": "^3.0.1",
55 "jasmine-core": "^3.3.0",
56 "jquery": "^3.3.1",
57 "jshint": "^2.9.6",
58 "ladda": "^1.0.6",
59 "pre-commit": "^1.2.2",
60 "pump": "^3.0.0",
61 "ui-bootstrap4": "^3.0.5"
62 }
63 }
64
src/etc/develop.js.ejemplo
Diff comments   View file @ f656338
File was created 1 angular.module('focaModalBanco')
2 .constant("API_ENDPOINT", {
3 'URL': '//127.0.0.1:9000'
4 });
5
File was created 1 angular.module('focaModalBanco', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
2
src/js/controller.js
Diff comments   View file @ f656338
File was created 1 angular.module('focaModalBanco')
2 .controller('focaModalBancoController', [
3 '$filter',
4 '$scope',
5 '$uibModalInstance',
6 'focaModalBancoService',
7 'filters',
8 function($filter, $scope, $uibModalInstance, focaModalBancoService, filters) {
9
10 $scope.filters = filters;
11 $scope.bancos = [];
12 $scope.primerBusqueda = false;
13 $scope.searchLoading = false;
14 // pagination
15 $scope.numPerPage = 10;
16 $scope.currentPage = 1;
17 $scope.filteredBancos = [];
18 $scope.currentPageBancos = [];
19 $scope.selectedBanco = -1;
20
21 $scope.busquedaPress = function(key) {
22 if (key === 13) {
23 $scope.searchLoading = true;
24 focaModalBancoService.getBancos($scope.filters).then(
25 function(res) {
26 $scope.searchLoading = false;
27 $scope.primerBusqueda = true;
28 $scope.bancos = res.data;
29 $scope.search();
30 primera();
31 }
32 );
33 }
34 };
35
36 $scope.search = function() {
37 if($scope.bancos.length > 0) {
38 $scope.filteredBancos = $filter('filter')(
39 $scope.bancos, { $: $scope.filters }
40 );
41 $scope.lastPage = Math.ceil(
42 $scope.filteredBancos.length / $scope.numPerPage
43 );
44 $scope.resetPage();
45 }
46 };
47
48 $scope.resetPage = function() {
49 $scope.currentPage = 1;
50 $scope.selectPage(1);
51 };
52
53 $scope.selectPage = function(page) {
54 var start = (page - 1) * $scope.numPerPage;
55 var end = start + $scope.numPerPage;
56 $scope.paginas = [];
57 $scope.paginas = calcularPages(page);
58 $scope.currentPageBancos = $scope.filteredBancos.slice(start, end);
59 $scope.currentPage = page;
60 };
61
62 $scope.select = function(vendedor) {
63 $uibModalInstance.close(vendedor);
64 };
65
66 $scope.cancel = function() {
67 $uibModalInstance.dismiss('cancel');
68 };
69
70 $scope.busquedaDown = function(key) {
71 if (key === 40) {
72 primera(key);
73 }
74 };
75
76 $scope.itemBanco = function(key) {
77 if (key === 38) {
78 anterior(key);
79 }
80
81 if (key === 40) {
82 siguiente(key);
83 }
84
85 if (key === 37) {
86 retrocederPagina();
87 }
88
89 if (key === 39) {
90 avanzarPagina();
91 }
92 };
93
94 function calcularPages(paginaActual) {
95 var paginas = [];
96 paginas.push(paginaActual);
97
98 if (paginaActual - 1 > 1) {
99
100 paginas.unshift(paginaActual - 1);
101 if (paginaActual - 2 > 1) {
102 paginas.unshift(paginaActual - 2);
103 }
104 }
105
106 if (paginaActual + 1 < $scope.lastPage) {
107 paginas.push(paginaActual + 1);
108 if (paginaActual + 2 < $scope.lastPage) {
109 paginas.push(paginaActual + 2);
110 }
111 }
112
113 if (paginaActual !== 1) {
114 paginas.unshift(1);
115 }
116
117 if (paginaActual !== $scope.lastPage) {
118 paginas.push($scope.lastPage);
119 }
120
121 return paginas;
122 }
123
124 function primera() {
125 $scope.selectedBanco = 0;
126 }
127
128 function anterior() {
129 if ($scope.selectedBanco === 0 && $scope.currentPage > 1) {
130 retrocederPagina();
131 } else {
132 $scope.selectedBanco--;
133 }
134 }
135
136 function siguiente() {
137 if ($scope.selectedBanco < $scope.currentPageBancos.length - 1) {
138 $scope.selectedBanco++;
139 } else {
140 avanzarPagina();
141 }
142 }
143
144 function retrocederPagina() {
145 if ($scope.currentPage > 1) {
146 $scope.selectPage($scope.currentPage - 1);
147 $scope.selectedBanco = $scope.numPerPage - 1;
148 }
149 }
150
151 function avanzarPagina() {
152 if ($scope.currentPage < $scope.lastPage) {
153 $scope.selectPage($scope.currentPage + 1);
154 $scope.selectedBanco = 0;
155 }
156 }
157
158 $scope.busquedaPress(13);
159 }]
160 );
161
File was created 1 angular.module('focaModalBanco')
2 .factory('focaModalBancoService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
3 return {
4 getBancos: function() {
5 return $http.get(API_ENDPOINT.URL + '/banco');
6 }
7 };
8 }]);
9
src/views/modal-bancos.html
Diff comments   View file @ f656338
File was created 1 <div class="modal-header">
2 <h5 class="modal-title my-1">Búsqueda de bancos</h5>
3 </div>
4 <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 placeholder="Busqueda"
11 ng-model="filters"
12 ng-change="search()"
13 ng-keydown="busquedaDown($event.keyCode)"
14 ng-keypress="busquedaPress($event.keyCode)"
15 foca-focus="selectedBanco == -1"
16 ng-focus="selectedBanco = -1"
17 teclado-virtual
18 >
19 <div class="input-group-append">
20 <button
21 ladda="searchLoading"
22 class="btn btn-outline-secondary"
23 type="button"
24 ng-click="busquedaPress(13)"
25 >
26 <i class="fa fa-search" aria-hidden="true"></i>
27 </button>
28 </div>
29 </div>
30 <table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
31 <thead>
32 <tr>
33 <th>Código</th>
34 <th>Nombre</th>
35 <th></th>
36 </tr>
37 </thead>
38 <tbody>
39 <tr ng-show="currentPageBancos.length == 0 && primerBusqueda">
40 <td colspan="3">
41 No se encontraron resultados.
42 </td>
43 </tr>
44 <tr class="selected"
45 ng-repeat="(key, banco) in currentPageBancos"
46 ng-click="select(banco)"
47 >
48 <td ng-bind="banco.ID"></td>
49 <td ng-bind="banco.desbco"></td>
50 <td class="d-md-none text-primary">
51 <i class="fa fa-arrow-right" aria-hidden="true"></i>
52 </td>
53 <td class="d-none d-md-table-cell">
54 <button
55 type="button"
56 class="btn btn-xs p-1 float-right"
57 ng-class="{
58 'btn-secondary': selectedBanco != key,
59 'btn-primary': selectedBanco == key
60 }"
61 foca-focus="selectedBanco == {{key}}"
62 ng-keydown="itemBanco($event.keyCode)">
63 <i class="fa fa-arrow-right" aria-hidden="true"></i>
64 </button>
65 </td>
66 </tr>
67 </tbody>
68 </table>
69 <nav ng-show="currentPageBancos.length > 0 && primerBusqueda">
70 <ul class="pagination pagination-sm justify-content mb-0">
71 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
72 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
73 <span aria-hidden="true">&laquo;</span>
74 <span class="sr-only">Anterior</span>
75 </a>
76 </li>
77 <li
78 class="page-item"
79 ng-repeat="pagina in paginas"
80 ng-class="{'active': pagina == currentPage}"
81 >
82 <a
83 class="page-link"
84 href="javascript:void();"
85 ng-click="selectPage(pagina)"
86 ng-bind="pagina"
87 ></a>
88 </li>
89 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
90 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
91 <span aria-hidden="true">&raquo;</span>
92 <span class="sr-only">Siguiente</span>
93 </a>
94 </li>
95 </ul>
96 </nav>
97 </div>
98 <div class="modal-footer">
99 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>
100 </div>
101