Commit e645dcb5a9e9450de677efd52889500bb3f72aba

Authored by Eric Fernandez
1 parent d69ff9bf76
Exists in master

Implementación angular ladda

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 const clean = require('gulp-clean'); 11 const clean = require('gulp-clean');
12 12
13 var paths = { 13 var paths = {
14 srcJS: 'src/js/*.js', 14 srcJS: 'src/js/*.js',
15 srcViews: 'src/views/*.html', 15 srcViews: 'src/views/*.html',
16 tmp: 'tmp', 16 tmp: 'tmp',
17 dist: 'dist/' 17 dist: 'dist/'
18 }; 18 };
19 19
20 gulp.task('clean', function() { 20 gulp.task('clean', function() {
21 return gulp.src(['tmp', 'dist'], {read: false}) 21 return gulp.src(['tmp', 'dist'], {read: false})
22 .pipe(clean()); 22 .pipe(clean());
23 }); 23 });
24 24
25 gulp.task('templates', ['clean'], function() { 25 gulp.task('templates', ['clean'], function() {
26 return pump( 26 return pump(
27 [ 27 [
28 gulp.src(paths.srcViews), 28 gulp.src(paths.srcViews),
29 htmlmin(), 29 htmlmin(),
30 templateCache('views.js', { 30 templateCache('views.js', {
31 module: 'focaBusquedaProductos', 31 module: 'focaBusquedaProductos',
32 root: '' 32 root: ''
33 }), 33 }),
34 gulp.dest(paths.tmp) 34 gulp.dest(paths.tmp)
35 ] 35 ]
36 ); 36 );
37 }); 37 });
38 38
39 gulp.task('uglify', ['templates'], function() { 39 gulp.task('uglify', ['templates'], function() {
40 return pump( 40 return pump(
41 [ 41 [
42 gulp.src([ 42 gulp.src([
43 paths.srcJS, 43 paths.srcJS,
44 'tmp/views.js' 44 'tmp/views.js'
45 ]), 45 ]),
46 concat('foca-busqueda-productos.js'), 46 concat('foca-busqueda-productos.js'),
47 replace('src/views/', ''), 47 replace('src/views/', ''),
48 replace("['ui.bootstrap', 'focaDirectivas']", '[]'), 48 replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
49 gulp.dest(paths.tmp), 49 gulp.dest(paths.tmp),
50 rename('foca-busqueda-productos.min.js'), 50 rename('foca-busqueda-productos.min.js'),
51 uglify(), 51 uglify(),
52 gulp.dest(paths.dist) 52 gulp.dest(paths.dist)
53 ] 53 ]
54 ); 54 );
55 }); 55 });
56 56
57 gulp.task('pre-commit', function() { 57 gulp.task('pre-commit', function() {
58 return pump( 58 return pump(
59 [ 59 [
60 gulp.src(paths.srcJS), 60 gulp.src(paths.srcJS),
61 jshint('.jshintrc'), 61 jshint('.jshintrc'),
62 jshint.reporter('default'), 62 jshint.reporter('default'),
63 jshint.reporter('fail') 63 jshint.reporter('fail')
64 ] 64 ]
65 ); 65 );
66 66
67 gulp.start('uglify'); 67 gulp.start('uglify');
68 }); 68 });
69 69
70 gulp.task('webserver', function() { 70 gulp.task('webserver', function() {
71 pump [ 71 pump [
72 connect.server({port: 3000}) 72 connect.server({port: 3000})
73 ] 73 ]
74 }); 74 });
75 75
76 gulp.task('clean-post-install', function(){ 76 gulp.task('clean-post-install', function(){
77 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js', 77 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
78 'index.html'], {read: false}) 78 'index.html'], {read: false})
79 .pipe(clean()); 79 .pipe(clean());
80 }); 80 });
81 81
82 gulp.task('default', ['webserver']); 82 gulp.task('default', ['webserver']);
83 83
84 gulp.task('watch', function() { 84 gulp.task('watch', function() {
85 gulp.watch([paths.srcJS, paths.srcViews], ['uglify']) 85 gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
86 }); 86 });
87 87
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 <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
9 10
10 <!--VENDOR JS--> 11 <!--VENDOR JS-->
11 <script src="node_modules/jquery/dist/jquery.min.js"></script> 12 <script src="node_modules/jquery/dist/jquery.min.js"></script>
12 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> 13 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
13 <script src="node_modules/angular/angular.min.js"></script> 14 <script src="node_modules/angular/angular.min.js"></script>
14 <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>
15 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script> 16 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
16 17 <script src="node_modules/ladda/dist/spin.min.js"></script>
18 <script src="node_modules/ladda/dist/ladda.min.js"></script>
19 <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
20
17 <!-- BUILD --> 21 <!-- BUILD -->
18 <script src="src/js/app.js"></script> 22 <script src="src/js/app.js"></script>
19 <script src="src/js/controller.js"></script> 23 <script src="src/js/controller.js"></script>
20 <script src="src/js/service.js"></script> 24 <script src="src/js/service.js"></script>
21 25
22 <!-- /BUILD --> 26 <!-- /BUILD -->
23 27
24 <!-- CONFIG PARA DEVELOP --> 28 <!-- CONFIG PARA DEVELOP -->
25 <script src="src/etc/develop.js"></script> 29 <script src="src/etc/develop.js"></script>
26 <script type="text/javascript"> 30 <script type="text/javascript">
27 angular.module('focaBusquedaProductos') 31 angular.module('focaBusquedaProductos')
28 .controller('controller', [ 32 .controller('controller', [
29 '$scope', 33 '$scope',
30 '$uibModal', 34 '$uibModal',
31 '$timeout', 35 '$timeout',
32 function($scope, $uibModal, $timeout) { 36 function($scope, $uibModal, $timeout) {
33 openModal(); 37 openModal();
34 38
35 function openModal() { 39 function openModal() {
36 var modalInstance = $uibModal.open( 40 var modalInstance = $uibModal.open(
37 { 41 {
38 ariaLabelledBy: 'Busqueda de Productos', 42 ariaLabelledBy: 'Busqueda de Productos',
39 templateUrl: 'src/views/modal-busqueda-productos.html', 43 templateUrl: 'src/views/modal-busqueda-productos.html',
40 controller: 'modalBusquedaProductosCtrl', 44 controller: 'modalBusquedaProductosCtrl',
41 size: 'lg', 45 size: 'lg',
42 resolve: {idLista : function() { return -1; }} 46 resolve: {idLista : function() { return -1; }}
43 } 47 }
44 ); 48 );
45 49
46 modalInstance.result.then( 50 modalInstance.result.then(
47 function (selectedItem) { 51 function (selectedItem) {
48 console.info(selectedItem); 52 console.info(selectedItem);
49 $timeout(openModal, 500); 53 $timeout(openModal, 500);
50 }, function () { 54 }, function () {
51 console.info('modal-component dismissed at: ' + new Date()); 55 console.info('modal-component dismissed at: ' + new Date());
52 $timeout(openModal, 500); 56 $timeout(openModal, 500);
53 } 57 }
54 ); 58 );
55 } 59 }
56 } 60 }
57 ]); 61 ]);
58 </script> 62 </script>
59 </head> 63 </head>
60 <body ng-controller="controller"> 64 <body ng-controller="controller">
61 </body> 65 </body>
62 </html> 66 </html>
63 67
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 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"
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.5", 39 "angular": "^1.7.5",
40 "angular-ladda": "^0.4.3",
40 "bootstrap": "^4.1.3", 41 "bootstrap": "^4.1.3",
41 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas", 42 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
42 "font-awesome": "^4.7.0", 43 "font-awesome": "^4.7.0",
43 "gulp": "^3.9.1", 44 "gulp": "^3.9.1",
44 "gulp-angular-templatecache": "^2.2.3", 45 "gulp-angular-templatecache": "^2.2.3",
45 "gulp-clean": "^0.4.0", 46 "gulp-clean": "^0.4.0",
46 "gulp-concat": "^2.6.1", 47 "gulp-concat": "^2.6.1",
47 "gulp-connect": "^5.6.1", 48 "gulp-connect": "^5.6.1",
48 "gulp-htmlmin": "^5.0.1", 49 "gulp-htmlmin": "^5.0.1",
49 "gulp-jshint": "^2.1.0", 50 "gulp-jshint": "^2.1.0",
50 "gulp-rename": "^1.4.0", 51 "gulp-rename": "^1.4.0",
51 "gulp-replace": "^1.0.0", 52 "gulp-replace": "^1.0.0",
52 "gulp-uglify": "^3.0.1", 53 "gulp-uglify": "^3.0.1",
53 "jasmine-core": "^3.3.0", 54 "jasmine-core": "^3.3.0",
54 "jquery": "^3.3.1", 55 "jquery": "^3.3.1",
55 "jshint": "^2.9.6", 56 "jshint": "^2.9.6",
57 "ladda": "1.0.6",
56 "pre-commit": "^1.2.2", 58 "pre-commit": "^1.2.2",
57 "pump": "^3.0.0", 59 "pump": "^3.0.0",
58 "ui-bootstrap4": "^3.0.5" 60 "ui-bootstrap4": "^3.0.5"
59 } 61 }
60 } 62 }
61 63
1 angular.module('focaBusquedaProductos', ['ui.bootstrap', 'focaDirectivas']); 1 angular.module('focaBusquedaProductos', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
2 2
src/js/controller.js
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 10
11 $scope.filters = ''; 11 $scope.filters = '';
12 $scope.productos = []; 12 $scope.productos = [];
13 $scope.primerBusqueda = false; 13 $scope.primerBusqueda = false;
14 $scope.searchLoading = false;
14 // pagination 15 // pagination
15 $scope.numPerPage = 10; 16 $scope.numPerPage = 10;
16 $scope.currentPage = 1; 17 $scope.currentPage = 1;
17 $scope.filteredProductos = []; 18 $scope.filteredProductos = [];
18 $scope.currentPageProductos = []; 19 $scope.currentPageProductos = [];
19 $scope.selectedProducto = -1; 20 $scope.selectedProducto = -1;
20 21
21 //METODOS 22 //METODOS
22 $scope.busquedaPress = function(key) { 23 $scope.busquedaPress = function(key) {
23 if (key === 13) { 24 if (key === 13) {
25 $scope.searchLoading = true;
24 if(idLista > 0) { 26 if(idLista > 0) {
25 focaBusquedaProductosService 27 focaBusquedaProductosService
26 .getProductosByIdLista(idLista, $scope.filters) 28 .getProductosByIdLista(idLista, $scope.filters)
27 .then( 29 .then(
28 function(res) { 30 function(res) {
31 $scope.searchLoading = false;
29 $scope.primerBusqueda = true; 32 $scope.primerBusqueda = true;
30 $scope.productos = res.data; 33 $scope.productos = res.data;
31 $scope.search(); 34 $scope.search();
32 primera(); 35 primera();
33 } 36 }
34 ); 37 );
35 } else if(idLista === -1) { 38 } else if(idLista === -1) {
36 focaBusquedaProductosService.getProductos().then( 39 focaBusquedaProductosService.getProductos().then(
37 function(res) { 40 function(res) {
41 $scope.searchLoading = false;
38 $scope.primerBusqueda = true; 42 $scope.primerBusqueda = true;
39 $scope.productos = res.data; 43 $scope.productos = res.data;
40 $scope.search(); 44 $scope.search();
41 primera(); 45 primera();
42 } 46 }
43 ); 47 );
44 } 48 }
45 } 49 }
46 }; 50 };
47 51
48 $scope.search = function() { 52 $scope.search = function() {
49 if($scope.productos.length > 0) { 53 if($scope.productos.length > 0) {
50 $scope.filteredProductos = $filter('filter')( 54 $scope.filteredProductos = $filter('filter')(
51 $scope.productos, 55 $scope.productos,
52 {$: $scope.filters} 56 {$: $scope.filters}
53 ); 57 );
54 58
55 $scope.lastPage = Math.ceil( 59 $scope.lastPage = Math.ceil(
56 $scope.filteredProductos.length / $scope.numPerPage 60 $scope.filteredProductos.length / $scope.numPerPage
57 ); 61 );
58 62
59 $scope.resetPage(); 63 $scope.resetPage();
60 } 64 }
61 }; 65 };
62 66
63 $scope.resetPage = function() { 67 $scope.resetPage = function() {
64 $scope.currentPage = 1; 68 $scope.currentPage = 1;
65 $scope.selectPage(1); 69 $scope.selectPage(1);
66 }; 70 };
67 71
68 $scope.selectPage = function(page) { 72 $scope.selectPage = function(page) {
69 var start = (page - 1) * $scope.numPerPage; 73 var start = (page - 1) * $scope.numPerPage;
70 var end = start + $scope.numPerPage; 74 var end = start + $scope.numPerPage;
71 $scope.paginas = []; 75 $scope.paginas = [];
72 $scope.paginas = calcularPages(page); 76 $scope.paginas = calcularPages(page);
73 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end); 77 $scope.currentPageProductos = $scope.filteredProductos.slice(start, end);
74 $scope.currentPage = page; 78 $scope.currentPage = page;
75 }; 79 };
76 80
77 $scope.select = function(producto) { 81 $scope.select = function(producto) {
78 $uibModalInstance.close(producto); 82 $uibModalInstance.close(producto);
79 }; 83 };
80 84
81 $scope.cancel = function() { 85 $scope.cancel = function() {
82 $uibModalInstance.dismiss('cancel'); 86 $uibModalInstance.dismiss('cancel');
83 }; 87 };
84 88
85 $scope.busquedaDown = function(key) { 89 $scope.busquedaDown = function(key) {
86 if (key === 40) { 90 if (key === 40) {
87 primera(key); 91 primera(key);
88 } 92 }
89 }; 93 };
90 94
91 $scope.itemProducto = function(key) { 95 $scope.itemProducto = function(key) {
92 if (key === 38) { 96 if (key === 38) {
93 anterior(key); 97 anterior(key);
94 } 98 }
95 99
96 if (key === 40) { 100 if (key === 40) {
97 siguiente(key); 101 siguiente(key);
98 } 102 }
99 103
100 if (key === 37) { 104 if (key === 37) {
101 retrocederPagina(); 105 retrocederPagina();
102 } 106 }
103 107
104 if (key === 39) { 108 if (key === 39) {
105 avanzarPagina(); 109 avanzarPagina();
106 } 110 }
107 }; 111 };
108 112
109 function calcularPages(paginaActual) { 113 function calcularPages(paginaActual) {
110 var paginas = []; 114 var paginas = [];
111 paginas.push(paginaActual); 115 paginas.push(paginaActual);
112 116
113 if (paginaActual - 1 > 1) { 117 if (paginaActual - 1 > 1) {
114 118
115 paginas.unshift(paginaActual - 1); 119 paginas.unshift(paginaActual - 1);
116 if (paginaActual - 2 > 1) { 120 if (paginaActual - 2 > 1) {
117 paginas.unshift(paginaActual - 2); 121 paginas.unshift(paginaActual - 2);
118 } 122 }
119 } 123 }
120 124
121 if (paginaActual + 1 < $scope.lastPage) { 125 if (paginaActual + 1 < $scope.lastPage) {
122 paginas.push(paginaActual + 1); 126 paginas.push(paginaActual + 1);
123 if (paginaActual + 2 < $scope.lastPage) { 127 if (paginaActual + 2 < $scope.lastPage) {
124 paginas.push(paginaActual + 2); 128 paginas.push(paginaActual + 2);
125 } 129 }
126 } 130 }
127 131
128 if (paginaActual !== 1) { 132 if (paginaActual !== 1) {
129 paginas.unshift(1); 133 paginas.unshift(1);
130 } 134 }
131 135
132 if (paginaActual !== $scope.lastPage) { 136 if (paginaActual !== $scope.lastPage) {
133 paginas.push($scope.lastPage); 137 paginas.push($scope.lastPage);
134 } 138 }
135 139
136 return paginas; 140 return paginas;
137 } 141 }
138 142
139 function primera() { 143 function primera() {
140 $scope.selectedProducto = 0; 144 $scope.selectedProducto = 0;
141 } 145 }
142 146
143 function anterior() { 147 function anterior() {
144 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) { 148 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) {
145 retrocederPagina(); 149 retrocederPagina();
146 } else { 150 } else {
147 $scope.selectedProducto--; 151 $scope.selectedProducto--;
148 } 152 }
149 } 153 }
150 154
151 function siguiente() { 155 function siguiente() {
152 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) { 156 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1 ) {
153 $scope.selectedProducto++; 157 $scope.selectedProducto++;
154 } else { 158 } else {
155 avanzarPagina(); 159 avanzarPagina();
156 } 160 }
157 } 161 }
158 162
159 function retrocederPagina() { 163 function retrocederPagina() {
160 if ($scope.currentPage > 1) { 164 if ($scope.currentPage > 1) {
161 $scope.selectPage($scope.currentPage - 1); 165 $scope.selectPage($scope.currentPage - 1);
162 $scope.selectedProducto = $scope.numPerPage - 1; 166 $scope.selectedProducto = $scope.numPerPage - 1;
163 } 167 }
164 } 168 }
165 169
166 function avanzarPagina() { 170 function avanzarPagina() {
167 if ($scope.currentPage < $scope.lastPage) { 171 if ($scope.currentPage < $scope.lastPage) {
168 $scope.selectPage($scope.currentPage + 1); 172 $scope.selectPage($scope.currentPage + 1);
169 $scope.selectedProducto = 0; 173 $scope.selectedProducto = 0;
170 } 174 }
171 } 175 }
172 } 176 }
173 ] 177 ]
174 ); 178 );
175 179
src/views/modal-busqueda-productos.html
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 ladda="searchLoading"
7 type="text" 8 type="text"
8 class="form-control" 9 class="form-control"
9 placeholder="Busqueda" 10 placeholder="Busqueda"
10 ng-model="filters" 11 ng-model="filters"
11 ng-change="search()" 12 ng-change="search()"
12 ng-keydown="busquedaDown($event.keyCode)" 13 ng-keydown="busquedaDown($event.keyCode)"
13 ng-keypress="busquedaPress($event.keyCode)" 14 ng-keypress="busquedaPress($event.keyCode)"
14 foca-focus="selectedProducto == -1" 15 foca-focus="selectedProducto == -1"
15 ng-focus="selectedProducto = -1" 16 ng-focus="selectedProducto = -1"
16 > 17 >
17 <div class="input-group-append"> 18 <div class="input-group-append">
18 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)"> 19 <button
20 ladda="searchLoading"
21 class="btn btn-outline-secondary"
22 type="button"
23 ng-click="busquedaPress(13)"
24 >
19 <i class="fa fa-search" aria-hidden="true"></i> 25 <i class="fa fa-search" aria-hidden="true"></i>
20 </button> 26 </button>
21 </div> 27 </div>
22 </div> 28 </div>
23 <table ng-show="primerBusqueda" class="table table-striped table-sm"> 29 <table ng-show="primerBusqueda" class="table table-striped table-sm">
24 <thead> 30 <thead>
25 <tr> 31 <tr>
26 <th>Sec.</th> 32 <th>Sec.</th>
27 <th>Cod.</th> 33 <th>Cod.</th>
28 <th>Descripción</th> 34 <th>Descripción</th>
29 <th>P. Base</th> 35 <th>P. Base</th>
30 <th></th> 36 <th></th>
31 </tr> 37 </tr>
32 </thead> 38 </thead>
33 <tbody> 39 <tbody>
34 <tr ng-show="currentPageProductos.length == 0 && primerBusqueda"> 40 <tr ng-show="currentPageProductos.length == 0 && primerBusqueda">
35 <td colspan="5"> 41 <td colspan="5">
36 No se encontraron resultados. 42 No se encontraron resultados.
37 </td> 43 </td>
38 </tr> 44 </tr>
39 <tr class="selectable" 45 <tr class="selectable"
40 ng-repeat="(key,producto) in currentPageProductos" 46 ng-repeat="(key,producto) in currentPageProductos"
41 ng-click="select(producto)"> 47 ng-click="select(producto)">
42 <td ng-bind="producto.sector"></td> 48 <td ng-bind="producto.sector"></td>
43 <td ng-bind="producto.codigo"></td> 49 <td ng-bind="producto.codigo"></td>
44 <td ng-bind="producto.descripcion"></td> 50 <td ng-bind="producto.descripcion"></td>
45 <td ng-bind="producto.precio | currency"></td> 51 <td ng-bind="producto.precio | currency"></td>
46 <td> 52 <td>
47 <button 53 <button
48 type="button" 54 type="button"
49 class="btn btn-xs p-1 float-right" 55 class="btn btn-xs p-1 float-right"
50 ng-class="{ 56 ng-class="{
51 'btn-secondary': selectedProducto != key, 57 'btn-secondary': selectedProducto != key,
52 'btn-primary': selectedProducto == key 58 'btn-primary': selectedProducto == key
53 }" 59 }"
54 foca-focus="selectedProducto == {{key}}" 60 foca-focus="selectedProducto == {{key}}"
55 ng-keydown="itemProducto($event.keyCode)" 61 ng-keydown="itemProducto($event.keyCode)"
56 > 62 >
57 <i class="fa fa-arrow-right" aria-hidden="true"></i> 63 <i class="fa fa-arrow-right" aria-hidden="true"></i>
58 </button> 64 </button>
59 </td> 65 </td>
60 </tr> 66 </tr>
61 </tbody> 67 </tbody>
62 </table> 68 </table>
63 <nav ng-show="currentPageProductos.length > 0 && primerBusqueda"> 69 <nav ng-show="currentPageProductos.length > 0 && primerBusqueda">
64 <ul class="pagination pagination-sm justify-content mb-0"> 70 <ul class="pagination pagination-sm justify-content mb-0">
65 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 71 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
66 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 72 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
67 <span aria-hidden="true">&laquo;</span> 73 <span aria-hidden="true">&laquo;</span>
68 <span class="sr-only">Anterior</span> 74 <span class="sr-only">Anterior</span>
69 </a> 75 </a>
70 </li> 76 </li>
71 <li 77 <li
72 class="page-item" 78 class="page-item"
73 ng-repeat="pagina in paginas" 79 ng-repeat="pagina in paginas"
74 ng-class="{'active': pagina == currentPage}" 80 ng-class="{'active': pagina == currentPage}"
75 > 81 >
76 <a 82 <a
77 class="page-link" 83 class="page-link"
78 href="#" 84 href="#"
79 ng-click="selectPage(pagina)" 85 ng-click="selectPage(pagina)"
80 ng-bind="pagina" 86 ng-bind="pagina"
81 ></a> 87 ></a>
82 </li> 88 </li>
83 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 89 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
84 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 90 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
85 <span aria-hidden="true">&raquo;</span> 91 <span aria-hidden="true">&raquo;</span>
86 <span class="sr-only">Siguiente</span> 92 <span class="sr-only">Siguiente</span>
87 </a> 93 </a>
88 </li> 94 </li>
89 </ul> 95 </ul>
90 </nav> 96 </nav>
91 </div> 97 </div>
92 <div class="modal-footer py-1"> 98 <div class="modal-footer py-1">
93 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 99 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
94 </div> 100 </div>
95 101