modal terminado con paginado, filtro y navegacion por teclas

Nicolás Guarnieri
1 parent 4eebd767d3
Showing 7 changed files with 150 additions and 50 deletions Show diff stats
README.md
index.html
package.json
src/js/app.js
src/js/controller.js
src/js/service.js
src/views/modal-busqueda-productos.html
@@ -22,4 +22,4 @@ Y despues consiguiendo el resultado de esta forma:
 	        // funcion ejecutada cuando se cancela el modal
 	    }
 	);
-</pre>
 \ No newline at end of file
+</pre>
@@ -12,6 +12,7 @@
         <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
         <script src="node_modules/angular/angular.min.js"></script>
         <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
+        <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
  
         <!-- BUILD -->
         <script src="src/js/app.js"></script>
 {
-    "name": "foca-navegacion-doble",
+    "name": "foca-modal-busqueda-productos",
     "version": "0.0.1",
     "description": "Menu de navegacion de doble entrada",
     "main": "index.js",
@@ -32,11 +32,13 @@
         "gulp-replace": "^1.0.0",
         "gulp-uglify": "^3.0.1",
         "jquery": "^3.3.1",
-        "pump": "^3.0.0"
+        "pump": "^3.0.0",
+        "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas",
     },
     "devDependencies": {
         "angular": "^1.7.4",
         "bootstrap": "^4.1.3",
+        "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas",
         "font-awesome": "^4.7.0",
         "gulp": "^3.9.1",
         "gulp-angular-templatecache": "^2.2.1",
-angular.module('focaBusquedaProductos', ['ui.bootstrap']);
+angular.module('focaBusquedaProductos', ['ui.bootstrap','focaDirectivas']);
@@ -8,7 +8,7 @@ angular.module(&#39;focaBusquedaProductos&#39;)
             function($filter, $scope, $uibModalInstance, focaBusquedaProductosService) {
                 focaBusquedaProductosService.getProductos().then(
                     function(res) {
-                        $scope.productos = res;
+                        $scope.productos = res.data;
                         $scope.search();
                     }
                 );
@@ -18,12 +18,12 @@ angular.module(&#39;focaBusquedaProductos&#39;)
                 $scope.currentPage = 1;
                 $scope.filteredProductos = [];
                 $scope.currentPageProductos = [];
-                $scope.selectProducto = 0;
+                $scope.selectedProducto = -1;
  
-
                 //METODOS
                 $scope.search = function() {
                     $scope.filteredProductos = $filter('filter')($scope.productos, {$: $scope.filters});
+                    $scope.lastPage = Math.ceil($scope.filteredProductos.length / $scope.numPerPage);
                     $scope.resetPage();
                 }
  
@@ -35,7 +35,10 @@ angular.module(&#39;focaBusquedaProductos&#39;)
                 $scope.selectPage = function(page) {
                     var start = (page - 1) * $scope.numPerPage;
                     var end = start + $scope.numPerPage;
+                    $scope.paginas = [];
+                    $scope.paginas = calcularPages(page);
                     $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
+                    $scope.currentPage = page;
                 }
  
                 $scope.select = function(producto) {
@@ -46,11 +49,100 @@ angular.module(&#39;focaBusquedaProductos&#39;)
                     $uibModalInstance.dismiss('cancel');
                 }
  
-                $scope.enter = function(key) {
+                $scope.busquedaDown = function(key) {
+                    if (key === 40) {
+                        primera(key);
+                    }
+                }
+
+                $scope.busquedaPress = function(key) {
                     if (key === 13) {
-                        console.table($scope.currentPageProductos);
+                        primera(key);
+                    }
+                }
+
+                $scope.itemProducto = function(key) {
+                    console.info(key);
+                    if (key == 38) {
+                        anterior(key);
+                    }
+
+                    if (key == 40) {
+                        siguiente(key);
+                    }
+
+                    if (key == 37) {
+                        retrocederPagina();
+                    }
+
+                    if (key == 39) {
+                        avanzarPagina();
+                    }
+                }
+
+                function calcularPages(paginaActual) {
+                    var paginas = [];
+                    paginas.push(paginaActual);
+
+                    if (paginaActual - 1 > 1) {
+                        
+                        paginas.unshift(paginaActual - 1);
+                        if (paginaActual - 2 > 1) {
+                            paginas.unshift(paginaActual - 2);
+                        }
+                    }
+
+                    if (paginaActual + 1 < $scope.lastPage) {
+                        paginas.push(paginaActual + 1);
+                        if (paginaActual + 2 < $scope.lastPage) {
+                            paginas.push(paginaActual + 2);
+                        }
+                    }
+
+                    if (paginaActual !== 1) {
+                        paginas.unshift(1);
+                    }
+
+                    if (paginaActual !== $scope.lastPage) {
+                        paginas.push($scope.lastPage);
+                    }
+
+                    return paginas;
+                }
+
+                function primera(key) {
+                    $scope.selectedProducto = 0;
+                }
+
+                function anterior(key) {
+                    if ($scope.selectedProducto === 0) {
+                        anteriorPagina();
+                    } else {
+                        $scope.selectedProducto--;
+                    }
+                }
+
+                function siguiente(key) {
+                    if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) {
+                        $scope.selectedProducto++;
+                    } else {
+                            avanzarPagina();
+                    }
+                }
+
+                function retrocederPagina() {
+                    if ($scope.currentPage > 1) {
+                        $scope.selectPage($scope.currentPage - 1);
+                        $scope.selectedProducto = $scope.numPerPage - 1;
+                    }
+                }
+
+                function avanzarPagina() {
+                    if ($scope.currentPage < $scope.lastPage) {
+                        $scope.selectPage($scope.currentPage + 1);
+                        $scope.selectedProducto = 0;
                     }
                 }
             }
         ]
-    )
 \ No newline at end of file
+    )
 angular.module('focaBusquedaProductos')
-	.service('focaBusquedaProductosService', ['$q', function($q) {
-		return {
-			getProductos: function(filtro) {
-				var deferred = $q.defer();
-
-				deferred.resolve([
-					{
-						idProducto: 1,
-						codigo: 1,
-						sector: 1,
-						descripcion: 'Nafta Comun',
-						codsecfilter: '1-1',
-						precio: 35
-					},
-					{
-						idProducto: 2,
-						codigo: 2,
-						sector: 1,
-						descripcion: 'Diesel',
-						codsecfilter: '1-2',
-						precio: 40
-					},
-					{
-						idProducto: 3,
-						codigo: 1,
-						sector: 2,
-						descripcion: 'Aceite',
-						codsecfilter: '2-1',
-						precio: 95
-					}
-				]);
-				
-				return deferred.promise;
-			}
-		}
-	}])
 \ No newline at end of file
+    .service('focaBusquedaProductosService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
+        return {
+            getProductos: function(filtro) {
+                return $http.get(API_ENDPOINT.URL + '/articulos');
+            }
+        }
+    }])
@@ -9,7 +9,10 @@
             placeholder="Busqueda" 
             ng-model="filters" 
             ng-change="search()" 
