Mauricio Cattafi / foca-modal-busqueda-productos

Download as
Browse Code »

Commit 62fba03f565d0227144b419c98c364003f42175c

Authored by Eric Fernandez
1 parent 00fbea86ea
Exists in master and in 1 other branch develop

Modal recibe objeto como parámetro

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