Commit 17c1b85ff57255a05b2df9552a7cf0b22bb82fe1

Authored by Jose Pinto
1 parent 92f3261184
Exists in master

Calendario bootstrap

src/js/controller.js
1 angular.module('focaModalNotaPedido') 1 angular.module('focaModalNotaPedido')
2 .controller('focaModalNotaPedidoController', 2 .controller('focaModalNotaPedidoController',
3 [ 3 [
4 '$timeout', 4 '$timeout',
5 '$filter', 5 '$filter',
6 '$scope', 6 '$scope',
7 '$uibModalInstance', 7 '$uibModalInstance',
8 'focaModalNotaPedidoService', 8 'focaModalNotaPedidoService',
9 'usadoPor', 9 'usadoPor',
10 function($timeout, $filter, $scope, $uibModalInstance, 10 function($timeout, $filter, $scope, $uibModalInstance,
11 focaModalNotaPedidoService, usadoPor 11 focaModalNotaPedidoService, 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.notasPedido = []; 17 $scope.notasPedido = [];
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.filteredNotasPedido = []; 23 $scope.filteredNotasPedido = [];
24 $scope.currentPageNotasPedido = []; 24 $scope.currentPageNotasPedido = [];
25 $scope.selectedNotaPedido = -1; 25 $scope.selectedNotaPedido = -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 33 //TODO Validaciones con alertas
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 hacer filtro de fecha 47 //TODO hacer filtro de fecha
45 focaModalNotaPedidoService 48 focaModalNotaPedidoService
46 .getNotasPedido(usadoPor, $scope.fechaDesde.toISOString().split('.')[0], 49 .getNotasPedido(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.notasPedido = []; 55 $scope.notasPedido = [];
53 $scope.filteredNotasPedido = []; 56 $scope.filteredNotasPedido = [];
54 $scope.currentPageNotasPedido = []; 57 $scope.currentPageNotasPedido = [];
55 $scope.selectedNotaPedido = -1; 58 $scope.selectedNotaPedido = -1;
56 $scope.searchLoading = false; 59 $scope.searchLoading = false;
57 $scope.primerBusqueda = true; 60 $scope.primerBusqueda = true;
58 $scope.notasPedido = res.data; 61 $scope.notasPedido = 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.notasPedido.length > 0) { 66 if($scope.notasPedido.length > 0) {
64 $scope.filteredNotasPedido = $filter('filter')( 67 $scope.filteredNotasPedido = $filter('filter')(
65 $scope.notasPedido, 68 $scope.notasPedido,
66 {$: $scope.filters} 69 {$: $scope.filters}
67 ); 70 );
68 71
69 $scope.lastPage = Math.ceil( 72 $scope.lastPage = Math.ceil(
70 $scope.filteredNotasPedido.length / $scope.numPerPage 73 $scope.filteredNotasPedido.length / $scope.numPerPage
71 ); 74 );
72 75
73 $scope.resetPage(); 76 $scope.resetPage();
74 if(pressed && $scope.filteredNotasPedido.length === 0){ 77 if(pressed && $scope.filteredNotasPedido.length === 0){
75 $timeout(function() { 78 $timeout(function() {
76 angular.element('#search')[0].focus(); 79 angular.element('#search')[0].focus();
77 $scope.filters = ''; 80 $scope.filters = '';
78 }); 81 });
79 } 82 }
80 } 83 }
81 }; 84 };
82 85
83 $scope.resetPage = function() { 86 $scope.resetPage = function() {
84 $scope.currentPage = 1; 87 $scope.currentPage = 1;
85 $scope.selectPage(1); 88 $scope.selectPage(1);
86 }; 89 };
87 90
88 $scope.selectPage = function(page) { 91 $scope.selectPage = function(page) {
89 var start = (page - 1) * $scope.numPerPage; 92 var start = (page - 1) * $scope.numPerPage;
90 var end = start + $scope.numPerPage; 93 var end = start + $scope.numPerPage;
91 $scope.paginas = []; 94 $scope.paginas = [];
92 $scope.paginas = calcularPages(page); 95 $scope.paginas = calcularPages(page);
93 $scope.currentPageNotasPedido = $scope.filteredNotasPedido.slice(start, end); 96 $scope.currentPageNotasPedido = $scope.filteredNotasPedido.slice(start, end);
94 $scope.currentPage = page; 97 $scope.currentPage = page;
95 }; 98 };
96 99
97 $scope.select = function(notaPedido) { 100 $scope.select = function(notaPedido) {
98 $uibModalInstance.close(notaPedido); 101 $uibModalInstance.close(notaPedido);
99 }; 102 };
100 103
101 $scope.cancel = function() { 104 $scope.cancel = function() {
102 $uibModalInstance.dismiss('cancel'); 105 $uibModalInstance.dismiss('cancel');
103 }; 106 };
104 107
105 $scope.busquedaDown = function(key) { 108 $scope.busquedaDown = function(key) {
106 if (key === 40) { 109 if (key === 40) {
107 primera(key); 110 primera(key);
108 } 111 }
109 }; 112 };
110 113
111 $scope.itemNotaPedido = function(key) { 114 $scope.itemNotaPedido = function(key) {
112 if (key === 38) { 115 if (key === 38) {
113 anterior(key); 116 anterior(key);
114 } 117 }
115 118
116 if (key === 40) { 119 if (key === 40) {
117 siguiente(key); 120 siguiente(key);
118 } 121 }
119 122
120 if (key === 37) { 123 if (key === 37) {
121 retrocederPagina(); 124 retrocederPagina();
122 } 125 }
123 126
124 if (key === 39) { 127 if (key === 39) {
125 avanzarPagina(); 128 avanzarPagina();
126 } 129 }
127 }; 130 };
128 131
129 function calcularPages(paginaActual) { 132 function calcularPages(paginaActual) {
130 var paginas = []; 133 var paginas = [];
131 paginas.push(paginaActual); 134 paginas.push(paginaActual);
132 135
133 if (paginaActual - 1 > 1) { 136 if (paginaActual - 1 > 1) {
134 137
135 paginas.unshift(paginaActual - 1); 138 paginas.unshift(paginaActual - 1);
136 if (paginaActual - 2 > 1) { 139 if (paginaActual - 2 > 1) {
137 paginas.unshift(paginaActual - 2); 140 paginas.unshift(paginaActual - 2);
138 } 141 }
139 } 142 }
140 143
141 if (paginaActual + 1 < $scope.lastPage) { 144 if (paginaActual + 1 < $scope.lastPage) {
142 paginas.push(paginaActual + 1); 145 paginas.push(paginaActual + 1);
143 if (paginaActual + 2 < $scope.lastPage) { 146 if (paginaActual + 2 < $scope.lastPage) {
144 paginas.push(paginaActual + 2); 147 paginas.push(paginaActual + 2);
145 } 148 }
146 } 149 }
147 150
148 if (paginaActual !== 1) { 151 if (paginaActual !== 1) {
149 paginas.unshift(1); 152 paginas.unshift(1);
150 } 153 }
151 154
152 if (paginaActual !== $scope.lastPage) { 155 if (paginaActual !== $scope.lastPage) {
153 paginas.push($scope.lastPage); 156 paginas.push($scope.lastPage);
154 } 157 }
155 158
156 return paginas; 159 return paginas;
157 } 160 }
158 161
159 function primera() { 162 function primera() {
160 $scope.selectedNotaPedido = 0; 163 $scope.selectedNotaPedido = 0;
161 } 164 }
162 165
163 function anterior() { 166 function anterior() {
164 if ($scope.selectedNotaPedido === 0 && $scope.currentPage > 1) { 167 if ($scope.selectedNotaPedido === 0 && $scope.currentPage > 1) {
165 retrocederPagina(); 168 retrocederPagina();
166 } else { 169 } else {
167 $scope.selectedNotaPedido--; 170 $scope.selectedNotaPedido--;
168 } 171 }
169 } 172 }
170 173
171 function siguiente() { 174 function siguiente() {
172 if ($scope.selectedNotaPedido < $scope.currentPageNotasPedido.length - 1 ) { 175 if ($scope.selectedNotaPedido < $scope.currentPageNotasPedido.length - 1 ) {
173 $scope.selectedNotaPedido++; 176 $scope.selectedNotaPedido++;
174 } else { 177 } else {
175 avanzarPagina(); 178 avanzarPagina();
176 } 179 }
177 } 180 }
178 181
179 function retrocederPagina() { 182 function retrocederPagina() {
180 if ($scope.currentPage > 1) { 183 if ($scope.currentPage > 1) {
181 $scope.selectPage($scope.currentPage - 1); 184 $scope.selectPage($scope.currentPage - 1);
182 $scope.selectedNotaPedido = $scope.numPerPage - 1; 185 $scope.selectedNotaPedido = $scope.numPerPage - 1;
183 } 186 }
184 } 187 }
185 188
186 function avanzarPagina() { 189 function avanzarPagina() {
187 if ($scope.currentPage < $scope.lastPage) { 190 if ($scope.currentPage < $scope.lastPage) {
188 $scope.selectPage($scope.currentPage + 1); 191 $scope.selectPage($scope.currentPage + 1);
189 $scope.selectedNotaPedido = 0; 192 $scope.selectedNotaPedido = 0;
190 } 193 }
191 } 194 }
192 } 195 }
193 ] 196 ]
194 ); 197 );
195 198
src/views/foca-modal-nota-pedido.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">Búsqueda de Nota de Pedido</h5> 4 <h5 class="modal-title my-1">Búsqueda de Nota de Pedido</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 id="search" 11 id="search"
12 placeholder="Razón social" 12 placeholder="Razón social"
13 ng-model="filters" 13 ng-model="filters"
14 ng-change="search()" 14 ng-change="search()"
15 ng-keydown="busquedaDown($event.keyCode)" 15 ng-keydown="busquedaDown($event.keyCode)"
16 ng-keypress="busquedaPress($event.keyCode)" 16 ng-keypress="busquedaPress($event.keyCode)"
17 foca-focus="selectedNotaPedido == -1" 17 foca-focus="selectedNotaPedido == -1"
18 ng-focus="selectedNotaPedido = -1" 18 ng-focus="selectedNotaPedido = -1"
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 </div> 33 </div>
34 <div class="modal-body" id="modal-body"> 34 <div class="modal-body" id="modal-body">
35 35
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="currentPageNotasPedido.length == 0 && primerBusqueda"> 92 <tr ng-show="currentPageNotasPedido.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,notaPedido) in currentPageNotasPedido" 98 ng-repeat="(key,notaPedido) in currentPageNotasPedido"
89 ng-click="select(notaPedido)"> 99 ng-click="select(notaPedido)">
90 <td ng-bind="notaPedido.fechaCarga | date : 'dd/MM/yyyy'"></td> 100 <td ng-bind="notaPedido.fechaCarga | date : 'dd/MM/yyyy'"></td>
91 <td ng-bind="notaPedido.nombreCliente"></td> 101 <td ng-bind="notaPedido.nombreCliente"></td>
92 <td ng-bind="[notaPedido.sucursal, notaPedido.numeroNotaPedido] | comprobante"></td> 102 <td ng-bind="[notaPedido.sucursal, notaPedido.numeroNotaPedido] | 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': selectedNotaPedido != key, 108 'btn-secondary': selectedNotaPedido != key,
99 'btn-primary': selectedNotaPedido == key 109 'btn-primary': selectedNotaPedido == key
100 }" 110 }"
101 foca-focus="selectedNotaPedido == {{key}}" 111 foca-focus="selectedNotaPedido == {{key}}"
102 ng-keydown="itemNotaPedido($event.keyCode)" 112 ng-keydown="itemNotaPedido($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="currentPageNotasPedido.length > 0 && primerBusqueda" class="mr-auto"> 122 <nav ng-show="currentPageNotasPedido.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 class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)"> 125 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
116 <span aria-hidden="true">&laquo;</span> 126 <span aria-hidden="true">&laquo;</span>
117 <span class="sr-only">Anterior</span> 127 <span class="sr-only">Anterior</span>
118 </a> 128 </a>
119 </li> 129 </li>
120 <li 130 <li
121 class="page-item" 131 class="page-item"
122 ng-repeat="pagina in paginas" 132 ng-repeat="pagina in paginas"
123 ng-class="{'active': pagina == currentPage}" 133 ng-class="{'active': pagina == currentPage}"
124 > 134 >
125 <a 135 <a
126 class="page-link" 136 class="page-link"
127 href="javascript:void();" 137 href="javascript:void();"
128 ng-click="selectPage(pagina)" 138 ng-click="selectPage(pagina)"
129 ng-bind="pagina" 139 ng-bind="pagina"
130 ></a> 140 ></a>
131 </li> 141 </li>
132 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 142 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
133 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)"> 143 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
134 <span aria-hidden="true">&raquo;</span> 144 <span aria-hidden="true">&raquo;</span>
135 <span class="sr-only">Siguiente</span> 145 <span class="sr-only">Siguiente</span>
136 </a> 146 </a>
137 </li> 147 </li>
138 </ul> 148 </ul>
139 </nav> 149 </nav>
140 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 150 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
141 </div> 151 </div>