Eric Fernandez / foca-modal-busqueda-productos

Download as
Browse Code »

Commit bbb0a9f6740802eec356c44e47e68a78425d1e91

Authored by Eric Fernandez
1 parent a55611890e
Exists in master

Primera búsqueda realizada en promesa cumplida

Showing 2 changed files with 5 additions and 4 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 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
Diff comments   View file @ bbb0a9f
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 );