Marcelo Puebla / foca-modal-busqueda-productos

Download as
Browse Code »

Commit e83e60dd3edf0f231ada004edf6ff4566ebed058

Authored by Eric Fernandez
2 parents 5baeb96f4b 49ad12d23c
Exists in master and in 1 other branch develop

Merge branch 'master' into 'master' 

Master

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