Commit ee157e37dc64458a6a96bc9c0960ac5c7770f22b

Authored by Marcelo Puebla
1 parent 7e9d15313a
Exists in master and in 1 other branch develop

Arreglo en modal de busqueda de productos.

src/js/controller.js
1 angular.module('focaBusquedaProductos') 1 angular.module('focaBusquedaProductos')
2 .controller('modalBusquedaProductosCtrl', 2 .controller('modalBusquedaProductosCtrl',
3 [ 3 [
4 '$timeout', 4 '$timeout',
5 '$filter', 5 '$filter',
6 '$scope', 6 '$scope',
7 '$uibModalInstance', 7 '$uibModalInstance',
8 'parametroProducto', 8 'parametroProducto',
9 'focaBusquedaProductosService', 9 'focaBusquedaProductosService',
10 function ($timeout, $filter, $scope, $uibModalInstance, parametroProducto, 10 function ($timeout, $filter, $scope, $uibModalInstance, parametroProducto,
11 focaBusquedaProductosService 11 focaBusquedaProductosService
12 ) { 12 ) {
13 13
14 $scope.simbolo = parametroProducto.simbolo; 14 $scope.simbolo = parametroProducto.simbolo;
15 $scope.filters = ''; 15 $scope.filters = '';
16 $scope.listaProductos = []; 16 $scope.listaProductos = [];
17 $scope.todosProductos = []; 17 $scope.todosProductos = [];
18 $scope.primerBusqueda = false; 18 $scope.primerBusqueda = false;
19 $scope.searchLoading = false; 19 $scope.searchLoading = false;
20 $scope.soloMostrar = parametroProducto.soloMostrar; 20 $scope.soloMostrar = parametroProducto.soloMostrar;
21 $scope.useAllProducts = false; 21 $scope.useAllProducts = false;
22 //#region pagination variables 22 //#region pagination variables
23 $scope.numPerPage = 10; 23 $scope.numPerPage = 10;
24 $scope.currentPage = 1; 24 $scope.currentPage = 1;
25 $scope.filteredProductos = []; 25 $scope.filteredProductos = [];
26 $scope.currentPageProductos = []; 26 $scope.currentPageProductos = [];
27 $scope.selectedProducto = -1; 27 $scope.selectedProducto = -1;
28 //#endregion 28 //#endregion
29 29
30 //METODOS 30 //METODOS
31 $scope.busquedaPress = function (key) { 31 $scope.busquedaPress = function (key) {
32 if (key === 13) { 32 if (key === 13) {
33 $scope.searchLoading = true; 33 $scope.searchLoading = true;
34 if (parametroProducto.idLista > 0) { 34 if (parametroProducto.idLista > 0) {
35 focaBusquedaProductosService 35 focaBusquedaProductosService
36 .getProductosByIdLista(parametroProducto.idLista, $scope.filters) 36 .getProductosByIdLista(parametroProducto.idLista, $scope.filters)
37 .then(llenarDatos); 37 .then(function (data) {
38 focaBusquedaProductosService.getProductos() 38 llenarDatos(data);
39 .then(fillAllProductos); 39 focaBusquedaProductosService.getProductos()
40 .then(fillAllProductos);
41 });
40 } 42 }
41 } 43 }
42 }; 44 };
43 function llenarDatos(res) { 45 function llenarDatos(res) {
44 for (var i = 0; i < res.data.length; i++) { 46 for (var i = 0; i < res.data.length; i++) {
45 res.data[i].precio = res.data[i].precio / parametroProducto.cotizacion; 47 res.data[i].precio = res.data[i].precio / parametroProducto.cotizacion;
46 } 48 }
47 $scope.searchLoading = false; 49 $scope.searchLoading = false;
48 $scope.primerBusqueda = true; 50 $scope.primerBusqueda = true;
49 $scope.listaProductos = res.data; 51 $scope.listaProductos = res.data;
50 $scope.search(true); 52 $scope.search(true);
51 primera(); 53 primera();
52 }; 54 };
53 function fillAllProductos(res) { 55 function fillAllProductos(res) {
54 for (var i = 0; i < res.data.length; i++) { 56 for (var i = 0; i < res.data.length; i++) {
55 res.data[i].precio = res.data[i].precio / parametroProducto.cotizacion; 57 var producto = $scope.listaProductos.filter(function(producto) {
58 return producto.id == res.data[i].id;
59 })[0];
60
61 if (producto) {
62 res.data[i].precio = producto.precio;
63 }
56 } 64 }
57 $scope.searchLoading = false; 65 $scope.searchLoading = false;
58 $scope.primerBusqueda = true; 66 $scope.primerBusqueda = true;
59 $scope.todosProductos = res.data; 67 $scope.todosProductos = res.data;
60 $scope.search(true); 68 $scope.search(true);
61 primera(); 69 primera();
62 }; 70 };
63 $scope.changeProductsData = function () { 71 $scope.changeProductsData = function () {
64 $scope.useAllProducts = !$scope.useAllProducts; 72 $scope.useAllProducts = !$scope.useAllProducts;
65 $scope.search(false); 73 $scope.search(false);
66 primera(); 74 primera();
67 }; 75 };
68 $scope.search = function (pressed) { 76 $scope.search = function (pressed) {
69 if ($scope.listaProductos.length > 0) { 77 if ($scope.listaProductos.length > 0) {
70 $scope.filteredProductos = $filter('filter')( 78 $scope.filteredProductos = $filter('filter')(
71 ($scope.useAllProducts ? $scope.todosProductos : $scope.listaProductos), 79 ($scope.useAllProducts ? $scope.todosProductos : $scope.listaProductos),
72 { $: $scope.filters } 80 { $: $scope.filters }
73 ); 81 );
74 82
75 $scope.lastPage = Math.ceil( 83 $scope.lastPage = Math.ceil(
76 $scope.filteredProductos.length / $scope.numPerPage 84 $scope.filteredProductos.length / $scope.numPerPage
77 ); 85 );
78 86
79 $scope.resetPage(); 87 $scope.resetPage();
80 } else if (pressed) { 88 } else if (pressed) {
81 $timeout(function () { 89 $timeout(function () {
82 angular.element('#search')[0].focus(); 90 angular.element('#search')[0].focus();
83 $scope.filters = ''; 91 $scope.filters = '';
84 }); 92 });
85 } 93 }
86 }; 94 };
87 $scope.resetPage = function () { 95 $scope.resetPage = function () {
88 $scope.currentPage = 1; 96 $scope.currentPage = 1;
89 $scope.selectPage(1); 97 $scope.selectPage(1);
90 }; 98 };
91 $scope.selectPage = function (page) { 99 $scope.selectPage = function (page) {
92 var start = (page - 1) * $scope.numPerPage; 100 var start = (page - 1) * $scope.numPerPage;
93 var end = start + $scope.numPerPage; 101 var end = start + $scope.numPerPage;
94 $scope.paginas = []; 102 $scope.paginas = [];
95 $scope.paginas = calcularPages(page); 103 $scope.paginas = calcularPages(page);
96 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); 104 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
97 $scope.currentPage = page; 105 $scope.currentPage = page;
98 }; 106 };
99 $scope.select = function (producto) { 107 $scope.select = function (producto) {
100 // if ($scope.useAllProducts)
101 // producto.precio = producto.precioBase;
102 $uibModalInstance.close(producto); 108 $uibModalInstance.close(producto);
103 }; 109 };
104 $scope.cancel = function () { 110 $scope.cancel = function () {
105 $uibModalInstance.dismiss('cancel'); 111 $uibModalInstance.dismiss('cancel');
106 }; 112 };
107 $scope.busquedaDown = function (key) { 113 $scope.busquedaDown = function (key) {
108 if (key === 40) { 114 if (key === 40) {
109 primera(key); 115 primera(key);
110 } 116 }
111 }; 117 };
112 $scope.itemProducto = function (key) { 118 $scope.itemProducto = function (key) {
113 if (key === 38) { 119 if (key === 38) {
114 anterior(key); 120 anterior(key);
115 } 121 }
116 122
117 if (key === 40) { 123 if (key === 40) {
118 siguiente(key); 124 siguiente(key);
119 } 125 }
120 126
121 if (key === 37) { 127 if (key === 37) {
122 retrocederPagina(); 128 retrocederPagina();
123 } 129 }
124 130
125 if (key === 39) { 131 if (key === 39) {
126 avanzarPagina(); 132 avanzarPagina();
127 } 133 }
128 }; 134 };
129 135
130 //#region Paginador 136 //#region Paginador
131 function calcularPages(paginaActual) { 137 function calcularPages(paginaActual) {
132 var paginas = []; 138 var paginas = [];
133 paginas.push(paginaActual); 139 paginas.push(paginaActual);
134 140
135 if (paginaActual - 1 > 1) { 141 if (paginaActual - 1 > 1) {
136 142
137 paginas.unshift(paginaActual - 1); 143 paginas.unshift(paginaActual - 1);
138 if (paginaActual - 2 > 1) { 144 if (paginaActual - 2 > 1) {
139 paginas.unshift(paginaActual - 2); 145 paginas.unshift(paginaActual - 2);
140 } 146 }
141 } 147 }
142 148
143 if (paginaActual + 1 < $scope.lastPage) { 149 if (paginaActual + 1 < $scope.lastPage) {
144 paginas.push(paginaActual + 1); 150 paginas.push(paginaActual + 1);
145 if (paginaActual + 2 < $scope.lastPage) { 151 if (paginaActual + 2 < $scope.lastPage) {
146 paginas.push(paginaActual + 2); 152 paginas.push(paginaActual + 2);
147 } 153 }
148 } 154 }
149 155
150 if (paginaActual !== 1) { 156 if (paginaActual !== 1) {
151 paginas.unshift(1); 157 paginas.unshift(1);
152 } 158 }
153 159
154 if (paginaActual !== $scope.lastPage) { 160 if (paginaActual !== $scope.lastPage) {
155 paginas.push($scope.lastPage); 161 paginas.push($scope.lastPage);
156 } 162 }
157 163
158 return paginas; 164 return paginas;
159 }; 165 };
160 function primera() { 166 function primera() {
161 $scope.selectedProducto = 0; 167 $scope.selectedProducto = 0;
162 }; 168 };
163 function anterior() { 169 function anterior() {
164 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { 170 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) {
165 retrocederPagina(); 171 retrocederPagina();
166 } else { 172 } else {
167 $scope.selectedProducto--; 173 $scope.selectedProducto--;
168 } 174 }
169 }; 175 };
170 function siguiente() { 176 function siguiente() {
171 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1) { 177 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1) {
172 $scope.selectedProducto++; 178 $scope.selectedProducto++;
173 } else { 179 } else {
174 avanzarPagina(); 180 avanzarPagina();
175 } 181 }
176 }; 182 };
177 function retrocederPagina() { 183 function retrocederPagina() {
178 if ($scope.currentPage > 1) { 184 if ($scope.currentPage > 1) {
179 $scope.selectPage($scope.currentPage - 1); 185 $scope.selectPage($scope.currentPage - 1);
180 $scope.selectedProducto = $scope.numPerPage - 1; 186 $scope.selectedProducto = $scope.numPerPage - 1;
181 } 187 }
182 }; 188 };
183 function avanzarPagina() { 189 function avanzarPagina() {
184 if ($scope.currentPage < $scope.lastPage) { 190 if ($scope.currentPage < $scope.lastPage) {
185 $scope.selectPage($scope.currentPage + 1); 191 $scope.selectPage($scope.currentPage + 1);
186 $scope.selectedProducto = 0; 192 $scope.selectedProducto = 0;
187 } 193 }
188 }; 194 };
189 //#endregion 195 //#endregion
190 196
191 $scope.busquedaPress(13); 197 $scope.busquedaPress(13);
192 } 198 }
193 ] 199 ]
src/views/modal-busqueda-productos.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 Productos</h5> 4 <h5 class="modal-title my-1">Búsqueda de Productos</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="Busqueda" 12 placeholder="Busqueda"
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="selectedProducto == -1" 17 foca-focus="selectedProducto == -1"
18 ng-focus="selectedProducto = -1" 18 ng-focus="selectedProducto = -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 data-spinner-color="#FF0000" 24 data-spinner-color="#FF0000"
25 class="btn btn-outline-secondary" 25 class="btn btn-outline-secondary"
26 type="button" 26 type="button"
27 title="Buscar" 27 title="Buscar"
28 ng-click="busquedaPress(13)" 28 ng-click="busquedaPress(13)"
29 > 29 >
30 <i class="fa fa-search" aria-hidden="true"></i> 30 <i class="fa fa-search" aria-hidden="true"></i>
31 </button> 31 </button>
32 </div> 32 </div>
33 </div> 33 </div>
34 </div> 34 </div>
35 <div class="row"> 35 <div class="row">
36 <div class="col my-1 d-flex justify-content-end"> 36 <div class="col my-1 d-flex justify-content-end">
37 <div class="custom-control custom-checkbox mt-auto"> 37 <div class="custom-control custom-checkbox mt-auto">
38 <input type="checkbox" class="custom-control-input" id="check" ng-click="changeProductsData()"> 38 <input type="checkbox" class="custom-control-input" id="check" ng-click="changeProductsData()">
39 <label class="custom-control-label" for="check">Buscar en todos los artículos disponibles</label> 39 <label class="custom-control-label disable-selection" for="check">
40 Buscar en todos los artículos disponibles
41 </label>
40 </div> 42 </div>
41 </div> 43 </div>
42 </div> 44 </div>
43 </div> 45 </div>
44 <div class="modal-body" id="modal-body"> 46 <div class="modal-body" id="modal-body">
45 47
46 <div ng-show="!primerBusqueda"> 48 <div ng-show="!primerBusqueda">
47 Debe realizar una primer búsqueda. 49 Debe realizar una primer búsqueda.
48 </div> 50 </div>
49 51
50 <table ng-show="primerBusqueda" class="table table-striped table-sm"> 52 <table ng-show="primerBusqueda" class="table table-striped table-sm">
51 <thead> 53 <thead>
52 <tr> 54 <tr>
53 <th ng-hide="soloMostrar">Código</th> 55 <th ng-hide="soloMostrar">Código</th>
54 <th>Descripción</th> 56 <th>Descripción</th>
55 <th class="text-right">P. Lista</th> 57 <th class="text-right">P. Lista</th>
56 <th class="text-right" ng-show="useAllProducts">P. Base</th> 58 <th class="text-right" ng-show="useAllProducts">P. Base</th>
57 <th ng-hide="soloMostrar"></th> 59 <th ng-hide="soloMostrar"></th>
58 </tr> 60 </tr>
59 </thead> 61 </thead>
60 <tbody> 62 <tbody>
61 <tr ng-show="currentPageProductos.length == 0 && primerBusqueda"> 63 <tr ng-show="currentPageProductos.length == 0 && primerBusqueda">
62 <td colspan="5"> 64 <td colspan="5">
63 No se encontraron resultados. 65 No se encontraron resultados.
64 </td> 66 </td>
65 </tr> 67 </tr>
66 <tr class="selectable" 68 <tr class="selectable"
67 ng-repeat="(key,producto) in currentPageProductos" 69 ng-repeat="(key,producto) in currentPageProductos"
68 ng-click="select(producto)"> 70 ng-click="select(producto)">
69 <td ng-bind="producto.sector + '-' + producto.codigo" 71 <td ng-bind="producto.sector + '-' + producto.codigo"
70 ng-hide="soloMostrar"></td> 72 ng-hide="soloMostrar"></td>
71 <td ng-bind="producto.descripcion"></td> 73 <td ng-bind="producto.descripcion"></td>
72 <td class="text-right" ng-bind="producto.precio | number: 2"></td> 74 <td class="text-right">{{producto.precioBase == producto.precio ? '' : producto.precio}}</td>
73 <td class="text-right" ng-bind="producto.precioBase | number: 2" ng-show="useAllProducts"></td> 75 <td class="text-right" ng-bind="producto.precioBase | number: 2" ng-show="useAllProducts"></td>
74 <td class="d-md-none text-primary"> 76 <td class="d-md-none text-primary">
75 <i class="fa fa-circle-thin" aria-hidden="true"></i> 77 <i class="fa fa-circle-thin" aria-hidden="true"></i>
76 </td> 78 </td>
77 <td class="d-none d-md-table-cell"> 79 <td class="d-none d-md-table-cell">
78 <button 80 <button
79 type="button" 81 type="button"
80 class="btn btn-xs p-1 float-right" 82 class="btn btn-xs p-1 float-right"
81 title="Seleccionar" 83 title="Seleccionar"
82 ng-class="{ 84 ng-class="{
83 'btn-secondary': selectedProducto != key, 85 'btn-secondary': selectedProducto != key,
84 'btn-primary': selectedProducto == key 86 'btn-primary': selectedProducto == key
85 }" 87 }"
86 foca-focus="selectedProducto == {{key}}" 88 foca-focus="selectedProducto == {{key}}"
87 ng-keydown="itemProducto($event.keyCode)" 89 ng-keydown="itemProducto($event.keyCode)"
88 ng-hide="soloMostrar"> 90 ng-hide="soloMostrar">
89 <i class="fa fa-circle-thin" aria-hidden="true"></i> 91 <i class="fa fa-circle-thin" aria-hidden="true"></i>
90 </button> 92 </button>
91 </td> 93 </td>
92 </tr> 94 </tr>
93 </tbody> 95 </tbody>
94 </table> 96 </table>
95 97
96 </div> 98 </div>
97 <div class="modal-footer py-1"> 99 <div class="modal-footer py-1">
98 <nav ng-show="currentPageProductos.length > 0 && primerBusqueda" class="mr-auto"> 100 <nav ng-show="currentPageProductos.length > 0 && primerBusqueda" class="mr-auto">
99 <ul class="pagination pagination-sm justify-content mb-0"> 101 <ul class="pagination pagination-sm justify-content mb-0">
100 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 102 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
101 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)"> 103 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
102 <span aria-hidden="true">&laquo;</span> 104 <span aria-hidden="true">&laquo;</span>
103 <span class="sr-only">Anterior</span> 105 <span class="sr-only">Anterior</span>
104 </a> 106 </a>
105 </li> 107 </li>
106 <li 108 <li
107 class="page-item" 109 class="page-item"
108 ng-repeat="pagina in paginas" 110 ng-repeat="pagina in paginas"
109 ng-class="{'active': pagina == currentPage}" 111 ng-class="{'active': pagina == currentPage}"
110 > 112 >
111 <a 113 <a
112 class="page-link" 114 class="page-link"
113 href="javascript:void();" 115 href="javascript:void();"
114 ng-click="selectPage(pagina)" 116 ng-click="selectPage(pagina)"
115 ng-bind="pagina" 117 ng-bind="pagina"
116 ></a> 118 ></a>
117 </li> 119 </li>
118 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 120 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
119 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)"> 121 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
120 <span aria-hidden="true">&raquo;</span> 122 <span aria-hidden="true">&raquo;</span>
121 <span class="sr-only">Siguiente</span> 123 <span class="sr-only">Siguiente</span>
122 </a> 124 </a>
123 </li> 125 </li>
124 </ul> 126 </ul>
125 </nav> 127 </nav>
126 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Volver</button> 128 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Volver</button>
127 </div> 129 </div>
128 130