Mauricio Cattafi / foca-modal-busqueda-productos

Download as
Browse Code »

Commit 5e56b7f1df08f4e662e0de593e8be32dee0c129c

Authored by Eric Fernandez
2 parents 3581ebf583 c938961098
Exists in master and in 1 other branch develop

Merge branch 'master' into 'master' 

Master(efernandez)

See merge request modulos-npm/foca-modal-busqueda-productos!8
Showing 4 changed files   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 } 43 }
43 ); 44 );
44 45
45 modalInstance.result.then( 46 modalInstance.result.then(
46 function (selectedItem) { 47 function (selectedItem) {
47 console.info(selectedItem); 48 console.info(selectedItem);
48 $timeout(openModal, 500); 49 $timeout(openModal, 500);
49 }, function () { 50 }, function () {
50 console.info('modal-component dismissed at: ' + new Date()); 51 console.info('modal-component dismissed at: ' + new Date());
51 $timeout(openModal, 500); 52 $timeout(openModal, 500);
52 } 53 }
53 ); 54 );
54 } 55 }
55 } 56 }
56 ]); 57 ]);
57 </script> 58 </script>
58 </head> 59 </head>
59 <body ng-controller="controller"> 60 <body ng-controller="controller">
60 </body> 61 </body>
61 </html> 62 </html>
62 63
1 { 1 {
2 "name": "foca-modal-busqueda-productos", 2 "name": "foca-modal-busqueda-productos",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Modal para seleccion de productos", 4 "description": "Modal para seleccion de productos",
5 "scripts": { 5 "scripts": {
6 "test": "echo \"Error: no test specified\" && exit 1", 6 "test": "echo \"Error: no test specified\" && exit 1",
7 "gulp-pre-commit": "gulp pre-commit", 7 "gulp-pre-commit": "gulp pre-commit",
8 "compile": "gulp uglify", 8 "compile": "gulp uglify",
9 "postinstall": "npm run compile && gulp clean-post-install", 9 "postinstall": "npm run compile && gulp clean-post-install",
10 "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://192.168.0.11/modulos-npm/foca-directivas" 10 "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas"
11 }, 11 },
12 "pre-commit": [ 12 "pre-commit": [
13 "gulp-pre-commit" 13 "gulp-pre-commit"
14 ], 14 ],
15 "repository": { 15 "repository": {
16 "type": "git", 16 "type": "git",
17 "url": "https://192.168.0.11/modulos-npm/foca-modal-busqueda-productos" 17 "url": "https://debo.suite.repo/modulos-npm/foca-modal-busqueda-productos"
18 }, 18 },
19 "author": "Nicolás Guarnieri", 19 "author": "Nicolás Guarnieri",
20 "license": "ISC", 20 "license": "ISC",
21 "peerDependencies": { 21 "peerDependencies": {
22 "angular": "^1.7.4", 22 "angular": "^1.7.4",
23 "bootstrap": "^4.1.3", 23 "bootstrap": "^4.1.3",
24 "font-awesome": "^4.7.0", 24 "font-awesome": "^4.7.0",
25 "ui-bootstrap4": "^3.0.4", 25 "ui-bootstrap4": "^3.0.4",
26 "gulp": "^3.9.1", 26 "gulp": "^3.9.1",
27 "gulp-angular-templatecache": "^2.2.1", 27 "gulp-angular-templatecache": "^2.2.1",
28 "gulp-concat": "^2.6.1", 28 "gulp-concat": "^2.6.1",
29 "gulp-connect": "^5.6.1", 29 "gulp-connect": "^5.6.1",
30 "gulp-htmlmin": "^5.0.1", 30 "gulp-htmlmin": "^5.0.1",
31 "gulp-rename": "^1.4.0", 31 "gulp-rename": "^1.4.0",
32 "gulp-replace": "^1.0.0", 32 "gulp-replace": "^1.0.0",
33 "gulp-uglify": "^3.0.1", 33 "gulp-uglify": "^3.0.1",
34 "jquery": "^3.3.1", 34 "jquery": "^3.3.1",
35 "pump": "^3.0.0", 35 "pump": "^3.0.0",
36 "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas" 36 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas"
37 }, 37 },
38 "devDependencies": { 38 "devDependencies": {
39 "angular": "^1.7.4", 39 "angular": "^1.7.4",
40 "bootstrap": "^4.1.3", 40 "bootstrap": "^4.1.3",
41 "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas", 41 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
42 "font-awesome": "^4.7.0", 42 "font-awesome": "^4.7.0",
43 "gulp": "^3.9.1", 43 "gulp": "^3.9.1",
44 "gulp-angular-templatecache": "^2.2.1", 44 "gulp-angular-templatecache": "^2.2.1",
45 "gulp-clean": "^0.4.0", 45 "gulp-clean": "^0.4.0",
46 "gulp-concat": "^2.6.1", 46 "gulp-concat": "^2.6.1",
47 "gulp-connect": "^5.6.1", 47 "gulp-connect": "^5.6.1",
48 "gulp-htmlmin": "^5.0.1", 48 "gulp-htmlmin": "^5.0.1",
49 "gulp-jshint": "^2.1.0", 49 "gulp-jshint": "^2.1.0",
50 "gulp-rename": "^1.4.0", 50 "gulp-rename": "^1.4.0",
51 "gulp-replace": "^1.0.0", 51 "gulp-replace": "^1.0.0",
52 "gulp-uglify": "^3.0.1", 52 "gulp-uglify": "^3.0.1",
53 "jasmine-core": "^3.2.1", 53 "jasmine-core": "^3.2.1",
54 "jquery": "^3.3.1", 54 "jquery": "^3.3.1",
55 "jshint": "^2.9.6", 55 "jshint": "^2.9.6",
56 "pre-commit": "^1.2.2", 56 "pre-commit": "^1.2.2",
57 "pump": "^3.0.0", 57 "pump": "^3.0.0",
58 "ui-bootstrap4": "^3.0.4" 58 "ui-bootstrap4": "^3.0.4"
59 } 59 }
60 } 60 }
61 61
src/js/controller.js
Diff comments   View file @ 5e56b7f
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 focaBusquedaProductosService.getProductosByIdLista(idLista).then( 10 if(idLista) {
11 function(res) { 11 focaBusquedaProductosService.getProductosByIdLista(idLista).then(
12 $scope.productos = res.data; 12 function(res) {
13 $scope.search(); 13 $scope.productos = res.data;
14 } 14 $scope.search();
15 ); 15 }
16 );
17 } else {
18 focaBusquedaProductosService.getProductos().then(
19 function(res) {
20 $scope.productos = res.data;
21 $scope.search();
22 }
23 );
24 }
25
16 26
17 // pagination 27 // pagination
18 $scope.numPerPage = 10; 28 $scope.numPerPage = 10;
19 $scope.currentPage = 1; 29 $scope.currentPage = 1;
20 $scope.filteredProductos = []; 30 $scope.filteredProductos = [];
21 $scope.currentPageProductos = []; 31 $scope.currentPageProductos = [];
22 $scope.selectedProducto = -1; 32 $scope.selectedProducto = -1;
23 33
24 //METODOS 34 //METODOS
25 $scope.search = function() { 35 $scope.search = function() {
26 $scope.filteredProductos = $filter('filter')( 36 $scope.filteredProductos = $filter('filter')(
27 $scope.productos, 37 $scope.productos,
28 {$: $scope.filters} 38 {$: $scope.filters}
29 ); 39 );
30 40
31 $scope.lastPage = Math.ceil( 41 $scope.lastPage = Math.ceil(
32 $scope.filteredProductos.length / $scope.numPerPage 42 $scope.filteredProductos.length / $scope.numPerPage
33 ); 43 );
34 44
35 $scope.resetPage(); 45 $scope.resetPage();
36 }; 46 };
37 47
38 $scope.resetPage = function() { 48 $scope.resetPage = function() {
39 $scope.currentPage = 1; 49 $scope.currentPage = 1;
40 $scope.selectPage(1); 50 $scope.selectPage(1);
41 }; 51 };
42 52
43 $scope.selectPage = function(page) { 53 $scope.selectPage = function(page) {
44 var start = (page - 1) * $scope.numPerPage; 54 var start = (page - 1) * $scope.numPerPage;
45 var end = start + $scope.numPerPage; 55 var end = start + $scope.numPerPage;
46 $scope.paginas = []; 56 $scope.paginas = [];
47 $scope.paginas = calcularPages(page); 57 $scope.paginas = calcularPages(page);
48 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); 58 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
49 $scope.currentPage = page; 59 $scope.currentPage = page;
50 }; 60 };
51 61
52 $scope.select = function(producto) { 62 $scope.select = function(producto) {
53 $uibModalInstance.close(producto); 63 $uibModalInstance.close(producto);
54 }; 64 };
55 65
56 $scope.cancel = function() { 66 $scope.cancel = function() {
57 $uibModalInstance.dismiss('cancel'); 67 $uibModalInstance.dismiss('cancel');
58 }; 68 };
59 69
60 $scope.busquedaDown = function(key) { 70 $scope.busquedaDown = function(key) {
61 if (key === 40) { 71 if (key === 40) {
62 primera(key); 72 primera(key);
63 } 73 }
64 }; 74 };
65 75
66 $scope.busquedaPress = function(key) { 76 $scope.busquedaPress = function(key) {
67 if (key === 13) { 77 if (key === 13) {
68 primera(key); 78 primera(key);
69 } 79 }
70 }; 80 };
71 81
72 $scope.itemProducto = function(key) { 82 $scope.itemProducto = function(key) {
73 if (key === 38) { 83 if (key === 38) {
74 anterior(key); 84 anterior(key);
75 } 85 }
76 86
77 if (key === 40) { 87 if (key === 40) {
78 siguiente(key); 88 siguiente(key);
79 } 89 }
80 90
81 if (key === 37) { 91 if (key === 37) {
82 retrocederPagina(); 92 retrocederPagina();
83 } 93 }
84 94
85 if (key === 39) { 95 if (key === 39) {
86 avanzarPagina(); 96 avanzarPagina();
87 } 97 }
88 }; 98 };
89 99
90 function calcularPages(paginaActual) { 100 function calcularPages(paginaActual) {
91 var paginas = []; 101 var paginas = [];
92 paginas.push(paginaActual); 102 paginas.push(paginaActual);
93 103
94 if (paginaActual - 1 > 1) { 104 if (paginaActual - 1 > 1) {
95 105
96 paginas.unshift(paginaActual - 1); 106 paginas.unshift(paginaActual - 1);
97 if (paginaActual - 2 > 1) { 107 if (paginaActual - 2 > 1) {
98 paginas.unshift(paginaActual - 2); 108 paginas.unshift(paginaActual - 2);
99 } 109 }
100 } 110 }
101 111
102 if (paginaActual + 1 < $scope.lastPage) { 112 if (paginaActual + 1 < $scope.lastPage) {
103 paginas.push(paginaActual + 1); 113 paginas.push(paginaActual + 1);
104 if (paginaActual + 2 < $scope.lastPage) { 114 if (paginaActual + 2 < $scope.lastPage) {
105 paginas.push(paginaActual + 2); 115 paginas.push(paginaActual + 2);
106 } 116 }
107 } 117 }
108 118
109 if (paginaActual !== 1) { 119 if (paginaActual !== 1) {
110 paginas.unshift(1); 120 paginas.unshift(1);
111 } 121 }
112 122
113 if (paginaActual !== $scope.lastPage) { 123 if (paginaActual !== $scope.lastPage) {
114 paginas.push($scope.lastPage); 124 paginas.push($scope.lastPage);
115 } 125 }
116 126
117 return paginas; 127 return paginas;
118 } 128 }
119 129
120 function primera() { 130 function primera() {
121 $scope.selectedProducto = 0; 131 $scope.selectedProducto = 0;
122 } 132 }
123 133
124 function anterior() { 134 function anterior() {
125 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { 135 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) {
126 retrocederPagina(); 136 retrocederPagina();
127 } else { 137 } else {
128 $scope.selectedProducto--; 138 $scope.selectedProducto--;
129 } 139 }
130 } 140 }
131 141
132 function siguiente() { 142 function siguiente() {
133 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) { 143 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) {
134 $scope.selectedProducto++; 144 $scope.selectedProducto++;
135 } else { 145 } else {
136 avanzarPagina(); 146 avanzarPagina();
137 } 147 }
138 } 148 }
139 149
140 function retrocederPagina() { 150 function retrocederPagina() {
141 if ($scope.currentPage > 1) { 151 if ($scope.currentPage > 1) {
142 $scope.selectPage($scope.currentPage - 1); 152 $scope.selectPage($scope.currentPage - 1);
143 $scope.selectedProducto = $scope.numPerPage - 1; 153 $scope.selectedProducto = $scope.numPerPage - 1;
144 } 154 }
145 } 155 }
146 156
147 function avanzarPagina() { 157 function avanzarPagina() {
148 if ($scope.currentPage < $scope.lastPage) { 158 if ($scope.currentPage < $scope.lastPage) {
149 $scope.selectPage($scope.currentPage + 1); 159 $scope.selectPage($scope.currentPage + 1);
150 $scope.selectedProducto = 0; 160 $scope.selectedProducto = 0;
151 } 161 }
152 } 162 }
153 } 163 }
154 ] 164 ]
155 ); 165 );
156 166
src/views/modal-busqueda-productos.html
Diff comments   View file @ 5e56b7f
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 class="selectable"
29 ng-repeat="(key,producto) in currentPageProductos"
30 ng-click="select(producto)">
29 <td ng-bind="producto.sector"></td> 31 <td ng-bind="producto.sector"></td>
30 <td ng-bind="producto.codigo"></td> 32 <td ng-bind="producto.codigo"></td>
31 <td ng-bind="producto.descripcion"></td> 33 <td ng-bind="producto.descripcion"></td>
32 <td ng-bind="producto.precio | currency"></td> 34 <td ng-bind="producto.precio | currency"></td>
33 <td> 35 <td>
34 <button 36 <button
35 type="button" 37 type="button"
36 class="btn p-2 float-right" 38 class="btn p-2 float-right"
37 ng-class="{ 39 ng-class="{
38 'btn-secondary': selectedProducto != key, 40 'btn-secondary': selectedProducto != key,
39 'btn-primary': selectedProducto == key 41 'btn-primary': selectedProducto == key
40 }" 42 }"
41 ng-click="select(producto)"
42 foca-focus="selectedProducto == {{key}}" 43 foca-focus="selectedProducto == {{key}}"
43 ng-keydown="itemProducto($event.keyCode)" 44 ng-keydown="itemProducto($event.keyCode)"
44 > 45 >
45 <i class="fa fa-arrow-right" aria-hidden="true"></i> 46 <i class="fa fa-arrow-right" aria-hidden="true"></i>
46 </button> 47 </button>
47 </td> 48 </td>
48 </tr> 49 </tr>
49 </tbody> 50 </tbody>
50 </table> 51 </table>
51 <nav> 52 <nav>
52 <ul class="pagination justify-content-end"> 53 <ul class="pagination justify-content-end">
53 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 54 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
54 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 55 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
55 <span aria-hidden="true">&laquo;</span> 56 <span aria-hidden="true">&laquo;</span>
56 <span class="sr-only">Anterior</span> 57 <span class="sr-only">Anterior</span>
57 </a> 58 </a>
58 </li> 59 </li>
59 <li 60 <li
60 class="page-item" 61 class="page-item"
61 ng-repeat="pagina in paginas" 62 ng-repeat="pagina in paginas"
62 ng-class="{'active': pagina == currentPage}" 63 ng-class="{'active': pagina == currentPage}"
63 > 64 >
64 <a 65 <a
65 class="page-link" 66 class="page-link"
66 href="#" 67 href="#"
67 ng-click="selectPage(pagina)" 68 ng-click="selectPage(pagina)"
68 ng-bind="pagina" 69 ng-bind="pagina"
69 ></a> 70 ></a>
70 </li> 71 </li>
71 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 72 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
72 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 73 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
73 <span aria-hidden="true">&raquo;</span> 74 <span aria-hidden="true">&raquo;</span>
74 <span class="sr-only">Siguiente</span> 75 <span class="sr-only">Siguiente</span>
75 </a> 76 </a>
76 </li> 77 </li>
77 </ul> 78 </ul>
78 </nav> 79 </nav>
79 </div> 80 </div>
80 </div> 81 </div>
81 <div class="modal-footer"> 82 <div class="modal-footer">
82 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 83 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
83 </div> 84 </div>