-            ng-keypress="enter($event.keyCode)"
+            ng-keydown="busquedaDown($event.keyCode)"
+            ng-keypress="busquedaPress($event.keyCode)"
+            foca-focus="selectedProducto == -1"
+            ng-focus="selectedProducto = -1"
         >
         <table class="table table-striped table-sm">
             <thead>
@@ -22,19 +25,50 @@
                 </tr>
             </thead>
             <tbody>
-                <tr ng-repeat="producto in filteredProductos">
+                <tr ng-repeat="(key,producto) in currentPageProductos">
                     <td ng-bind="producto.sector"></td>
                     <td ng-bind="producto.codigo"></td>
                     <td ng-bind="producto.descripcion"></td>
                     <td ng-bind="producto.precio | currency"></td>
                     <td>
-                        <button type="button" class="btn btn-secondary p-5 float-right mr-1" ng-click="select(producto)">
-                            <i class="fa fa-check" aria-hidden="true"></i>
+                        <button 
+                            type="button" 
+                            class="btn  p-5 float-right"
+                            ng-class="{ 'btn-secondary': selectedProducto != key, 'btn-primary': selectedProducto == key}"
+                            ng-click="select(producto)"
+                            foca-focus="selectedProducto == {{key}}"
+                            ng-keydown="itemProducto($event.keyCode)"
+                        >
+                            <i class="fa fa-arrow-right" aria-hidden="true"></i>
                         </button>
                     </td>
                 </tr>
             </tbody>
         </table>
