Commit fb10d862ae76e6984ec2821390051536f5a0bbda

Authored by Marcelo Puebla
1 parent cf8a87c861
Exists in master

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