Eric Fernandez / foca-modal-flete

Download as
Browse Code »

Commit e84e56b90181d1a4351b77422f29ed18e084a7f9

Authored by Pablo Marco del Pont
2 parents 592f466bfa 9ce0c4adff
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
1 const templateCache = require('gulp-angular-templatecache'); 1 const templateCache = require('gulp-angular-templatecache');
2 const concat = require('gulp-concat'); 2 const concat = require('gulp-concat');
3 const htmlmin = require('gulp-htmlmin'); 3 const htmlmin = require('gulp-htmlmin');
4 const rename = require('gulp-rename'); 4 const rename = require('gulp-rename');
5 const uglify = require('gulp-uglify'); 5 const uglify = require('gulp-uglify');
6 const gulp = require('gulp'); 6 const gulp = require('gulp');
7 const pump = require('pump'); 7 const pump = require('pump');
8 const jshint = require('gulp-jshint'); 8 const jshint = require('gulp-jshint');
9 const replace = require('gulp-replace'); 9 const replace = require('gulp-replace');
10 const connect = require('gulp-connect'); 10 const connect = require('gulp-connect');
11 const clean = require('gulp-clean'); 11 const clean = require('gulp-clean');
12 12
13 var paths = { 13 var paths = {
14 srcJS: 'src/js/*.js', 14 srcJS: 'src/js/*.js',
15 srcViews: 'src/views/*.html', 15 srcViews: 'src/views/*.html',
16 tmp: 'tmp', 16 tmp: 'tmp',
17 dist: 'dist/' 17 dist: 'dist/'
18 }; 18 };
19 19
20 gulp.task('templates', function() { 20 gulp.task('templates', function() {
21 return pump( 21 return pump(
22 [ 22 [
23 gulp.src(paths.srcViews), 23 gulp.src(paths.srcViews),
24 htmlmin(), 24 htmlmin(),
25 templateCache('views.js', { 25 templateCache('views.js', {
26 module: 'focaModalFlete', 26 module: 'focaModalFlete',
27 root: '' 27 root: ''
28 }), 28 }),
29 gulp.dest(paths.tmp) 29 gulp.dest(paths.tmp)
30 ] 30 ]
31 ); 31 );
32 }); 32 });
33 33
34 gulp.task('uglify', ['templates'], function() { 34 gulp.task('uglify', ['templates'], function() {
35 return pump( 35 return pump(
36 [ 36 [
37 gulp.src([ 37 gulp.src([
38 paths.srcJS, 38 paths.srcJS,
39 'tmp/views.js' 39 'tmp/views.js'
40 ]), 40 ]),
41 concat('foca-modal-flete.js'), 41 concat('foca-modal-flete.js'),
42 replace('src/views/', ''), 42 replace('src/views/', ''),
43 replace("['ui.bootstrap', 'focaDirectivas']", '[]'), 43 replace("['ui.bootstrap', 'focaDirectivas']", '[]'),
44 gulp.dest(paths.tmp), 44 gulp.dest(paths.tmp),
45 rename('foca-modal-flete.min.js'), 45 rename('foca-modal-flete.min.js'),
46 uglify(), 46 uglify(),
47 gulp.dest(paths.dist) 47 gulp.dest(paths.dist)
48 ] 48 ]
49 ); 49 );
50 }); 50 });
51 51
52 gulp.task('pre-commit', function() { 52 gulp.task('pre-commit', function() {
53 return pump( 53 return pump(
54 [ 54 [
55 gulp.src(paths.srcJS), 55 gulp.src(paths.srcJS),
56 jshint('.jshintrc'), 56 jshint('.jshintrc'),
57 jshint.reporter('default'), 57 jshint.reporter('default'),
58 jshint.reporter('fail') 58 jshint.reporter('fail')
59 ] 59 ]
60 ); 60 );
61 }); 61 });
62 62
63 gulp.task('webserver', function() { 63 gulp.task('webserver', function() {
64 pump [ 64 pump [
65 connect.server({port: 3000}) 65 connect.server({port: 3000})
66 ] 66 ]
67 }); 67 });
68 68
69 gulp.task('clean-post-install', function(){ 69 gulp.task('clean-post-install', function(){
70 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js', 70 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
71 'index.html'], {read: false}) 71 'index.html'], {read: false})
72 .pipe(clean()); 72 .pipe(clean());
73 }); 73 });
74 74
75 gulp.task('default', ['webserver']); 75 gulp.task('default', ['webserver']);
76
77 gulp.task('watch', function() {
78 gulp.watch([srcJS, srcViews], ['uglify']);
79 });
76 80
1 { 1 {
2 "name": "foca-modal-flete", 2 "name": "foca-modal-flete",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Modal de búsqueda de fletes", 4 "description": "Modal de búsqueda de fletes",
5 "main": "index.js", 5 "main": "index.js",
6 "scripts": { 6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1", 7 "test": "echo \"Error: no test specified\" && exit 1",
8 "gulp-pre-commit": "gulp pre-commit", 8 "gulp-pre-commit": "gulp pre-commit",
9 "compile": "gulp uglify", 9 "compile": "gulp uglify",
10 "postinstall": "npm run compile && gulp clean-post-install", 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" 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 }, 12 },
13 "pre-commit": [ 13 "pre-commit": [
14 "gulp-pre-commit" 14 "gulp-pre-commit"
15 ], 15 ],
16 "repository": { 16 "repository": {
17 "type": "git", 17 "type": "git",
18 "url": "https://debo.suite.repo/modulos-npm/foca-modal-flete.git" 18 "url": "https://debo.suite.repo/modulos-npm/foca-modal-flete.git"
19 }, 19 },
20 "author": "Foca Software", 20 "author": "Foca Software",
21 "license": "ISC", 21 "license": "ISC",
22 "devDependencies": { 22 "devDependencies": {
23 "angular": "^1.7.5", 23 "angular": "^1.7.5",
24 "bootstrap": "^4.1.3", 24 "bootstrap": "^4.1.3",
25 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git", 25 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git",
26 "font-awesome": "^4.7.0", 26 "font-awesome": "^4.7.0",
27 "gulp": "^3.9.1", 27 "gulp": "^3.9.1",
28 "gulp-angular-templatecache": "^2.2.2", 28 "gulp-angular-templatecache": "2.2.2",
29 "gulp-clean": "^0.4.0", 29 "gulp-clean": "0.4.0",
30 "gulp-concat": "^2.6.1", 30 "gulp-concat": "^2.6.1",
31 "gulp-connect": "^5.6.1", 31 "gulp-connect": "^5.6.1",
32 "gulp-htmlmin": "^5.0.1", 32 "gulp-htmlmin": "5.0.1",
33 "gulp-jshint": "^2.1.0", 33 "gulp-jshint": "2.1.0",
34 "gulp-rename": "^1.4.0", 34 "gulp-rename": "1.4.0",
35 "gulp-replace": "^1.0.0", 35 "gulp-replace": "1.0.0",
36 "gulp-uglify": "^3.0.1", 36 "gulp-uglify": "3.0.1",
37 "jquery": "^3.3.1", 37 "jquery": "^3.3.1",
38 "jshint": "^2.9.6", 38 "jshint": "2.9.6",
39 "pump": "^3.0.0", 39 "pump": "3.0.0",
40 "ui-bootstrap4": "^3.0.5" 40 "ui-bootstrap4": "^3.0.5"
41 } 41 }
42 } 42 }
43 43
src/js/controller.js
Diff comments   View file @ e84e56b
1 angular.module('focaModalFlete') 1 angular.module('focaModalFlete')
2 .controller('focaModalFleteController', 2 .controller('focaModalFleteController',
3 [ 3 [
4 '$filter', 4 '$filter',
5 '$scope', 5 '$scope',
6 '$uibModalInstance', 6 '$uibModalInstance',
7 'focaModalFleteService', 7 'parametrosFlete',
8 function($filter, $scope, $uibModalInstance, focaModalFleteService) { 8 function($filter, $scope, $uibModalInstance, parametrosFlete) {
9 focaModalFleteService.getFletes().then( 9 $scope.parametrosFlete = parametrosFlete;
10 function(res) { 10 $scope.aceptar = function() {
11 $scope.flete = res.data; 11 $uibModalInstance.close($scope.parametrosFlete);
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);
54 }; 12 };
55 13
56 $scope.cancel = function() { 14 $scope.cancel = function() {
57 $uibModalInstance.dismiss('cancel'); 15 $uibModalInstance.dismiss('cancel');
58 }; 16 };
59 17
60 $scope.busquedaDown = function(key) { 18 $scope.validar = function() {
61 if (key === 40) { 19 return $scope.formFlete.$pristine ||
62 primera(key); 20 (
63 } 21 $scope.parametrosFlete.flete === 'si' &&
64 }; 22 (
65 23 (
66 $scope.busquedaPress = function(key) { 24 $scope.parametrosFlete.bomba !== 'si' &&
67 if (key === 13) { 25 $scope.parametrosFlete.bomba !== 'no'
68 primera(key); 26 ) ||
69 } 27 (
70 }; 28 !$scope.parametrosFlete.kilometros ||
71 29 $scope.parametrosFlete.kilometros < 1
72 $scope.itemProducto = function(key) { 30 )
73 if (key === 38) { 31 )
74 anterior(key); 32 );
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 }
153 } 33 }
154 } 34 }
155 ] 35 ]
156 ); 36 );
157 37
src/views/modal-flete.html
Diff comments   View file @ e84e56b
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h3 class="modal-title">Busqueda de Flete</h3> 2 <h3 class="modal-title">Opciones de Flete</h3>
3 </div> 3 </div>
4 <div class="modal-body" id="modal-body"> 4 <div class="modal-body" id="modal-body">
5 <div class="input-group mb-3"> 5 <form name="formFlete">
6 <input 6 <div class="form-group row">
7 type="text" 7 <div class="col-6">
8 class="form-control" 8 <div class="row">
9 placeholder="Busqueda" 9 <legend class="col-form-label col-sm-4 pt-0">Flete</legend>
10 ng-model="filters" 10 <div class="col-sm-8">
11 ng-change="search()" 11 <div class="form-check">
12 ng-keydown="busquedaDown($event.keyCode)" 12 <input
13 ng-keypress="busquedaPress($event.keyCode)" 13 class="form-check-input"
14 foca-focus="selectedFlete == -1" 14 type="radio"
15 ng-focus="selectedFlete = -1" 15 name="flete"
16 > 16 id="fleteSi"
17 <table class="table table-striped table-sm"> 17 value="si"
18 <thead> 18 checked
19 <tr> 19 ng-model="parametrosFlete.flete"
20 <th>Nombre</th> 20 />
21 <th>CUIT</th> 21 <label class="form-check-label" for="fleteSi">Si</label>
22 <th>Costo x km</th> 22 </div>
23 <th></th> 23 <div class="form-check">
24 </tr> 24 <input
25 </thead> 25 class="form-check-input"
26 <tbody> 26 type="radio"
27 <tr class="selectable" 27 name="flete"
28 ng-repeat="(key,flete) in currentPageFlete" 28 id="fleteNo"
29 ng-click="select(flete)"> 29 value="no"
30 <td ng-bind="flete.nombre"></td> 30 ng-model="parametrosFlete.flete"
31 <td ng-bind="flete.CUIT"></td> 31 />
32 <td ng-bind="flete.costoKilometro"></td> 32 <label class="form-check-label" for="fleteNo">No</label>
33 <td> 33 </div>
34 <button 34 <div class="form-check">
35 type="button" 35 <input
36 class="btn p-2 float-right" 36 class="form-check-input"
37 ng-class="{ 37 type="radio"
38 'btn-secondary': selectedFlete != key, 38 name="flete"
39 'btn-primary': selectedFlete == key 39 id="fleteFub"
40 }" 40 value="FOB"
41 foca-focus="selectedFlete == {{key}}" 41 ng-model="parametrosFlete.flete"
42 ng-keydown="itemProducto($event.keyCode)" 42 />
43 > 43 <label class="form-check-label" for="fleteFub">FOB</label>
44 <i class="fa fa-arrow-right" aria-hidden="true"></i> 44 </div>
45 </button> 45 </div>
46 </td> 46 <span ng-show="formFlete.flete.$error.required">Debe seleccionar un flete.</span>
47 </tr> 47 </div>
48 </tbody> 48 </div>
49 </table> 49 <div class="col-6">
50 <nav> 50 <div class="form-group row" ng-show="parametrosFlete.flete == 'si'">
51 <ul class="pagination justify-content-end"> 51 <legend class="col-form-label col-sm-4 pt-0">Bomba</legend>
52 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 52 <div class="col-sm-8">
53 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 53 <div class="form-check">
54 <span aria-hidden="true">&laquo;</span> 54 <input
55 <span class="sr-only">Anterior</span> 55 class="form-check-input"
56 </a> 56 type="radio"
57 </li> 57 name="bomba"
58 <li 58 id="bombaSi"
59 class="page-item" 59 value="si"
60 ng-repeat="pagina in paginas" 60 checked
61 ng-class="{'active': pagina == currentPage}" 61 ng-model="parametrosFlete.bomba"
62 > 62 />
63 <a 63 <label class="form-check-label" for="bombaSi">Si</label>
64 class="page-link" 64 </div>
65 href="#" 65 <div class="form-check">
66 ng-click="selectPage(pagina)" 66 <input
67 ng-bind="pagina" 67 class="form-check-input"
68 ></a> 68 type="radio"
69 </li> 69 name="bomba"
70 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 70 id="bombaNo"
71 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 71 value="no"
72 <span aria-hidden="true">&raquo;</span> 72 ng-model="parametrosFlete.bomba"
73 <span class="sr-only">Siguiente</span> 73 />
74 </a> 74 <label class="form-check-label" for="bombaNo">No</label>
75 </li> 75 </div>
76 </ul> 76 </div>
77 </nav> 77 </div>
78 </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 </div> 94 </div>
80 <div class="modal-footer"> 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 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 102 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
82 </div> 103 </div>
83 104