Eric Fernandez / foca-modal-remito

Download as
Browse Code »

Commit 717a69624b63404c955f04eb599102c641fdd83a

Authored by Jose Pinto
1 parent 1460dc1e50
Exists in master

buscador sin resultados hace focus

Showing 2 changed files with 13 additions and 4 deletions   Show diff stats
src/js/controller.js
Diff comments   View file @ 717a696
1 angular.module('focaModalRemito') 1 angular.module('focaModalRemito')
2 .controller('focaModalRemitoController', 2 .controller('focaModalRemitoController',
3 [ 3 [
4 '$timeout',
4 '$filter', 5 '$filter',
5 '$scope', 6 '$scope',
6 '$uibModalInstance', 7 '$uibModalInstance',
7 'focaModalRemitoService', 8 'focaModalRemitoService',
8 'usadoPor', 9 'usadoPor',
9 function($filter, $scope, $uibModalInstance, 10 function($timeout, $filter, $scope, $uibModalInstance,
10 focaModalRemitoService, usadoPor 11 focaModalRemitoService, usadoPor
11 ) { 12 ) {
12 var fecha = new Date(); 13 var fecha = new Date();
13 $scope.fechaHasta = new Date(); 14 $scope.fechaHasta = new Date();
14 $scope.fechaDesde = new Date(fecha.setMonth(fecha.getMonth() - 1)); 15 $scope.fechaDesde = new Date(fecha.setMonth(fecha.getMonth() - 1));
15 $scope.filters = ''; 16 $scope.filters = '';
16 $scope.remitos = []; 17 $scope.remitos = [];
17 $scope.primerBusqueda = false; 18 $scope.primerBusqueda = false;
18 $scope.searchLoading = false; 19 $scope.searchLoading = false;
19 // pagination 20 // pagination
20 $scope.numPerPage = 10; 21 $scope.numPerPage = 10;
21 $scope.currentPage = 1; 22 $scope.currentPage = 1;
22 $scope.filteredRemitos = []; 23 $scope.filteredRemitos = [];
23 $scope.currentPageRemitos = []; 24 $scope.currentPageRemitos = [];
24 $scope.selectedRemito = -1; 25 $scope.selectedRemito = -1;
25 26
26 //METODOS 27 //METODOS
27 $scope.busquedaPress = function(key) { 28 $scope.busquedaPress = function(key) {
28 if (key === 13) { 29 if (key === 13) {
29 //TODO Validaciones con alertas de foca 30 //TODO Validaciones con alertas de foca
30 if(!$scope.fechaDesde) { 31 if(!$scope.fechaDesde) {
31 alert('INGRESE FECHA DESDE'); 32 alert('INGRESE FECHA DESDE');
32 return; 33 return;
33 } 34 }
34 if(!$scope.fechaHasta) { 35 if(!$scope.fechaHasta) {
35 alert('INGRESE FECHA HASTA'); 36 alert('INGRESE FECHA HASTA');
36 return; 37 return;
37 } 38 }
38 if($scope.fechaDesde > $scope.fechaHasta) { 39 if($scope.fechaDesde > $scope.fechaHasta) {
39 alert('La fecha desde no puede ser mayor a la fecha hasta'); 40 alert('La fecha desde no puede ser mayor a la fecha hasta');
40 return; 41 return;
41 } 42 }
42 $scope.searchLoading = true; 43 $scope.searchLoading = true;
43 //TODO: usar filtros en vez de toISOString 44 //TODO: usar filtros en vez de toISOString
44 focaModalRemitoService 45 focaModalRemitoService
45 .getRemitos(usadoPor, $scope.fechaDesde.toISOString().split('.')[0], 46 .getRemitos(usadoPor, $scope.fechaDesde.toISOString().split('.')[0],
46 $scope.fechaHasta.toISOString().split('.')[0]) 47 $scope.fechaHasta.toISOString().split('.')[0])
47 .then(llenarDatos); 48 .then(llenarDatos);
48 } 49 }
49 }; 50 };
50 function llenarDatos(res) { 51 function llenarDatos(res) {
51 $scope.remitos = []; 52 $scope.remitos = [];
52 $scope.filteredRemitos = []; 53 $scope.filteredRemitos = [];
53 $scope.currentPageRemitos = []; 54 $scope.currentPageRemitos = [];
54 $scope.selectedRemito = -1; 55 $scope.selectedRemito = -1;
55 $scope.searchLoading = false; 56 $scope.searchLoading = false;
56 $scope.primerBusqueda = true; 57 $scope.primerBusqueda = true;
57 $scope.remitos = res.data; 58 $scope.remitos = res.data;
58 $scope.search(); 59 $scope.search(true);
59 primera(); 60 primera();
60 } 61 }
61 $scope.search = function() { 62 $scope.search = function(pressed) {
62 if($scope.remitos.length > 0) { 63 if($scope.remitos.length > 0) {
63 $scope.filteredRemitos = $filter('filter')( 64 $scope.filteredRemitos = $filter('filter')(
64 $scope.remitos, 65 $scope.remitos,
65 {$: $scope.filters} 66 {$: $scope.filters}
66 ); 67 );
67 68
69 if(pressed && $scope.filteredRemitos.length === 0){
70 $timeout(function() {
71 angular.element('#search')[0].focus();
72 $scope.filters = '';
73 });
74 }
75
68 $scope.lastPage = Math.ceil( 76 $scope.lastPage = Math.ceil(
69 $scope.filteredRemitos.length / $scope.numPerPage 77 $scope.filteredRemitos.length / $scope.numPerPage
70 ); 78 );
71 79
72 $scope.resetPage(); 80 $scope.resetPage();
73 } 81 }
74 }; 82 };
75 83
76 $scope.resetPage = function() { 84 $scope.resetPage = function() {
77 $scope.currentPage = 1; 85 $scope.currentPage = 1;
78 $scope.selectPage(1); 86 $scope.selectPage(1);
79 }; 87 };
80 88
81 $scope.selectPage = function(page) { 89 $scope.selectPage = function(page) {
82 var start = (page - 1) * $scope.numPerPage; 90 var start = (page - 1) * $scope.numPerPage;
83 var end = start + $scope.numPerPage; 91 var end = start + $scope.numPerPage;
84 $scope.paginas = []; 92 $scope.paginas = [];
85 $scope.paginas = calcularPages(page); 93 $scope.paginas = calcularPages(page);
86 $scope.currentPageRemitos = $scope.filteredRemitos.slice(start, end); 94 $scope.currentPageRemitos = $scope.filteredRemitos.slice(start, end);
87 $scope.currentPage = page; 95 $scope.currentPage = page;
88 }; 96 };
89 97
90 $scope.select = function(remito) { 98 $scope.select = function(remito) {
91 $uibModalInstance.close(remito); 99 $uibModalInstance.close(remito);
92 }; 100 };
93 101
94 $scope.cancel = function() { 102 $scope.cancel = function() {
95 $uibModalInstance.dismiss('cancel'); 103 $uibModalInstance.dismiss('cancel');
96 }; 104 };
97 105
98 $scope.busquedaDown = function(key) { 106 $scope.busquedaDown = function(key) {
99 if (key === 40) { 107 if (key === 40) {
100 primera(key); 108 primera(key);
101 } 109 }
102 }; 110 };
103 111
104 $scope.itemRemito = function(key) { 112 $scope.itemRemito = function(key) {
105 if (key === 38) { 113 if (key === 38) {
106 anterior(key); 114 anterior(key);
107 } 115 }
108 116
109 if (key === 40) { 117 if (key === 40) {
110 siguiente(key); 118 siguiente(key);
111 } 119 }
112 120
113 if (key === 37) { 121 if (key === 37) {
114 retrocederPagina(); 122 retrocederPagina();
115 } 123 }
116 124
117 if (key === 39) { 125 if (key === 39) {
118 avanzarPagina(); 126 avanzarPagina();
119 } 127 }
120 }; 128 };
121 129
122 function calcularPages(paginaActual) { 130 function calcularPages(paginaActual) {
123 var paginas = []; 131 var paginas = [];
124 paginas.push(paginaActual); 132 paginas.push(paginaActual);
125 133
126 if (paginaActual - 1 > 1) { 134 if (paginaActual - 1 > 1) {
127 135
128 paginas.unshift(paginaActual - 1); 136 paginas.unshift(paginaActual - 1);
129 if (paginaActual - 2 > 1) { 137 if (paginaActual - 2 > 1) {
130 paginas.unshift(paginaActual - 2); 138 paginas.unshift(paginaActual - 2);
131 } 139 }
132 } 140 }
133 141
134 if (paginaActual + 1 < $scope.lastPage) { 142 if (paginaActual + 1 < $scope.lastPage) {
135 paginas.push(paginaActual + 1); 143 paginas.push(paginaActual + 1);
136 if (paginaActual + 2 < $scope.lastPage) { 144 if (paginaActual + 2 < $scope.lastPage) {
137 paginas.push(paginaActual + 2); 145 paginas.push(paginaActual + 2);
138 } 146 }
139 } 147 }
140 148
141 if (paginaActual !== 1) { 149 if (paginaActual !== 1) {
142 paginas.unshift(1); 150 paginas.unshift(1);
143 } 151 }
144 152
145 if (paginaActual !== $scope.lastPage) { 153 if (paginaActual !== $scope.lastPage) {
146 paginas.push($scope.lastPage); 154 paginas.push($scope.lastPage);
147 } 155 }
148 156
149 return paginas; 157 return paginas;
150 } 158 }
151 159
152 function primera() { 160 function primera() {
153 $scope.selectedRemito = 0; 161 $scope.selectedRemito = 0;
154 } 162 }
155 163
156 function anterior() { 164 function anterior() {
157 if ($scope.selectedRemito === 0 && $scope.currentPage > 1) { 165 if ($scope.selectedRemito === 0 && $scope.currentPage > 1) {
158 retrocederPagina(); 166 retrocederPagina();
159 } else { 167 } else {
160 $scope.selectedRemito--; 168 $scope.selectedRemito--;
161 } 169 }
162 } 170 }
163 171
164 function siguiente() { 172 function siguiente() {
165 if ($scope.selectedRemito < $scope.currentPageRemitos.length - 1 ) { 173 if ($scope.selectedRemito < $scope.currentPageRemitos.length - 1 ) {
166 $scope.selectedRemito++; 174 $scope.selectedRemito++;
167 } else { 175 } else {
168 avanzarPagina(); 176 avanzarPagina();
169 } 177 }
170 } 178 }
171 179
172 function retrocederPagina() { 180 function retrocederPagina() {
173 if ($scope.currentPage > 1) { 181 if ($scope.currentPage > 1) {
174 $scope.selectPage($scope.currentPage - 1); 182 $scope.selectPage($scope.currentPage - 1);
175 $scope.selectedRemito = $scope.numPerPage - 1; 183 $scope.selectedRemito = $scope.numPerPage - 1;
176 } 184 }
177 } 185 }
178 186
179 function avanzarPagina() { 187 function avanzarPagina() {
180 if ($scope.currentPage < $scope.lastPage) { 188 if ($scope.currentPage < $scope.lastPage) {
181 $scope.selectPage($scope.currentPage + 1); 189 $scope.selectPage($scope.currentPage + 1);
182 $scope.selectedRemito = 0; 190 $scope.selectedRemito = 0;
183 } 191 }
184 } 192 }
185 } 193 }
186 ] 194 ]
187 ); 195 );
188 196
src/views/foca-modal-remito.html
Diff comments   View file @ 717a696
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">Busqueda de Remito</h5> 4 <h5 class="modal-title my-1">Búsqueda de Remito</h5>
5 </div> 5 </div>
6 <div class="input-group col-lg-6 pr-0 my-2"> 6 <div class="input-group col-lg-6 pr-0 my-2">
7 <input 7 <input
8 ladda="searchLoading" 8 ladda="searchLoading"
9 type="text" 9 type="text"
10 class="form-control form-control-sm" 10 class="form-control form-control-sm"
11 placeholder="Razón social" 11 placeholder="Razón social"
12 ng-model="filters" 12 ng-model="filters"
13 ng-change="search()" 13 ng-change="search()"
14 ng-keydown="busquedaDown($event.keyCode)" 14 ng-keydown="busquedaDown($event.keyCode)"
15 ng-keypress="busquedaPress($event.keyCode)" 15 ng-keypress="busquedaPress($event.keyCode)"
16 foca-focus="selectedRemito == -1" 16 foca-focus="selectedRemito == -1"
17 ng-focus="selectedRemito = -1" 17 ng-focus="selectedRemito = -1"
18 id="search"
18 teclado-virtual 19 teclado-virtual
19 > 20 >
20 <div class="input-group-append"> 21 <div class="input-group-append">
21 <button 22 <button
22 ladda="searchLoading" 23 ladda="searchLoading"
23 class="btn btn-outline-secondary" 24 class="btn btn-outline-secondary"
24 type="button" 25 type="button"
25 ng-click="busquedaPress(13)" 26 ng-click="busquedaPress(13)"
26 > 27 >
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 33
33 </div> 34 </div>
34 <div class="modal-body" id="modal-body"> 35 <div class="modal-body" id="modal-body">
35 <div class="input-group row"> 36 <div class="input-group row">
36 <small class="col-md-2 col-4 text-left my-1">Fecha Desde</small> 37 <small class="col-md-2 col-4 text-left my-1">Fecha Desde</small>
37 <div class="col-md-4 col-8 input-group mb-2"> 38 <div class="col-md-4 col-8 input-group mb-2">
38 <div class="input-group-prepend"> 39 <div class="input-group-prepend">
39 <div class="input-group-text form-control-sm"> 40 <div class="input-group-text form-control-sm">
40 <i class="fa fa-calendar"></i> 41 <i class="fa fa-calendar"></i>
41 </div> 42 </div>
42 </div> 43 </div>
43 <input 44 <input
44 class="form-control form-control-sm" 45 class="form-control form-control-sm"
45 id="inlineFormInputGroup" 46 id="inlineFormInputGroup"
46 ladda="searchLoading" 47 ladda="searchLoading"
47 type="date" 48 type="date"
48 ng-model="fechaDesde" 49 ng-model="fechaDesde"
49 hasta-hoy 50 hasta-hoy
50 ng-required="true" 51 ng-required="true"
51 /> 52 />
52 </div> 53 </div>
53 <small class="col-md-2 col-4 text-left my-1">Fecha Hasta</small> 54 <small class="col-md-2 col-4 text-left my-1">Fecha Hasta</small>
54 <div class="col-md-4 col-8 input-group mb-2"> 55 <div class="col-md-4 col-8 input-group mb-2">
55 <div class="input-group-prepend"> 56 <div class="input-group-prepend">
56 <div class="input-group-text form-control-sm"> 57 <div class="input-group-text form-control-sm">
57 <i class="fa fa-calendar"></i> 58 <i class="fa fa-calendar"></i>
58 </div> 59 </div>
59 </div> 60 </div>
60 <input 61 <input
61 class="form-control form-control-sm" 62 class="form-control form-control-sm"
62 id="inlineFormInputGroup" 63 id="inlineFormInputGroup"
63 ladda="searchLoading" 64 ladda="searchLoading"
64 type="date" 65 type="date"
65 ng-model="fechaHasta" 66 ng-model="fechaHasta"
66 ng-required="true" 67 ng-required="true"
67 hasta-hoy 68 hasta-hoy
68 /> 69 />
69 </div> 70 </div>
70 </div> 71 </div>
71 <table ng-show="primerBusqueda" class="table table-striped table-sm"> 72 <table ng-show="primerBusqueda" class="table table-striped table-sm">
72 <thead> 73 <thead>
73 <tr> 74 <tr>
74 <th>Fecha</th> 75 <th>Fecha</th>
75 <th>Cliente</th> 76 <th>Cliente</th>
76 <th>Comprobante</th> 77 <th>Comprobante</th>
77 <th></th> 78 <th></th>
78 </tr> 79 </tr>
79 </thead> 80 </thead>
80 <tbody> 81 <tbody>
81 <tr ng-show="currentPageRemitos.length == 0 && primerBusqueda"> 82 <tr ng-show="currentPageRemitos.length == 0 && primerBusqueda">
82 <td colspan="5"> 83 <td colspan="5">
83 No se encontraron resultados. 84 No se encontraron resultados.
84 </td> 85 </td>
85 </tr> 86 </tr>
86 <tr class="selectable" 87 <tr class="selectable"
87 ng-repeat="(key, remito) in currentPageRemitos" 88 ng-repeat="(key, remito) in currentPageRemitos"
88 ng-click="select(remito)"> 89 ng-click="select(remito)">
89 <td ng-bind="remito.fechaRemito | date : 'dd/MM/yyyy'"></td> 90 <td ng-bind="remito.fechaRemito | date : 'dd/MM/yyyy'"></td>
90 <td ng-bind="remito.nombreCliente"></td> 91 <td ng-bind="remito.nombreCliente"></td>
91 <td ng-bind="[remito.sucursal, remito.numeroRemito] | comprobante"></td> 92 <td ng-bind="[remito.sucursal, remito.numeroRemito] | comprobante"></td>
92 <td> 93 <td>
93 <button 94 <button
94 type="button" 95 type="button"
95 class="btn btn-xs p-1 float-right" 96 class="btn btn-xs p-1 float-right"
96 ng-class="{ 97 ng-class="{
97 'btn-secondary': selectedRemito != key, 98 'btn-secondary': selectedRemito != key,
98 'btn-primary': selectedRemito == key 99 'btn-primary': selectedRemito == key
99 }" 100 }"
100 foca-focus="selectedRemito == {{key}}" 101 foca-focus="selectedRemito == {{key}}"
101 ng-keydown="itemRemito($event.keyCode)" 102 ng-keydown="itemRemito($event.keyCode)"
102 > 103 >
103 <i class="fa fa-circle-thin" aria-hidden="true"></i> 104 <i class="fa fa-circle-thin" aria-hidden="true"></i>
104 </button> 105 </button>
105 </td> 106 </td>
106 </tr> 107 </tr>
107 </tbody> 108 </tbody>
108 </table> 109 </table>
109 </div> 110 </div>
110 <div class="modal-footer py-1"> 111 <div class="modal-footer py-1">
111 <nav ng-show="currentPageRemitos.length > 0 && primerBusqueda" class="mr-auto"> 112 <nav ng-show="currentPageRemitos.length > 0 && primerBusqueda" class="mr-auto">
112 <ul class="pagination pagination-sm justify-content mb-0"> 113 <ul class="pagination pagination-sm justify-content mb-0">
113 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 114 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
114 <a 115 <a
115 class="page-link" 116 class="page-link"
116 href="javascript:void();" 117 href="javascript:void();"
117 ng-click="selectPage(currentPage - 1)" 118 ng-click="selectPage(currentPage - 1)"
118 > 119 >
119 <span aria-hidden="true">&laquo;</span> 120 <span aria-hidden="true">&laquo;</span>
120 <span class="sr-only">Anterior</span> 121 <span class="sr-only">Anterior</span>
121 </a> 122 </a>
122 </li> 123 </li>
123 <li 124 <li
124 class="page-item" 125 class="page-item"
125 ng-repeat="pagina in paginas" 126 ng-repeat="pagina in paginas"
126 ng-class="{'active': pagina == currentPage}" 127 ng-class="{'active': pagina == currentPage}"
127 > 128 >
128 <a 129 <a
129 class="page-link" 130 class="page-link"
130 href="javascript:void();" 131 href="javascript:void();"
131 ng-click="selectPage(pagina)" 132 ng-click="selectPage(pagina)"
132 ng-bind="pagina" 133 ng-bind="pagina"
133 ></a> 134 ></a>
134 </li> 135 </li>
135 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 136 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
136 <a 137 <a
137 class="page-link" 138 class="page-link"
138 href="javascript:void();" 139 href="javascript:void();"
139 ng-click="selectPage(currentPage + 1)" 140 ng-click="selectPage(currentPage + 1)"
140 > 141 >
141 <span aria-hidden="true">&raquo;</span> 142 <span aria-hidden="true">&raquo;</span>
142 <span class="sr-only">Siguiente</span> 143 <span class="sr-only">Siguiente</span>
143 </a> 144 </a>
144 </li> 145 </li>
145 </ul> 146 </ul>
146 </nav> 147 </nav>
147 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 148 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
148 </div> 149 </div>
149 150