Eric Fernandez / foca-modal-precio-condiciones

Download as
Browse Code »

Commit 05afa0597b7a9d44d48d3e6c4a93a67336b4fa5e

Authored by Eric Fernandez
1 parent 9e8d1adda7
Exists in master

Opción manual selección por teclado

Showing 2 changed files with 22 additions and 7 deletions   Show diff stats
src/js/controller.js
Diff comments   View file @ 05afa05
1 angular.module('focaModalPrecioCondicion') 1 angular.module('focaModalPrecioCondicion')
2 .controller('focaModalPrecioCondicionController', 2 .controller('focaModalPrecioCondicionController',
3 [ 3 [
4 '$filter', 4 '$filter',
5 '$scope', 5 '$scope',
6 '$uibModalInstance', 6 '$uibModalInstance',
7 'focaModalService', 7 'focaModalService',
8 'focaModalPrecioCondicionService', 8 'focaModalPrecioCondicionService',
9 function( 9 function(
10 $filter, $scope, $uibModalInstance, 10 $filter, $scope, $uibModalInstance,
11 focaModalService, focaModalPrecioCondicionService 11 focaModalService, focaModalPrecioCondicionService
12 ) { 12 ) {
13 13
14 focaModalPrecioCondicionService.getPreciosCondicionesPlazosPagos().then( 14 focaModalPrecioCondicionService.getPreciosCondicionesPlazosPagos().then(
15 function(res) { 15 function(res) {
16 for(var i = 0; i < res.data.length; i++) { 16 for(var i = 0; i < res.data.length; i++) {
17 var plazosTemp = ''; 17 var plazosTemp = '';
18 for(var j = 0; j < res.data[i].plazoPago.length; j++) { 18 for(var j = 0; j < res.data[i].plazoPago.length; j++) {
19 plazosTemp += res.data[i].plazoPago[j].dias + ' '; 19 plazosTemp += res.data[i].plazoPago[j].dias + ' ';
20 } 20 }
21 res.data[i].plazos = plazosTemp.trim(); 21 res.data[i].plazos = plazosTemp.trim();
22 } 22 }
23 $scope.precioCondicion = res.data; 23 $scope.precioCondicion = res.data;
24 $scope.search(); 24 $scope.search();
25 } 25 }
26 ); 26 );
27 $scope.ingreso = false; 27 $scope.ingreso = false;
28 $scope.plazosNuevos = []; 28 $scope.plazosNuevos = [];
29 $scope.plazoACargar = 29 $scope.plazoACargar =
30 { 30 {
31 item: 1 31 item: 1
32 }; 32 };
33 // pagination 33 // pagination
34 $scope.numPerPage = 10; 34 $scope.numPerPage = 10;
35 $scope.currentPage = 1; 35 $scope.currentPage = 1;
36 $scope.filteredPrecioCondicion = []; 36 $scope.filteredPrecioCondicion = [];
37 $scope.currentPagePrecioCondicion = []; 37 $scope.currentPagePrecioCondicion = [];
38 $scope.selectedPrecioCondicion = -1; 38 $scope.selectedPrecioCondicion = -1;
39 39
40 //METODOS 40 //METODOS
41 41
42 $scope.agregarPlazo = function(key) { 42 $scope.agregarPlazo = function(key) {
43 if(key === 13) { 43 if(key === 13) {
44 if(!$scope.plazoACargar.dias) { 44 if(!$scope.plazoACargar.dias) {
45 focaModalService.alert('Ingrese cantidad de días'); 45 focaModalService.alert('Ingrese cantidad de días');
46 return; 46 return;
47 } 47 }
48 var tieneEseDia = $scope.plazosNuevos.filter(function(a) { 48 var tieneEseDia = $scope.plazosNuevos.filter(function(a) {
49 return a.dias === $scope.plazoACargar.dias; 49 return a.dias === $scope.plazoACargar.dias;
50 }); 50 });
51 if(tieneEseDia.length > 0) { 51 if(tieneEseDia.length > 0) {
52 focaModalService.alert('Ya ha ingresado un plazo con esos días'); 52 focaModalService.alert('Ya ha ingresado un plazo con esos días');
53 return; 53 return;
54 } 54 }
55 $scope.plazosNuevos.push($scope.plazoACargar); 55 $scope.plazosNuevos.push($scope.plazoACargar);
56 $scope.plazoACargar = 56 $scope.plazoACargar =
57 { 57 {
58 item: $scope.plazosNuevos.length + 1 58 item: $scope.plazosNuevos.length + 1
59 }; 59 };
60 } 60 }
61 }; 61 };
62 62
63 $scope.volver = function() { 63 $scope.volver = function() {
64 $scope.ingreso = false; 64 $scope.ingreso = false;
65 $scope.plazosNuevos = []; 65 $scope.plazosNuevos = [];
66 $scope.plazoACargar = 66 $scope.plazoACargar =
67 { 67 {
68 item: $scope.plazosNuevos.length + 1 68 item: $scope.plazosNuevos.length + 1
69 }; 69 };
70 }; 70 };
71 71
72 $scope.quitarPlazo = function(key) { 72 $scope.quitarPlazo = function(key) {
73 $scope.plazosNuevos.splice(key, 1); 73 $scope.plazosNuevos.splice(key, 1);
74 $scope.plazoACargar = 74 $scope.plazoACargar =
75 { 75 {
76 item: $scope.plazosNuevos.length + 1 76 item: $scope.plazosNuevos.length + 1
77 }; 77 };
78 }; 78 };
79 79
80 $scope.search = function() { 80 $scope.search = function() {
81 $scope.filteredPrecioCondicion = $filter('filter')( 81 $scope.filteredPrecioCondicion = $filter('filter')(
82 $scope.precioCondicion, 82 $scope.precioCondicion,
83 {$: $scope.filters} 83 {$: $scope.filters}
84 ); 84 );
85 85
86 $scope.lastPage = Math.ceil( 86 $scope.lastPage = Math.ceil(
87 $scope.filteredPrecioCondicion.length / $scope.numPerPage 87 $scope.filteredPrecioCondicion.length / $scope.numPerPage
88 ); 88 );
89 89
90 $scope.resetPage(); 90 $scope.resetPage();
91 }; 91 };
92 92
93 $scope.resetPage = function() { 93 $scope.resetPage = function() {
94 $scope.currentPage = 1; 94 $scope.currentPage = 1;
95 $scope.selectPage(1); 95 $scope.selectPage(1);
96 }; 96 };
97 97
98 $scope.selectPage = function(page) { 98 $scope.selectPage = function(page) {
99 var start = (page - 1) * $scope.numPerPage; 99 var start = (page - 1) * $scope.numPerPage;
100 var end = start + $scope.numPerPage; 100 var end = start + $scope.numPerPage;
101 $scope.paginas = []; 101 $scope.paginas = [];
102 $scope.paginas = calcularPages(page); 102 $scope.paginas = calcularPages(page);
103 $scope.currentPagePrecioCondicion = 103 $scope.currentPagePrecioCondicion =
104 $scope.filteredPrecioCondicion.slice(start, end); 104 $scope.filteredPrecioCondicion.slice(start, end);
105 $scope.currentPage = page; 105 $scope.currentPage = page;
106 }; 106 };
107 107
108 $scope.select = function(precioCondicion) { 108 $scope.select = function(precioCondicion) {
109 $uibModalInstance.close(precioCondicion); 109 $uibModalInstance.close(precioCondicion);
110 }; 110 };
111 111
112 $scope.cancel = function() { 112 $scope.cancel = function() {
113 $uibModalInstance.dismiss('cancel'); 113 $uibModalInstance.dismiss('cancel');
114 }; 114 };
115 115
116 $scope.busquedaDown = function(key) { 116 $scope.busquedaDown = function(key) {
117 if (key === 40) { 117 if (key === 40) {
118 primera(key); 118 primera(key);
119 } 119 }
120 }; 120 };
121 121
122 $scope.busquedaPress = function(key) { 122 $scope.busquedaPress = function(key) {
123 if (key === 13) { 123 if (key === 13) {
124 primera(key); 124 primera(key);
125 } 125 }
126 }; 126 };
127 127
128 $scope.itemProducto = function(key) { 128 $scope.itemProducto = function(key) {
129 if (key === 38) { 129 if (key === 38) {
130 anterior(key); 130 anterior(key);
131 } 131 }
132 132
133 if (key === 40) { 133 if (key === 40) {
134 siguiente(key); 134 siguiente(key);
135 } 135 }
136 136
137 if (key === 37) { 137 if (key === 37) {
138 retrocederPagina(); 138 retrocederPagina();
139 } 139 }
140 140
141 if (key === 39) { 141 if (key === 39) {
142 avanzarPagina(); 142 avanzarPagina();
143 } 143 }
144 }; 144 };
145 145
146 function calcularPages(paginaActual) { 146 function calcularPages(paginaActual) {
147 var paginas = []; 147 var paginas = [];
148 paginas.push(paginaActual); 148 paginas.push(paginaActual);
149 149
150 if (paginaActual - 1 > 1) { 150 if (paginaActual - 1 > 1) {
151 151
152 paginas.unshift(paginaActual - 1); 152 paginas.unshift(paginaActual - 1);
153 if (paginaActual - 2 > 1) { 153 if (paginaActual - 2 > 1) {
154 paginas.unshift(paginaActual - 2); 154 paginas.unshift(paginaActual - 2);
155 } 155 }
156 } 156 }
157 157
158 if (paginaActual + 1 < $scope.lastPage) { 158 if (paginaActual + 1 < $scope.lastPage) {
159 paginas.push(paginaActual + 1); 159 paginas.push(paginaActual + 1);
160 if (paginaActual + 2 < $scope.lastPage) { 160 if (paginaActual + 2 < $scope.lastPage) {
161 paginas.push(paginaActual + 2); 161 paginas.push(paginaActual + 2);
162 } 162 }
163 } 163 }
164 164
165 if (paginaActual !== 1) { 165 if (paginaActual !== 1) {
166 paginas.unshift(1); 166 paginas.unshift(1);
167 } 167 }
168 168
169 if (paginaActual !== $scope.lastPage) { 169 if (paginaActual !== $scope.lastPage) {
170 paginas.push($scope.lastPage); 170 paginas.push($scope.lastPage);
171 } 171 }
172 172
173 return paginas; 173 return paginas;
174 } 174 }
175 175
176 function primera() { 176 function primera() {
177 $scope.selectedPrecioCondicion = 0; 177 $scope.selectedPrecioCondicion = 0;
178 } 178 }
179 179
180 function anterior() { 180 function anterior() {
181 if ($scope.selectedPrecioCondicion === 0 && $scope.currentPage > 1) { 181 if ($scope.selectedPrecioCondicion === 0 && $scope.currentPage > 1) {
182 retrocederPagina(); 182 retrocederPagina();
183 } else { 183 } else {
184 $scope.selectedPrecioCondicion--; 184 $scope.selectedPrecioCondicion--;
185 } 185 }
186 } 186 }
187 187
188 function siguiente() { 188 function siguiente() {
189 if ($scope.selectedPrecioCondicion < 189 if ($scope.selectedPrecioCondicion <
190 $scope.currentPagePrecioCondicion.length - 1 ) { 190 $scope.currentPagePrecioCondicion.length ) {
191 $scope.selectedPrecioCondicion++; 191 $scope.selectedPrecioCondicion++;
192 } else { 192 } else {
193 avanzarPagina(); 193 avanzarPagina();
194 } 194 }
195 } 195 }
196 196
197 function retrocederPagina() { 197 function retrocederPagina() {
198 if ($scope.currentPage > 1) { 198 if ($scope.currentPage > 1) {
199 $scope.selectPage($scope.currentPage - 1); 199 $scope.selectPage($scope.currentPage - 1);
200 $scope.selectedPrecioCondicion = $scope.numPerPage - 1; 200 $scope.selectedPrecioCondicion = $scope.numPerPage - 1;
201 } 201 }
202 } 202 }
203 203
204 function avanzarPagina() { 204 function avanzarPagina() {
205 if ($scope.currentPage < $scope.lastPage) { 205 if ($scope.currentPage < $scope.lastPage) {
206 $scope.selectPage($scope.currentPage + 1); 206 $scope.selectPage($scope.currentPage + 1);
207 $scope.selectedPrecioCondicion = 0; 207 $scope.selectedPrecioCondicion = 0;
208 } 208 }
209 } 209 }
210 } 210 }
211 ] 211 ]
212 ); 212 );
213 213
src/views/modal-precio-condicion.html
Diff comments   View file @ 05afa05
1 <div class="modal-header py-1"> 1 <div class="modal-header py-1">
2 <h5 ng-show="!ingreso" class="modal-title">Busqueda de Precio-Condición</h5> 2 <h5 ng-show="!ingreso" class="modal-title">Busqueda de Precio-Condición</h5>
3 <h5 ng-show="ingreso" class="modal-title">Nuevos Plazos</h5> 3 <h5 ng-show="ingreso" class="modal-title">Nuevos Plazos</h5>
4 </div> 4 </div>
5 <div class="modal-body" id="modal-body"> 5 <div class="modal-body" id="modal-body">
6 <div class="input-group" ng-show="!ingreso"> 6 <div class="input-group" ng-show="!ingreso">
7 <input 7 <input
8 type="text" 8 type="text"
9 class="form-control form-control-sm" 9 class="form-control form-control-sm"
10 placeholder="Busqueda" 10 placeholder="Busqueda"
11 ng-model="filters" 11 ng-model="filters"
12 ng-change="search()" 12 ng-change="search()"
13 ng-keydown="busquedaDown($event.keyCode)" 13 ng-keydown="busquedaDown($event.keyCode)"
14 ng-keypress="busquedaPress($event.keyCode)" 14 ng-keypress="busquedaPress($event.keyCode)"
15 foca-focus="selectedPrecioCondicion == -1" 15 foca-focus="selectedPrecioCondicion == -1"
16 ng-focus="selectedPrecioCondicion = -1" 16 ng-focus="selectedPrecioCondicion = -1"
17 > 17 >
18 <div class="input-group-append"> 18 <div class="input-group-append">
19 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)"> 19 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
20 <i class="fa fa-search" aria-hidden="true"></i> 20 <i class="fa fa-search" aria-hidden="true"></i>
21 </button> 21 </button>
22 </div> 22 </div>
23 </div> 23 </div>
24 24
25 <table ng-show="!ingreso" class="table table-striped table-sm"> 25 <table ng-show="!ingreso" class="table table-striped table-sm">
26 <thead> 26 <thead>
27 <tr> 27 <tr>
28 <th>Código</th> 28 <th>Código</th>
29 <th>Nombre</th> 29 <th>Nombre</th>
30 <th>Lista Precio</th> 30 <th>Lista Precio</th>
31 <th>Plazos</th> 31 <th>Plazos</th>
32 <th></th> 32 <th></th>
33 </tr> 33 </tr>
34 </thead> 34 </thead>
35 <tbody> 35 <tbody>
36 <tr ng-show="currentPagePrecioCondicion.length == 0"> 36 <tr ng-show="currentPagePrecioCondicion.length == 0">
37 <td colspan="6"> 37 <td colspan="6">
38 No se encontraron resultados. 38 No se encontraron resultados.
39 </td> 39 </td>
40 </tr> 40 </tr>
41 <tr> 41 <tr>
42 <td colspan="6" ng-show="!ingreso"> 42 <td colspan="4" ng-show="!ingreso">
43 <input 43 <input
44 class="form-control" 44 class="form-control form-control-sm"
45 type="text" 45 type="text"
46 placeholder="Ingreso manual" 46 placeholder="Selección manual"
47 readonly 47 readonly
48 ng-click="ingreso = !ingreso" 48 ng-click="ingreso = !ingreso"
49 /> 49 />
50 </td> 50 </td>
51 <td colspan="1" ng-show="!ingreso">
52 <button
53 type="button"
54 class="btn btn-sm p-1 float-right"
55 ng-class="{
56 'btn-secondary': selectedPrecioCondicion != 0,
57 'btn-primary': selectedPrecioCondicion == 0
58 }"
59 foca-focus="selectedPrecioCondicion == 0"
60 ng-keydown="itemProducto($event.keyCode)"
61 ng-click="ingreso = !ingreso"
62 >
63 <i class="fa fa-arrow-right" aria-hidden="true"></i>
64 </button>
65 </td>
51 </tr> 66 </tr>
52 <tr class="selectable" 67 <tr class="selectable"
53 ng-repeat="(key, precioCondicion) in currentPagePrecioCondicion" 68 ng-repeat="(key, precioCondicion) in currentPagePrecioCondicion"
54 ng-click="select(precioCondicion)"> 69 ng-click="select(precioCondicion)">
55 <td ng-bind="precioCondicion.codigo"></td> 70 <td ng-bind="precioCondicion.codigo"></td>
56 <td ng-bind="precioCondicion.nombre"></td> 71 <td ng-bind="precioCondicion.nombre"></td>
57 <td ng-bind="precioCondicion.idListaPrecio"></td> 72 <td ng-bind="precioCondicion.idListaPrecio"></td>
58 <td ng-bind="precioCondicion.plazos"></td> 73 <td ng-bind="precioCondicion.plazos"></td>
59 <td> 74 <td>
60 <button 75 <button
61 type="button" 76 type="button"
62 class="btn btn-sm p-1 float-right" 77 class="btn btn-sm p-1 float-right"
63 ng-class="{ 78 ng-class="{
64 'btn-secondary': selectedPrecioCondicion != key, 79 'btn-secondary': selectedPrecioCondicion != key + 1,
65 'btn-primary': selectedPrecioCondicion == key 80 'btn-primary': selectedPrecioCondicion == key + 1
66 }" 81 }"
67 foca-focus="selectedPrecioCondicion == {{key}}" 82 foca-focus="selectedPrecioCondicion == {{key + 1}}"
68 ng-keydown="itemProducto($event.keyCode)" 83 ng-keydown="itemProducto($event.keyCode)"
69 > 84 >
70 <i class="fa fa-arrow-right" aria-hidden="true"></i> 85 <i class="fa fa-arrow-right" aria-hidden="true"></i>
71 </button> 86 </button>
72 </td> 87 </td>
73 </tr> 88 </tr>
74 </tbody> 89 </tbody>
75 </table> 90 </table>
76 <nav ng-show="currentPagePrecioCondicion.length > 0 && !ingreso"> 91 <nav ng-show="currentPagePrecioCondicion.length > 0 && !ingreso">
77 <ul class="pagination pagination-sm mb-0"> 92 <ul class="pagination pagination-sm mb-0">
78 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 93 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
79 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 94 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
80 <span aria-hidden="true">&laquo;</span> 95 <span aria-hidden="true">&laquo;</span>
81 <span class="sr-only">Anterior</span> 96 <span class="sr-only">Anterior</span>
82 </a> 97 </a>
83 </li> 98 </li>
84 <li 99 <li
85 class="page-item" 100 class="page-item"
86 ng-repeat="pagina in paginas" 101 ng-repeat="pagina in paginas"
87 ng-class="{'active': pagina == currentPage}" 102 ng-class="{'active': pagina == currentPage}"
88 > 103 >
89 <a 104 <a
90 class="page-link" 105 class="page-link"
91 href="#" 106 href="#"
92 ng-click="selectPage(pagina)" 107 ng-click="selectPage(pagina)"
93 ng-bind="pagina" 108 ng-bind="pagina"
94 ></a> 109 ></a>
95 </li> 110 </li>
96 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 111 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
97 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 112 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
98 <span aria-hidden="true">&raquo;</span> 113 <span aria-hidden="true">&raquo;</span>
99 <span class="sr-only">Siguiente</span> 114 <span class="sr-only">Siguiente</span>
100 </a> 115 </a>
101 </li> 116 </li>
102 </ul> 117 </ul>
103 </nav> 118 </nav>
104 <table class="table table-striped table-sm" ng-show="ingreso"> 119 <table class="table table-striped table-sm" ng-show="ingreso">
105 <thead> 120 <thead>
106 <tr> 121 <tr>
107 <th>Item</th> 122 <th>Item</th>
108 <th>Días</th> 123 <th>Días</th>
109 <th></th> 124 <th></th>
110 </tr> 125 </tr>
111 </thead> 126 </thead>
112 <tbody> 127 <tbody>
113 <tr> 128 <tr>
114 <td> 129 <td>
115 <input 130 <input
116 type="number" 131 type="number"
117 class="form-control text-right" 132 class="form-control text-right"
118 ng-model="plazoACargar.item" 133 ng-model="plazoACargar.item"
119 readonly 134 readonly
120 /> 135 />
121 </td> 136 </td>
122 <td> 137 <td>
123 <input 138 <input
124 type="number" 139 type="number"
125 class="form-control text-right" 140 class="form-control text-right"
126 min="0" 141 min="0"
127 ng-model="plazoACargar.dias" 142 ng-model="plazoACargar.dias"
128 ng-keypress="agregarPlazo($event.keyCode)" 143 ng-keypress="agregarPlazo($event.keyCode)"
129 foca-focus="ingreso" 144 foca-focus="ingreso"
130 /> 145 />
131 </td> 146 </td>
132 <td class="text-center"> 147 <td class="text-center">
133 <button 148 <button
134 class="btn btn-outline-secondary" 149 class="btn btn-outline-secondary"
135 ng-click="agregarPlazo(13)" 150 ng-click="agregarPlazo(13)"
136 > 151 >
137 <i class="fa fa-save"></i> 152 <i class="fa fa-save"></i>
138 </button> 153 </button>
139 </td> 154 </td>
140 </tr> 155 </tr>
141 <tr ng-repeat="(key, plazo) in plazosNuevos"> 156 <tr ng-repeat="(key, plazo) in plazosNuevos">
142 <td class="text-right" ng-bind="key + 1"></td> 157 <td class="text-right" ng-bind="key + 1"></td>
143 <td class="text-right" ng-bind="plazo.dias"></td> 158 <td class="text-right" ng-bind="plazo.dias"></td>
144 <td class="text-center"> 159 <td class="text-center">
145 <button 160 <button
146 class="btn btn-outline-secondary" 161 class="btn btn-outline-secondary"
147 ng-click="quitarPlazo(key)" 162 ng-click="quitarPlazo(key)"
148 > 163 >
149 <i class="fa fa-trash"></i> 164 <i class="fa fa-trash"></i>
150 </button> 165 </button>
151 </td> 166 </td>
152 </tr> 167 </tr>
153 </tbody> 168 </tbody>
154 </table> 169 </table>
155 </div> 170 </div>
156 <div class="modal-footer py-1"> 171 <div class="modal-footer py-1">
157 <button 172 <button
158 ng-show="!ingreso" 173 ng-show="!ingreso"
159 class="btn btn-sm btn-secondary" 174 class="btn btn-sm btn-secondary"
160 type="button" 175 type="button"
161 ng-click="cancel()" 176 ng-click="cancel()"
162 >Cancelar 177 >Cancelar
163 </button> 178 </button>
164 <button 179 <button
165 ng-show="ingreso" 180 ng-show="ingreso"
166 class="btn btn-sm btn-primary" 181 class="btn btn-sm btn-primary"
167 type="button" 182 type="button"
168 ng-click="select(plazosNuevos)" 183 ng-click="select(plazosNuevos)"
169 >Aceptar 184 >Aceptar
170 </button> 185 </button>
171 <button 186 <button
172 ng-show="ingreso" 187 ng-show="ingreso"
173 class="btn btn-sm btn-secondary" 188 class="btn btn-sm btn-secondary"
174 type="button" 189 type="button"
175 ng-click="volver()" 190 ng-click="volver()"
176 >Volver 191 >Volver
177 </button> 192 </button>
178 </div> 193 </div>
179 194