+        <nav>
+            <ul class="pagination justify-content-end">
+                <li class="page-item" ng-class="{'disabled': currentPage == 1}">
+                    <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
+                        <span aria-hidden="true">&laquo;</span>
+                        <span class="sr-only">Anterior</span>
+                    </a>
+                </li>
+                <li class="page-item" ng-repeat="pagina in paginas" ng-class="{'active': pagina == currentPage}">
+                    <a 
+                        class="page-link" 
+                        href="#" 
+                        ng-click="selectPage(pagina)"
+                        ng-bind="pagina"
+                    ></a>
+                </li>
+                <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
+                    <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
+                        <span aria-hidden="true">&raquo;</span>
+                        <span class="sr-only">Siguiente</span>
+                    </a>
+                </li>
+            </ul>
+        </nav>
     </div>
 </div>
 <div class="modal-footer">
...	...	@@ -22,4 +22,4 @@ Y despues consiguiendo el resultado de esta forma:
22	22	// funcion ejecutada cuando se cancela el modal
23	23	}
24	24	);
25		-</pre>
26	25	\ No newline at end of file
	26	+</pre>
...	...	@@ -12,6 +12,7 @@
12	12	<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
13	13	<script src="node_modules/angular/angular.min.js"></script>
14	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	16
16	17	<!-- BUILD -->
17	18	<script src="src/js/app.js"></script>
1	1	{
2		- "name": "foca-navegacion-doble",
	2	+ "name": "foca-modal-busqueda-productos",
3	3	"version": "0.0.1",
4	4	"description": "Menu de navegacion de doble entrada",
5	5	"main": "index.js",
...	...	@@ -32,11 +32,13 @@
32	32	"gulp-replace": "^1.0.0",
33	33	"gulp-uglify": "^3.0.1",
34	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	37	},
37	38	"devDependencies": {
38	39	"angular": "^1.7.4",
39	40	"bootstrap": "^4.1.3",
	41	+ "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas",
40	42	"font-awesome": "^4.7.0",
41	43	"gulp": "^3.9.1",
42	44	"gulp-angular-templatecache": "^2.2.1",
1		-angular.module('focaBusquedaProductos', ['ui.bootstrap']);
	1	+angular.module('focaBusquedaProductos', ['ui.bootstrap','focaDirectivas']);
...	...	@@ -8,7 +8,7 @@ angular.module('focaBusquedaProductos')
8	8	function($filter, $scope, $uibModalInstance, focaBusquedaProductosService) {
9	9	focaBusquedaProductosService.getProductos().then(
10	10	function(res) {
11		- $scope.productos = res;
	11	+ $scope.productos = res.data;
12	12	$scope.search();
13	13	}
14	14	);
...	...	@@ -18,12 +18,12 @@ angular.module('focaBusquedaProductos')
18	18	$scope.currentPage = 1;
19	19	$scope.filteredProductos = [];
20	20	$scope.currentPageProductos = [];
21		- $scope.selectProducto = 0;
	21	+ $scope.selectedProducto = -1;
22	22
23		-
24	23	//METODOS
25	24	$scope.search = function() {
26	25	$scope.filteredProductos = $filter('filter')($scope.productos, {$: $scope.filters});
	26	+ $scope.lastPage = Math.ceil($scope.filteredProductos.length / $scope.numPerPage);
27	27	$scope.resetPage();
28	28	}
29	29
...	...	@@ -35,7 +35,10 @@ angular.module('focaBusquedaProductos')
35	35	$scope.selectPage = function(page) {
36	36	var start = (page - 1) * $scope.numPerPage;
37	37	var end = start + $scope.numPerPage;
	38	+ $scope.paginas = [];
	39	+ $scope.paginas = calcularPages(page);
38	40	$scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
	41	+ $scope.currentPage = page;
39	42	}
40	43
41	44	$scope.select = function(producto) {
...	...	@@ -46,11 +49,100 @@ angular.module('focaBusquedaProductos')
46	49	$uibModalInstance.dismiss('cancel');
47	50	}
48	51
49		- $scope.enter = function(key) {
	52	+ $scope.busquedaDown = function(key) {
	53	+ if (key === 40) {
	54	+ primera(key);
	55	+ }
	56	+ }
	57	+
	58	+ $scope.busquedaPress = function(key) {
50	59	if (key === 13) {
51		- console.table($scope.currentPageProductos);
	60	+ primera(key);
	61	+ }
	62	+ }
	63	+
	64	+ $scope.itemProducto = function(key) {
	65	+ console.info(key);
	66	+ if (key == 38) {
	67	+ anterior(key);
	68	+ }
	69	+
	70	+ if (key == 40) {
	71	+ siguiente(key);
	72	+ }
	73	+
	74	+ if (key == 37) {
	75	+ retrocederPagina();
	76	+ }
	77	+
	78	+ if (key == 39) {
	79	+ avanzarPagina();
	80	+ }
	81	+ }
	82	+
	83	+ function calcularPages(paginaActual) {
	84	+ var paginas = [];
	85	+ paginas.push(paginaActual);
	86	+
	87	+ if (paginaActual - 1 > 1) {
	88	+
	89	+ paginas.unshift(paginaActual - 1);
	90	+ if (paginaActual - 2 > 1) {
	91	+ paginas.unshift(paginaActual - 2);
	92	+ }
	93	+ }
	94	+
	95	+ if (paginaActual + 1 < $scope.lastPage) {
	96	+ paginas.push(paginaActual + 1);
	97	+ if (paginaActual + 2 < $scope.lastPage) {
	98	+ paginas.push(paginaActual + 2);
	99	+ }
	100	+ }
	101	+
	102	+ if (paginaActual !== 1) {
	103	+ paginas.unshift(1);
	104	+ }
	105	+
	106	+ if (paginaActual !== $scope.lastPage) {
	107	+ paginas.push($scope.lastPage);
	108	+ }
	109	+
	110	+ return paginas;
	111	+ }
	112	+
	113	+ function primera(key) {
	114	+ $scope.selectedProducto = 0;
	115	+ }
	116	+
	117	+ function anterior(key) {
	118	+ if ($scope.selectedProducto === 0) {
	119	+ anteriorPagina();
	120	+ } else {
	121	+ $scope.selectedProducto--;
	122	+ }
	123	+ }
	124	+
	125	+ function siguiente(key) {
	126	+ if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) {
	127	+ $scope.selectedProducto++;
	128	+ } else {
	129	+ avanzarPagina();
	130	+ }
	131	+ }
	132	+
	133	+ function retrocederPagina() {
	134	+ if ($scope.currentPage > 1) {
	135	+ $scope.selectPage($scope.currentPage - 1);
	136	+ $scope.selectedProducto = $scope.numPerPage - 1;
	137	+ }
	138	+ }
	139	+
	140	+ function avanzarPagina() {
	141	+ if ($scope.currentPage < $scope.lastPage) {
	142	+ $scope.selectPage($scope.currentPage + 1);
	143	+ $scope.selectedProducto = 0;
52	144	}
53	145	}
54	146	}
55	147	]
56		- )
57	148	\ No newline at end of file
	149	+ )
