Commit 82124d52ed8dc7328fa83bd18e07b9430e845572

Authored by Jose Pinto
1 parent 8455c40bb2
Exists in master

buscador sin resultados hace focus

src/js/controller.js
1 angular.module('focaModalProveedor') 1 angular.module('focaModalProveedor')
2 .controller('focaModalProveedorCtrl', [ 2 .controller('focaModalProveedorCtrl', [
3 '$timeout',
3 '$filter', 4 '$filter',
4 '$scope', 5 '$scope',
5 '$uibModalInstance', 6 '$uibModalInstance',
6 'focaModalProveedorService', 7 'focaModalProveedorService',
7 'transportista', 8 'transportista',
8 function ($filter, $scope, $uibModalInstance, focaModalProveedorService, transportista) { 9 function ($timeout, $filter, $scope, $uibModalInstance,
10 focaModalProveedorService, transportista) {
9 11
10 $scope.filters = ''; 12 $scope.filters = '';
11 $scope.primerBusqueda = false; 13 $scope.primerBusqueda = false;
12 // pagination 14 // pagination
13 $scope.numPerPage = 10; 15 $scope.numPerPage = 10;
14 $scope.currentPage = 1; 16 $scope.currentPage = 1;
15 $scope.filteredProveedores = []; 17 $scope.filteredProveedores = [];
16 $scope.currentPageProveedores = []; 18 $scope.currentPageProveedores = [];
17 $scope.selectedProveedores = -1; 19 $scope.selectedProveedores = -1;
18 $scope.transportista = transportista | false; 20 $scope.transportista = transportista | false;
19 21
20 $scope.busquedaPress = function(key) { 22 $scope.busquedaPress = function(key) {
21 if (key === 13) { 23 if (key === 13) {
22 $scope.searchLoading = true; 24 $scope.searchLoading = true;
23 var json = { 25 var json = {
24 razonCuitCod: $scope.filters 26 razonCuitCod: $scope.filters
25 }; 27 };
26 focaModalProveedorService.getProveedores(json).then( 28 focaModalProveedorService.getProveedores(json).then(
27 function(res) { 29 function(res) {
28 for (var i = res.data.length - 1; i >= 0; i--) { 30 for (var i = res.data.length - 1; i >= 0; i--) {
29 if (res.data[i].COD === 0) { 31 if (res.data[i].COD === 0) {
30 delete res.data[i]; 32 delete res.data[i];
31 } 33 }
32 } 34 }
33 $scope.primerBusqueda = true; 35 $scope.primerBusqueda = true;
34 $scope.proveedores = res.data; 36 $scope.proveedores = res.data;
35 $scope.search(); 37 $scope.search(true);
36 primera(); 38 primera();
37 $scope.searchLoading = false; 39 $scope.searchLoading = false;
38 }); 40 });
39 } 41 }
40 }; 42 };
41 43
42 $scope.search = function () { 44 $scope.search = function (pressed) {
43 if($scope.primerBusqueda) { 45 if($scope.primerBusqueda) {
44 $scope.filteredProveedores = $filter('filter')( 46 $scope.filteredProveedores = $filter('filter')(
45 $scope.proveedores, {$: $scope.filters} 47 $scope.proveedores, {$: $scope.filters}
46 ); 48 );
47 49
50 if(pressed && $scope.filteredProveedores.length === 0){
51 $timeout(function() {
52 angular.element('#search')[0].focus();
53 $scope.filters = '';
54 });
55 }
56
48 $scope.lastPage = Math.ceil( 57 $scope.lastPage = Math.ceil(
49 $scope.filteredProveedores.length / $scope.numPerPage 58 $scope.filteredProveedores.length / $scope.numPerPage
50 ); 59 );
51 60
52 $scope.resetPage(); 61 $scope.resetPage();
53 } 62 }
54 }; 63 };
55 64
56 $scope.resetPage = function () { 65 $scope.resetPage = function () {
57 $scope.currentPage = 1; 66 $scope.currentPage = 1;
58 $scope.selectPage(1); 67 $scope.selectPage(1);
59 }; 68 };
60 69
61 $scope.selectPage = function (page) { 70 $scope.selectPage = function (page) {
62 console.info(page); 71 console.info(page);
63 var start = (page - 1) * $scope.numPerPage; 72 var start = (page - 1) * $scope.numPerPage;
64 var end = start + $scope.numPerPage; 73 var end = start + $scope.numPerPage;
65 $scope.paginas = []; 74 $scope.paginas = [];
66 $scope.paginas = calcularPages(page); 75 $scope.paginas = calcularPages(page);
67 $scope.currentPageProveedores = $scope.filteredProveedores.slice(start, end); 76 $scope.currentPageProveedores = $scope.filteredProveedores.slice(start, end);
68 $scope.currentPage = page; 77 $scope.currentPage = page;
69 }; 78 };
70 79
71 $scope.select = function(proveedor) { 80 $scope.select = function(proveedor) {
72 $uibModalInstance.close(proveedor); 81 $uibModalInstance.close(proveedor);
73 }; 82 };
74 83
75 $scope.cancel = function() { 84 $scope.cancel = function() {
76 $uibModalInstance.dismiss('cancel'); 85 $uibModalInstance.dismiss('cancel');
77 }; 86 };
78 87
79 $scope.busquedaDown = function(key) { 88 $scope.busquedaDown = function(key) {
80 if (key === 40) { 89 if (key === 40) {
81 primera(key); 90 primera(key);
82 } 91 }
83 }; 92 };
84 93
85 $scope.itemProveedor = function(key) { 94 $scope.itemProveedor = function(key) {
86 if (key === 38) { 95 if (key === 38) {
87 anterior(key); 96 anterior(key);
88 } 97 }
89 98
90 if (key === 40) { 99 if (key === 40) {
91 siguiente(key); 100 siguiente(key);
92 } 101 }
93 102
94 if (key === 37) { 103 if (key === 37) {
95 retrocederPagina(); 104 retrocederPagina();
96 } 105 }
97 106
98 if (key === 39) { 107 if (key === 39) {
99 avanzarPagina(); 108 avanzarPagina();
100 } 109 }
101 }; 110 };
102 111
103 function calcularPages(paginaActual) { 112 function calcularPages(paginaActual) {
104 var paginas = []; 113 var paginas = [];
105 paginas.push(paginaActual); 114 paginas.push(paginaActual);
106 115
107 if (paginaActual - 1 > 1) { 116 if (paginaActual - 1 > 1) {
108 117
109 paginas.unshift(paginaActual - 1); 118 paginas.unshift(paginaActual - 1);
110 if (paginaActual - 2 > 1) { 119 if (paginaActual - 2 > 1) {
111 paginas.unshift(paginaActual - 2); 120 paginas.unshift(paginaActual - 2);
112 } 121 }
113 } 122 }
114 123
115 if (paginaActual + 1 < $scope.lastPage) { 124 if (paginaActual + 1 < $scope.lastPage) {
116 paginas.push(paginaActual + 1); 125 paginas.push(paginaActual + 1);
117 if (paginaActual + 2 < $scope.lastPage) { 126 if (paginaActual + 2 < $scope.lastPage) {
118 paginas.push(paginaActual + 2); 127 paginas.push(paginaActual + 2);
119 } 128 }
120 } 129 }
121 130
122 if (paginaActual !== 1) { 131 if (paginaActual !== 1) {
123 paginas.unshift(1); 132 paginas.unshift(1);
124 } 133 }
125 134
126 if (paginaActual !== $scope.lastPage) { 135 if (paginaActual !== $scope.lastPage) {
127 paginas.push($scope.lastPage); 136 paginas.push($scope.lastPage);
128 } 137 }
129 138
130 return paginas; 139 return paginas;
131 } 140 }
132 141
133 function primera() { 142 function primera() {
134 $scope.selectedProveedores = 0; 143 $scope.selectedProveedores = 0;
135 } 144 }
136 145
137 function anterior() { 146 function anterior() {
138 if ($scope.selectedProveedores === 0 && $scope.currentPage > 1) { 147 if ($scope.selectedProveedores === 0 && $scope.currentPage > 1) {
139 retrocederPagina(); 148 retrocederPagina();
140 } else { 149 } else {
141 $scope.selectedProveedores--; 150 $scope.selectedProveedores--;
142 } 151 }
143 } 152 }
144 153
145 function siguiente() { 154 function siguiente() {
146 if ($scope.selectedProveedores < $scope.currentPageProveedores.length - 1 ) { 155 if ($scope.selectedProveedores < $scope.currentPageProveedores.length - 1 ) {
147 $scope.selectedProveedores++; 156 $scope.selectedProveedores++;
148 } else { 157 } else {
149 avanzarPagina(); 158 avanzarPagina();
150 } 159 }
151 } 160 }
152 161
153 function retrocederPagina() { 162 function retrocederPagina() {
154 if ($scope.currentPage > 1) { 163 if ($scope.currentPage > 1) {
155 $scope.selectPage($scope.currentPage - 1); 164 $scope.selectPage($scope.currentPage - 1);
156 $scope.selectedProveedores = $scope.numPerPage - 1; 165 $scope.selectedProveedores = $scope.numPerPage - 1;
157 } 166 }
158 } 167 }
159 168
160 function avanzarPagina() { 169 function avanzarPagina() {
161 if ($scope.currentPage < $scope.lastPage) { 170 if ($scope.currentPage < $scope.lastPage) {
162 $scope.selectPage($scope.currentPage + 1); 171 $scope.selectPage($scope.currentPage + 1);
163 $scope.selectedProveedores = 0; 172 $scope.selectedProveedores = 0;
164 } 173 }
165 } 174 }
166 }] 175 }]
167 ); 176 );
168 177
src/views/modal-proveedor.html
1 <div class="modal-header py-1"> 1 <div class="modal-header py-1">
2 <div class="row w-100"> 2 <div class="row w-100">
3 <div class="col-lg-6"> 3 <div class="col-lg-6">
4 <h5 class="modal-title my-1" ng-hide="transportista">Búsqueda de Proveedor</h5> 4 <h5 class="modal-title my-1" ng-hide="transportista">Búsqueda de Proveedor</h5>
5 <h5 class="modal-title my-1" ng-show="transportista">Búsqueda de Transportista</h5> 5 <h5 class="modal-title my-1" ng-show="transportista">Búsqueda de Transportista</h5>
6 </div> 6 </div>
7 <div class="input-group col-lg-6 pr-0 my-2"> 7 <div class="input-group col-lg-6 pr-0 my-2">
8 <input 8 <input
9 ladda="searchLoading" 9 ladda="searchLoading"
10 type="text" 10 type="text"
11 class="form-control form-control-sm" 11 class="form-control form-control-sm"
12 id="search"
12 placeholder="Busqueda" 13 placeholder="Busqueda"
13 ng-model="filters" 14 ng-model="filters"
14 ng-change="search()" 15 ng-change="search()"
15 ng-keydown="busquedaDown($event.keyCode)" 16 ng-keydown="busquedaDown($event.keyCode)"
16 ng-keypress="busquedaPress($event.keyCode)" 17 ng-keypress="busquedaPress($event.keyCode)"
17 foca-focus="selectedProveedores == -1" 18 foca-focus="selectedProveedores == -1"
18 ng-focus="selectedProveedores = -1" 19 ng-focus="selectedProveedores = -1"
19 teclado-virtual 20 teclado-virtual
20 > 21 >
21 <div class="input-group-append"> 22 <div class="input-group-append">
22 <button 23 <button
23 ladda="searchLoading" 24 ladda="searchLoading"
24 class="btn btn-outline-secondary" 25 class="btn btn-outline-secondary"
25 type="button" 26 type="button"
26 ng-click="busquedaPress(13)"> 27 ng-click="busquedaPress(13)">
27 <i class="fa fa-search" aria-hidden="true"></i> 28 <i class="fa fa-search" aria-hidden="true"></i>
28 </button> 29 </button>
29 </div> 30 </div>
30 </div> 31 </div>
31 </div> 32 </div>
32 </div> 33 </div>
33 <div class="modal-body" id="modal-body"> 34 <div class="modal-body" id="modal-body">
34 35
35 <div ng-show="!primerBusqueda"> 36 <div ng-show="!primerBusqueda">
36 Debe realizar una primer búsqueda. 37 Debe realizar una primer búsqueda.
37 </div> 38 </div>
38 39
39 <table ng-show="primerBusqueda" class="table table-striped table-sm"> 40 <table ng-show="primerBusqueda" class="table table-striped table-sm">
40 <thead> 41 <thead>
41 <tr> 42 <tr>
42 <th>Código</th> 43 <th>Código</th>
43 <th>Nombre</th> 44 <th>Nombre</th>
44 <th>CUIT</th> 45 <th>CUIT</th>
45 <th></th> 46 <th></th>
46 </tr> 47 </tr>
47 </thead> 48 </thead>
48 <tbody> 49 <tbody>
49 <tr ng-show="currentPageProveedores.length == 0 && primerBusqueda"> 50 <tr ng-show="currentPageProveedores.length == 0 && primerBusqueda">
50 <td colspan="4"> 51 <td colspan="4">
51 No se encontraron resultados. 52 No se encontraron resultados.
52 </td> 53 </td>
53 </tr> 54 </tr>
54 <tr 55 <tr
55 class="selectable" 56 class="selectable"
56 ng-repeat="(key, proveedor) in currentPageProveedores" 57 ng-repeat="(key, proveedor) in currentPageProveedores"
57 ng-click="select(proveedor)"> 58 ng-click="select(proveedor)">
58 <td ng-bind="proveedor.COD"></td> 59 <td ng-bind="proveedor.COD"></td>
59 <td ng-bind="proveedor.NOM"></td> 60 <td ng-bind="proveedor.NOM"></td>
60 <td ng-bind="proveedor.CUIT"></td> 61 <td ng-bind="proveedor.CUIT"></td>
61 <td> 62 <td>
62 <button 63 <button
63 type="button" 64 type="button"
64 class="btn btn-xs p-1 float-right" 65 class="btn btn-xs p-1 float-right"
65 ng-class="{ 66 ng-class="{
66 'btn-secondary': selectedProveedores != key, 67 'btn-secondary': selectedProveedores != key,
67 'btn-primary': selectedProveedores == key 68 'btn-primary': selectedProveedores == key
68 }" 69 }"
69 ng-click="select(proveedor)" 70 ng-click="select(proveedor)"
70 foca-focus="selectedProveedores == {{key}}" 71 foca-focus="selectedProveedores == {{key}}"
71 ng-keydown="itemProveedor($event.keyCode)" 72 ng-keydown="itemProveedor($event.keyCode)"
72 > 73 >
73 <i class="fa fa-circle-thin" aria-hidden="true"></i> 74 <i class="fa fa-circle-thin" aria-hidden="true"></i>
74 </button> 75 </button>
75 </td> 76 </td>
76 </tr> 77 </tr>
77 </tbody> 78 </tbody>
78 </table> 79 </table>
79 80
80 </div> 81 </div>
81 <div class="modal-footer py-1"> 82 <div class="modal-footer py-1">
82 <nav ng-show="currentPageProveedores.length > 0 && primerBusqueda" class="mr-auto"> 83 <nav ng-show="currentPageProveedores.length > 0 && primerBusqueda" class="mr-auto">
83 <ul class="pagination pagination-sm mb-0"> 84 <ul class="pagination pagination-sm mb-0">
84 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 85 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
85 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)"> 86 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
86 <span aria-hidden="true">&laquo;</span> 87 <span aria-hidden="true">&laquo;</span>
87 <span class="sr-only">Anterior</span> 88 <span class="sr-only">Anterior</span>
88 </a> 89 </a>
89 </li> 90 </li>
90 <li 91 <li
91 class="page-item" 92 class="page-item"
92 ng-repeat="pagina in paginas" 93 ng-repeat="pagina in paginas"
93 ng-class="{'active': pagina == currentPage}" 94 ng-class="{'active': pagina == currentPage}"
94 > 95 >
95 <a 96 <a
96 class="page-link" 97 class="page-link"
97 href="javascript:void();" 98 href="javascript:void();"
98 ng-click="selectPage(pagina)" 99 ng-click="selectPage(pagina)"
99 ng-bind="pagina" 100 ng-bind="pagina"
100 ></a> 101 ></a>
101 </li> 102 </li>
102 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 103 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
103 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)"> 104 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
104 <span aria-hidden="true">&raquo;</span> 105 <span aria-hidden="true">&raquo;</span>
105 <span class="sr-only">Siguiente</span> 106 <span class="sr-only">Siguiente</span>
106 </a> 107 </a>
107 </li> 108 </li>
108 </ul> 109 </ul>
109 </nav> 110 </nav>
110 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 111 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
111 </div> 112 </div>
112 113