Jose Pinto / foca-busqueda-cliente

Download as
Browse Code »

Commit 76bcf36f2f388e1cafa4a9bf7e75dc3cdf4485c5

Authored by Eric Fernandez
1 parent 9c1f6ac13a
Exists in master

Modal se muestra en grilla, agrego angular ladda

Showing 6 changed files with 267 additions and 63 deletions   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-es').default; 5 const uglify = require('gulp-uglify-es').default;
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('clean', function(){ 20 gulp.task('clean', function(){
21 return gulp.src(['tmp', 'dist'], {read: false}) 21 return gulp.src(['tmp', 'dist'], {read: false})
22 .pipe(clean()); 22 .pipe(clean());
23 }); 23 });
24 24
25 gulp.task('templates', ['clean'], function() { 25 gulp.task('templates', ['clean'], function() {
26 return pump( 26 return pump(
27 [ 27 [
28 gulp.src(paths.srcViews), 28 gulp.src(paths.srcViews),
29 htmlmin(), 29 htmlmin(),
30 templateCache('views.js', { 30 templateCache('views.js', {
31 module: 'focaBusquedaCliente', 31 module: 'focaBusquedaCliente',
32 root: '' 32 root: ''
33 }), 33 }),
34 gulp.dest(paths.tmp) 34 gulp.dest(paths.tmp)
35 ] 35 ]
36 ); 36 );
37 }); 37 });
38 38
39 gulp.task('uglify', ['templates'], function() { 39 gulp.task('uglify', ['templates'], function() {
40 return pump( 40 return pump(
41 [ 41 [
42 gulp.src([ 42 gulp.src([
43 paths.srcJS, 43 paths.srcJS,
44 'tmp/views.js' 44 'tmp/views.js'
45 ]), 45 ]),
46 concat('foca-busqueda-cliente.js'), 46 concat('foca-busqueda-cliente.js'),
47 replace("'ui.bootstrap'", ''), 47 replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
48 replace('src/views/', ''), 48 replace('src/views/', ''),
49 gulp.dest(paths.tmp), 49 gulp.dest(paths.tmp),
50 rename('foca-busqueda-cliente.min.js'), 50 rename('foca-busqueda-cliente.min.js'),
51 uglify(), 51 uglify(),
52 gulp.dest(paths.dist) 52 gulp.dest(paths.dist)
53 ] 53 ]
54 ); 54 );
55 }); 55 });
56 56
57 gulp.task('pre-commit', function() { 57 gulp.task('pre-commit', function() {
58 return pump( 58 return pump(
59 [ 59 [
60 gulp.src(paths.srcJS), 60 gulp.src(paths.srcJS),
61 jshint('.jshintrc'), 61 jshint('.jshintrc'),
62 jshint.reporter('default'), 62 jshint.reporter('default'),
63 jshint.reporter('fail') 63 jshint.reporter('fail')
64 ] 64 ]
65 ); 65 );
66 }); 66 });
67 67
68 68
69 gulp.task('webserver', function() { 69 gulp.task('webserver', function() {
70 pump [ 70 pump [
71 connect.server({port: 3000}) 71 connect.server({port: 3000})
72 ] 72 ]
73 }); 73 });
74 74
75 gulp.task('clean-post-install', function() { 75 gulp.task('clean-post-install', function() {
76 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js', 76 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
77 'index.html'], {read: false}) 77 'index.html'], {read: false})
78 .pipe(clean()); 78 .pipe(clean());
79 }); 79 });
80 80
81 gulp.task('default', ['webserver']); 81 gulp.task('default', ['webserver']);
82 82
83 gulp.task('watch', function(){ 83 gulp.task('watch', function(){
84 gulp.watch([paths.srcJS, paths.srcViews], ['uglify']); 84 gulp.watch([paths.srcJS, paths.srcViews], ['uglify']);
85 }); 85 });
86 86
1 <html ng-app="focaBusquedaCliente"> 1 <html ng-app="focaBusquedaCliente">
2 2
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 6
7 <!--CSS--> 7 <!--CSS-->
8 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> 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" /> 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">
10 11
11 <!--VENDOR JS--> 12 <!--VENDOR JS-->
12 <script src="node_modules/jquery/dist/jquery.min.js"></script> 13 <script src="node_modules/jquery/dist/jquery.min.js"></script>
13 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 14 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
14 <script src="node_modules/angular/angular.min.js"></script> 15 <script src="node_modules/angular/angular.min.js"></script>
15 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.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>
16 21
17 <!-- BUILD --> 22 <!-- BUILD -->
18 <script src="src/js/app.js"></script> 23 <script src="src/js/app.js"></script>
19 <script src="src/js/controller.js"></script> 24 <script src="src/js/controller.js"></script>
20 <script src="src/js/service.js"></script> 25 <script src="src/js/service.js"></script>
21 26
22 <script src="src/etc/develop.js"></script> 27 <script src="src/etc/develop.js"></script>
23 <!-- /BUILD --> 28 <!-- /BUILD -->
24 29
25 <!-- CONFIG PARA DEVELOP --> 30 <!-- CONFIG PARA DEVELOP -->
26 <script type="text/javascript"> 31 <script type="text/javascript">
27 angular.module('focaBusquedaCliente') 32 angular.module('focaBusquedaCliente')
28 .controller('controller', ['$uibModal', function ($uibModal) { 33 .controller('controller', ['$uibModal', function ($uibModal) {
29 var modalInstance = $uibModal.open( 34 var modalInstance = $uibModal.open(
30 { 35 {
31 ariaLabelledBy: 'Busqueda de Cliete', 36 ariaLabelledBy: 'Busqueda de Cliete',
32 templateUrl: 'src/views/foca-busqueda-cliente-modal.html', 37 templateUrl: 'src/views/foca-busqueda-cliente-modal.html',
33 controller: 'focaBusquedaClienteModalController', 38 controller: 'focaBusquedaClienteModalController',
34 size: 'lg' 39 size: 'lg'
35 } 40 }
36 ); 41 );
37 }]); 42 }]);
38 </script> 43 </script>
39 </head> 44 </head>
40 45
41 <body ng-controller="controller"> 46 <body ng-controller="controller">
42 <style> 47 <style>
43 .p-5 { 48 .p-5 {
44 padding: 5px !important; 49 padding: 5px !important;
45 } 50 }
46 </style> 51 </style>
47 </body> 52 </body>
48 53
49 </html> 54 </html>
1 { 1 {
2 "name": "foca-busqueda-cliente", 2 "name": "foca-busqueda-cliente",
3 "version": "1.0.0", 3 "version": "1.0.0",
4 "description": "Búsqueda de clientes", 4 "description": "Búsqueda de clientes",
5 "main": "dist/foca-abm-sectores.js", 5 "main": "dist/foca-abm-sectores.js",
6 "scripts": { 6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1", 7 "test": "echo \"Error: no test specified\" && exit 1",
8 "compile": "gulp uglify", 8 "compile": "gulp uglify",
9 "postinstall": "npm run compile && gulp clean-post-install", 9 "postinstall": "npm run compile && gulp clean-post-install",
10 "install-dev": "npm install -D angular bootstrap angular-ui-bootstrap ui-bootstrap4 font-awesom jquery pre-commit jshint pump jasmine-core gulp gulp-connect gulp-angular-templatecache gulp-concat gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify-es gulp-clean" 10 "install-dev": "npm install -D angular bootstrap angular-ladda ladda@1.0.6 angular-ui-bootstrap ui-bootstrap4 font-awesome jquery pre-commit jshint pump jasmine-core gulp gulp-connect gulp-angular-templatecache gulp-concat gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify-es gulp-clean gulp-uglify git+https://debo.suite.repo/modulos-npm/foca-directivas.git"
11 }, 11 },
12 "repository": { 12 "repository": {
13 "type": "git", 13 "type": "git",
14 "url": "https://debo.suite.repo/modulos-npm/foca-busqueda-cliente.git" 14 "url": "https://debo.suite.repo/modulos-npm/foca-busqueda-cliente.git"
15 }, 15 },
16 "author": "Foca Software", 16 "author": "Foca Software",
17 "license": "ISC", 17 "license": "ISC",
18 "peerDependencies": { 18 "peerDependencies": {
19 "angular": "^1.7.x", 19 "angular": "^1.7.x",
20 "bootstrap": "^4.1.x", 20 "bootstrap": "^4.1.x",
21 "jquery": "^3.3.x", 21 "jquery": "^3.3.x",
22 "font-awesome": "^4.7.x", 22 "font-awesome": "^4.7.x",
23 "gulp": "^3.9.x", 23 "gulp": "^3.9.x",
24 "gulp-concat": "2.6.x", 24 "gulp-concat": "2.6.x",
25 "gulp-jshint": "^2.1.x", 25 "gulp-jshint": "^2.1.x",
26 "gulp-rename": "^1.4.x", 26 "gulp-rename": "^1.4.x",
27 "gulp-replace": "^1.0.x", 27 "gulp-replace": "^1.0.x",
28 "gulp-uglify-es": "^1.0.x", 28 "gulp-uglify-es": "^1.0.x",
29 "jshint": "^2.9.x", 29 "jshint": "^2.9.x",
30 "pump": "^3.0.x" 30 "pump": "^3.0.x"
31 }, 31 },
32 "devDependencies": { 32 "devDependencies": {
33 "angular": "1.7.4", 33 "angular": "^1.7.4",
34 "angular-ui-bootstrap": "2.5.6", 34 "angular-ladda": "^0.4.3",
35 "bootstrap": "4.1.3", 35 "angular-ui-bootstrap": "^2.5.6",
36 "font-awesome": "4.7.0", 36 "bootstrap": "^4.1.3",
37 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git",
38 "font-awesome": "^4.7.0",
37 "gulp": "^3.9.1", 39 "gulp": "^3.9.1",
38 "gulp-angular-templatecache": "2.2.1", 40 "gulp-angular-templatecache": "^2.2.1",
39 "gulp-clean": "^0.4.0", 41 "gulp-clean": "^0.4.0",
40 "gulp-concat": "2.6.1", 42 "gulp-concat": "^2.6.1",
41 "gulp-connect": "^5.6.1", 43 "gulp-connect": "^5.6.1",
42 "gulp-htmlmin": "5.0.1", 44 "gulp-htmlmin": "^5.0.1",
43 "gulp-jshint": "2.1.0", 45 "gulp-jshint": "^2.1.0",
44 "gulp-rename": "1.4.0", 46 "gulp-rename": "^1.4.0",
45 "gulp-replace": "1.0.0", 47 "gulp-replace": "^1.0.0",
46 "gulp-uglify-es": "1.0.4", 48 "gulp-uglify": "^3.0.1",
47 "jasmine-core": "3.2.1", 49 "gulp-uglify-es": "^1.0.4",
48 "jquery": "3.3.1", 50 "jasmine-core": "^3.2.1",
49 "jshint": "2.9.6", 51 "jquery": "^3.3.1",
52 "jshint": "^2.9.6",
53 "ladda": "1.0.6",
50 "pre-commit": "^1.2.2", 54 "pre-commit": "^1.2.2",
51 "pump": "3.0.0", 55 "pump": "^3.0.0",
52 "ui-bootstrap4": "^3.0.5" 56 "ui-bootstrap4": "^3.0.5"
53 } 57 }
54 } 58 }
55 59
1 angular.module('focaBusquedaCliente', ['ui.bootstrap']); 1 angular.module('focaBusquedaCliente', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
2 2
src/js/controller.js
Diff comments   View file @ 76bcf36
1 angular.module('focaBusquedaCliente') 1 angular.module('focaBusquedaCliente')
2 .controller('focaBusquedaClienteModalController', [ 2 .controller('focaBusquedaClienteModalController', [
3 '$uibModalInstance', 'focaBusquedaClienteService', '$scope', 3 '$uibModalInstance', 'focaBusquedaClienteService', '$scope', '$filter',
4 function($uibModalInstance, focaBusquedaClienteService, $scope) { 4 function($uibModalInstance, focaBusquedaClienteService, $scope, $filter) {
5 $scope.obtenerClientesPorNombreOCuit = function(textoBusqueda) { 5
6 return focaBusquedaClienteService 6 $scope.filters = '';
7 .obtenerClientesPorNombreOCuit(textoBusqueda) 7 $scope.primerBusqueda = false;
8 .then(function(datos) { 8 // pagination
9 return datos.data; 9 $scope.numPerPage = 10;
10 }); 10 $scope.currentPage = 1;
11 $scope.filteredClientes = [];
12 $scope.currentPageClientes = [];
13 $scope.selectedClientes = -1;
14
15 $scope.busquedaPress = function(key) {
16 if (key === 13) {
17 $scope.searchLoading = true;
18 focaBusquedaClienteService.obtenerClientesPorNombreOCuit($scope.filters).then(
19 function(res) {
20 $scope.primerBusqueda = true;
21 $scope.clientes = res.data;
22 $scope.search();
23 primera();
24 $scope.searchLoading = false;
25 });
26 }
11 }; 27 };
12 $scope.seleccionar = function(cliente) { 28
13 $scope.cliente = cliente; 29 $scope.search = function () {
30 if($scope.primerBusqueda) {
31 $scope.filteredClientes = $filter('filter')(
32 $scope.clientes, {$: $scope.filters}
33 );
34
35 $scope.lastPage = Math.ceil(
36 $scope.filteredClientes.length / $scope.numPerPage
37 );
38
39 $scope.resetPage();
40 }
14 }; 41 };
15 $scope.cancelar = function() { 42
16 $uibModalInstance.dismiss(); 43 $scope.resetPage = function () {
44 $scope.currentPage = 1;
45 $scope.selectPage(1);
17 }; 46 };
18 $scope.aceptar = function() { 47
19 $uibModalInstance.close($scope.cliente); 48 $scope.selectPage = function (page) {
49 console.info(page);
50 var start = (page - 1) * $scope.numPerPage;
51 var end = start + $scope.numPerPage;
52 $scope.paginas = [];
53 $scope.paginas = calcularPages(page);
54 $scope.currentPageClientes = $scope.filteredClientes.slice(start, end);
55 $scope.currentPage = page;
20 }; 56 };
57
58 $scope.select = function(cliente) {
59 $uibModalInstance.close(cliente);
60 };
61
62 $scope.cancel = function() {
63 $uibModalInstance.dismiss('cancel');
64 };
65
66 $scope.busquedaDown = function(key) {
67 if (key === 40) {
68 primera(key);
69 }
70 };
71
72 $scope.itemCliente = 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.selectedClientes = 0;
122 }
123
124 function anterior() {
125 if ($scope.selectedClientes === 0 && $scope.currentPage > 1) {
126 retrocederPagina();
127 } else {
128 $scope.selectedClientes--;
129 }
130 }
131
132 function siguiente() {
133 if ($scope.selectedClientes < $scope.currentPageClientes.length - 1 ) {
134 $scope.selectedClientes++;
135 } else {
136 avanzarPagina();
137 }
138 }
139
140 function retrocederPagina() {
141 if ($scope.currentPage > 1) {
142 $scope.selectPage($scope.currentPage - 1);
143 $scope.selectedClientes = $scope.numPerPage - 1;
144 }
145 }
146
147 function avanzarPagina() {
148 if ($scope.currentPage < $scope.lastPage) {
149 $scope.selectPage($scope.currentPage + 1);
150 $scope.selectedClientes = 0;
151 }
152 }
21 } 153 }
22 ]); 154 ]);
23 155
src/views/foca-busqueda-cliente-modal.html
Diff comments   View file @ 76bcf36
1 <div class="modal-header py-1"> 1 <div class="modal-header py-1">
2 <h5 class="modal-title">Búsqueda de cliente</h5> 2 <h5 class="modal-title">Búsqueda de Cliente</h5>
3 </div> 3 </div>
4 <div class="modal-body"> 4 <div class="modal-body" id="modal-body">
5 <form> 5 <div class="input-group">
6 <div class="form-group row"> 6 <input
7 <label class="col-sm-4 col-form-label">Nombre o CUIT</label> 7 ladda="searchLoading"
8 <div class="col-sm-8"> 8 type="text"
9 <input 9 class="form-control"
10 type="text" 10 placeholder="Busqueda"
11 ng-model="cliente" 11 ng-model="filters"
12 placeholder="Nombre o CUIT" 12 ng-change="search()"
13 uib-typeahead=" 13 ng-keydown="busquedaDown($event.keyCode)"
14 cliente.cod + ' ' + cliente.nom + ' (' + cliente.cuit + ')' 14 ng-keypress="busquedaPress($event.keyCode)"
15 for cliente 15 foca-focus="selectedClientes == -1"
16 in obtenerClientesPorNombreOCuit($viewValue) 16 ng-focus="selectedClientes = -1"
17 " 17 >
18 typeahead-loading="cargandoClientes" 18 <div class="input-group-append">
19 typeahead-no-results="sinResultados" 19 <button
20 typeahead-on-select="seleccionar($item)" 20 ladda="searchLoading"
21 class="form-control form-control-sm" 21 class="btn btn-outline-secondary"
22 foca-focus="true" 22 type="button"
23 ng-keypress="$event.keyCode === 13 && aceptar()" 23 ng-click="busquedaPress(13)">
24 > 24 <i class="fa fa-search" aria-hidden="true"></i>
25 <i ng-show="cargandoClientes" class="fas fa-sync"></i> 25 </button>
26 <div ng-show="sinResultados"> 26 </div>
27 <i class="fa fa-minus"></i> No se encontraron resultados. 27 </div>
28 </div> 28 <table ng-show="primerBusqueda" class="table table-striped table-sm">
29 </div> 29 <thead>
30 </div> 30 <tr>
31 </form> 31 <th>Código</th>
32 <th>Nombre</th>
33 <th>CUIT</th>
34 <th></th>
35 </tr>
36 </thead>
37 <tbody>
38 <tr ng-show="currentPageClientes.length == 0 && primerBusqueda">
39 <td colspan="4">
40 No se encontraron resultados.
41 </td>
42 </tr>
43 <tr
44 class="selectable"
45 ng-repeat="(key, cliente) in currentPageClientes"
46 ng-click="select(cliente)">
47 <td ng-bind="cliente.cod"></td>
48 <td ng-bind="cliente.nom"></td>
49 <td ng-bind="cliente.cuit"></td>
50 <td>
51 <button
52 type="button"
53 class="btn btn-xs p-1 float-right"
54 ng-class="{
55 'btn-secondary': selectedClientes != key,
56 'btn-primary': selectedClientes == key
57 }"
58 ng-click="select(cliente)"
59 foca-focus="selectedClientes == {{key}}"
60 ng-keydown="itemCliente($event.keyCode)"
61 >
62 <i class="fa fa-arrow-right" aria-hidden="true"></i>
63 </button>
64 </td>
65 </tr>
66 </tbody>
67 </table>
68 <nav ng-show="currentPageClientes.length > 0 && primerBusqueda">
69 <ul class="pagination pagination-sm mb-0">
70 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
71 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
72 <span aria-hidden="true">&laquo;</span>
73 <span class="sr-only">Anterior</span>
74 </a>
75 </li>
76 <li
77 class="page-item"
78 ng-repeat="pagina in paginas"
79 ng-class="{'active': pagina == currentPage}"
80 >
81 <a
82 class="page-link"
83 href="#"
84 ng-click="selectPage(pagina)"
85 ng-bind="pagina"
86 ></a>
87 </li>
88 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
89 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
90 <span aria-hidden="true">&raquo;</span>
91 <span class="sr-only">Siguiente</span>
92 </a>
93 </li>
94 </ul>
95 </nav>
32 </div> 96 </div>
33 <div class="modal-footer py-1"> 97 <div class="modal-footer py-1">
34 <button class="btn btn-sm" ng-click="aceptar()">Aceptar</button> 98 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
35 <button class="btn btn-sm" ng-click="cancelar()">Cancelar</button>
36 </div> 99 </div>