Eric Fernandez / 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
... ... @@ -44,7 +44,7 @@ gulp.task('uglify', ['templates'], function() {
44 44 'tmp/views.js'
45 45 ]),
46 46 concat('foca-busqueda-cliente.js'),
47   - replace("'ui.bootstrap'", ''),
  47 + replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
48 48 replace('src/views/', ''),
49 49 gulp.dest(paths.tmp),
50 50 rename('foca-busqueda-cliente.min.js'),
... ... @@ -7,12 +7,17 @@
7 7 <!--CSS-->
8 8 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
9 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 12 <!--VENDOR JS-->
12 13 <script src="node_modules/jquery/dist/jquery.min.js"></script>
13 14 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
14 15 <script src="node_modules/angular/angular.min.js"></script>
15 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 22 <!-- BUILD -->
18 23 <script src="src/js/app.js"></script>
... ... @@ -7,7 +7,7 @@
7 7 "test": "echo \"Error: no test specified\" && exit 1",
8 8 "compile": "gulp uglify",
9 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 12 "repository": {
13 13 "type": "git",
... ... @@ -30,25 +30,29 @@
30 30 "pump": "^3.0.x"
31 31 },
32 32 "devDependencies": {
33   - "angular": "1.7.4",
34   - "angular-ui-bootstrap": "2.5.6",
35   - "bootstrap": "4.1.3",
36   - "font-awesome": "4.7.0",
  33 + "angular": "^1.7.4",
  34 + "angular-ladda": "^0.4.3",
  35 + "angular-ui-bootstrap": "^2.5.6",
  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 39 "gulp": "^3.9.1",
38   - "gulp-angular-templatecache": "2.2.1",
  40 + "gulp-angular-templatecache": "^2.2.1",
39 41 "gulp-clean": "^0.4.0",
40   - "gulp-concat": "2.6.1",
  42 + "gulp-concat": "^2.6.1",
41 43 "gulp-connect": "^5.6.1",
42   - "gulp-htmlmin": "5.0.1",
43   - "gulp-jshint": "2.1.0",
44   - "gulp-rename": "1.4.0",
45   - "gulp-replace": "1.0.0",
46   - "gulp-uglify-es": "1.0.4",
47   - "jasmine-core": "3.2.1",
48   - "jquery": "3.3.1",
49   - "jshint": "2.9.6",
  44 + "gulp-htmlmin": "^5.0.1",
  45 + "gulp-jshint": "^2.1.0",
  46 + "gulp-rename": "^1.4.0",
  47 + "gulp-replace": "^1.0.0",
  48 + "gulp-uglify": "^3.0.1",
  49 + "gulp-uglify-es": "^1.0.4",
  50 + "jasmine-core": "^3.2.1",
  51 + "jquery": "^3.3.1",
  52 + "jshint": "^2.9.6",
  53 + "ladda": "1.0.6",
50 54 "pre-commit": "^1.2.2",
51   - "pump": "3.0.0",
  55 + "pump": "^3.0.0",
52 56 "ui-bootstrap4": "^3.0.5"
53 57 }
54 58 }
1   -angular.module('focaBusquedaCliente', ['ui.bootstrap']);
  1 +angular.module('focaBusquedaCliente', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
src/js/controller.js
Diff comments   View file @ 76bcf36
1 1 angular.module('focaBusquedaCliente')
2 2 .controller('focaBusquedaClienteModalController', [
3   - '$uibModalInstance', 'focaBusquedaClienteService', '$scope',
4   - function($uibModalInstance, focaBusquedaClienteService, $scope) {
5   - $scope.obtenerClientesPorNombreOCuit = function(textoBusqueda) {
6   - return focaBusquedaClienteService
7   - .obtenerClientesPorNombreOCuit(textoBusqueda)
8   - .then(function(datos) {
9   - return datos.data;
10   - });
  3 + '$uibModalInstance', 'focaBusquedaClienteService', '$scope', '$filter',
  4 + function($uibModalInstance, focaBusquedaClienteService, $scope, $filter) {
  5 +
  6 + $scope.filters = '';
  7 + $scope.primerBusqueda = false;
  8 + // pagination
  9 + $scope.numPerPage = 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) {
13   - $scope.cliente = cliente;
  28 +
  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() {
16   - $uibModalInstance.dismiss();
  42 +
  43 + $scope.resetPage = function () {
  44 + $scope.currentPage = 1;
  45 + $scope.selectPage(1);
17 46 };
18   - $scope.aceptar = function() {
19   - $uibModalInstance.close($scope.cliente);
  47 +
  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 ]);
src/views/foca-busqueda-cliente-modal.html
Diff comments   View file @ 76bcf36
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 3 </div>
4   -<div class="modal-body">
5   - <form>
6   - <div class="form-group row">
7   - <label class="col-sm-4 col-form-label">Nombre o CUIT</label>
8   - <div class="col-sm-8">
9   - <input
10   - type="text"
11   - ng-model="cliente"
12   - placeholder="Nombre o CUIT"
13   - uib-typeahead="
14   - cliente.cod + ' ' + cliente.nom + ' (' + cliente.cuit + ')'
15   - for cliente
16   - in obtenerClientesPorNombreOCuit($viewValue)
17   - "
18   - typeahead-loading="cargandoClientes"
19   - typeahead-no-results="sinResultados"
20   - typeahead-on-select="seleccionar($item)"
21   - class="form-control form-control-sm"
22   - foca-focus="true"
23   - ng-keypress="$event.keyCode === 13 && aceptar()"
24   - >
25   - <i ng-show="cargandoClientes" class="fas fa-sync"></i>
26   - <div ng-show="sinResultados">
27   - <i class="fa fa-minus"></i> No se encontraron resultados.
28   - </div>
29   - </div>
30   - </div>
31   - </form>
  4 +<div class="modal-body" id="modal-body">
  5 + <div class="input-group">
  6 + <input
  7 + ladda="searchLoading"
  8 + type="text"
  9 + class="form-control"
  10 + placeholder="Busqueda"
  11 + ng-model="filters"
  12 + ng-change="search()"
  13 + ng-keydown="busquedaDown($event.keyCode)"
  14 + ng-keypress="busquedaPress($event.keyCode)"
  15 + foca-focus="selectedClientes == -1"
  16 + ng-focus="selectedClientes = -1"
  17 + >
  18 + <div class="input-group-append">
  19 + <button
  20 + ladda="searchLoading"
  21 + class="btn btn-outline-secondary"
  22 + type="button"
  23 + ng-click="busquedaPress(13)">
  24 + <i class="fa fa-search" aria-hidden="true"></i>
  25 + </button>
  26 + </div>
  27 +</div>
  28 + <table ng-show="primerBusqueda" class="table table-striped table-sm">
  29 + <thead>
  30 + <tr>
  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 96 </div>
33 97 <div class="modal-footer py-1">
34   - <button class="btn btn-sm" ng-click="aceptar()">Aceptar</button>
35   - <button class="btn btn-sm" ng-click="cancelar()">Cancelar</button>
  98 + <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
36 99 </div>