Commit e86ccd8c939a2b718f76b6b8d320a202db80a6ef
1 parent
20449f1c78
Exists in
master
Primera version
Showing
9 changed files
with
486 additions
and
0 deletions
Show diff stats
.gitignore
File was created | 1 | /node_modules | |
2 | /dist | ||
3 | /tmp | ||
4 | package-lock\.json | ||
5 | src/etc/develop\.js | ||
6 |
.jshintrc
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 |
gulpfile.js
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: 'focaModalTipoComprobante', | ||
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-tipo-comprobante.js'), | ||
43 | replace('src/views/', ''), | ||
44 | replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'), | ||
45 | gulp.dest(paths.tmp), | ||
46 | rename('foca-modal-tipo-comprobante.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 |
package.json
File was created | 1 | { | |
2 | "name": "foca-modal-tipo-comprobante", | ||
3 | "version": "0.0.1", | ||
4 | "description": "Modal para seleccionar el tipo de comprobante", | ||
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 i --ignore-scripts" | ||
12 | }, | ||
13 | "pre-commit": [ | ||
14 | "gulp-pre-commit" | ||
15 | ], | ||
16 | "repository": { | ||
17 | "type": "git", | ||
18 | "url": "http://git.focasoftware.com/npm/foca-modal-tipo-comprobante.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
File was created | 1 | angular.module('focaModalProvincia') | |
2 | .constant("API_ENDPOINT", { | ||
3 | 'URL': '//127.0.0.1:9000' | ||
4 | }); | ||
5 |
src/js/app.js
File was created | 1 | angular.module('focaModalTipoComprobante', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']); | |
2 |
src/js/controller.js
File was created | 1 | angular.module('focaModalTipoComprobante') | |
2 | .controller('focaModalTipoComprobanteController', [ | ||
3 | '$timeout', | ||
4 | '$filter', | ||
5 | '$scope', | ||
6 | '$uibModalInstance', | ||
7 | 'focaModalTipoComprobanteService', | ||
8 | 'filters', | ||
9 | function($timeout, $filter, $scope, $uibModalInstance, focaModalTipoComprobanteService, filters) { | ||
10 | |||
11 | $scope.filters = filters; | ||
12 | $scope.tiposComprobante = []; | ||
13 | // pagination | ||
14 | $scope.numPerPage = 10; | ||
15 | $scope.currentPage = 1; | ||
16 | $scope.filteredTiposComprobante = []; | ||
17 | $scope.currentPageTiposComprobante = []; | ||
18 | $scope.selectedTipoComprobante = -1; | ||
19 | |||
20 | focaModalTipoComprobanteService.getTiposComprobante().then(function(res) { | ||
21 | $scope.tiposComprobante = res.data; | ||
22 | $scope.search(true); | ||
23 | primera(); | ||
24 | }); | ||
25 | |||
26 | $scope.cancel = function() { | ||
27 | $uibModalInstance.dismiss('cancel'); | ||
28 | }; | ||
29 | |||
30 | $scope.select = function(iva) { | ||
31 | $uibModalInstance.close(iva); | ||
32 | }; | ||
33 | |||
34 | $scope.search = function(pressed) { | ||
35 | if($scope.tiposComprobante.length > 0) { | ||
36 | $scope.filteredTiposComprobante = $filter('filter')( | ||
37 | $scope.tiposComprobante, { $: $scope.filters } | ||
38 | ); | ||
39 | |||
40 | if(pressed && $scope.filteredTiposComprobante.length === 0) { | ||
41 | $timeout(function() { | ||
42 | angular.element('#search')[0].focus(); | ||
43 | $scope.filters = ''; | ||
44 | }); | ||
45 | } | ||
46 | |||
47 | $scope.lastPage = Math.ceil( | ||
48 | $scope.filteredTiposComprobante.length / $scope.numPerPage | ||
49 | ); | ||
50 | $scope.resetPage(); | ||
51 | } | ||
52 | }; | ||
53 | |||
54 | $scope.resetPage = function() { | ||
55 | $scope.currentPage = 1; | ||
56 | $scope.selectPage(1); | ||
57 | }; | ||
58 | |||
59 | $scope.selectPage = function(page) { | ||
60 | var start = (page - 1) * $scope.numPerPage; | ||
61 | var end = start + $scope.numPerPage; | ||
62 | $scope.paginas = []; | ||
63 | $scope.paginas = calcularPages(page); | ||
64 | $scope.currentPageTiposComprobante = | ||
65 | $scope.filteredTiposComprobante.slice(start, end); | ||
66 | $scope.currentPage = page; | ||
67 | }; | ||
68 | |||
69 | $scope.busquedaDown = function(key) { | ||
70 | if (key === 40) { | ||
71 | primera(key); | ||
72 | } | ||
73 | }; | ||
74 | |||
75 | $scope.itemTipoComprobante = function(key) { | ||
76 | if (key === 38) { | ||
77 | anterior(key); | ||
78 | } | ||
79 | |||
80 | if (key === 40) { | ||
81 | siguiente(key); | ||
82 | } | ||
83 | |||
84 | if (key === 37) { | ||
85 | retrocederPagina(); | ||
86 | } | ||
87 | |||
88 | if (key === 39) { | ||
89 | avanzarPagina(); | ||
90 | } | ||
91 | }; | ||
92 | |||
93 | function calcularPages(paginaActual) { | ||
94 | var paginas = []; | ||
95 | paginas.push(paginaActual); | ||
96 | |||
97 | if(paginaActual - 1 > 1) { | ||
98 | |||
99 | paginas.unshift(paginaActual - 1); | ||
100 | if(paginaActual - 2 > 1) { | ||
101 | paginas.unshift(paginaActual - 2); | ||
102 | } | ||
103 | } | ||
104 | |||
105 | if(paginaActual + 1 < $scope.lastPage) { | ||
106 | paginas.push(paginaActual + 1); | ||
107 | if(paginaActual + 2 < $scope.lastPage) { | ||
108 | paginas.push(paginaActual + 2); | ||
109 | } | ||
110 | } | ||
111 | |||
112 | if(paginaActual !== 1) { | ||
113 | paginas.unshift(1); | ||
114 | } | ||
115 | |||
116 | if(paginaActual !== $scope.lastPage) { | ||
117 | paginas.push($scope.lastPage); | ||
118 | } | ||
119 | |||
120 | return paginas; | ||
121 | } | ||
122 | |||
123 | function primera() { | ||
124 | $scope.selectedTipoComprobante = 0; | ||
125 | } | ||
126 | |||
127 | function anterior() { | ||
128 | if($scope.selectedTipoComprobante === 0 && $scope.currentPage > 1) { | ||
129 | retrocederPagina(); | ||
130 | }else { | ||
131 | $scope.selectedTipoComprobante--; | ||
132 | } | ||
133 | } | ||
134 | |||
135 | function siguiente() { | ||
136 | if($scope.selectedTipoComprobante < $scope.currentPageTiposComprobante.length - 1) { | ||
137 | $scope.selectedTipoComprobante++; | ||
138 | }else { | ||
139 | avanzarPagina(); | ||
140 | } | ||
141 | } | ||
142 | |||
143 | function retrocederPagina() { | ||
144 | if($scope.currentPage > 1) { | ||
145 | $scope.selectPage($scope.currentPage - 1); | ||
146 | $scope.selectedTipoComprobante = $scope.numPerPage - 1; | ||
147 | } | ||
148 | } | ||
149 | |||
150 | function avanzarPagina() { | ||
151 | if($scope.currentPage < $scope.lastPage) { | ||
152 | $scope.selectPage($scope.currentPage + 1); | ||
153 | $scope.selectedTipoComprobante = 0; | ||
154 | } | ||
155 | } | ||
156 | }] | ||
157 | ); | ||
158 |
src/js/service.js
File was created | 1 | angular.module('focaModalTipoComprobante') | |
2 | .factory('focaModalTipoComprobanteService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) { | ||
3 | return { | ||
4 | getTiposComprobante: function() { | ||
5 | //TODO: pasar filtro | ||
6 | return $http.get(API_ENDPOINT.URL + '/tipo-comprobante'); | ||
7 | } | ||
8 | }; | ||
9 | }]); | ||
10 |
src/views/modal-tipo-comprobante.html
File was created | 1 | <div class="modal-header"> | |
2 | <h5 class="modal-title my-1">Búsqueda de tipos de comprobante</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 | 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> | ||
29 | </div> | ||
30 | </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="tiposComprobante.length == 0"> | ||
41 | <td colspan="3"> | ||
42 | No se encontraron resultados. | ||
43 | </td> | ||
44 | </tr> | ||
45 | <tr class="selected" | ||
46 | ng-repeat="(key, tipoComprobante) in currentPageTiposComprobante | filter: filters" | ||
47 | ng-click="select(tipoComprobante)" | ||
48 | > | ||
49 | <td ng-bind="tipoComprobante.ID"></td> | ||
50 | <td ng-bind="tipoComprobante.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 | <nav ng-show="currentPageTiposComprobante.length > 0"> | ||
71 | <ul class="pagination pagination-sm justify-content mb-0"> | ||
72 | <li class="page-item" ng-class="{'disabled': currentPage == 1}"> | ||
73 | <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)"> | ||
74 | <span aria-hidden="true">«</span> | ||
75 | <span class="sr-only">Anterior</span> | ||
76 | </a> | ||
77 | </li> | ||
78 | <li | ||
79 | class="page-item" | ||
80 | ng-repeat="pagina in paginas" | ||
81 | ng-class="{'active': pagina == currentPage}" | ||
82 | > | ||
83 | <a | ||
84 | class="page-link" | ||
85 | href="javascript:void();" | ||
86 | ng-click="selectPage(pagina)" | ||
87 | ng-bind="pagina" | ||
88 | ></a> | ||
89 | </li> | ||
90 | <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> | ||
91 | <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)"> | ||
92 | <span aria-hidden="true">»</span> | ||
93 | <span class="sr-only">Siguiente</span> | ||
94 | </a> | ||
95 | </li> | ||
96 | </ul> | ||
97 | </nav> | ||
98 | </div> | ||
99 | <div class="modal-footer"> | ||
100 | <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button> | ||
101 | </div> | ||
102 |