Commit 408c24c843bbb08f950ae86f7f0fb8b69c9c3529
1 parent
d0a15789b7
Exists in
master
Primera version
Showing
10 changed files
with
507 additions
and
1 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 |
README.md
| 1 | foca-modal-lista-precio | 1 | # foca-modal-unidad-medida |
| 2 | |||
| 3 | Modal de lista de unidades de medida |
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: 'focaModalListaPrecio', | ||
| 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-lista-precio.js'), | ||
| 43 | replace('src/views/', ''), | ||
| 44 | replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'), | ||
| 45 | gulp.dest(paths.tmp), | ||
| 46 | rename('foca-modal-lista-precio.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 | gulp.start('uglify'); | ||
| 63 | }); | ||
| 64 | |||
| 65 | gulp.task('webserver', function() { | ||
| 66 | pump [ | ||
| 67 | connect.server({port: 3000}) | ||
| 68 | ] | ||
| 69 | }); | ||
| 70 | |||
| 71 | gulp.task('clean-post-install', function() { | ||
| 72 | return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js', | ||
| 73 | 'index.html'], {read: false}) | ||
| 74 | .pipe(clean()); | ||
| 75 | }); | ||
| 76 | |||
| 77 | gulp.task('default', ['webserver']); | ||
| 78 | |||
| 79 | gulp.task('watch', function() { | ||
| 80 | gulp.watch([paths.srcJS, paths.srcViews], ['uglify']) | ||
| 81 | }); | ||
| 82 |
package.json
| File was created | 1 | { | |
| 2 | "name": "foca-modal-lista-precio", | ||
| 3 | "version": "0.0.1", | ||
| 4 | "description": "Modal para seleccionar lista de precios", | ||
| 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-unidad-medida.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" | ||
| 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('focaModalUnidadMedida') | |
| 2 | .constant("API_ENDPOINT", { | ||
| 3 | 'URL': '//127.0.0.1:9000' | ||
| 4 | }); | ||
| 5 |
src/js/app.js
| File was created | 1 | angular.module('focaModalListaPrecio', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']); | |
| 2 |
src/js/controller.js
| File was created | 1 | angular.module('focaModalListaPrecio') | |
| 2 | .controller('focaModalListaPrecioCtrl', [ | ||
| 3 | '$timeout', | ||
| 4 | '$filter', | ||
| 5 | '$scope', | ||
| 6 | '$uibModalInstance', | ||
| 7 | 'focaModalListaPrecioService', | ||
| 8 | function($timeout, $filter, $scope, $uibModalInstance, focaModalListaPrecioService) { | ||
| 9 | |||
| 10 | $scope.filters = ''; | ||
| 11 | $scope.listasPrecio = []; | ||
| 12 | $scope.primerBusqueda = false; | ||
| 13 | $scope.searchLoading = false; | ||
| 14 | // pagination | ||
| 15 | $scope.numPerPage = 10; | ||
| 16 | $scope.currentPage = 1; | ||
| 17 | $scope.filteredListasPrecio = []; | ||
| 18 | $scope.currentPageListasPrecio = []; | ||
| 19 | $scope.selectedListaPrecio = -1; | ||
| 20 | |||
| 21 | $scope.busquedaPress = function(key) { | ||
| 22 | if(key === 13) { | ||
| 23 | $scope.searchLoading = true; | ||
| 24 | focaModalListaPrecioService.getListasPrecio($scope.filters).then( | ||
| 25 | function(res) { | ||
| 26 | console.log(res); | ||
| 27 | $scope.searchLoading = false; | ||
| 28 | $scope.primerBusqueda = true; | ||
| 29 | $scope.listasPrecio = res.data; | ||
| 30 | $scope.search(true); | ||
| 31 | primera(); | ||
| 32 | } | ||
| 33 | ); | ||
| 34 | } | ||
| 35 | }; | ||
| 36 | |||
| 37 | $scope.busquedaPress(13); | ||
| 38 | $scope.search = function(pressed) { | ||
| 39 | if($scope.listasPrecio.length > 0) { | ||
| 40 | $scope.filteredListasPrecio = $filter('filter')( | ||
| 41 | $scope.listasPrecio, { $: $scope.filters } | ||
| 42 | ); | ||
| 43 | $scope.lastPage = Math.ceil( | ||
| 44 | $scope.filteredListasPrecio.length / $scope.numPerPage | ||
| 45 | ); | ||
| 46 | $scope.resetPage(); | ||
| 47 | }else if(pressed) { | ||
| 48 | $timeout(function() { | ||
| 49 | angular.element('#search')[0].focus(); | ||
| 50 | $scope.filters = ''; | ||
| 51 | }); | ||
| 52 | } | ||
| 53 | }; | ||
| 54 | |||
| 55 | $scope.resetPage = function() { | ||
| 56 | $scope.currentPage = 1; | ||
| 57 | $scope.selectPage(1); | ||
| 58 | }; | ||
| 59 | |||
| 60 | $scope.selectPage = function(page) { | ||
| 61 | var start = (page - 1) * $scope.numPerPage; | ||
| 62 | var end = start + $scope.numPerPage; | ||
| 63 | $scope.paginas = []; | ||
| 64 | $scope.paginas = calcularPages(page); | ||
| 65 | $scope.currentPageListasPrecio = $scope.filteredListasPrecio.slice(start, end); | ||
| 66 | $scope.currentPage = page; | ||
| 67 | }; | ||
| 68 | |||
| 69 | $scope.select = function(vendedor) { | ||
| 70 | $uibModalInstance.close(vendedor); | ||
| 71 | }; | ||
| 72 | |||
| 73 | $scope.cancel = function() { | ||
| 74 | $uibModalInstance.dismiss('cancel'); | ||
| 75 | }; | ||
| 76 | |||
| 77 | $scope.busquedaDown = function(key) { | ||
| 78 | if(key === 40) { | ||
| 79 | primera(key); | ||
| 80 | } | ||
| 81 | }; | ||
| 82 | |||
| 83 | $scope.itemListaPrecio = function(key) { | ||
| 84 | if(key === 38) { | ||
| 85 | anterior(key); | ||
| 86 | } | ||
| 87 | |||
| 88 | if(key === 40) { | ||
| 89 | siguiente(key); | ||
| 90 | } | ||
| 91 | |||
| 92 | if(key === 37) { | ||
| 93 | retrocederPagina(); | ||
| 94 | } | ||
| 95 | |||
| 96 | if(key === 39) { | ||
| 97 | avanzarPagina(); | ||
| 98 | } | ||
| 99 | }; | ||
| 100 | |||
| 101 | function calcularPages(paginaActual) { | ||
| 102 | var paginas = []; | ||
| 103 | paginas.push(paginaActual); | ||
| 104 | |||
| 105 | if(paginaActual - 1 > 1) { | ||
| 106 | paginas.unshift(paginaActual - 1); | ||
| 107 | if(paginaActual - 2 > 1) { | ||
| 108 | paginas.unshift(paginaActual - 2); | ||
| 109 | } | ||
| 110 | } | ||
| 111 | |||
| 112 | if(paginaActual + 1 < $scope.lastPage) { | ||
| 113 | paginas.push(paginaActual + 1); | ||
| 114 | if(paginaActual + 2 < $scope.lastPage) { | ||
| 115 | paginas.push(paginaActual + 2); | ||
| 116 | } | ||
| 117 | } | ||
| 118 | |||
| 119 | if(paginaActual !== 1) { | ||
| 120 | paginas.unshift(1); | ||
| 121 | } | ||
| 122 | |||
| 123 | if(paginaActual !== $scope.lastPage) { | ||
| 124 | paginas.push($scope.lastPage); | ||
| 125 | } | ||
| 126 | |||
| 127 | return paginas; | ||
| 128 | } | ||
| 129 | |||
| 130 | function primera() { | ||
| 131 | $scope.selectedListaPrecio = 0; | ||
| 132 | } | ||
| 133 | |||
| 134 | function anterior() { | ||
| 135 | if($scope.selectedListaPrecio === 0 && $scope.currentPage > 1) { | ||
| 136 | retrocederPagina(); | ||
| 137 | }else { | ||
| 138 | $scope.selectedListaPrecio--; | ||
| 139 | } | ||
| 140 | } | ||
| 141 | |||
| 142 | function siguiente() { | ||
| 143 | if($scope.selectedListaPrecio < $scope.currentPageListasPrecio.length - 1) { | ||
| 144 | $scope.selectedListaPrecio++; | ||
| 145 | }else { | ||
| 146 | avanzarPagina(); | ||
| 147 | } | ||
| 148 | } | ||
| 149 | |||
| 150 | function retrocederPagina() { | ||
| 151 | if($scope.currentPage > 1) { | ||
| 152 | $scope.selectPage($scope.currentPage - 1); | ||
| 153 | $scope.selectedListaPrecio = $scope.numPerPage - 1; | ||
| 154 | } | ||
| 155 | } | ||
| 156 | |||
| 157 | function avanzarPagina() { | ||
| 158 | if($scope.currentPage < $scope.lastPage) { | ||
| 159 | $scope.selectPage($scope.currentPage + 1); | ||
| 160 | $scope.selectedListaPrecio = 0; | ||
| 161 | } | ||
| 162 | } | ||
| 163 | }] | ||
| 164 | ); | ||
| 165 |
src/js/service.js
| File was created | 1 | angular.module('focaModalListaPrecio') | |
| 2 | .service('focaModalListaPrecioService', ['$http', 'API_ENDPOINT', | ||
| 3 | function($http, API_ENDPOINT) { | ||
| 4 | return { | ||
| 5 | getListasPrecio: function() { | ||
| 6 | return $http.get(API_ENDPOINT.URL + '/lista-precio'); | ||
| 7 | } | ||
| 8 | }; | ||
| 9 | }]); | ||
| 10 |
src/views/modal-lista-precio.html
| File was created | 1 | <div class="modal-header py-1"> | |
| 2 | <div class="row w-100"> | ||
| 3 | <div class="col-lg-6"> | ||
| 4 | <h5 class="modal-title my-1">Búsqueda de listas de precio</h5> | ||
| 5 | </div> | ||
| 6 | <div class="input-group col-lg-6 pr-0 my-2"> | ||
| 7 | <input | ||
| 8 | ladda="searchLoading" | ||
| 9 | type="text" | ||
| 10 | class="form-control form-control-sm" | ||
| 11 | id="search" | ||
| 12 | placeholder="Busqueda" | ||
| 13 | ng-model="filters" | ||
| 14 | ng-change="search()" | ||
| 15 | ng-keydown="busquedaDown($event.keyCode)" | ||
| 16 | ng-keypress="busquedaPress($event.keyCode)" | ||
| 17 | foca-focus="selectedListaPrecio == -1" | ||
| 18 | ng-focus="selectedListaPrecio = -1" | ||
| 19 | teclado-virtual | ||
| 20 | > | ||
| 21 | <div class="input-group-append"> | ||
| 22 | <button | ||
| 23 | ladda="searchLoading" | ||
| 24 | data-spinner-color="#FF0000" | ||
| 25 | class="btn btn-outline-secondary" | ||
| 26 | type="button" | ||
| 27 | ng-click="busquedaPress(13)" | ||
| 28 | > | ||
| 29 | <i class="fa fa-search" aria-hidden="true"></i> | ||
| 30 | </button> | ||
| 31 | </div> | ||
| 32 | </div> | ||
| 33 | </div> | ||
| 34 | </div> | ||
| 35 | <div class="modal-body" id="modal-body"> | ||
| 36 | |||
| 37 | <div ng-show="!primerBusqueda"> | ||
| 38 | Debe realizar una primer búsqueda. | ||
| 39 | </div> | ||
| 40 | |||
| 41 | <table ng-show="primerBusqueda" class="table table-striped table-sm col-12"> | ||
| 42 | <thead> | ||
| 43 | <tr> | ||
| 44 | <th>Código</th> | ||
| 45 | <th>Descripcion</th> | ||
| 46 | <th>Moneda</th> | ||
| 47 | <th></th> | ||
| 48 | </tr> | ||
| 49 | </thead> | ||
| 50 | <tbody> | ||
| 51 | <tr ng-show="currentPageListasPrecio.length == 0 && primerBusqueda"> | ||
| 52 | <td colspan="3"> | ||
| 53 | No se encontraron resultados. | ||
| 54 | </td> | ||
| 55 | </tr> | ||
| 56 | <tr class="selected" | ||
| 57 | ng-repeat="(key, listaPrecio) in currentPageListasPrecio" | ||
| 58 | ng-click="select(listaPrecio)" | ||
| 59 | > | ||
| 60 | <td ng-bind="listaPrecio.ID"></td> | ||
| 61 | <td ng-bind="listaPrecio.DES"></td> | ||
| 62 | <td ng-bind="listaPrecio.moneda.DETALLE"></td> | ||
| 63 | <td class="d-md-none text-primary"> | ||
| 64 | <i class="fa fa-circle-thin" aria-hidden="true"></i> | ||
| 65 | </td> | ||
| 66 | <td class="d-none d-md-table-cell"> | ||
| 67 | <button | ||
| 68 | type="button" | ||
| 69 | class="btn btn-xs p-1 float-right" | ||
| 70 | ng-class="{ | ||
| 71 | 'btn-secondary': selectedListaPrecio != key, | ||
| 72 | 'btn-primary': selectedListaPrecio == key | ||
| 73 | }" | ||
| 74 | foca-focus="selectedListaPrecio == {{key}}" | ||
| 75 | ng-keydown="itemListaPrecio($event.keyCode)"> | ||
| 76 | <i class="fa fa-circle-thin" aria-hidden="true"></i> | ||
| 77 | </button> | ||
| 78 | </td> | ||
| 79 | </tr> | ||
| 80 | </tbody> | ||
| 81 | </table> | ||
| 82 | </div> | ||
| 83 | <div class="modal-footer py-1"> | ||
| 84 | <nav ng-show="currentPageListasPrecio.length > 0 && primerBusqueda" class="mr-auto"> | ||
| 85 | <ul class="pagination pagination-sm justify-content mb-0"> | ||
| 86 | <li class="page-item" ng-class="{'disabled': currentPage == 1}"> | ||
| 87 | <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)"> | ||
| 88 | <span aria-hidden="true">«</span> | ||
| 89 | <span class="sr-only">Anterior</span> | ||
| 90 | </a> | ||
| 91 | </li> | ||
| 92 | <li | ||
| 93 | class="page-item" | ||
| 94 | ng-repeat="pagina in paginas" | ||
| 95 | ng-class="{'active': pagina == currentPage}" | ||
| 96 | > | ||
| 97 | <a | ||
| 98 | class="page-link" | ||
| 99 | href="javascript:void();" | ||
| 100 | ng-click="selectPage(pagina)" | ||
| 101 | ng-bind="pagina" | ||
| 102 | ></a> | ||
| 103 | </li> | ||
| 104 | <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> | ||
| 105 | <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)"> | ||
| 106 | <span aria-hidden="true">»</span> | ||
| 107 | <span class="sr-only">Siguiente</span> | ||
| 108 | </a> | ||
| 109 | </li> | ||
| 110 | </ul> | ||
| 111 | </nav> | ||
| 112 | <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button> | ||
| 113 | </div> | ||
| 114 |