Eric Fernandez / foca-modal-busqueda-productos

Download as
Browse Code »

Commit c33f4e727725897e5a22df8bb79df154e58a685e

Authored by Eric Fernandez
1 parent 00724ae53c
Exists in master

Refactor búsqueda de modal productos/articulos

Showing 4 changed files with 117 additions and 100 deletions   Show diff stats
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://debo.suite.repo/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://debo.suite.repo/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://debo.suite.repo/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.5",
40 "bootstrap": "^4.1.3", 40 "bootstrap": "^4.1.3",
41 "foca-directivas": "git+https://debo.suite.repo/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.3",
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.3.0",
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.5"
59 } 59 }
60 } 60 }
61 61
src/js/controller.js
Diff comments   View file @ c33f4e7
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 if(idLista) {
11 focaBusquedaProductosService.getProductosByIdLista(idLista).then(
12 function(res) {
13 $scope.productos = res.data;
14 $scope.search();
15 }
16 );
17 } else {
18 focaBusquedaProductosService.getProductos().then(
19 function(res) {
20 $scope.productos = res.data;
21 $scope.search();
22 }
23 );
24 }
25
26 10
11 $scope.filters = '';
12 $scope.productos = [];
13 $scope.primerBusqueda = false;
27 // pagination 14 // pagination
28 $scope.numPerPage = 10; 15 $scope.numPerPage = 10;
29 $scope.currentPage = 1; 16 $scope.currentPage = 1;
30 $scope.filteredProductos = []; 17 $scope.filteredProductos = [];
31 $scope.currentPageProductos = []; 18 $scope.currentPageProductos = [];
32 $scope.selectedProducto = -1; 19 $scope.selectedProducto = -1;
33 20
34 //METODOS 21 //METODOS
22 $scope.busquedaPress = function(key) {
23 if (key === 13) {
24 $scope.primerBusqueda = true;
25 if(idLista) {
26 focaBusquedaProductosService
27 .getProductosByIdLista(idLista, $scope.filters)
28 .then(
29 function(res) {
30 $scope.productos = res.data;
31 $scope.search();
32 }
33 );
34 } else {
35 focaBusquedaProductosService.getProductos().then(
36 function(res) {
37 $scope.productos = res.data;
38 $scope.search();
39 }
40 );
41 }
42 }
43 };
44
35 $scope.search = function() { 45 $scope.search = function() {
36 $scope.filteredProductos = $filter('filter')( 46 if($scope.productos.length > 0) {
37 $scope.productos, 47 $scope.filteredProductos = $filter('filter')(
38 {$: $scope.filters} 48 $scope.productos,
39 ); 49 {$: $scope.filters}
50 );
40 51
41 $scope.lastPage = Math.ceil( 52 $scope.lastPage = Math.ceil(
42 $scope.filteredProductos.length / $scope.numPerPage 53 $scope.filteredProductos.length / $scope.numPerPage
43 ); 54 );
44 55
45 $scope.resetPage(); 56 $scope.resetPage();
57 }
46 }; 58 };
47 59
48 $scope.resetPage = function() { 60 $scope.resetPage = function() {
49 $scope.currentPage = 1; 61 $scope.currentPage = 1;
50 $scope.selectPage(1); 62 $scope.selectPage(1);
51 }; 63 };
52 64
53 $scope.selectPage = function(page) { 65 $scope.selectPage = function(page) {
54 var start = (page - 1) * $scope.numPerPage; 66 var start = (page - 1) * $scope.numPerPage;
55 var end = start + $scope.numPerPage; 67 var end = start + $scope.numPerPage;
56 $scope.paginas = []; 68 $scope.paginas = [];
57 $scope.paginas = calcularPages(page); 69 $scope.paginas = calcularPages(page);
58 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); 70 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
59 $scope.currentPage = page; 71 $scope.currentPage = page;
60 }; 72 };
61 73
62 $scope.select = function(producto) { 74 $scope.select = function(producto) {
63 $uibModalInstance.close(producto); 75 $uibModalInstance.close(producto);
64 }; 76 };
65 77
66 $scope.cancel = function() { 78 $scope.cancel = function() {
67 $uibModalInstance.dismiss('cancel'); 79 $uibModalInstance.dismiss('cancel');
68 }; 80 };
69 81
70 $scope.busquedaDown = function(key) { 82 $scope.busquedaDown = function(key) {
71 if (key === 40) { 83 if (key === 40) {
72 primera(key); 84 primera(key);
73 } 85 }
74 }; 86 };
75 87
76 $scope.busquedaPress = function(key) {
77 if (key === 13) {
78 primera(key);
79 }
80 };
81
82 $scope.itemProducto = function(key) { 88 $scope.itemProducto = function(key) {
83 if (key === 38) { 89 if (key === 38) {
84 anterior(key); 90 anterior(key);
85 } 91 }
86 92
87 if (key === 40) { 93 if (key === 40) {
88 siguiente(key); 94 siguiente(key);
89 } 95 }
90 96
91 if (key === 37) { 97 if (key === 37) {
92 retrocederPagina(); 98 retrocederPagina();
93 } 99 }
94 100
95 if (key === 39) { 101 if (key === 39) {
96 avanzarPagina(); 102 avanzarPagina();
97 } 103 }
98 }; 104 };
99 105
100 function calcularPages(paginaActual) { 106 function calcularPages(paginaActual) {
101 var paginas = []; 107 var paginas = [];
102 paginas.push(paginaActual); 108 paginas.push(paginaActual);
103 109
104 if (paginaActual - 1 > 1) { 110 if (paginaActual - 1 > 1) {
105 111
106 paginas.unshift(paginaActual - 1); 112 paginas.unshift(paginaActual - 1);
107 if (paginaActual - 2 > 1) { 113 if (paginaActual - 2 > 1) {
108 paginas.unshift(paginaActual - 2); 114 paginas.unshift(paginaActual - 2);
109 } 115 }
110 } 116 }
111 117
112 if (paginaActual + 1 < $scope.lastPage) { 118 if (paginaActual + 1 < $scope.lastPage) {
113 paginas.push(paginaActual + 1); 119 paginas.push(paginaActual + 1);
114 if (paginaActual + 2 < $scope.lastPage) { 120 if (paginaActual + 2 < $scope.lastPage) {
115 paginas.push(paginaActual + 2); 121 paginas.push(paginaActual + 2);
116 } 122 }
117 } 123 }
118 124
119 if (paginaActual !== 1) { 125 if (paginaActual !== 1) {
120 paginas.unshift(1); 126 paginas.unshift(1);
121 } 127 }
122 128
123 if (paginaActual !== $scope.lastPage) { 129 if (paginaActual !== $scope.lastPage) {
124 paginas.push($scope.lastPage); 130 paginas.push($scope.lastPage);
125 } 131 }
126 132
127 return paginas; 133 return paginas;
128 } 134 }
129 135
130 function primera() { 136 function primera() {
131 $scope.selectedProducto = 0; 137 $scope.selectedProducto = 0;
132 } 138 }
133 139
134 function anterior() { 140 function anterior() {
135 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { 141 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) {
136 retrocederPagina(); 142 retrocederPagina();
137 } else { 143 } else {
138 $scope.selectedProducto--; 144 $scope.selectedProducto--;
139 } 145 }
140 } 146 }
141 147
142 function siguiente() { 148 function siguiente() {
143 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) { 149 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) {
144 $scope.selectedProducto++; 150 $scope.selectedProducto++;
1 angular.module('focaBusquedaProductos') 1 angular.module('focaBusquedaProductos')
2 .service('focaBusquedaProductosService', [ 2 .service('focaBusquedaProductosService', [
3 '$http', 3 '$http',
4 'API_ENDPOINT', 4 'API_ENDPOINT',
5 function($http, API_ENDPOINT) { 5 function($http, API_ENDPOINT) {
6 return { 6 return {
7 getProductos: function() { 7 getProductos: function() {
8 return $http.get(API_ENDPOINT.URL + '/articulos'); 8 return $http.get(API_ENDPOINT.URL + '/articulos');
9 }, 9 },
10 getProductosByIdLista: function(id) { 10 getProductosByIdLista: function(id, filters) {
11 return $http.get(API_ENDPOINT.URL + '/articulos/lista/' + id); 11 return $http.post(API_ENDPOINT.URL + '/articulos/lista',
12 {filters: filters, id: id});
12 } 13 }
13 }; 14 };
14 } 15 }
15 ]); 16 ]);
16 17
src/views/modal-busqueda-productos.html
Diff comments   View file @ c33f4e7
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 <table class="table table-striped table-sm"> 17 <div class="input-group-append">
18 <thead> 18 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
19 <tr> 19 <i class="fa fa-search" aria-hidden="true"></i>
20 <th>Sec.</th> 20 </button>
21 <th>Cod.</th> 21 </div>
22 <th>Descripción</th>
23 <th>P. Base</th>
24 <th></th>
25 </tr>
26 </thead>
27 <tbody>
28 <tr class="selectable"
29 ng-repeat="(key,producto) in currentPageProductos"
30 ng-click="select(producto)">
31 <td ng-bind="producto.sector"></td>
32 <td ng-bind="producto.codigo"></td>
33 <td ng-bind="producto.descripcion"></td>
34 <td ng-bind="producto.precio | currency"></td>
35 <td>
36 <button
37 type="button"
38 class="btn btn-xs p-1 float-right"
39 ng-class="{
40 'btn-secondary': selectedProducto != key,
41 'btn-primary': selectedProducto == key
42 }"
43 foca-focus="selectedProducto == {{key}}"
44 ng-keydown="itemProducto($event.keyCode)"
45 >
46 <i class="fa fa-arrow-right" aria-hidden="true"></i>
47 </button>
48 </td>
49 </tr>
50 </tbody>
51 </table>
52 <nav>
53 <ul class="pagination pagination-sm justify-content-end mb-0">
54 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
55 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
56 <span aria-hidden="true">&laquo;</span>
57 <span class="sr-only">Anterior</span>
58 </a>
59 </li>
60 <li
61 class="page-item"
62 ng-repeat="pagina in paginas"
63 ng-class="{'active': pagina == currentPage}"
64 >
65 <a
66 class="page-link"
67 href="#"
68 ng-click="selectPage(pagina)"
69 ng-bind="pagina"
70 ></a>
71 </li>
72 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
73 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
74 <span aria-hidden="true">&raquo;</span>
75 <span class="sr-only">Siguiente</span>
76 </a>
77 </li>
78 </ul>
79 </nav>
80 </div> 22 </div>
23 <table ng-show="primerBusqueda" class="table table-striped table-sm">
24 <thead>
25 <tr>
26 <th>Sec.</th>
27 <th>Cod.</th>
28 <th>Descripción</th>
29 <th>P. Base</th>
30 <th></th>
31 </tr>
32 </thead>
33 <tbody>
34 <tr ng-show="currentPageProductos.length == 0">
35 <td colspan="5">
36 No se encontraron resultados.
37 </td>