Commit 957cd74950b902d93468ecaeed5ae568fa1b6386

Authored by Pablo Marco del Pont
Exists in master

Merge branch 'master' into 'master'

Master(efernandez)

See merge request modulos-npm/foca-modal-busqueda-productos!12
1 <html ng-app="focaBusquedaProductos"> 1 <html ng-app="focaBusquedaProductos">
2 <head> 2 <head>
3 <meta charset="UTF-8"/> 3 <meta charset="UTF-8"/>
4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 4 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
5 5
6 <!--CSS--> 6 <!--CSS-->
7 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/> 7 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
8 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/> 8 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
9 9
10 <!--VENDOR JS--> 10 <!--VENDOR JS-->
11 <script src="node_modules/jquery/dist/jquery.min.js"></script> 11 <script src="node_modules/jquery/dist/jquery.min.js"></script>
12 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 12 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
13 <script src="node_modules/angular/angular.min.js"></script> 13 <script src="node_modules/angular/angular.min.js"></script>
14 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 14 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
15 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 15 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
16 16
17 <!-- BUILD --> 17 <!-- BUILD -->
18 <script src="src/js/app.js"></script> 18 <script src="src/js/app.js"></script>
19 <script src="src/js/controller.js"></script> 19 <script src="src/js/controller.js"></script>
20 <script src="src/js/service.js"></script> 20 <script src="src/js/service.js"></script>
21 21
22 <!-- /BUILD --> 22 <!-- /BUILD -->
23 23
24 <!-- CONFIG PARA DEVELOP --> 24 <!-- CONFIG PARA DEVELOP -->
25 <script src="src/etc/develop.js"></script> 25 <script src="src/etc/develop.js"></script>
26 <script type="text/javascript"> 26 <script type="text/javascript">
27 angular.module('focaBusquedaProductos') 27 angular.module('focaBusquedaProductos')
28 .controller('controller', [ 28 .controller('controller', [
29 '$scope', 29 '$scope',
30 '$uibModal', 30 '$uibModal',
31 '$timeout', 31 '$timeout',
32 function($scope, $uibModal, $timeout) { 32 function($scope, $uibModal, $timeout) {
33 openModal(); 33 openModal();
34 34
35 function openModal() { 35 function openModal() {
36 var modalInstance = $uibModal.open( 36 var modalInstance = $uibModal.open(
37 { 37 {
38 ariaLabelledBy: 'Busqueda de Productos', 38 ariaLabelledBy: 'Busqueda de Productos',
39 templateUrl: 'src/views/modal-busqueda-productos.html', 39 templateUrl: 'src/views/modal-busqueda-productos.html',
40 controller: 'modalBusquedaProductosCtrl', 40 controller: 'modalBusquedaProductosCtrl',
41 size: 'lg', 41 size: 'lg',
42 resolve: {idLista : function() { return null; }} 42 resolve: {idLista : function() { return -1; }}
43 } 43 }
44 ); 44 );
45 45
46 modalInstance.result.then( 46 modalInstance.result.then(
47 function (selectedItem) { 47 function (selectedItem) {
48 console.info(selectedItem); 48 console.info(selectedItem);
49 $timeout(openModal, 500); 49 $timeout(openModal, 500);
50 }, function () { 50 }, function () {
51 console.info('modal-component dismissed at: ' + new Date()); 51 console.info('modal-component dismissed at: ' + new Date());
52 $timeout(openModal, 500); 52 $timeout(openModal, 500);
53 } 53 }
54 ); 54 );
55 } 55 }
56 } 56 }
57 ]); 57 ]);
58 </script> 58 </script>
59 </head> 59 </head>
60 <body ng-controller="controller"> 60 <body ng-controller="controller">
61 </body> 61 </body>
62 </html> 62 </html>
63 63
src/js/controller.js
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 'idLista',
8 'focaBusquedaProductosService', 8 'focaBusquedaProductosService',
9 function($filter, $scope, $uibModalInstance, idLista, focaBusquedaProductosService) { 9 function($filter, $scope, $uibModalInstance, idLista, focaBusquedaProductosService) {
10 10
11 $scope.filters = ''; 11 $scope.filters = '';
12 $scope.productos = []; 12 $scope.productos = [];
13 $scope.primerBusqueda = false; 13 $scope.primerBusqueda = false;
14 // pagination 14 // pagination
15 $scope.numPerPage = 10; 15 $scope.numPerPage = 10;
16 $scope.currentPage = 1; 16 $scope.currentPage = 1;
17 $scope.filteredProductos = []; 17 $scope.filteredProductos = [];
18 $scope.currentPageProductos = []; 18 $scope.currentPageProductos = [];
19 $scope.selectedProducto = -1; 19 $scope.selectedProducto = -1;
20 20
21 //METODOS 21 //METODOS
22 $scope.busquedaPress = function(key) { 22 $scope.busquedaPress = function(key) {
23 if (key === 13) { 23 if (key === 13) {
24 $scope.primerBusqueda = true; 24 if(idLista > 0) {
25 if(idLista) {
26 focaBusquedaProductosService 25 focaBusquedaProductosService
27 .getProductosByIdLista(idLista, $scope.filters) 26 .getProductosByIdLista(idLista, $scope.filters)
28 .then( 27 .then(
29 function(res) { 28 function(res) {
29 $scope.primerBusqueda = true;
30 $scope.productos = res.data; 30 $scope.productos = res.data;
31 $scope.search(); 31 $scope.search();
32 } 32 }
33 ); 33 );
34 } else { 34 } else if(idLista === -1) {
35 focaBusquedaProductosService.getProductos().then( 35 focaBusquedaProductosService.getProductos().then(
36 function(res) { 36 function(res) {
37 $scope.primerBusqueda = true;
37 $scope.productos = res.data; 38 $scope.productos = res.data;
38 $scope.search(); 39 $scope.search();
39 primera(); 40 primera();
40 } 41 }
41 ); 42 );
42 } 43 }
43 } 44 }
44 }; 45 };
45 46
46 $scope.search = function() { 47 $scope.search = function() {
47 if($scope.productos.length > 0) { 48 if($scope.productos.length > 0) {
48 $scope.filteredProductos = $filter('filter')( 49 $scope.filteredProductos = $filter('filter')(
49 $scope.productos, 50 $scope.productos,
50 {$: $scope.filters} 51 {$: $scope.filters}
51 ); 52 );
52 53
53 $scope.lastPage = Math.ceil( 54 $scope.lastPage = Math.ceil(
54 $scope.filteredProductos.length / $scope.numPerPage 55 $scope.filteredProductos.length / $scope.numPerPage
55 ); 56 );
56 57
57 $scope.resetPage(); 58 $scope.resetPage();
58 } 59 }
59 }; 60 };
60 61
61 $scope.resetPage = function() { 62 $scope.resetPage = function() {
62 $scope.currentPage = 1; 63 $scope.currentPage = 1;
63 $scope.selectPage(1); 64 $scope.selectPage(1);
64 }; 65 };
65 66
66 $scope.selectPage = function(page) { 67 $scope.selectPage = function(page) {
67 var start = (page - 1) * $scope.numPerPage; 68 var start = (page - 1) * $scope.numPerPage;
68 var end = start + $scope.numPerPage; 69 var end = start + $scope.numPerPage;
69 $scope.paginas = []; 70 $scope.paginas = [];
70 $scope.paginas = calcularPages(page); 71 $scope.paginas = calcularPages(page);
71 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); 72 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
72 $scope.currentPage = page; 73 $scope.currentPage = page;
73 }; 74 };
74 75
75 $scope.select = function(producto) { 76 $scope.select = function(producto) {
76 $uibModalInstance.close(producto); 77 $uibModalInstance.close(producto);
77 }; 78 };
78 79
79 $scope.cancel = function() { 80 $scope.cancel = function() {
80 $uibModalInstance.dismiss('cancel'); 81 $uibModalInstance.dismiss('cancel');
81 }; 82 };
82 83
83 $scope.busquedaDown = function(key) { 84 $scope.busquedaDown = function(key) {
84 if (key === 40) { 85 if (key === 40) {
85 primera(key); 86 primera(key);
86 } 87 }
87 }; 88 };
88 89
89 $scope.itemProducto = function(key) { 90 $scope.itemProducto = function(key) {
90 if (key === 38) { 91 if (key === 38) {
91 anterior(key); 92 anterior(key);
92 } 93 }
93 94
94 if (key === 40) { 95 if (key === 40) {
95 siguiente(key); 96 siguiente(key);
96 } 97 }
97 98
98 if (key === 37) { 99 if (key === 37) {
99 retrocederPagina(); 100 retrocederPagina();
100 } 101 }
101 102
102 if (key === 39) { 103 if (key === 39) {
103 avanzarPagina(); 104 avanzarPagina();
104 } 105 }
105 }; 106 };
106 107
107 function calcularPages(paginaActual) { 108 function calcularPages(paginaActual) {
108 var paginas = []; 109 var paginas = [];
109 paginas.push(paginaActual); 110 paginas.push(paginaActual);
110 111
111 if (paginaActual - 1 > 1) { 112 if (paginaActual - 1 > 1) {
112 113
113 paginas.unshift(paginaActual - 1); 114 paginas.unshift(paginaActual - 1);
114 if (paginaActual - 2 > 1) { 115 if (paginaActual - 2 > 1) {
115 paginas.unshift(paginaActual - 2); 116 paginas.unshift(paginaActual - 2);
116 } 117 }
117 } 118 }
118 119
119 if (paginaActual + 1 < $scope.lastPage) { 120 if (paginaActual + 1 < $scope.lastPage) {
120 paginas.push(paginaActual + 1); 121 paginas.push(paginaActual + 1);
121 if (paginaActual + 2 < $scope.lastPage) { 122 if (paginaActual + 2 < $scope.lastPage) {
122 paginas.push(paginaActual + 2); 123 paginas.push(paginaActual + 2);
123 } 124 }
124 } 125 }
125 126
126 if (paginaActual !== 1) { 127 if (paginaActual !== 1) {
127 paginas.unshift(1); 128 paginas.unshift(1);
128 } 129 }
129 130
130 if (paginaActual !== $scope.lastPage) { 131 if (paginaActual !== $scope.lastPage) {
131 paginas.push($scope.lastPage); 132 paginas.push($scope.lastPage);
132 } 133 }
133 134
134 return paginas; 135 return paginas;
135 } 136 }
136 137
137 function primera() { 138 function primera() {
138 $scope.selectedProducto = 0; 139 $scope.selectedProducto = 0;
139 } 140 }
140 141
141 function anterior() { 142 function anterior() {
142 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { 143 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) {
143 retrocederPagina(); 144 retrocederPagina();
144 } else { 145 } else {
145 $scope.selectedProducto--; 146 $scope.selectedProducto--;
146 } 147 }
147 } 148 }
148 149
149 function siguiente() { 150 function siguiente() {
150 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) { 151 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) {
151 $scope.selectedProducto++; 152 $scope.selectedProducto++;
152 } else { 153 } else {
153 avanzarPagina(); 154 avanzarPagina();
154 } 155 }
155 } 156 }
156 157
157 function retrocederPagina() { 158 function retrocederPagina() {
158 if ($scope.currentPage > 1) { 159 if ($scope.currentPage > 1) {
159 $scope.selectPage($scope.currentPage - 1); 160 $scope.selectPage($scope.currentPage - 1);
160 $scope.selectedProducto = $scope.numPerPage - 1; 161 $scope.selectedProducto = $scope.numPerPage - 1;
161 } 162 }
162 } 163 }
163 164
164 function avanzarPagina() { 165 function avanzarPagina() {
165 if ($scope.currentPage < $scope.lastPage) { 166 if ($scope.currentPage < $scope.lastPage) {
166 $scope.selectPage($scope.currentPage + 1); 167 $scope.selectPage($scope.currentPage + 1);
167 $scope.selectedProducto = 0; 168 $scope.selectedProducto = 0;
168 } 169 }
169 } 170 }
170 } 171 }
171 ] 172 ]
172 ); 173 );
src/views/modal-busqueda-productos.html
1 <div class="modal-header py-1"> 1 <div class="modal-header py-1">
2 <h5 class="modal-title">Busqueda de Productos</h5> 2 <h5 class="modal-title">Busqueda de Productos</h5>
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"> 5 <div class="input-group">
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 <div class="input-group-append"> 17 <div class="input-group-append">
18 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)"> 18 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
19 <i class="fa fa-search" aria-hidden="true"></i> 19 <i class="fa fa-search" aria-hidden="true"></i>
20 </button> 20 </button>
21 </div> 21 </div>
22 </div> 22 </div>
23 <table ng-show="primerBusqueda" class="table table-striped table-sm"> 23 <table ng-show="primerBusqueda" class="table table-striped table-sm">
24 <thead> 24 <thead>
25 <tr> 25 <tr>
26 <th>Sec.</th> 26 <th>Sec.</th>
27 <th>Cod.</th> 27 <th>Cod.</th>
28 <th>Descripción</th> 28 <th>Descripción</th>
29 <th>P. Base</th> 29 <th>P. Base</th>
30 <th></th> 30 <th></th>
31 </tr> 31 </tr>
32 </thead> 32 </thead>
33 <tbody> 33 <tbody>
34 <tr ng-show="currentPageProductos.length == 0"> 34 <tr ng-show="currentPageProductos.length == 0 && primerBusqueda">
35 <td colspan="5"> 35 <td colspan="5">
36 No se encontraron resultados. 36 No se encontraron resultados.
37 </td> 37 </td>
38 </tr> 38 </tr>
39 <tr class="selectable" 39 <tr class="selectable"
40 ng-repeat="(key,producto) in currentPageProductos" 40 ng-repeat="(key,producto) in currentPageProductos"
41 ng-click="select(producto)"> 41 ng-click="select(producto)">
42 <td ng-bind="producto.sector"></td> 42 <td ng-bind="producto.sector"></td>
43 <td ng-bind="producto.codigo"></td> 43 <td ng-bind="producto.codigo"></td>
44 <td ng-bind="producto.descripcion"></td> 44 <td ng-bind="producto.descripcion"></td>
45 <td ng-bind="producto.precio | currency"></td> 45 <td ng-bind="producto.precio | currency"></td>
46 <td> 46 <td>
47 <button 47 <button
48 type="button" 48 type="button"
49 class="btn btn-xs p-1 float-right" 49 class="btn btn-xs p-1 float-right"
50 ng-class="{ 50 ng-class="{
51 'btn-secondary': selectedProducto != key, 51 'btn-secondary': selectedProducto != key,
52 'btn-primary': selectedProducto == key 52 'btn-primary': selectedProducto == key
53 }" 53 }"
54 foca-focus="selectedProducto == {{key}}" 54 foca-focus="selectedProducto == {{key}}"
55 ng-keydown="itemProducto($event.keyCode)" 55 ng-keydown="itemProducto($event.keyCode)"
56 > 56 >
57 <i class="fa fa-arrow-right" aria-hidden="true"></i> 57 <i class="fa fa-arrow-right" aria-hidden="true"></i>
58 </button> 58 </button>
59 </td> 59 </td>
60 </tr> 60 </tr>
61 </tbody> 61 </tbody>
62 </table> 62 </table>
63 <nav ng-show="currentPageProductos.length > 0 && primerBusqueda"> 63 <nav ng-show="currentPageProductos.length > 0 && primerBusqueda">
64 <ul class="pagination pagination-sm justify-content mb-0"> 64 <ul class="pagination pagination-sm justify-content mb-0">
65 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 65 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
66 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 66 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
67 <span aria-hidden="true">&laquo;</span> 67 <span aria-hidden="true">&laquo;</span>
68 <span class="sr-only">Anterior</span> 68 <span class="sr-only">Anterior</span>
69 </a> 69 </a>
70 </li> 70 </li>
71 <li 71 <li
72 class="page-item" 72 class="page-item"
73 ng-repeat="pagina in paginas" 73 ng-repeat="pagina in paginas"
74 ng-class="{'active': pagina == currentPage}" 74 ng-class="{'active': pagina == currentPage}"
75 > 75 >
76 <a 76 <a
77 class="page-link" 77 class="page-link"
78 href="#" 78 href="#"
79 ng-click="selectPage(pagina)" 79 ng-click="selectPage(pagina)"
80 ng-bind="pagina" 80 ng-bind="pagina"
81 ></a> 81 ></a>
82 </li> 82 </li>
83 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 83 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
84 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 84 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
85 <span aria-hidden="true">&raquo;</span> 85 <span aria-hidden="true">&raquo;</span>
86 <span class="sr-only">Siguiente</span> 86 <span class="sr-only">Siguiente</span>
87 </a> 87 </a>
88 </li> 88 </li>
89 </ul> 89 </ul>
90 </nav> 90 </nav>
91 </div> 91 </div>
92 <div class="modal-footer py-1"> 92 <div class="modal-footer py-1">
93 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 93 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
94 </div> 94 </div>
95 95