Nicolás Guarnieri / foca-modal-busqueda-productos

Download as
Browse Code »

Commit 1bf2409e3a752ba66dd26b68ec57a2305344b945

Authored by Eric Fernandez
1 parent 09f1f19617
Exists in master

buscador en header, paginacion en footer, cambio icons, focus input cuando no hay resultados

Showing 3 changed files with 56 additions and 39 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 angular-ladda ladda@1.0.6 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 angular-ladda ladda@1.0.6 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+http://git.focasoftware.com/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": "http://git.focasoftware.com/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+http://git.focasoftware.com/npm/foca-directivas"
37 }, 37 },
38 "devDependencies": { 38 "devDependencies": {
39 "angular": "^1.7.5", 39 "angular": "^1.7.5",
40 "angular-ladda": "^0.4.3", 40 "angular-ladda": "^0.4.3",
41 "bootstrap": "^4.1.3", 41 "bootstrap": "^4.1.3",
42 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas", 42 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas",
43 "font-awesome": "^4.7.0", 43 "font-awesome": "^4.7.0",
44 "gulp": "^3.9.1", 44 "gulp": "^3.9.1",
45 "gulp-angular-templatecache": "^2.2.3", 45 "gulp-angular-templatecache": "^2.2.3",
46 "gulp-clean": "^0.4.0", 46 "gulp-clean": "^0.4.0",
47 "gulp-concat": "^2.6.1", 47 "gulp-concat": "^2.6.1",
48 "gulp-connect": "^5.6.1", 48 "gulp-connect": "^5.6.1",
49 "gulp-htmlmin": "^5.0.1", 49 "gulp-htmlmin": "^5.0.1",
50 "gulp-jshint": "^2.1.0", 50 "gulp-jshint": "^2.1.0",
51 "gulp-rename": "^1.4.0", 51 "gulp-rename": "^1.4.0",
52 "gulp-replace": "^1.0.0", 52 "gulp-replace": "^1.0.0",
53 "gulp-uglify": "^3.0.1", 53 "gulp-uglify": "^3.0.1",
54 "jasmine-core": "^3.3.0", 54 "jasmine-core": "^3.3.0",
55 "jquery": "^3.3.1", 55 "jquery": "^3.3.1",
56 "jshint": "^2.9.6", 56 "jshint": "^2.9.6",
57 "ladda": "1.0.6", 57 "ladda": "1.0.6",
58 "pre-commit": "^1.2.2", 58 "pre-commit": "^1.2.2",
59 "pump": "^3.0.0", 59 "pump": "^3.0.0",
60 "ui-bootstrap4": "^3.0.5" 60 "ui-bootstrap4": "^3.0.5"
61 } 61 }
62 } 62 }
63 63
src/js/controller.js
Diff comments   View file @ 1bf2409
1 angular.module('focaBusquedaProductos') 1 angular.module('focaBusquedaProductos')
2 .controller('modalBusquedaProductosCtrl', 2 .controller('modalBusquedaProductosCtrl',
3 [ 3 [
4 '$timeout',
4 '$filter', 5 '$filter',
5 '$scope', 6 '$scope',
6 '$uibModalInstance', 7 '$uibModalInstance',
7 'parametroProducto', 8 'parametroProducto',
8 'focaBusquedaProductosService', 9 'focaBusquedaProductosService',
9 function($filter, $scope, $uibModalInstance, parametroProducto, 10 function($timeout, $filter, $scope, $uibModalInstance, parametroProducto,
10 focaBusquedaProductosService 11 focaBusquedaProductosService
11 ) { 12 ) {
12 13
13 $scope.simbolo = parametroProducto.simbolo; 14 $scope.simbolo = parametroProducto.simbolo;
14 $scope.filters = ''; 15 $scope.filters = '';
15 $scope.productos = []; 16 $scope.productos = [];
16 $scope.primerBusqueda = false; 17 $scope.primerBusqueda = false;
17 $scope.searchLoading = false; 18 $scope.searchLoading = false;
18 // pagination 19 // pagination
19 $scope.numPerPage = 10; 20 $scope.numPerPage = 10;
20 $scope.currentPage = 1; 21 $scope.currentPage = 1;
21 $scope.filteredProductos = []; 22 $scope.filteredProductos = [];
22 $scope.currentPageProductos = []; 23 $scope.currentPageProductos = [];
23 $scope.selectedProducto = -1; 24 $scope.selectedProducto = -1;
24 25
25 //METODOS 26 //METODOS
26 $scope.busquedaPress = function(key) { 27 $scope.busquedaPress = function(key) {
27 if (key === 13) { 28 if (key === 13) {
28 $scope.searchLoading = true; 29 $scope.searchLoading = true;
29 if(parametroProducto.idLista > 0) { 30 if(parametroProducto.idLista > 0) {
30 focaBusquedaProductosService 31 focaBusquedaProductosService
31 .getProductosByIdLista(parametroProducto.idLista, $scope.filters) 32 .getProductosByIdLista(parametroProducto.idLista, $scope.filters)
32 .then(llenarDatos); 33 .then(llenarDatos);
33 } else if(parametroProducto.idLista === -1) { 34 } else if(parametroProducto.idLista === -1) {
34 focaBusquedaProductosService.getProductos() 35 focaBusquedaProductosService.getProductos()
35 .then(llenarDatos); 36 .then(llenarDatos);
36 } 37 }
37 } 38 }
38 }; 39 };
39 function llenarDatos(res) { 40 function llenarDatos(res) {
40 for(var i = 0; i < res.data.length; i++) { 41 for(var i = 0; i < res.data.length; i++) {
41 res.data[i].precio = res.data[i].precio / parametroProducto.cotizacion; 42 res.data[i].precio = res.data[i].precio / parametroProducto.cotizacion;
42 } 43 }
43 $scope.searchLoading = false; 44 $scope.searchLoading = false;
44 $scope.primerBusqueda = true; 45 $scope.primerBusqueda = true;
45 $scope.productos = res.data; 46 $scope.productos = res.data;
46 $scope.search(); 47 $scope.search(true);
47 primera(); 48 primera();
48 } 49 }
49 $scope.search = function() { 50 $scope.search = function(pressed) {
50 if($scope.productos.length > 0) { 51 if($scope.productos.length > 0) {
51 $scope.filteredProductos = $filter('filter')( 52 $scope.filteredProductos = $filter('filter')(
52 $scope.productos, 53 $scope.productos,
53 {$: $scope.filters} 54 {$: $scope.filters}
54 ); 55 );
55 56
56 $scope.lastPage = Math.ceil( 57 $scope.lastPage = Math.ceil(
57 $scope.filteredProductos.length / $scope.numPerPage 58 $scope.filteredProductos.length / $scope.numPerPage
58 ); 59 );
59 60
60 $scope.resetPage(); 61 $scope.resetPage();
62 }else if(pressed){
63 $timeout(function() {
64 angular.element('#search')[0].focus();
65 $scope.filters = '';
66 });
61 } 67 }
62 }; 68 };
63 69
64 $scope.resetPage = function() { 70 $scope.resetPage = function() {
65 $scope.currentPage = 1; 71 $scope.currentPage = 1;
66 $scope.selectPage(1); 72 $scope.selectPage(1);
67 }; 73 };
68 74
69 $scope.selectPage = function(page) { 75 $scope.selectPage = function(page) {
70 var start = (page - 1) * $scope.numPerPage; 76 var start = (page - 1) * $scope.numPerPage;
71 var end = start + $scope.numPerPage; 77 var end = start + $scope.numPerPage;
72 $scope.paginas = []; 78 $scope.paginas = [];
73 $scope.paginas = calcularPages(page); 79 $scope.paginas = calcularPages(page);
74 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); 80 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
75 $scope.currentPage = page; 81 $scope.currentPage = page;
76 }; 82 };
77 83
78 $scope.select = function(producto) { 84 $scope.select = function(producto) {
79 $uibModalInstance.close(producto); 85 $uibModalInstance.close(producto);
80 }; 86 };
81 87
82 $scope.cancel = function() { 88 $scope.cancel = function() {
83 $uibModalInstance.dismiss('cancel'); 89 $uibModalInstance.dismiss('cancel');
84 }; 90 };
85 91
86 $scope.busquedaDown = function(key) { 92 $scope.busquedaDown = function(key) {
87 if (key === 40) { 93 if (key === 40) {
88 primera(key); 94 primera(key);
89 } 95 }
90 }; 96 };
91 97
92 $scope.itemProducto = function(key) { 98 $scope.itemProducto = function(key) {
93 if (key === 38) { 99 if (key === 38) {
94 anterior(key); 100 anterior(key);
95 } 101 }
96 102
97 if (key === 40) { 103 if (key === 40) {
98 siguiente(key); 104 siguiente(key);
99 } 105 }
100 106
101 if (key === 37) { 107 if (key === 37) {
102 retrocederPagina(); 108 retrocederPagina();
103 } 109 }
104 110
105 if (key === 39) { 111 if (key === 39) {
106 avanzarPagina(); 112 avanzarPagina();
107 } 113 }
108 }; 114 };
109 115
110 function calcularPages(paginaActual) { 116 function calcularPages(paginaActual) {
111 var paginas = []; 117 var paginas = [];
112 paginas.push(paginaActual); 118 paginas.push(paginaActual);
113 119
114 if (paginaActual - 1 > 1) { 120 if (paginaActual - 1 > 1) {
115 121
116 paginas.unshift(paginaActual - 1); 122 paginas.unshift(paginaActual - 1);
117 if (paginaActual - 2 > 1) { 123 if (paginaActual - 2 > 1) {
118 paginas.unshift(paginaActual - 2); 124 paginas.unshift(paginaActual - 2);
119 } 125 }
120 } 126 }
121 127
122 if (paginaActual + 1 < $scope.lastPage) { 128 if (paginaActual + 1 < $scope.lastPage) {
123 paginas.push(paginaActual + 1); 129 paginas.push(paginaActual + 1);
124 if (paginaActual + 2 < $scope.lastPage) { 130 if (paginaActual + 2 < $scope.lastPage) {
125 paginas.push(paginaActual + 2); 131 paginas.push(paginaActual + 2);
126 } 132 }
127 } 133 }
128 134
129 if (paginaActual !== 1) { 135 if (paginaActual !== 1) {
130 paginas.unshift(1); 136 paginas.unshift(1);
131 } 137 }
132 138
133 if (paginaActual !== $scope.lastPage) { 139 if (paginaActual !== $scope.lastPage) {
134 paginas.push($scope.lastPage); 140 paginas.push($scope.lastPage);
135 } 141 }
136 142
137 return paginas; 143 return paginas;
138 } 144 }
139 145
140 function primera() { 146 function primera() {
141 $scope.selectedProducto = 0; 147 $scope.selectedProducto = 0;
142 } 148 }
143 149
144 function anterior() { 150 function anterior() {
145 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { 151 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) {
146 retrocederPagina(); 152 retrocederPagina();
147 } else { 153 } else {
148 $scope.selectedProducto--; 154 $scope.selectedProducto--;
149 } 155 }
150 } 156 }
151 157
152 function siguiente() { 158 function siguiente() {
153 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) { 159 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) {
154 $scope.selectedProducto++; 160 $scope.selectedProducto++;
155 } else { 161 } else {
156 avanzarPagina(); 162 avanzarPagina();
157 } 163 }
158 } 164 }
159 165
160 function retrocederPagina() { 166 function retrocederPagina() {
161 if ($scope.currentPage > 1) { 167 if ($scope.currentPage > 1) {
162 $scope.selectPage($scope.currentPage - 1); 168 $scope.selectPage($scope.currentPage - 1);
163 $scope.selectedProducto = $scope.numPerPage - 1; 169 $scope.selectedProducto = $scope.numPerPage - 1;
164 } 170 }
165 } 171 }
166 172
167 function avanzarPagina() { 173 function avanzarPagina() {
168 if ($scope.currentPage < $scope.lastPage) { 174 if ($scope.currentPage < $scope.lastPage) {
169 $scope.selectPage($scope.currentPage + 1); 175 $scope.selectPage($scope.currentPage + 1);
170 $scope.selectedProducto = 0; 176 $scope.selectedProducto = 0;
171 } 177 }
172 } 178 }
173 } 179 }
174 ] 180 ]
175 ); 181 );
176 182
src/views/modal-busqueda-productos.html
Diff comments   View file @ 1bf2409
1 <div class="modal-header"> 1 <div class="modal-header py-1">
2 <h5 class="modal-title my-1">Busqueda de Productos</h5> 2 <div class="row w-100">
3 <div class="col-lg-6">
4 <h5 class="modal-title my-1">Busqueda de Productos</h5>
5 </div>
6 <div class="input-group col-lg-6 pr-0 my-2">
7 <input
8 ladda="searchLoading"
9 type="text"
10 class="form-control"
11 id="search"
12 placeholder="Busqueda"
13 ng-model="filters"
14 ng-change="search()"
15 ng-keydown="busquedaDown($event.keyCode)"
16 ng-keypress="busquedaPress($event.keyCode)"
17 foca-focus="selectedProducto == -1"
18 ng-focus="selectedProducto = -1"
19 teclado-virtual
20 >
21 <div class="input-group-append">
22 <button
23 ladda="searchLoading"
24 class="btn btn-outline-secondary"
25 type="button"
26 ng-click="busquedaPress(13)"
27 >
28 <i class="fa fa-search" aria-hidden="true"></i>
29 </button>
30 </div>
31 </div>
32 </div>
3 </div> 33 </div>
4 <div class="modal-body" id="modal-body"> 34 <div class="modal-body" id="modal-body">
5 <div class="input-group"> 35
6 <input 36 <div ng-show="!primerBusqueda">
7 ladda="searchLoading" 37 Debe realizar una primer búsqueda.
8 type="text"
9 class="form-control"
10 placeholder="Busqueda"
11 ng-model="filters"
12 ng-change="search()"
13 ng-keydown="busquedaDown($event.keyCode)"
14 ng-keypress="busquedaPress($event.keyCode)"
15 foca-focus="selectedProducto == -1"
16 ng-focus="selectedProducto = -1"
17 teclado-virtual
18 >
19 <div class="input-group-append">
20 <button
21 ladda="searchLoading"
22 class="btn btn-outline-secondary"
23 type="button"
24 ng-click="busquedaPress(13)"
25 >
26 <i class="fa fa-search" aria-hidden="true"></i>
27 </button>
28 </div>
29 </div> 38 </div>
39
30 <table ng-show="primerBusqueda" class="table table-striped table-sm"> 40 <table ng-show="primerBusqueda" class="table table-striped table-sm">
31 <thead> 41 <thead>
32 <tr> 42 <tr>
33 <th>Código</th> 43 <th>Código</th>
34 <th>Descripción</th> 44 <th>Descripción</th>
35 <th class="text-right">P. Base</th> 45 <th class="text-right">P. Base</th>
36 <th></th> 46 <th></th>
37 </tr> 47 </tr>
38 </thead> 48 </thead>
39 <tbody> 49 <tbody>
40 <tr ng-show="currentPageProductos.length == 0 && primerBusqueda"> 50 <tr ng-show="currentPageProductos.length == 0 && primerBusqueda">
41 <td colspan="5"> 51 <td colspan="5">
42 No se encontraron resultados. 52 No se encontraron resultados.
43 </td> 53 </td>
44 </tr> 54 </tr>
45 <tr class="selectable" 55 <tr class="selectable"
46 ng-repeat="(key,producto) in currentPageProductos" 56 ng-repeat="(key,producto) in currentPageProductos"
47 ng-click="select(producto)"> 57 ng-click="select(producto)">
48 <td ng-bind="producto.sector + '-' + producto.codigo"></td> 58 <td ng-bind="producto.sector + '-' + producto.codigo"></td>
49 <td ng-bind="producto.descripcion"></td> 59 <td ng-bind="producto.descripcion"></td>
50 <td class="text-right" ng-bind="producto.precio | currency: simbolo : 4"></td> 60 <td class="text-right" ng-bind="producto.precio | currency: simbolo : 2"></td>
51 <td class="d-md-none text-primary"> 61 <td class="d-md-none text-primary">
52 <i class="fa fa-arrow-right" aria-hidden="true"></i> 62 <i class="fa fa-circle-thin" aria-hidden="true"></i>
53 </td> 63 </td>
54 <td class="d-none d-md-table-cell"> 64 <td class="d-none d-md-table-cell">
55 <button 65 <button
56 type="button" 66 type="button"
57 class="btn btn-xs p-1 float-right" 67 class="btn btn-xs p-1 float-right"
58 ng-class="{ 68 ng-class="{
59 'btn-secondary': selectedProducto != key, 69 'btn-secondary': selectedProducto != key,
60 'btn-primary': selectedProducto == key 70 'btn-primary': selectedProducto == key
61 }" 71 }"
62 foca-focus="selectedProducto == {{key}}" 72 foca-focus="selectedProducto == {{key}}"
63 ng-keydown="itemProducto($event.keyCode)"> 73 ng-keydown="itemProducto($event.keyCode)">
64 <i class="fa fa-arrow-right" aria-hidden="true"></i> 74 <i class="fa fa-circle-thin" aria-hidden="true"></i>
65 </button> 75 </button>
66 </td> 76 </td>
67 </tr> 77 </tr>
68 </tbody> 78 </tbody>
69 </table> 79 </table>
70 <nav ng-show="currentPageProductos.length > 0 && primerBusqueda"> 80
81 </div>
82 <div class="modal-footer py-1">
83 <nav ng-show="currentPageProductos.length > 0 && primerBusqueda" class="mr-auto">
71 <ul class="pagination pagination-sm justify-content mb-0"> 84 <ul class="pagination pagination-sm justify-content mb-0">
72 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 85 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
73 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)"> 86 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
74 <span aria-hidden="true">&laquo;</span> 87 <span aria-hidden="true">&laquo;</span>
75 <span class="sr-only">Anterior</span> 88 <span class="sr-only">Anterior</span>
76 </a> 89 </a>
77 </li> 90 </li>
78 <li 91 <li
79 class="page-item" 92 class="page-item"