Commit e84e56b90181d1a4351b77422f29ed18e084a7f9
Exists in
master
Merge branch 'master' into 'master'
Master (pmarco) See merge request modulos-npm/foca-modal-flete!3
Showing
4 changed files
Show diff stats
gulpfile.js
package.json
| 1 | 1 | { |
| 2 | - "name": "foca-modal-flete", | |
| 3 | - "version": "0.0.1", | |
| 4 | - "description": "Modal de búsqueda de fletes", | |
| 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 font-awesome pump jquery bootstrap ui-bootstrap4 jshint gulp gulp-uglify gulp-concat gulp-htmlmin gulp-rename gulp-uglify gulp-jshint gulp-replace gulp-connect gulp-clean gulp-angular-templatecache git+https://debo.suite.repo/modulos-npm/foca-directivas.git" | |
| 12 | - }, | |
| 13 | - "pre-commit": [ | |
| 14 | - "gulp-pre-commit" | |
| 15 | - ], | |
| 16 | - "repository": { | |
| 17 | - "type": "git", | |
| 18 | - "url": "https://debo.suite.repo/modulos-npm/foca-modal-flete.git" | |
| 19 | - }, | |
| 20 | - "author": "Foca Software", | |
| 21 | - "license": "ISC", | |
| 22 | - "devDependencies": { | |
| 23 | - "angular": "^1.7.5", | |
| 24 | - "bootstrap": "^4.1.3", | |
| 25 | - "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git", | |
| 26 | - "font-awesome": "^4.7.0", | |
| 27 | - "gulp": "^3.9.1", | |
| 28 | - "gulp-angular-templatecache": "^2.2.2", | |
| 29 | - "gulp-clean": "^0.4.0", | |
| 30 | - "gulp-concat": "^2.6.1", | |
| 31 | - "gulp-connect": "^5.6.1", | |
| 32 | - "gulp-htmlmin": "^5.0.1", | |
| 33 | - "gulp-jshint": "^2.1.0", | |
| 34 | - "gulp-rename": "^1.4.0", | |
| 35 | - "gulp-replace": "^1.0.0", | |
| 36 | - "gulp-uglify": "^3.0.1", | |
| 37 | - "jquery": "^3.3.1", | |
| 38 | - "jshint": "^2.9.6", | |
| 39 | - "pump": "^3.0.0", | |
| 40 | - "ui-bootstrap4": "^3.0.5" | |
| 2 | + "name": "foca-modal-flete", | |
| 3 | + "version": "0.0.1", | |
| 4 | + "description": "Modal de búsqueda de fletes", | |
| 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 font-awesome pump jquery bootstrap ui-bootstrap4 jshint gulp gulp-uglify gulp-concat gulp-htmlmin gulp-rename gulp-uglify gulp-jshint gulp-replace gulp-connect gulp-clean gulp-angular-templatecache git+https://debo.suite.repo/modulos-npm/foca-directivas.git" | |
| 12 | + }, | |
| 13 | + "pre-commit": [ | |
| 14 | + "gulp-pre-commit" | |
| 15 | + ], | |
| 16 | + "repository": { | |
| 17 | + "type": "git", | |
| 18 | + "url": "https://debo.suite.repo/modulos-npm/foca-modal-flete.git" | |
| 19 | + }, | |
| 20 | + "author": "Foca Software", | |
| 21 | + "license": "ISC", | |
| 22 | + "devDependencies": { | |
| 23 | + "angular": "^1.7.5", | |
| 24 | + "bootstrap": "^4.1.3", | |
| 25 | + "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git", | |
| 26 | + "font-awesome": "^4.7.0", | |
| 27 | + "gulp": "^3.9.1", | |
| 28 | + "gulp-angular-templatecache": "2.2.2", | |
| 29 | + "gulp-clean": "0.4.0", | |
| 30 | + "gulp-concat": "^2.6.1", | |
| 31 | + "gulp-connect": "^5.6.1", | |
| 32 | + "gulp-htmlmin": "5.0.1", | |
| 33 | + "gulp-jshint": "2.1.0", | |
| 34 | + "gulp-rename": "1.4.0", | |
| 35 | + "gulp-replace": "1.0.0", | |
| 36 | + "gulp-uglify": "3.0.1", | |
| 37 | + "jquery": "^3.3.1", | |
| 38 | + "jshint": "2.9.6", | |
| 39 | + "pump": "3.0.0", | |
| 40 | + "ui-bootstrap4": "^3.0.5" | |
| 41 | 41 | } |
| 42 | 42 | } |
src/js/controller.js
| ... | ... | @@ -4,152 +4,32 @@ angular.module('focaModalFlete') |
| 4 | 4 | '$filter', |
| 5 | 5 | '$scope', |
| 6 | 6 | '$uibModalInstance', |
| 7 | - 'focaModalFleteService', | |
| 8 | - function($filter, $scope, $uibModalInstance, focaModalFleteService) { | |
| 9 | - focaModalFleteService.getFletes().then( | |
| 10 | - function(res) { | |
| 11 | - $scope.flete = res.data; | |
| 12 | - $scope.search(); | |
| 13 | - } | |
| 14 | - ); | |
| 15 | - | |
| 16 | - // pagination | |
| 17 | - $scope.numPerPage = 10; | |
| 18 | - $scope.currentPage = 1; | |
| 19 | - $scope.filteredFlete = []; | |
| 20 | - $scope.currentPageFlete = []; | |
| 21 | - $scope.selectedFlete = -1; | |
| 22 | - | |
| 23 | - //METODOS | |
| 24 | - $scope.search = function() { | |
| 25 | - $scope.filteredFlete = $filter('filter')( | |
| 26 | - $scope.flete, | |
| 27 | - {$: $scope.filters} | |
| 28 | - ); | |
| 29 | - | |
| 30 | - $scope.lastPage = Math.ceil( | |
| 31 | - $scope.filteredFlete.length / $scope.numPerPage | |
| 32 | - ); | |
| 33 | - | |
| 34 | - $scope.resetPage(); | |
| 35 | - }; | |
| 36 | - | |
| 37 | - $scope.resetPage = function() { | |
| 38 | - $scope.currentPage = 1; | |
| 39 | - $scope.selectPage(1); | |
| 40 | - }; | |
| 41 | - | |
| 42 | - $scope.selectPage = function(page) { | |
| 43 | - var start = (page - 1) * $scope.numPerPage; | |
| 44 | - var end = start + $scope.numPerPage; | |
| 45 | - $scope.paginas = []; | |
| 46 | - $scope.paginas = calcularPages(page); | |
| 47 | - $scope.currentPageFlete = | |
| 48 | - $scope.filteredFlete.slice(start, end); | |
| 49 | - $scope.currentPage = page; | |
| 50 | - }; | |
| 51 | - | |
| 52 | - $scope.select = function(flete) { | |
| 53 | - $uibModalInstance.close(flete); | |
| 7 | + 'parametrosFlete', | |
| 8 | + function($filter, $scope, $uibModalInstance, parametrosFlete) { | |
| 9 | + $scope.parametrosFlete = parametrosFlete; | |
| 10 | + $scope.aceptar = function() { | |
| 11 | + $uibModalInstance.close($scope.parametrosFlete); | |
| 54 | 12 | }; |
| 55 | 13 | |
| 56 | 14 | $scope.cancel = function() { |
| 57 | 15 | $uibModalInstance.dismiss('cancel'); |
| 58 | 16 | }; |
| 59 | - | |
| 60 | - $scope.busquedaDown = function(key) { | |
| 61 | - if (key === 40) { | |
| 62 | - primera(key); | |
| 63 | - } | |
| 64 | - }; | |
| 65 | - | |
| 66 | - $scope.busquedaPress = function(key) { | |
| 67 | - if (key === 13) { | |
| 68 | - primera(key); | |
| 69 | - } | |
| 70 | - }; | |
| 71 | - | |
| 72 | - $scope.itemProducto = function(key) { | |
| 73 | - if (key === 38) { | |
| 74 | - anterior(key); | |
| 75 | - } | |
| 76 | - | |
| 77 | - if (key === 40) { | |
| 78 | - siguiente(key); | |
| 79 | - } | |
| 80 | - | |
| 81 | - if (key === 37) { | |
| 82 | - retrocederPagina(); | |
| 83 | - } | |
| 84 | - | |
| 85 | - if (key === 39) { | |
| 86 | - avanzarPagina(); | |
| 87 | - } | |
| 88 | - }; | |
| 89 | - | |
| 90 | - function calcularPages(paginaActual) { | |
| 91 | - var paginas = []; | |
| 92 | - paginas.push(paginaActual); | |
| 93 | - | |
| 94 | - if (paginaActual - 1 > 1) { | |
| 95 | - | |
| 96 | - paginas.unshift(paginaActual - 1); | |
| 97 | - if (paginaActual - 2 > 1) { | |
| 98 | - paginas.unshift(paginaActual - 2); | |
| 99 | - } | |
| 100 | - } | |
| 101 | - | |
| 102 | - if (paginaActual + 1 < $scope.lastPage) { | |
| 103 | - paginas.push(paginaActual + 1); | |
| 104 | - if (paginaActual + 2 < $scope.lastPage) { | |
| 105 | - paginas.push(paginaActual + 2); | |
| 106 | - } | |
| 107 | - } | |
| 108 | - | |
| 109 | - if (paginaActual !== 1) { | |
| 110 | - paginas.unshift(1); | |
| 111 | - } | |
| 112 | - | |
| 113 | - if (paginaActual !== $scope.lastPage) { | |
| 114 | - paginas.push($scope.lastPage); | |
| 115 | - } | |
| 116 | - | |
| 117 | - return paginas; | |
| 118 | - } | |
| 119 | - | |
| 120 | - function primera() { | |
| 121 | - $scope.selectedFlete = 0; | |
| 122 | - } | |
| 123 | - | |
| 124 | - function anterior() { | |
| 125 | - if ($scope.selectedFlete === 0 && $scope.currentPage > 1) { | |
| 126 | - retrocederPagina(); | |
| 127 | - } else { | |
| 128 | - $scope.selectedFlete--; | |
| 129 | - } | |
| 130 | - } | |
| 131 | - | |
| 132 | - function siguiente() { | |
| 133 | - if ($scope.selectedFlete < | |
| 134 | - $scope.currentPageFlete.length - 1 ) { | |
| 135 | - $scope.selectedFlete++; | |
| 136 | - } else { | |
| 137 | - avanzarPagina(); | |
| 138 | - } | |
| 139 | - } | |
| 140 | - | |
| 141 | - function retrocederPagina() { | |
| 142 | - if ($scope.currentPage > 1) { | |
| 143 | - $scope.selectPage($scope.currentPage - 1); | |
| 144 | - $scope.selectedFlete = $scope.numPerPage - 1; | |
| 145 | - } | |
| 146 | - } | |
| 147 | - | |
| 148 | - function avanzarPagina() { | |
| 149 | - if ($scope.currentPage < $scope.lastPage) { | |
| 150 | - $scope.selectPage($scope.currentPage + 1); | |
| 151 | - $scope.selectedFlete = 0; | |
| 152 | - } | |
| 17 | + | |
| 18 | + $scope.validar = function() { | |
| 19 | + return $scope.formFlete.$pristine || | |
| 20 | + ( | |
| 21 | + $scope.parametrosFlete.flete === 'si' && | |
| 22 | + ( | |
| 23 | + ( | |
| 24 | + $scope.parametrosFlete.bomba !== 'si' && | |
| 25 | + $scope.parametrosFlete.bomba !== 'no' | |
| 26 | + ) || | |
| 27 | + ( | |
| 28 | + !$scope.parametrosFlete.kilometros || | |
| 29 | + $scope.parametrosFlete.kilometros < 1 | |
| 30 | + ) | |
| 31 | + ) | |
| 32 | + ); | |
| 153 | 33 | } |
| 154 | 34 | } |
| 155 | 35 | ] |
src/views/modal-flete.html
| 1 | 1 | <div class="modal-header"> |
| 2 | - <h3 class="modal-title">Busqueda de Flete</h3> | |
| 2 | + <h3 class="modal-title">Opciones de Flete</h3> | |
| 3 | 3 | </div> |
| 4 | 4 | <div class="modal-body" id="modal-body"> |
| 5 | - <div class="input-group mb-3"> | |
| 6 | - <input | |
| 7 | - type="text" | |
| 8 | - class="form-control" | |
| 9 | - placeholder="Busqueda" | |
| 10 | - ng-model="filters" | |
| 11 | - ng-change="search()" | |
| 12 | - ng-keydown="busquedaDown($event.keyCode)" | |
| 13 | - ng-keypress="busquedaPress($event.keyCode)" | |
| 14 | - foca-focus="selectedFlete == -1" | |
| 15 | - ng-focus="selectedFlete = -1" | |
| 16 | - > | |
| 17 | - <table class="table table-striped table-sm"> | |
| 18 | - <thead> | |
| 19 | - <tr> | |
| 20 | - <th>Nombre</th> | |
| 21 | - <th>CUIT</th> | |
| 22 | - <th>Costo x km</th> | |
| 23 | - <th></th> | |
| 24 | - </tr> | |
| 25 | - </thead> | |
| 26 | - <tbody> | |
| 27 | - <tr class="selectable" | |
| 28 | - ng-repeat="(key,flete) in currentPageFlete" | |
| 29 | - ng-click="select(flete)"> | |
| 30 | - <td ng-bind="flete.nombre"></td> | |
| 31 | - <td ng-bind="flete.CUIT"></td> | |
| 32 | - <td ng-bind="flete.costoKilometro"></td> | |
| 33 | - <td> | |
| 34 | - <button | |
| 35 | - type="button" | |
| 36 | - class="btn p-2 float-right" | |
| 37 | - ng-class="{ | |
| 38 | - 'btn-secondary': selectedFlete != key, | |
| 39 | - 'btn-primary': selectedFlete == key | |
| 40 | - }" | |
| 41 | - foca-focus="selectedFlete == {{key}}" | |
| 42 | - ng-keydown="itemProducto($event.keyCode)" | |
| 43 | - > | |
| 44 | - <i class="fa fa-arrow-right" aria-hidden="true"></i> | |
| 45 | - </button> | |
| 46 | - </td> | |
| 47 | - </tr> | |
| 48 | - </tbody> | |
| 49 | - </table> | |
| 50 | - <nav> | |
| 51 | - <ul class="pagination justify-content-end"> | |
| 52 | - <li class="page-item" ng-class="{'disabled': currentPage == 1}"> | |
| 53 | - <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> | |
| 54 | - <span aria-hidden="true">«</span> | |
| 55 | - <span class="sr-only">Anterior</span> | |
| 56 | - </a> | |
| 57 | - </li> | |
| 58 | - <li | |
| 59 | - class="page-item" | |
| 60 | - ng-repeat="pagina in paginas" | |
| 61 | - ng-class="{'active': pagina == currentPage}" | |
| 62 | - > | |
| 63 | - <a | |
| 64 | - class="page-link" | |
| 65 | - href="#" | |
| 66 | - ng-click="selectPage(pagina)" | |
| 67 | - ng-bind="pagina" | |
| 68 | - ></a> | |
| 69 | - </li> | |
| 70 | - <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> | |
| 71 | - <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> | |
| 72 | - <span aria-hidden="true">»</span> | |
| 73 | - <span class="sr-only">Siguiente</span> | |
| 74 | - </a> | |
| 75 | - </li> | |
| 76 | - </ul> | |
| 77 | - </nav> | |
| 78 | - </div> | |
| 5 | + <form name="formFlete"> | |
| 6 | + <div class="form-group row"> | |
| 7 | + <div class="col-6"> | |
| 8 | + <div class="row"> | |
| 9 | + <legend class="col-form-label col-sm-4 pt-0">Flete</legend> | |
| 10 | + <div class="col-sm-8"> | |
| 11 | + <div class="form-check"> | |
| 12 | + <input | |
| 13 | + class="form-check-input" | |
| 14 | + type="radio" | |
| 15 | + name="flete" | |
| 16 | + id="fleteSi" | |
| 17 | + value="si" | |
| 18 | + checked | |
| 19 | + ng-model="parametrosFlete.flete" | |
| 20 | + /> | |
| 21 | + <label class="form-check-label" for="fleteSi">Si</label> | |
| 22 | + </div> | |
| 23 | + <div class="form-check"> | |
| 24 | + <input | |
| 25 | + class="form-check-input" | |
| 26 | + type="radio" | |
| 27 | + name="flete" | |
| 28 | + id="fleteNo" | |
| 29 | + value="no" | |
| 30 | + ng-model="parametrosFlete.flete" | |
| 31 | + /> | |
| 32 | + <label class="form-check-label" for="fleteNo">No</label> | |
| 33 | + </div> | |
| 34 | + <div class="form-check"> | |
| 35 | + <input | |
| 36 | + class="form-check-input" | |
| 37 | + type="radio" | |
| 38 | + name="flete" | |
| 39 | + id="fleteFub" | |
| 40 | + value="FOB" | |
| 41 | + ng-model="parametrosFlete.flete" | |
| 42 | + /> | |
| 43 | + <label class="form-check-label" for="fleteFub">FOB</label> | |
| 44 | + </div> | |
| 45 | + </div> | |
| 46 | + <span ng-show="formFlete.flete.$error.required">Debe seleccionar un flete.</span> | |
| 47 | + </div> | |
| 48 | + </div> | |
| 49 | + <div class="col-6"> | |
| 50 | + <div class="form-group row" ng-show="parametrosFlete.flete == 'si'"> | |
| 51 | + <legend class="col-form-label col-sm-4 pt-0">Bomba</legend> | |
| 52 | + <div class="col-sm-8"> | |
| 53 | + <div class="form-check"> | |
| 54 | + <input | |
| 55 | + class="form-check-input" | |
| 56 | + type="radio" | |
| 57 | + name="bomba" | |
| 58 | + id="bombaSi" | |
| 59 | + value="si" | |
| 60 | + checked | |
| 61 | + ng-model="parametrosFlete.bomba" | |
| 62 | + /> | |
| 63 | + <label class="form-check-label" for="bombaSi">Si</label> | |
| 64 | + </div> | |
| 65 | + <div class="form-check"> | |
| 66 | + <input | |
| 67 | + class="form-check-input" | |
| 68 | + type="radio" | |
| 69 | + name="bomba" | |
| 70 | + id="bombaNo" | |
| 71 | + value="no" | |
| 72 | + ng-model="parametrosFlete.bomba" | |
| 73 | + /> | |
| 74 | + <label class="form-check-label" for="bombaNo">No</label> | |
| 75 | + </div> | |
| 76 | + </div> | |
| 77 | + </div> | |
| 78 | + <div class="form-group row" ng-show="parametrosFlete.flete == 'si'"> | |
| 79 | + <label for="kilometros" class="col-sm-4 col-form-label">Kilometros</label> | |
| 80 | + <div class="col-sm-8"> | |
| 81 | + <input | |
| 82 | + type="number" | |
| 83 | + class="form-control" | |
| 84 | + id="kilometros" | |
| 85 | + name="kilometros" | |
| 86 | + placeholder="Kilómetros" | |
| 87 | + ng-model="parametrosFlete.kilometros" | |
| 88 | + /> | |
| 89 | + </div> | |
| 90 | + </div> | |
| 91 | + </div> | |
| 92 | + </div> | |
| 93 | + </form> | |
| 79 | 94 | </div> |
| 80 | 95 | <div class="modal-footer"> |
| 96 | + <button | |
| 97 | + class="btn btn-secondary" | |
| 98 | + type="button" | |
| 99 | + ng-click="aceptar()" | |
| 100 | + ng-disabled="validar()" | |
| 101 | + >Aceptar</button> | |
| 81 | 102 | <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button> |
| 82 | 103 | </div> |