Commit 16b2b4e772963c698dc43ecc5c51616e5a01e01d
Exists in
master
and in
1 other branch
Merge branch 'master' into 'master'
master(efernandez) See merge request modulos-npm/foca-modal-busqueda-productos!15
Showing
2 changed files
Show diff stats
index.html
| 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: {idLista : function() { return -1; }} | 46 | resolve: { |
| 47 | idLista : function() { return -1; }, | ||
| 48 | cotizacion: function() { return 1;} | ||
| 49 | } | ||
| 47 | } | 50 | } |
| 48 | ); | 51 | ); |
| 49 | 52 | ||
| 50 | modalInstance.result.then( | 53 | modalInstance.result.then( |
| 51 | function (selectedItem) { | 54 | function (selectedItem) { |
| 52 | console.info(selectedItem); | 55 | console.info(selectedItem); |
| 53 | $timeout(openModal, 500); | 56 | $timeout(openModal, 500); |
| 54 | }, function () { | 57 | }, function () { |
| 55 | console.info('modal-component dismissed at: ' + new Date()); | 58 | console.info('modal-component dismissed at: ' + new Date()); |
| 56 | $timeout(openModal, 500); | 59 | $timeout(openModal, 500); |
| 57 | } | 60 | } |
| 58 | ); | 61 | ); |
| 59 | } | 62 | } |
| 60 | } | 63 | } |
| 61 | ]); | 64 | ]); |
| 62 | </script> | 65 | </script> |
| 63 | </head> | 66 | </head> |
| 64 | <body ng-controller="controller"> | 67 | <body ng-controller="controller"> |
| 65 | </body> | 68 | </body> |
| 66 | </html> | 69 | </html> |
| 67 | 70 |
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 | 'cotizacion', | ||
| 8 | 'focaBusquedaProductosService', | 9 | 'focaBusquedaProductosService', |
| 9 | function($filter, $scope, $uibModalInstance, idLista, focaBusquedaProductosService) { | 10 | function($filter, $scope, $uibModalInstance, idLista, |
| 11 | cotizacion, focaBusquedaProductosService | ||
| 12 | ) { | ||
| 10 | 13 | ||
| 11 | $scope.filters = ''; | 14 | $scope.filters = ''; |
| 12 | $scope.productos = []; | 15 | $scope.productos = []; |
| 13 | $scope.primerBusqueda = false; | 16 | $scope.primerBusqueda = false; |
| 14 | $scope.searchLoading = false; | 17 | $scope.searchLoading = false; |
| 15 | // pagination | 18 | // pagination |
| 16 | $scope.numPerPage = 10; | 19 | $scope.numPerPage = 10; |
| 17 | $scope.currentPage = 1; | 20 | $scope.currentPage = 1; |
| 18 | $scope.filteredProductos = []; | 21 | $scope.filteredProductos = []; |
| 19 | $scope.currentPageProductos = []; | 22 | $scope.currentPageProductos = []; |
| 20 | $scope.selectedProducto = -1; | 23 | $scope.selectedProducto = -1; |
| 21 | 24 | ||
| 22 | //METODOS | 25 | //METODOS |
| 23 | $scope.busquedaPress = function(key) { | 26 | $scope.busquedaPress = function(key) { |
| 24 | if (key === 13) { | 27 | if (key === 13) { |
| 25 | $scope.searchLoading = true; | 28 | $scope.searchLoading = true; |
| 26 | if(idLista > 0) { | 29 | if(idLista > 0) { |
| 27 | focaBusquedaProductosService | 30 | focaBusquedaProductosService |
| 28 | .getProductosByIdLista(idLista, $scope.filters) | 31 | .getProductosByIdLista(idLista, $scope.filters) |
| 29 | .then( | 32 | .then(llenarDatos); |
| 30 | function(res) { | ||
| 31 | $scope.searchLoading = false; | ||
| 32 | $scope.primerBusqueda = true; | ||
| 33 | $scope.productos = res.data; | ||
| 34 | $scope.search(); | ||
| 35 | primera(); | ||
| 36 | } | ||
| 37 | ); | ||
| 38 | } else if(idLista === -1) { | 33 | } else if(idLista === -1) { |
| 39 | focaBusquedaProductosService.getProductos().then( | 34 | focaBusquedaProductosService.getProductos() |
| 40 | function(res) { | 35 | .then(llenarDatos); |
| 41 | $scope.searchLoading = false; | ||
| 42 | $scope.primerBusqueda = true; | ||
| 43 | $scope.productos = res.data; | ||
| 44 | $scope.search(); | ||
| 45 | primera(); | ||
| 46 | } | ||
| 47 | ); | ||
| 48 | } | 36 | } |
| 49 | } | 37 | } |
| 50 | }; | 38 | }; |
| 51 | 39 | function llenarDatos(res) { | |
| 40 | for(var i = 0; i < res.data.length; i++) { | ||
| 41 | res.data[i].precio = res.data[i].precio / cotizacion; | ||
| 42 | } | ||
| 43 | $scope.searchLoading = false; | ||
| 44 | $scope.primerBusqueda = true; | ||
| 45 | $scope.productos = res.data; | ||
| 46 | $scope.search(); | ||
| 47 | primera(); | ||
| 48 | } | ||
| 52 | $scope.search = function() { | 49 | $scope.search = function() { |
| 53 | if($scope.productos.length > 0) { | 50 | if($scope.productos.length > 0) { |
| 54 | $scope.filteredProductos = $filter('filter')( | 51 | $scope.filteredProductos = $filter('filter')( |
| 55 | $scope.productos, | 52 | $scope.productos, |
| 56 | {$: $scope.filters} | 53 | {$: $scope.filters} |
| 57 | ); | 54 | ); |
| 58 | 55 | ||
| 59 | $scope.lastPage = Math.ceil( | 56 | $scope.lastPage = Math.ceil( |
| 60 | $scope.filteredProductos.length / $scope.numPerPage | 57 | $scope.filteredProductos.length / $scope.numPerPage |
| 61 | ); | 58 | ); |
| 62 | 59 | ||
| 63 | $scope.resetPage(); | 60 | $scope.resetPage(); |
| 64 | } | 61 | } |
| 65 | }; | 62 | }; |
| 66 | 63 | ||
| 67 | $scope.resetPage = function() { | 64 | $scope.resetPage = function() { |
| 68 | $scope.currentPage = 1; | 65 | $scope.currentPage = 1; |
| 69 | $scope.selectPage(1); | 66 | $scope.selectPage(1); |
| 70 | }; | 67 | }; |
| 71 | 68 | ||
| 72 | $scope.selectPage = function(page) { | 69 | $scope.selectPage = function(page) { |
| 73 | var start = (page - 1) * $scope.numPerPage; | 70 | var start = (page - 1) * $scope.numPerPage; |
| 74 | var end = start + $scope.numPerPage; | 71 | var end = start + $scope.numPerPage; |
| 75 | $scope.paginas = []; | 72 | $scope.paginas = []; |
| 76 | $scope.paginas = calcularPages(page); | 73 | $scope.paginas = calcularPages(page); |
| 77 | $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); | 74 | $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); |
| 78 | $scope.currentPage = page; | 75 | $scope.currentPage = page; |
| 79 | }; | 76 | }; |
| 80 | 77 | ||
| 81 | $scope.select = function(producto) { | 78 | $scope.select = function(producto) { |
| 82 | $uibModalInstance.close(producto); | 79 | $uibModalInstance.close(producto); |
| 83 | }; | 80 | }; |
| 84 | 81 | ||
| 85 | $scope.cancel = function() { | 82 | $scope.cancel = function() { |
| 86 | $uibModalInstance.dismiss('cancel'); | 83 | $uibModalInstance.dismiss('cancel'); |
| 87 | }; | 84 | }; |
| 88 | 85 | ||
| 89 | $scope.busquedaDown = function(key) { | 86 | $scope.busquedaDown = function(key) { |
| 90 | if (key === 40) { | 87 | if (key === 40) { |
| 91 | primera(key); | 88 | primera(key); |
| 92 | } | 89 | } |
| 93 | }; | 90 | }; |
| 94 | 91 | ||
| 95 | $scope.itemProducto = function(key) { | 92 | $scope.itemProducto = function(key) { |
| 96 | if (key === 38) { | 93 | if (key === 38) { |
| 97 | anterior(key); | 94 | anterior(key); |
| 98 | } | 95 | } |
| 99 | 96 | ||
| 100 | if (key === 40) { | 97 | if (key === 40) { |
| 101 | siguiente(key); | 98 | siguiente(key); |
| 102 | } | 99 | } |
| 103 | 100 | ||
| 104 | if (key === 37) { | 101 | if (key === 37) { |
| 105 | retrocederPagina(); | 102 | retrocederPagina(); |
| 106 | } | 103 | } |
| 107 | 104 | ||
| 108 | if (key === 39) { | 105 | if (key === 39) { |
| 109 | avanzarPagina(); | 106 | avanzarPagina(); |
| 110 | } | 107 | } |
| 111 | }; | 108 | }; |
| 112 | 109 | ||
| 113 | function calcularPages(paginaActual) { | 110 | function calcularPages(paginaActual) { |
| 114 | var paginas = []; | 111 | var paginas = []; |
| 115 | paginas.push(paginaActual); | 112 | paginas.push(paginaActual); |
| 116 | 113 | ||
| 117 | if (paginaActual - 1 > 1) { | 114 | if (paginaActual - 1 > 1) { |
| 118 | 115 | ||
| 119 | paginas.unshift(paginaActual - 1); | 116 | paginas.unshift(paginaActual - 1); |
| 120 | if (paginaActual - 2 > 1) { | 117 | if (paginaActual - 2 > 1) { |
| 121 | paginas.unshift(paginaActual - 2); | 118 | paginas.unshift(paginaActual - 2); |
| 122 | } | 119 | } |
| 123 | } | 120 | } |
| 124 | 121 | ||
| 125 | if (paginaActual + 1 < $scope.lastPage) { | 122 | if (paginaActual + 1 < $scope.lastPage) { |
| 126 | paginas.push(paginaActual + 1); | 123 | paginas.push(paginaActual + 1); |
| 127 | if (paginaActual + 2 < $scope.lastPage) { | 124 | if (paginaActual + 2 < $scope.lastPage) { |
| 128 | paginas.push(paginaActual + 2); | 125 | paginas.push(paginaActual + 2); |
| 129 | } | 126 | } |
| 130 | } | 127 | } |
| 131 | 128 | ||
| 132 | if (paginaActual !== 1) { | 129 | if (paginaActual !== 1) { |
| 133 | paginas.unshift(1); | 130 | paginas.unshift(1); |
| 134 | } | 131 | } |
| 135 | 132 | ||
| 136 | if (paginaActual !== $scope.lastPage) { | 133 | if (paginaActual !== $scope.lastPage) { |
| 137 | paginas.push($scope.lastPage); | 134 | paginas.push($scope.lastPage); |
| 138 | } | 135 | } |
| 139 | 136 | ||
| 140 | return paginas; | 137 | return paginas; |
| 141 | } | 138 | } |
| 142 | 139 | ||
| 143 | function primera() { | 140 | function primera() { |
| 144 | $scope.selectedProducto = 0; | 141 | $scope.selectedProducto = 0; |
| 145 | } | 142 | } |
| 146 | 143 | ||
| 147 | function anterior() { | 144 | function anterior() { |
| 148 | if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { | 145 | if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { |
| 149 | retrocederPagina(); | 146 | retrocederPagina(); |
| 150 | } else { | 147 | } else { |
| 151 | $scope.selectedProducto--; | 148 | $scope.selectedProducto--; |
| 152 | } | 149 | } |
| 153 | } | 150 | } |
| 154 | 151 | ||
| 155 | function siguiente() { | 152 | function siguiente() { |
| 156 | if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) { | 153 | if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) { |
| 157 | $scope.selectedProducto++; | 154 | $scope.selectedProducto++; |
| 158 | } else { | 155 | } else { |
| 159 | avanzarPagina(); | 156 | avanzarPagina(); |
| 160 | } | 157 | } |
| 161 | } | 158 | } |
| 162 | 159 | ||
| 163 | function retrocederPagina() { | 160 | function retrocederPagina() { |
| 164 | if ($scope.currentPage > 1) { | 161 | if ($scope.currentPage > 1) { |
| 165 | $scope.selectPage($scope.currentPage - 1); | 162 | $scope.selectPage($scope.currentPage - 1); |
| 166 | $scope.selectedProducto = $scope.numPerPage - 1; | 163 | $scope.selectedProducto = $scope.numPerPage - 1; |
| 167 | } | 164 | } |