Luigi / foca-modal-remito

Download as
Browse Code »

Commit 402ddbcd8df9354460944cf05d5c70b0c93b578e

Authored by Jose Pinto
1 parent 717a69624b
Exists in master and in 1 other branch develop

calendario bootstrap

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