Eric Fernandez / foca-modal-busqueda-productos

Download as
Browse Code »

Commit 92d128057e0cd124542e3b9dd35333e7ae1c036b

Authored by Pablo Marco del Pont
2 parents f894bd683d c6200d5be3
Exists in master

Merge branch 'master' into 'master' 

Master

See merge request modulos-npm/foca-modal-busqueda-productos!4
Showing 3 changed files   Show diff stats
src/js/controller.js
Diff comments   View file @ 92d1280
1 angular.module('focaBusquedaProductos') 1 angular.module('focaBusquedaProductos')
2 .controller('modalBusquedaProductosCtrl', 2 .controller('modalBusquedaProductosCtrl',
3 [ 3 [
4 '$filter', 4 '$filter',
5 '$scope', 5 '$scope',
6 '$uibModalInstance', 6 '$uibModalInstance',
7 'idLista',
7 'focaBusquedaProductosService', 8 'focaBusquedaProductosService',
8 function($filter, $scope, $uibModalInstance, focaBusquedaProductosService) { 9 function($filter, $scope, $uibModalInstance, idLista, focaBusquedaProductosService) {
9 focaBusquedaProductosService.getProductos().then( 10 focaBusquedaProductosService.getProductosByIdLista(idLista).then(
10 function(res) { 11 function(res) {
11 $scope.productos = res.data; 12 $scope.productos = res.data;
12 $scope.search(); 13 $scope.search();
13 } 14 }
14 ); 15 );
15 16
16 // pagination 17 // pagination
17 $scope.numPerPage = 10; 18 $scope.numPerPage = 10;
18 $scope.currentPage = 1; 19 $scope.currentPage = 1;
19 $scope.filteredProductos = []; 20 $scope.filteredProductos = [];
20 $scope.currentPageProductos = []; 21 $scope.currentPageProductos = [];
21 $scope.selectedProducto = -1; 22 $scope.selectedProducto = -1;
22 23
23 //METODOS 24 //METODOS
24 $scope.search = function() { 25 $scope.search = function() {
25 $scope.filteredProductos = $filter('filter')( 26 $scope.filteredProductos = $filter('filter')(
26 $scope.productos, 27 $scope.productos,
27 {$: $scope.filters} 28 {$: $scope.filters}
28 ); 29 );
29 30
30 $scope.lastPage = Math.ceil( 31 $scope.lastPage = Math.ceil(
31 $scope.filteredProductos.length / $scope.numPerPage 32 $scope.filteredProductos.length / $scope.numPerPage
32 ); 33 );
33 34
34 $scope.resetPage(); 35 $scope.resetPage();
35 }; 36 };
36 37
37 $scope.resetPage = function() { 38 $scope.resetPage = function() {
38 $scope.currentPage = 1; 39 $scope.currentPage = 1;
39 $scope.selectPage(1); 40 $scope.selectPage(1);
40 }; 41 };
41 42
42 $scope.selectPage = function(page) { 43 $scope.selectPage = function(page) {
43 var start = (page - 1) * $scope.numPerPage; 44 var start = (page - 1) * $scope.numPerPage;
44 var end = start + $scope.numPerPage; 45 var end = start + $scope.numPerPage;
45 $scope.paginas = []; 46 $scope.paginas = [];
46 $scope.paginas = calcularPages(page); 47 $scope.paginas = calcularPages(page);
47 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); 48 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
48 $scope.currentPage = page; 49 $scope.currentPage = page;
49 }; 50 };
50 51
51 $scope.select = function(producto) { 52 $scope.select = function(producto) {
52 $uibModalInstance.close(producto); 53 $uibModalInstance.close(producto);
53 }; 54 };
54 55
55 $scope.cancel = function() { 56 $scope.cancel = function() {
56 $uibModalInstance.dismiss('cancel'); 57 $uibModalInstance.dismiss('cancel');
57 }; 58 };
58 59
59 $scope.busquedaDown = function(key) { 60 $scope.busquedaDown = function(key) {
60 if (key === 40) { 61 if (key === 40) {
61 primera(key); 62 primera(key);
62 } 63 }
63 }; 64 };
64 65
65 $scope.busquedaPress = function(key) { 66 $scope.busquedaPress = function(key) {
66 if (key === 13) { 67 if (key === 13) {
67 primera(key); 68 primera(key);
68 } 69 }
69 }; 70 };
70 71
71 $scope.itemProducto = function(key) { 72 $scope.itemProducto = function(key) {
72 if (key === 38) { 73 if (key === 38) {
73 anterior(key); 74 anterior(key);
74 } 75 }
75 76
76 if (key === 40) { 77 if (key === 40) {
77 siguiente(key); 78 siguiente(key);
78 } 79 }
79 80
80 if (key === 37) { 81 if (key === 37) {
81 retrocederPagina(); 82 retrocederPagina();
82 } 83 }
83 84
84 if (key === 39) { 85 if (key === 39) {
85 avanzarPagina(); 86 avanzarPagina();
86 } 87 }
87 }; 88 };
88 89
89 function calcularPages(paginaActual) { 90 function calcularPages(paginaActual) {
90 var paginas = []; 91 var paginas = [];
91 paginas.push(paginaActual); 92 paginas.push(paginaActual);
92 93
93 if (paginaActual - 1 > 1) { 94 if (paginaActual - 1 > 1) {
94 95
95 paginas.unshift(paginaActual - 1); 96 paginas.unshift(paginaActual - 1);
96 if (paginaActual - 2 > 1) { 97 if (paginaActual - 2 > 1) {
97 paginas.unshift(paginaActual - 2); 98 paginas.unshift(paginaActual - 2);
98 } 99 }
99 } 100 }
100 101
101 if (paginaActual + 1 < $scope.lastPage) { 102 if (paginaActual + 1 < $scope.lastPage) {
102 paginas.push(paginaActual + 1); 103 paginas.push(paginaActual + 1);
103 if (paginaActual + 2 < $scope.lastPage) { 104 if (paginaActual + 2 < $scope.lastPage) {
104 paginas.push(paginaActual + 2); 105 paginas.push(paginaActual + 2);
105 } 106 }
106 } 107 }
107 108
108 if (paginaActual !== 1) { 109 if (paginaActual !== 1) {
109 paginas.unshift(1); 110 paginas.unshift(1);
110 } 111 }
111 112
112 if (paginaActual !== $scope.lastPage) { 113 if (paginaActual !== $scope.lastPage) {
113 paginas.push($scope.lastPage); 114 paginas.push($scope.lastPage);
114 } 115 }
115 116
116 return paginas; 117 return paginas;
117 } 118 }
118 119
119 function primera() { 120 function primera() {
120 $scope.selectedProducto = 0; 121 $scope.selectedProducto = 0;
121 } 122 }
122 123
123 function anterior() { 124 function anterior() {
124 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { 125 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) {
125 retrocederPagina(); 126 retrocederPagina();
126 } else { 127 } else {
127 $scope.selectedProducto--; 128 $scope.selectedProducto--;
128 } 129 }
129 } 130 }
130 131
131 function siguiente() { 132 function siguiente() {
132 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) { 133 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) {
133 $scope.selectedProducto++; 134 $scope.selectedProducto++;
134 } else { 135 } else {
135 avanzarPagina(); 136 avanzarPagina();
136 } 137 }
137 } 138 }
138 139
139 function retrocederPagina() { 140 function retrocederPagina() {
140 if ($scope.currentPage > 1) { 141 if ($scope.currentPage > 1) {
141 $scope.selectPage($scope.currentPage - 1); 142 $scope.selectPage($scope.currentPage - 1);
142 $scope.selectedProducto = $scope.numPerPage - 1; 143 $scope.selectedProducto = $scope.numPerPage - 1;
143 } 144 }
144 } 145 }
145 146
146 function avanzarPagina() { 147 function avanzarPagina() {
147 if ($scope.currentPage < $scope.lastPage) { 148 if ($scope.currentPage < $scope.lastPage) {
148 $scope.selectPage($scope.currentPage + 1); 149 $scope.selectPage($scope.currentPage + 1);
149 $scope.selectedProducto = 0; 150 $scope.selectedProducto = 0;
150 } 151 }
151 } 152 }
152 } 153 }
153 ] 154 ]
154 ); 155 );
155 156
1 angular.module('focaBusquedaProductos') 1 angular.module('focaBusquedaProductos')
2 .service('focaBusquedaProductosService', [ 2 .service('focaBusquedaProductosService', [
3 '$http', 3 '$http',
4 'API_ENDPOINT', 4 'API_ENDPOINT',
5 function($http, API_ENDPOINT) { 5 function($http, API_ENDPOINT) {
6 return { 6 return {
7 getProductos: function() { 7 getProductos: function() {
8 return $http.get(API_ENDPOINT.URL + '/articulos'); 8 return $http.get(API_ENDPOINT.URL + '/articulos');
9 },
10 getProductosByIdLista: function(id) {
11 return $http.get(API_ENDPOINT.URL + '/articulos/lista/' + id);
9 } 12 }
10 }; 13 };
11 } 14 }
12 ]); 15 ]);
13 16
src/views/modal-busqueda-productos.html
Diff comments   View file @ 92d1280
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h3 class="modal-title">Busqueda de Productos</h3> 2 <h3 class="modal-title">Busqueda de Productos</h3>
3 </div> 3 </div>
4 <div class="modal-body" id="modal-body"> 4 <div class="modal-body" id="modal-body">
5 <div class="input-group mb-3"> 5 <div class="input-group mb-3">
6 <input 6 <input
7 type="text" 7 type="text"
8 class="form-control" 8 class="form-control"
9 placeholder="Busqueda" 9 placeholder="Busqueda"
10 ng-model="filters" 10 ng-model="filters"
11 ng-change="search()" 11 ng-change="search()"
12 ng-keydown="busquedaDown($event.keyCode)" 12 ng-keydown="busquedaDown($event.keyCode)"
13 ng-keypress="busquedaPress($event.keyCode)" 13 ng-keypress="busquedaPress($event.keyCode)"
14 foca-focus="selectedProducto == -1" 14 foca-focus="selectedProducto == -1"
15 ng-focus="selectedProducto = -1" 15 ng-focus="selectedProducto = -1"
16 > 16 >
17 <table class="table table-striped table-sm"> 17 <table class="table table-striped table-sm">
18 <thead> 18 <thead>
19 <tr> 19 <tr>
20 <th>Sec.</th> 20 <th>Sec.</th>
21 <th>Cod.</th> 21 <th>Cod.</th>
22 <th>Descripción</th> 22 <th>Descripción</th>
23 <th>P. Base</th> 23 <th>P. Base</th>
24 <th></th> 24 <th></th>
25 </tr> 25 </tr>
26 </thead> 26 </thead>
27 <tbody> 27 <tbody>
28 <tr ng-repeat="(key,producto) in currentPageProductos"> 28 <tr ng-repeat="(key,producto) in currentPageProductos">
29 <td ng-bind="producto.sector"></td> 29 <td ng-bind="producto.sector"></td>
30 <td ng-bind="producto.codigo"></td> 30 <td ng-bind="producto.codigo"></td>
31 <td ng-bind="producto.descripcion"></td> 31 <td ng-bind="producto.descripcion"></td>
32 <td ng-bind="producto.precio | currency"></td> 32 <td ng-bind="producto.precio | currency"></td>
33 <td> 33 <td>
34 <button 34 <button
35 type="button" 35 type="button"
36 class="btn p-2 float-right" 36 class="btn p-2 float-right"
37 ng-class="{ 37 ng-class="{
38 'btn-secondary': selectedProducto != key, 38 'btn-secondary': selectedProducto != key,
39 'btn-primary': selectedProducto == key 39 'btn-primary': selectedProducto == key
40 }" 40 }"
41 ng-click="select(producto)" 41 ng-click="select(producto)"
42 foca-focus="selectedProducto == {{key}}" 42 foca-focus="selectedProducto == {{key}}"
43 ng-keydown="itemProducto($event.keyCode)" 43 ng-keydown="itemProducto($event.keyCode)"
44 > 44 >
45 <i class="fa fa-arrow-right" aria-hidden="true"></i> 45 <i class="fa fa-arrow-right" aria-hidden="true"></i>
46 </button> 46 </button>
47 </td> 47 </td>
48 </tr> 48 </tr>
49 </tbody> 49 </tbody>
50 </table> 50 </table>
51 <nav> 51 <nav>
52 <ul class="pagination justify-content-end"> 52 <ul class="pagination justify-content-end">
53 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 53 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
54 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 54 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
55 <span aria-hidden="true">&laquo;</span> 55 <span aria-hidden="true">&laquo;</span>
56 <span class="sr-only">Anterior</span> 56 <span class="sr-only">Anterior</span>
57 </a> 57 </a>
58 </li> 58 </li>
59 <li 59 <li
60 class="page-item" 60 class="page-item"
61 ng-repeat="pagina in paginas" 61 ng-repeat="pagina in paginas"
62 ng-class="{'active': pagina == currentPage}" 62 ng-class="{'active': pagina == currentPage}"
63 > 63 >
64 <a 64 <a
65 class="page-link" 65 class="page-link"
66 href="#" 66 href="#"
67 ng-click="selectPage(pagina)" 67 ng-click="selectPage(pagina)"
68 ng-bind="pagina" 68 ng-bind="pagina"
69 ></a> 69 ></a>
70 </li> 70 </li>
71 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 71 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
72 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 72 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
73 <span aria-hidden="true">&raquo;</span> 73 <span aria-hidden="true">&raquo;</span>
74 <span class="sr-only">Siguiente</span> 74 <span class="sr-only">Siguiente</span>
75 </a> 75 </a>
76 </li> 76 </li>
77 </ul> 77 </ul>
78 </nav> 78 </nav>
79 </div> 79 </div>
80 </div> 80 </div>
81 <div class="modal-footer"> 81 <div class="modal-footer">
82 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 82 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
83 </div> 83 </div>
84 84