1	1	angular.module('focaBusquedaProductos')
2		- .service('focaBusquedaProductosService', ['$q', function($q) {
3		- return {
4		- getProductos: function(filtro) {
5		- var deferred = $q.defer();
6		-
7		- deferred.resolve([
8		- {
9		- idProducto: 1,
10		- codigo: 1,
11		- sector: 1,
12		- descripcion: 'Nafta Comun',
13		- codsecfilter: '1-1',
14		- precio: 35
15		- },
16		- {
17		- idProducto: 2,
18		- codigo: 2,
19		- sector: 1,
20		- descripcion: 'Diesel',
21		- codsecfilter: '1-2',
22		- precio: 40
23		- },
24		- {
25		- idProducto: 3,
26		- codigo: 1,
27		- sector: 2,
28		- descripcion: 'Aceite',
29		- codsecfilter: '2-1',
30		- precio: 95
31		- }
32		- ]);
33		-
34		- return deferred.promise;
35		- }
36		- }
37		- }])
38	2	\ No newline at end of file
	3	+ .service('focaBusquedaProductosService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
	4	+ return {
	5	+ getProductos: function(filtro) {
	6	+ return $http.get(API_ENDPOINT.URL + '/articulos');
	7	+ }
	8	+ }
	9	+ }])
...	...	@@ -9,7 +9,10 @@
9	9	placeholder="Busqueda"
10	10	ng-model="filters"
11	11	ng-change="search()"
12		- ng-keypress="enter($event.keyCode)"
	12	+ ng-keydown="busquedaDown($event.keyCode)"
	13	+ ng-keypress="busquedaPress($event.keyCode)"
	14	+ foca-focus="selectedProducto == -1"
	15	+ ng-focus="selectedProducto = -1"
