Commit 773e0eeacffecebefd48d281eb724bbe8b49e37f

Authored by Nicolás Guarnieri
1 parent e72617cd09
Exists in master

paginacion y navegacion por teclado

1 { 1 {
2 /* 2 /*
3 * ENVIRONMENTS 3 * ENVIRONMENTS
4 * ================= 4 * =================
5 */ 5 */
6 6
7 // Define globals exposed by modern browsers. 7 // Define globals exposed by modern browsers.
8 "browser": true, 8 "browser": true,
9 9
10 // Define globals exposed by jQuery. 10 // Define globals exposed by jQuery.
11 "jquery": true, 11 "jquery": true,
12 12
13 // Define globals exposed by Node.js. 13 // Define globals exposed by Node.js.
14 "node": true, 14 "node": true,
15 15
16 // Allow ES6. 16 // Allow ES6.
17 "esversion": 6, 17 "esversion": 6,
18 18
19 /* 19 /*
20 * ENFORCING OPTIONS 20 * ENFORCING OPTIONS
21 * ================= 21 * =================
22 */ 22 */
23 23
24 // Force all variable names to use either camelCase style or UPPER_CASE 24 // Force all variable names to use either camelCase style or UPPER_CASE
25 // with underscores. 25 // with underscores.
26 "camelcase": true, 26 "camelcase": true,
27 27
28 // Prohibit use of == and != in favor of === and !==. 28 // Prohibit use of == and != in favor of === and !==.
29 "eqeqeq": true, 29 "eqeqeq": true,
30 30
31 // Enforce tab width of 2 spaces. 31 // Enforce tab width of 2 spaces.
32 "indent": 4, 32 "indent": 4,
33 33
34 // Prohibit use of a variable before it is defined. 34 // Prohibit use of a variable before it is defined.
35 "latedef": true, 35 "latedef": false,
36 36
37 // Enforce line length to 100 characters 37 // Enforce line length to 100 characters
38 "maxlen": 100, 38 "maxlen": 100,
39 39
40 // Require capitalized names for constructor functions. 40 // Require capitalized names for constructor functions.
41 "newcap": true, 41 "newcap": true,
42 42
43 // Enforce use of single quotation marks for strings. 43 // Enforce use of single quotation marks for strings.
44 "quotmark": "single", 44 "quotmark": "single",
45 45
46 // Enforce placing 'use strict' at the top function scope 46 // Enforce placing 'use strict' at the top function scope
47 "strict": false, 47 "strict": false,
48 48
49 // Prohibit use of explicitly undeclared variables. 49 // Prohibit use of explicitly undeclared variables.
50 "undef": true, 50 "undef": true,
51 51
52 // Warn when variables are defined but never used. 52 // Warn when variables are defined but never used.
53 "unused": true, 53 "unused": true,
54 54
55 // Para que funcione en angular 55 // Para que funcione en angular
56 "predef": ["angular", "alert", "spyOn", "expect", "it", "inject", "beforeEach", "describe"], 56 "predef": ["angular", "alert", "spyOn", "expect", "it", "inject", "beforeEach", "describe"],
57 /* 57 /*
58 * RELAXING OPTIONS 58 * RELAXING OPTIONS
59 * ================= 59 * =================
60 */ 60 */
61 61
62 // Suppress warnings about == null comparisons. 62 // Suppress warnings about == null comparisons.
63 "eqnull": true 63 "eqnull": true
64 } 64 }
65 65
1 const templateCache = require('gulp-angular-templatecache'); 1 const templateCache = require('gulp-angular-templatecache');
2 const concat = require('gulp-concat'); 2 const concat = require('gulp-concat');
3 const htmlmin = require('gulp-htmlmin'); 3 const htmlmin = require('gulp-htmlmin');
4 const rename = require('gulp-rename'); 4 const rename = require('gulp-rename');
5 const uglify = require('gulp-uglify'); 5 const uglify = require('gulp-uglify');
6 const gulp = require('gulp'); 6 const gulp = require('gulp');
7 const pump = require('pump'); 7 const pump = require('pump');
8 const jshint = require('gulp-jshint'); 8 const jshint = require('gulp-jshint');
9 const replace = require('gulp-replace'); 9 const replace = require('gulp-replace');
10 const connect = require('gulp-connect'); 10 const connect = require('gulp-connect');
11 11
12 var paths = { 12 var paths = {
13 srcJS: 'src/js/*.js', 13 srcJS: 'src/js/*.js',
14 srcViews: 'src/views/*.html', 14 srcViews: 'src/views/*.html',
15 tmp: 'tmp', 15 tmp: 'tmp',
16 dist: 'dist/' 16 dist: 'dist/'
17 }; 17 };
18 18
19 gulp.task('templates', function() { 19 gulp.task('templates', function() {
20 pump( 20 return pump(
21 [ 21 [
22 gulp.src(paths.srcViews), 22 gulp.src(paths.srcViews),
23 replace('views/', ''), 23 replace('views/', ''),
24 htmlmin(), 24 htmlmin(),
25 templateCache('views.js', { 25 templateCache('views.js', {
26 module: 'focaModalVendedores', 26 module: 'focaModalVendedores',
27 root: '' 27 root: ''
28 }), 28 }),
29 gulp.dest(paths.tmp) 29 gulp.dest(paths.tmp)
30 ] 30 ]
31 ); 31 );
32 }); 32 });
33 33
34 gulp.task('uglify', function() { 34 gulp.task('uglify', ['templates'], function() {
35 pump( 35 return pump(
36 [ 36 [
37 gulp.src([ 37 gulp.src([
38 paths.srcJS, 38 paths.srcJS,
39 'tmp/views.js' 39 'tmp/views.js'
40 ]), 40 ]),
41 concat('foca-modal-vendedores.js'), 41 concat('foca-modal-vendedores.js'),
42 gulp.dest(paths.tmp), 42 gulp.dest(paths.tmp),
43 rename('foca-modal-vendedores.min.js'), 43 rename('foca-modal-vendedores.min.js'),
44 uglify(), 44 uglify(),
45 gulp.dest(paths.dist) 45 gulp.dest(paths.dist)
46 ] 46 ]
47 ); 47 );
48 }); 48 });
49 49
50 gulp.task('pre-commit', function() { 50 gulp.task('pre-commit', function() {
51 pump( 51 return pump(
52 [ 52 [
53 gulp.src(paths.srcJS), 53 gulp.src(paths.srcJS),
54 jshint('.jshintrc'), 54 jshint('.jshintrc'),
55 jshint.reporter('default'), 55 jshint.reporter('default'),
56 jshint.reporter('fail') 56 jshint.reporter('fail')
57 ] 57 ]
58 ); 58 );
59 59
60 gulp.start('uglify'); 60 gulp.start('uglify');
61 gulp.start('templates');
62 }); 61 });
63 62
64 gulp.task('webserver', function() { 63 gulp.task('webserver', function() {
65 pump [ 64 pump [
66 connect.server({port: 3000}) 65 connect.server({port: 3000})
67 ] 66 ]
68 }); 67 });
69 68
70 gulp.task('default', ['webserver']); 69 gulp.task('default', ['webserver']);
1 <html ng-app="focaModalVendedores"> 1 <html ng-app="focaModalVendedores">
2 2
3 <head> 3 <head>
4 <meta charset="UTF-8" /> 4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
6 6
7 <!--CSS--> 7 <!--CSS-->
8 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" /> 8 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
9 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" /> 9 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
10 10
11 <!--VENDOR JS--> 11 <!--VENDOR JS-->
12 <script src="node_modules/jquery/dist/jquery.min.js"></script> 12 <script src="node_modules/jquery/dist/jquery.min.js"></script>
13 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 13 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
14 <script src="node_modules/angular/angular.min.js"></script> 14 <script src="node_modules/angular/angular.min.js"></script>
15 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script> 15 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
16 <script src="../foca-directivas/dist/foca-directivas.min.js"></script> 16 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
17 17
18 <!-- BUILD --> 18 <!-- BUILD -->
19 <script src="src/js/app.js"></script> 19 <script src="src/js/app.js"></script>
20 <script src="src/js/controller.js"></script> 20 <script src="src/js/controller.js"></script>
21 <script src="src/js/service.js"></script> 21 <script src="src/js/service.js"></script>
22 22
23 <!-- /BUILD --> 23 <!-- /BUILD -->
24 24
25 <!-- CONFIG PARA DEVELOP --> 25 <!-- CONFIG PARA DEVELOP -->
26 <script type="text/javascript"> 26 <script type="text/javascript">
27 angular.module('focaModalVendedores') 27 angular.module('focaModalVendedores')
28 .controller('controller', ['$uibModal', function ($uibModal) { 28 .controller('controller', ['$uibModal', '$timeout', function($uibModal, $timeout) {
29 var modalInstance = $uibModal.open( 29 openModal();
30 { 30
31 ariaLabelledBy: 'Busqueda de Vendedores', 31 function openModal() {
32 templateUrl: 'src/views/modal-vendedores.html', 32 var modalInstance = $uibModal.open(
33 controller: 'modalVendedoresCtrl', 33 {
34 size: 'lg' 34 ariaLabelledBy: 'Busqueda de Vendedores',
35 } 35 templateUrl: 'src/views/modal-vendedores.html',
36 ); 36 controller: 'modalVendedoresCtrl',
37 size: 'lg'
38 }
39 );
40
41 modalInstance.result.then(
42 function (selectedItem) {
43 console.info(selectedItem);
44 $timeout(openModal, 500);
45 }, function () {
46 console.info('modal-component dismissed at: ' + new Date());
47 $timeout(openModal, 500);
48 }
49 );
50 }
51
52
37 }]); 53 }]);
38 </script> 54 </script>
55
56 <script src="src/etc/develop.js"></script>
39 </head> 57 </head>
40 58
41 <body ng-controller="controller"> 59 <body ng-controller="controller">
42 <style> 60 <style>
43 .p-5 { 61 .p-5 {
44 padding: 5px !important; 62 padding: 5px !important;
45 } 63 }
46 </style> 64 </style>
47 </body> 65 </body>
48 66
49 </html> 67 </html>
1 { 1 {
2 "name": "foca-modal-vendedores", 2 "name": "foca-modal-vendedores",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Modal búsqueda de vendedores", 4 "description": "Modal para seleccionar vendedores",
5 "main": "index.js", 5 "main": "index.js",
6 "scripts": { 6 "scripts": {
7 "test": "echo \"Error: no test specified\" && exit 1", 7 "test": "echo \"Error: no test specified\" && exit 1",
8 "compile": "gulp templates && gulp uglify", 8 "gulp-pre-commit": "gulp pre-commit",
9 "compile": "gulp uglify",
9 "postinstall": "npm run compile && rm -R src && rm index.html && rm .jshintrc && rm gulpfile.js", 10 "postinstall": "npm run compile && rm -R src && rm index.html && rm .jshintrc && rm gulpfile.js",
10 "install-dev": "npm install angular bootstrap jquery font-awesome gulp gulp-concat gulp-jshint gulp-rename gulp-replace gulp-uglify-es jshint pump gulp-connect jasmine-core pre-commit" 11 "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 jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://192.168.0.11/modulos-npm/foca-directivas"
11 }, 12 },
13 "pre-commit": [
14 "gulp-pre-commit"
15 ],
12 "repository": { 16 "repository": {
13 "type": "git", 17 "type": "git",
14 "url": "https://192.168.0.11/modulos-npm/foca-modal-vendedores.git" 18 "url": "https://192.168.0.11/modulos-npm/foca-modal-vendedores"
15 }, 19 },
16 "author": "Foca Software", 20 "author": "Foca Software",
17 "license": "ISC", 21 "license": "ISC",
18 "peerDependencies": { 22 "peerDependencies": {
19 "angular": "^1.7.4", 23 "angular": "^1.7.4",
20 "bootstrap": "^4.1.3", 24 "bootstrap": "^4.1.3",
21 "font-awesome": "^4.7.0", 25 "font-awesome": "^4.7.0",
22 "ui-bootstrap4": "^3.0.4", 26 "ui-bootstrap4": "^3.0.4",
23 "gulp": "^3.9.1", 27 "gulp": "^3.9.1",
24 "gulp-angular-templatecache": "^2.2.1", 28 "gulp-angular-templatecache": "^2.2.1",
25 "gulp-concat": "^2.6.1", 29 "gulp-concat": "^2.6.1",
26 "gulp-connect": "^5.6.1", 30 "gulp-connect": "^5.6.1",
27 "gulp-htmlmin": "^5.0.1", 31 "gulp-htmlmin": "^5.0.1",
28 "gulp-rename": "^1.4.0", 32 "gulp-rename": "^1.4.0",
29 "gulp-replace": "^1.0.0", 33 "gulp-replace": "^1.0.0",
30 "gulp-uglify": "^3.0.1", 34 "gulp-uglify": "^3.0.1",
31 "jquery": "^3.3.1", 35 "jquery": "^3.3.1",
32 "pump": "^3.0.0" 36 "pump": "^3.0.0",
37 "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas"
33 }, 38 },
34 "devDependencies": { 39 "devDependencies": {
35 "angular": "^1.7.4", 40 "angular": "^1.7.5",
36 "bootstrap": "^4.1.3", 41 "bootstrap": "^4.1.3",
42 "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas",
37 "font-awesome": "^4.7.0", 43 "font-awesome": "^4.7.0",
38 "gulp": "^3.9.1", 44 "gulp": "^3.9.1",
39 "gulp-angular-templatecache": "^2.2.1", 45 "gulp-angular-templatecache": "^2.2.1",
40 "gulp-concat": "^2.6.1", 46 "gulp-concat": "^2.6.1",
41 "gulp-connect": "^5.6.1", 47 "gulp-connect": "^5.6.1",
42 "gulp-htmlmin": "^5.0.1", 48 "gulp-htmlmin": "^5.0.1",
43 "gulp-jshint": "^2.1.0", 49 "gulp-jshint": "^2.1.0",
44 "gulp-rename": "^1.4.0", 50 "gulp-rename": "^1.4.0",
45 "gulp-replace": "^1.0.0", 51 "gulp-replace": "^1.0.0",
46 "gulp-uglify": "^3.0.1", 52 "gulp-uglify": "^3.0.1",
47 "jasmine-core": "^3.2.1", 53 "jasmine-core": "^3.2.1",
48 "jquery": "^3.3.1", 54 "jquery": "^3.3.1",
49 "jshint": "^2.9.6", 55 "jshint": "^2.9.6",
50 "pre-commit": "^1.2.2", 56 "pre-commit": "^1.2.2",
51 "pump": "^3.0.0", 57 "pump": "^3.0.0",
52 "ui-bootstrap4": "^3.0.4" 58 "ui-bootstrap4": "^3.0.5"
53 } 59 }
54 } 60 }
55 61
src/etc/develop.js.ejemplo
1 angular.module('focaBusquedaProductos') 1 angular.module('focaModalVendedores')
2 .constant("API_ENDPOINT", { 2 .constant("API_ENDPOINT", {
3 'URL': '//127.0.0.1:9000' 3 'URL': '//127.0.0.1:9000'
4 }); 4 });
5 5
src/js/controller.js
1 angular.module('focaModalVendedores') 1 angular.module('focaModalVendedores')
2 .controller('modalVendedoresCtrl', [ 2 .controller('modalVendedoresCtrl', [
3 '$filter', 3 '$filter',
4 '$scope', 4 '$scope',
5 '$uibModalInstance', 5 '$uibModalInstance',
6 'focaVendedoresService', 6 'focaVendedoresService',
7 function ($filter, $scope, $uibModalInstance, focaVendedoresService) { 7 function($filter, $scope, $uibModalInstance, focaVendedoresService) {
8 var json = { 8 focaVendedoresService.getVendedores().then(
9 nombre: '' 9 function(res) {
10 } 10 $scope.vendedores = res.data;
11 focaVendedoresService.getVendedores(json).then( 11 $scope.search();
12 function (res) { 12 }
13 $scope.vendedores = res.data; 13 );
14 $scope.search(); 14
15 }); 15 // pagination
16 16 $scope.numPerPage = 10;
17 // pagination 17 $scope.currentPage = 1;
18 $scope.numPerPage = 10; 18 $scope.filteredVendedores = [];
19 $scope.currentPage = 1; 19 $scope.currentPageVendedores = [];
20 $scope.filteredVendedores = []; 20 $scope.selectedVendedor = -1;
21 $scope.currentPageVendedores = []; 21
22 $scope.selectVendedores = -1; 22 $scope.search = function() {
23 23 $scope.filteredVendedores = $filter('filter')(
24 $scope.search = function () { 24 $scope.vendedores, { $: $scope.filters }
25 $scope.filteredVendedores = $filter('filter')($scope.vendedores, { $: $scope.filters }); 25 );
26 $scope.resetPage(); 26
27 } 27 $scope.lastPage = Math.ceil(
28 28 $scope.filteredVendedores.length / $scope.numPerPage
29 $scope.resetPage = function () { 29 );
30 $scope.currentPage = 1; 30
31 $scope.selectPage(1); 31 $scope.resetPage();
32 } 32 };
33 33
34 $scope.selectPage = function (page) { 34 $scope.resetPage = function() {
35 var start = (page - 1) * $scope.numPerPage; 35 $scope.currentPage = 1;
36 var end = start + $scope.numPerPage; 36 $scope.selectPage(1);
37 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end); 37 };
38 } 38
39 39 $scope.selectPage = function(page) {
40 $scope.select = function (vendedor) { 40 var start = (page - 1) * $scope.numPerPage;
41 $uibModalInstance.close(vendedor); 41 var end = start + $scope.numPerPage;
42 } 42 $scope.paginas = [];
43 43 $scope.paginas = calcularPages(page);
44 $scope.cancel = function () { 44 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end);
45 $uibModalInstance.dismiss('cancel'); 45 $scope.currentPage = page;
46 } 46 };
47 $scope.busquedaDown = function (key) { 47
48 if (key === 40) { 48 $scope.select = function(vendedor) {
49 primera(key); 49 $uibModalInstance.close(vendedor);
50 } 50 };
51 }; 51
52 52 $scope.cancel = function() {
53 $scope.busquedaPress = function (key) { 53 $uibModalInstance.dismiss('cancel');
54 if (key === 13) { 54 };
55 primera(key); 55
56 } 56 $scope.busquedaDown = function(key) {
57 }; 57 if (key === 40) {
58 58 primera(key);
59 $scope.itemProducto = function (key) { 59 }
60 if (key === 38) { 60 };
61 anterior(key); 61
62 } 62 $scope.busquedaPress = function(key) {
63 63 if (key === 13) {
64 if (key === 40) { 64 primera(key);
65 siguiente(key); 65 }
66 } 66 };
67 67
68 if (key === 37) { 68 $scope.itemVendedor = function(key) {
69 retrocederPagina(); 69 if (key === 38) {
70 } 70 anterior(key);
71 71 }
72 if (key === 39) { 72
73 avanzarPagina(); 73 if (key === 40) {
74 } 74 siguiente(key);
75 }; 75 }
76 76
77 function calcularPages(paginaActual) { 77 if (key === 37) {
78 var paginas = []; 78 retrocederPagina();
79 paginas.push(paginaActual); 79 }
80 80
81 if (paginaActual - 1 > 1) { 81 if (key === 39) {
82 82 avanzarPagina();
83 paginas.unshift(paginaActual - 1); 83 }
84 if (paginaActual - 2 > 1) { 84 };
85 paginas.unshift(paginaActual - 2); 85
86 } 86 function calcularPages(paginaActual) {
87 } 87 var paginas = [];
88 88 paginas.push(paginaActual);
89 if (paginaActual + 1 < $scope.lastPage) { 89
90 paginas.push(paginaActual + 1); 90 if (paginaActual - 1 > 1) {
91 if (paginaActual + 2 < $scope.lastPage) { 91
92 paginas.push(paginaActual + 2); 92 paginas.unshift(paginaActual - 1);
93 } 93 if (paginaActual - 2 > 1) {
94 } 94 paginas.unshift(paginaActual - 2);
95 95 }
96 if (paginaActual !== 1) { 96 }
97 paginas.unshift(1); 97
98 } 98 if (paginaActual + 1 < $scope.lastPage) {
99 99 paginas.push(paginaActual + 1);
100 if (paginaActual !== $scope.lastPage) { 100 if (paginaActual + 2 < $scope.lastPage) {
101 paginas.push($scope.lastPage); 101 paginas.push(paginaActual + 2);
102 } 102 }
103 103 }
104 return paginas; 104
105 } 105 if (paginaActual !== 1) {
106 106 paginas.unshift(1);
107 function primera() { 107 }
108 $scope.selectedProducto = 0; 108
109 } 109 if (paginaActual !== $scope.lastPage) {
110 110 paginas.push($scope.lastPage);
111 function anterior() { 111 }
112 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { 112
113 retrocederPagina(); 113 return paginas;
114 } else { 114 }
115 $scope.selectedProducto--; 115
116 } 116 function primera() {
117 } 117 $scope.selectedVendedor = 0;
118 118 }
119 function siguiente() { 119
120 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1) { 120 function anterior() {
121 $scope.selectedProducto++; 121 if ($scope.selectedVendedor === 0 && $scope.currentPage > 1) {
122 } else { 122 retrocederPagina();
123 avanzarPagina(); 123 } else {
124 } 124 $scope.selectedVendedor--;
125 } 125 }
126 126 }
127 function retrocederPagina() { 127
128 if ($scope.currentPage > 1) { 128 function siguiente() {
129 $scope.selectPage($scope.currentPage - 1); 129 if ($scope.selectedVendedor < $scope.currentPageVendedores.length - 1) {
130 $scope.selectedProducto = $scope.numPerPage - 1; 130 $scope.selectedVendedor++;
131 } 131 } else {
132 } 132 avanzarPagina();
133 133 }
134 function avanzarPagina() { 134 }
135 if ($scope.currentPage < $scope.lastPage) { 135
136 $scope.selectPage($scope.currentPage + 1); 136 function retrocederPagina() {
137 $scope.selectedProducto = 0; 137 if ($scope.currentPage > 1) {
138 } 138 $scope.selectPage($scope.currentPage - 1);
139 } 139 $scope.selectedVendedor = $scope.numPerPage - 1;
140 }] 140 }
141 ) 141 }
142
143 function avanzarPagina() {
144 if ($scope.currentPage < $scope.lastPage) {
145 $scope.selectPage($scope.currentPage + 1);
146 $scope.selectedVendedor = 0;
147 }
148 }
149 }]
150 );
142 151
1 angular.module('focaModalVendedores') 1 angular.module('focaModalVendedores')
2 .service('focaVendedoresService', ['$http', function($http) { 2 .service('focaVendedoresService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
3 var configRoute ='http://localhost:9900';
4 return { 3 return {
5 getVendedores: function(json) { 4 getVendedores: function() {
6 return $http.post(configRoute + '/vendedores', json); 5 // TODO ACOMODAR PARA TURNOS AHORA 1 HARDCODEO
6 return $http.get(API_ENDPOINT.URL + '/vendedores/1');
7 } 7 }
8 } 8 };
9 }]) 9 }]);
src/views/modal-vendedores.html
1 <div class="modal-header"> 1 <div class="modal-header">
2 <h3 class="modal-title">Búsqueda de vendedores</h3> 2 <h3 class="modal-title">Búsqueda de vendedores</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 type="text" class="form-control" placeholder="Busqueda" ng-model="filters" ng-change="search()" 6 <input
7 ng-keypress="enter($event.keyCode)"> 7 type="text"
8 class="form-control"
9 placeholder="Busqueda"
10 ng-model="filters"
11 ng-change="search()"
12 ng-keydown="busquedaDown($event.keyCode)"
13 ng-keypress="busquedaPress($event.keyCode)"
14 foca-focus="selectedVendedor == -1"
15 ng-focus="selectedVendedor = -1"
16 >
8 <table class="table table-striped table-sm"> 17 <table class="table table-striped table-sm">
9 <thead> 18 <thead>
10 <tr> 19 <tr>
11 <th> 20 <th>Código</th>
12 Código 21 <th>Nombre</th>
13 </th>
14 <th>
15 Nombre
16 </th>
17 <th></th> 22 <th></th>
18 </tr> 23 </tr>
19 </thead> 24 </thead>
20 <tbody> 25 <tbody>
21 <tr ng-repeat="vendedor in filteredVendedores"> 26 <tr ng-repeat="(key, vendedor) in currentPageVendedores">
22 <td ng-bind="vendedor.CodVen"></td> 27 <td ng-bind="vendedor.CodVen"></td>
23 <td ng-bind="vendedor.NomVen"></td> 28 <td ng-bind="vendedor.NomVen"></td>
24 <td> 29 <td>
25 <button type="button" class="btn p-2 float-right" ng-class="{ 30 <button
26 'btn-secondary': selectVendedores != key, 31 type="button"
27 'btn-primary': selectVendedores == key 32 class="btn p-2 float-right"
33 ng-class="{
34 'btn-secondary': selectedVendedor != key,
35 'btn-primary': selectedVendedor == key
28 }" 36 }"
29 ng-click="select(vendedor)" foca-focus="selectVendedores == {{key}}" ng-keydown="itemProducto($event.keyCode)"> 37 ng-click="select(vendedor)"
38 foca-focus="selectedVendedor == {{key}}"
39 ng-keydown="itemVendedor($event.keyCode)">
30 <i class="fa fa-arrow-right" aria-hidden="true"></i> 40 <i class="fa fa-arrow-right" aria-hidden="true"></i>
31 </button> 41 </button>
32 </td> 42 </td>
33 </tr> 43 </tr>
34 </tbody> 44 </tbody>
35 </table> 45 </table>
36 <nav> 46 <nav>
37 <ul class="pagination justify-content-end"> 47 <ul class="pagination justify-content-end">
38 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 48 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
39 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 49 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
40 <span aria-hidden="true">&laquo;</span> 50 <span aria-hidden="true">&laquo;</span>
41 <span class="sr-only">Anterior</span> 51 <span class="sr-only">Anterior</span>
42 </a> 52 </a>
43 </li> 53 </li>
44 <li class="page-item" ng-repeat="pagina in paginas" ng-class="{'active': pagina == currentPage}"> 54 <li
45 <a class="page-link" href="#" ng-click="selectPage(pagina)" ng-bind="pagina"></a> 55 class="page-item"
56 ng-repeat="pagina in paginas"
57 ng-class="{'active': pagina == currentPage}"
58 >
59 <a
60 class="page-link"
61 href="#"
62 ng-click="selectPage(pagina)"
63 ng-bind="pagina"
64 ></a>
46 </li> 65 </li>
47 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 66 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
48 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 67 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
49 <span aria-hidden="true">&raquo;</span> 68 <span aria-hidden="true">&raquo;</span>
50 <span class="sr-only">Siguiente</span> 69 <span class="sr-only">Siguiente</span>
51 </a> 70 </a>
52 </li> 71 </li>
53 </ul> 72 </ul>
54 </nav> 73 </nav>
55 </div> 74 </div>