From 76bcf36f2f388e1cafa4a9bf7e75dc3cdf4485c5 Mon Sep 17 00:00:00 2001 From: efernandez Date: Wed, 31 Oct 2018 16:31:13 -0300 Subject: [PATCH] Modal se muestra en grilla, agrego angular ladda --- gulpfile.js | 2 +- index.html | 5 + package.json | 36 ++++--- src/js/app.js | 2 +- src/js/controller.js | 160 ++++++++++++++++++++++++++--- src/views/foca-busqueda-cliente-modal.html | 125 ++++++++++++++++------ 6 files changed, 267 insertions(+), 63 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index 8f19dd2..734b1db 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -44,7 +44,7 @@ gulp.task('uglify', ['templates'], function() { 'tmp/views.js' ]), concat('foca-busqueda-cliente.js'), - replace("'ui.bootstrap'", ''), + replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'), replace('src/views/', ''), gulp.dest(paths.tmp), rename('foca-busqueda-cliente.min.js'), diff --git a/index.html b/index.html index e832a76..9a0abf2 100644 --- a/index.html +++ b/index.html @@ -7,12 +7,17 @@ + + + + + diff --git a/package.json b/package.json index 978a72d..c8685b4 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "test": "echo \"Error: no test specified\" && exit 1", "compile": "gulp uglify", "postinstall": "npm run compile && gulp clean-post-install", - "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" + "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" }, "repository": { "type": "git", @@ -30,25 +30,29 @@ "pump": "^3.0.x" }, "devDependencies": { - "angular": "1.7.4", - "angular-ui-bootstrap": "2.5.6", - "bootstrap": "4.1.3", - "font-awesome": "4.7.0", + "angular": "^1.7.4", + "angular-ladda": "^0.4.3", + "angular-ui-bootstrap": "^2.5.6", + "bootstrap": "^4.1.3", + "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git", + "font-awesome": "^4.7.0", "gulp": "^3.9.1", - "gulp-angular-templatecache": "2.2.1", + "gulp-angular-templatecache": "^2.2.1", "gulp-clean": "^0.4.0", - "gulp-concat": "2.6.1", + "gulp-concat": "^2.6.1", "gulp-connect": "^5.6.1", - "gulp-htmlmin": "5.0.1", - "gulp-jshint": "2.1.0", - "gulp-rename": "1.4.0", - "gulp-replace": "1.0.0", - "gulp-uglify-es": "1.0.4", - "jasmine-core": "3.2.1", - "jquery": "3.3.1", - "jshint": "2.9.6", + "gulp-htmlmin": "^5.0.1", + "gulp-jshint": "^2.1.0", + "gulp-rename": "^1.4.0", + "gulp-replace": "^1.0.0", + "gulp-uglify": "^3.0.1", + "gulp-uglify-es": "^1.0.4", + "jasmine-core": "^3.2.1", + "jquery": "^3.3.1", + "jshint": "^2.9.6", + "ladda": "1.0.6", "pre-commit": "^1.2.2", - "pump": "3.0.0", + "pump": "^3.0.0", "ui-bootstrap4": "^3.0.5" } } diff --git a/src/js/app.js b/src/js/app.js index 9b0981f..d5f0c97 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -1 +1 @@ -angular.module('focaBusquedaCliente', ['ui.bootstrap']); +angular.module('focaBusquedaCliente', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']); diff --git a/src/js/controller.js b/src/js/controller.js index 5a56b79..5daf3f6 100644 --- a/src/js/controller.js +++ b/src/js/controller.js @@ -1,22 +1,154 @@ angular.module('focaBusquedaCliente') .controller('focaBusquedaClienteModalController', [ - '$uibModalInstance', 'focaBusquedaClienteService', '$scope', - function($uibModalInstance, focaBusquedaClienteService, $scope) { - $scope.obtenerClientesPorNombreOCuit = function(textoBusqueda) { - return focaBusquedaClienteService - .obtenerClientesPorNombreOCuit(textoBusqueda) - .then(function(datos) { - return datos.data; - }); + '$uibModalInstance', 'focaBusquedaClienteService', '$scope', '$filter', + function($uibModalInstance, focaBusquedaClienteService, $scope, $filter) { + + $scope.filters = ''; + $scope.primerBusqueda = false; + // pagination + $scope.numPerPage = 10; + $scope.currentPage = 1; + $scope.filteredClientes = []; + $scope.currentPageClientes = []; + $scope.selectedClientes = -1; + + $scope.busquedaPress = function(key) { + if (key === 13) { + $scope.searchLoading = true; + focaBusquedaClienteService.obtenerClientesPorNombreOCuit($scope.filters).then( + function(res) { + $scope.primerBusqueda = true; + $scope.clientes = res.data; + $scope.search(); + primera(); + $scope.searchLoading = false; + }); + } }; - $scope.seleccionar = function(cliente) { - $scope.cliente = cliente; + + $scope.search = function () { + if($scope.primerBusqueda) { + $scope.filteredClientes = $filter('filter')( + $scope.clientes, {$: $scope.filters} + ); + + $scope.lastPage = Math.ceil( + $scope.filteredClientes.length / $scope.numPerPage + ); + + $scope.resetPage(); + } }; - $scope.cancelar = function() { - $uibModalInstance.dismiss(); + + $scope.resetPage = function () { + $scope.currentPage = 1; + $scope.selectPage(1); }; - $scope.aceptar = function() { - $uibModalInstance.close($scope.cliente); + + $scope.selectPage = function (page) { + console.info(page); + var start = (page - 1) * $scope.numPerPage; + var end = start + $scope.numPerPage; + $scope.paginas = []; + $scope.paginas = calcularPages(page); + $scope.currentPageClientes = $scope.filteredClientes.slice(start, end); + $scope.currentPage = page; }; + + $scope.select = function(cliente) { + $uibModalInstance.close(cliente); + }; + + $scope.cancel = function() { + $uibModalInstance.dismiss('cancel'); + }; + + $scope.busquedaDown = function(key) { + if (key === 40) { + primera(key); + } + }; + + $scope.itemCliente = function(key) { + if (key === 38) { + anterior(key); + } + + if (key === 40) { + siguiente(key); + } + + if (key === 37) { + retrocederPagina(); + } + + if (key === 39) { + avanzarPagina(); + } + }; + + function calcularPages(paginaActual) { + var paginas = []; + paginas.push(paginaActual); + + if (paginaActual - 1 > 1) { + + paginas.unshift(paginaActual - 1); + if (paginaActual - 2 > 1) { + paginas.unshift(paginaActual - 2); + } + } + + if (paginaActual + 1 < $scope.lastPage) { + paginas.push(paginaActual + 1); + if (paginaActual + 2 < $scope.lastPage) { + paginas.push(paginaActual + 2); + } + } + + if (paginaActual !== 1) { + paginas.unshift(1); + } + + if (paginaActual !== $scope.lastPage) { + paginas.push($scope.lastPage); + } + + return paginas; + } + + function primera() { + $scope.selectedClientes = 0; + } + + function anterior() { + if ($scope.selectedClientes === 0 && $scope.currentPage > 1) { + retrocederPagina(); + } else { + $scope.selectedClientes--; + } + } + + function siguiente() { + if ($scope.selectedClientes < $scope.currentPageClientes.length - 1 ) { + $scope.selectedClientes++; + } else { + avanzarPagina(); + } + } + + function retrocederPagina() { + if ($scope.currentPage > 1) { + $scope.selectPage($scope.currentPage - 1); + $scope.selectedClientes = $scope.numPerPage - 1; + } + } + + function avanzarPagina() { + if ($scope.currentPage < $scope.lastPage) { + $scope.selectPage($scope.currentPage + 1); + $scope.selectedClientes = 0; + } + } } ]); diff --git a/src/views/foca-busqueda-cliente-modal.html b/src/views/foca-busqueda-cliente-modal.html index 2b38cc3..1d6465d 100644 --- a/src/views/foca-busqueda-cliente-modal.html +++ b/src/views/foca-busqueda-cliente-modal.html @@ -1,36 +1,99 @@
-
Búsqueda de cliente
+
Búsqueda de Cliente
-
-
-
- -
- - -
- No se encontraron resultados. -
-
-
-
+
+
+ +
+ +
+
+ + + + + + + + + + + + + + + + + + + + +
CódigoNombreCUIT
+ No se encontraron resultados. +
+ +
+
- - +
-- 1.9.1