13	16	>
14	17	<table class="table table-striped table-sm">
15	18	<thead>
...	...	@@ -22,19 +25,50 @@
22	25	</tr>
23	26	</thead>
24	27	<tbody>
25		- <tr ng-repeat="producto in filteredProductos">
	28	+ <tr ng-repeat="(key,producto) in currentPageProductos">
26	29	<td ng-bind="producto.sector"></td>
27	30	<td ng-bind="producto.codigo"></td>
28	31	<td ng-bind="producto.descripcion"></td>
29	32	<td ng-bind="producto.precio \| currency"></td>
30	33	<td>
31		- <button type="button" class="btn btn-secondary p-5 float-right mr-1" ng-click="select(producto)">
32		- <i class="fa fa-check" aria-hidden="true"></i>
	34	+ <button
	35	+ type="button"
	36	+ class="btn p-5 float-right"
	37	+ ng-class="{ 'btn-secondary': selectedProducto != key, 'btn-primary': selectedProducto == key}"
	38	+ ng-click="select(producto)"
	39	+ foca-focus="selectedProducto == {{key}}"
	40	+ ng-keydown="itemProducto($event.keyCode)"
	41	+ >
	42	+ <i class="fa fa-arrow-right" aria-hidden="true"></i>
33	43	</button>
34	44	</td>
35	45	</tr>
36	46	</tbody>
37	47	</table>
	48	+ <nav>
	49	+ <ul class="pagination justify-content-end">
	50	+ <li class="page-item" ng-class="{'disabled': currentPage == 1}">
	51	+ <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
	52	+ <span aria-hidden="true">«</span>
	53	+ <span class="sr-only">Anterior</span>
	54	+ </a>
	55	+ </li>
	56	+ <li class="page-item" ng-repeat="pagina in paginas" ng-class="{'active': pagina == currentPage}">
	57	+ <a
	58	+ class="page-link"
	59	+ href="#"
	60	+ ng-click="selectPage(pagina)"
	61	+ ng-bind="pagina"
	62	+ ></a>
	63	+ </li>
	64	+ <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
	65	+ <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
	66	+ <span aria-hidden="true">»</span>
	67	+ <span class="sr-only">Siguiente</span>
	68	+ </a>
	69	+ </li>
	70	+ </ul>
	71	+ </nav>
38	72	</div>
39	73	</div>
40	74	<div class="modal-footer">