Nicolás Guarnieri / foca-modal-vendedores

Download as
Browse Code »

Commit e72617cd09d6887ecaaa7ad790b1290a6a769dd8

Authored by Nicolás Guarnieri
2 parents faa662f1ed 84c688188c
Exists in master

Merge branch 'master' into 'master' 

Master

See merge request modulos-npm/foca-modal-vendedores!2
Showing 7 changed files   Show diff stats
1 /node_modules 1 /node_modules
2 /dist 2 /dist
3 /tmp 3 /tmp
4 package-lock\.json 4 package-lock\.json
5
6 src/etc/develop\.js 5 src/etc/develop\.js
7 6
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 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: 'focaBusquedaProductos', 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', function() {
35 pump( 35 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-busqueda-productos.js'), 41 concat('foca-modal-vendedores.js'),
42 gulp.dest(paths.tmp), 42 gulp.dest(paths.tmp),
43 rename('foca-busqueda-productos.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 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'); 61 gulp.start('templates');
62 }); 62 });
63 63
64 gulp.task('webserver', function() { 64 gulp.task('webserver', function() {
65 pump [ 65 pump [
66 connect.server({port: 3000}) 66 connect.server({port: 3000})
67 ] 67 ]
68 }); 68 });
69 69
70 gulp.task('default', ['webserver']); 70 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 17
17 <!-- BUILD --> 18 <!-- BUILD -->
18 <script src="src/js/app.js"></script> 19 <script src="src/js/app.js"></script>
19 <script src="src/js/controller.js"></script> 20 <script src="src/js/controller.js"></script>
20 <script src="src/js/service.js"></script> 21 <script src="src/js/service.js"></script>
21 22
22 <!-- /BUILD --> 23 <!-- /BUILD -->
23 24
24 <!-- CONFIG PARA DEVELOP --> 25 <!-- CONFIG PARA DEVELOP -->
25 <script type="text/javascript"> 26 <script type="text/javascript">
26 angular.module('focaModalVendedores') 27 angular.module('focaModalVendedores')
27 .controller('controller', ['$uibModal', function ($uibModal) { 28 .controller('controller', ['$uibModal', function ($uibModal) {
28 var modalInstance = $uibModal.open( 29 var modalInstance = $uibModal.open(
29 { 30 {
30 ariaLabelledBy: 'Busqueda de Vendedores', 31 ariaLabelledBy: 'Busqueda de Vendedores',
31 templateUrl: 'src/views/modal-vendedores.html', 32 templateUrl: 'src/views/modal-vendedores.html',
32 controller: 'modalVendedoresCtrl', 33 controller: 'modalVendedoresCtrl',
33 size: 'lg' 34 size: 'lg'
34 } 35 }
35 ); 36 );
36 }]); 37 }]);
37 </script> 38 </script>
38 </head> 39 </head>
39 40
40 <body ng-controller="controller"> 41 <body ng-controller="controller">
41 <style> 42 <style>
42 .p-5 { 43 .p-5 {
43 padding: 5px !important; 44 padding: 5px !important;
44 } 45 }
45 </style> 46 </style>
46 </body> 47 </body>
47 48
48 </html> 49 </html>
1 { 1 {
2 "name": "foca-navegacion-doble", 2 "name": "foca-modal-vendedores",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Menu de navegacion de doble entrada", 4 "description": "Modal búsqueda de 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 "compile": "gulp templates && gulp uglify",
9 "pre-commit": [
10 "gulp-pre-commit"
11 ],
12 "postinstall": "npm run compile && rm -R src && rm index.html && rm .jshintrc && rm gulpfile.js", 9 "postinstall": "npm run compile && rm -R src && rm index.html && rm .jshintrc && rm gulpfile.js",
13 "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" 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"
14 }, 11 },
15 "repository": { 12 "repository": {
16 "type": "git", 13 "type": "git",
17 "url": "https://192.168.0.11/modulos-npm/foca-navegacion-doble" 14 "url": "https://192.168.0.11/modulos-npm/foca-modal-vendedores.git"
18 }, 15 },
19 "author": "Nicolás Guarnieri", 16 "author": "Foca Software",
20 "license": "ISC", 17 "license": "ISC",
21 "peerDependencies": { 18 "peerDependencies": {
22 "angular": "^1.7.4", 19 "angular": "^1.7.4",
23 "bootstrap": "^4.1.3", 20 "bootstrap": "^4.1.3",
24 "font-awesome": "^4.7.0", 21 "font-awesome": "^4.7.0",
25 "ui-bootstrap4": "^3.0.4", 22 "ui-bootstrap4": "^3.0.4",
26 "gulp": "^3.9.1", 23 "gulp": "^3.9.1",
27 "gulp-angular-templatecache": "^2.2.1", 24 "gulp-angular-templatecache": "^2.2.1",
28 "gulp-concat": "^2.6.1", 25 "gulp-concat": "^2.6.1",
29 "gulp-connect": "^5.6.1", 26 "gulp-connect": "^5.6.1",
30 "gulp-htmlmin": "^5.0.1", 27 "gulp-htmlmin": "^5.0.1",
31 "gulp-rename": "^1.4.0", 28 "gulp-rename": "^1.4.0",
32 "gulp-replace": "^1.0.0", 29 "gulp-replace": "^1.0.0",
33 "gulp-uglify": "^3.0.1", 30 "gulp-uglify": "^3.0.1",
34 "jquery": "^3.3.1", 31 "jquery": "^3.3.1",
35 "pump": "^3.0.0" 32 "pump": "^3.0.0"
36 }, 33 },
37 "devDependencies": { 34 "devDependencies": {
38 "angular": "^1.7.4", 35 "angular": "^1.7.4",
39 "bootstrap": "^4.1.3", 36 "bootstrap": "^4.1.3",
40 "font-awesome": "^4.7.0", 37 "font-awesome": "^4.7.0",
41 "gulp": "^3.9.1", 38 "gulp": "^3.9.1",
42 "gulp-angular-templatecache": "^2.2.1", 39 "gulp-angular-templatecache": "^2.2.1",
43 "gulp-concat": "^2.6.1", 40 "gulp-concat": "^2.6.1",
44 "gulp-connect": "^5.6.1", 41 "gulp-connect": "^5.6.1",
45 "gulp-htmlmin": "^5.0.1", 42 "gulp-htmlmin": "^5.0.1",
46 "gulp-jshint": "^2.1.0", 43 "gulp-jshint": "^2.1.0",
47 "gulp-rename": "^1.4.0", 44 "gulp-rename": "^1.4.0",
48 "gulp-replace": "^1.0.0", 45 "gulp-replace": "^1.0.0",
49 "gulp-uglify": "^3.0.1", 46 "gulp-uglify": "^3.0.1",
50 "jasmine-core": "^3.2.1", 47 "jasmine-core": "^3.2.1",
51 "jquery": "^3.3.1", 48 "jquery": "^3.3.1",
52 "jshint": "^2.9.6", 49 "jshint": "^2.9.6",
53 "pre-commit": "^1.2.2", 50 "pre-commit": "^1.2.2",
54 "pump": "^3.0.0", 51 "pump": "^3.0.0",
55 "ui-bootstrap4": "^3.0.4" 52 "ui-bootstrap4": "^3.0.4"
56 } 53 }
57 } 54 }
58 55
1 angular.module('focaModalVendedores', ['ui.bootstrap']); 1 angular.module('focaModalVendedores', ['ui.bootstrap', 'focaDirectivas']);
2 2
src/js/controller.js
Diff comments   View file @ e72617c
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 var json = {
9 nombre: '' 9 nombre: ''
10 } 10 }
11 focaVendedoresService.getVendedores(json).then( 11 focaVendedoresService.getVendedores(json).then(
12 function (res) { 12 function (res) {
13 $scope.vendedores = res.data; 13 $scope.vendedores = res.data;
14 $scope.search(); 14 $scope.search();
15 }); 15 });
16 16
17 // pagination 17 // pagination
18 $scope.numPerPage = 10; 18 $scope.numPerPage = 10;
19 $scope.currentPage = 1; 19 $scope.currentPage = 1;
20 $scope.filteredVendedores = []; 20 $scope.filteredVendedores = [];
21 $scope.currentPageVendedores = []; 21 $scope.currentPageVendedores = [];
22 $scope.selectVendedores = 0; 22 $scope.selectVendedores = -1;
23 23
24 $scope.search = function () { 24 $scope.search = function () {
25 $scope.filteredVendedores = $filter('filter')($scope.vendedores, { $: $scope.filters }); 25 $scope.filteredVendedores = $filter('filter')($scope.vendedores, { $: $scope.filters });
26 $scope.resetPage(); 26 $scope.resetPage();
27 } 27 }
28 28
29 $scope.resetPage = function () { 29 $scope.resetPage = function () {
30 $scope.currentPage = 1; 30 $scope.currentPage = 1;
31 $scope.selectPage(1); 31 $scope.selectPage(1);
32 } 32 }
33 33
34 $scope.selectPage = function (page) { 34 $scope.selectPage = function (page) {
35 var start = (page - 1) * $scope.numPerPage; 35 var start = (page - 1) * $scope.numPerPage;
36 var end = start + $scope.numPerPage; 36 var end = start + $scope.numPerPage;
37 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end); 37 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end);
38 } 38 }
39 39
40 $scope.select = function(vendedor) { 40 $scope.select = function (vendedor) {
41 $uibModalInstance.close(vendedor); 41 $uibModalInstance.close(vendedor);
42 } 42 }
43 43
44 $scope.cancel = function() { 44 $scope.cancel = function () {
45 $uibModalInstance.dismiss('cancel'); 45 $uibModalInstance.dismiss('cancel');
46 } 46 }
47 $scope.busquedaDown = function (key) {
48 if (key === 40) {
49 primera(key);
50 }
51 };
47 52
48 $scope.enter = function(key) { 53 $scope.busquedaPress = function (key) {
49 if (key === 13) { 54 if (key === 13) {
50 console.table($scope.currentPageVendedores); 55 primera(key);
56 }
57 };
58
59 $scope.itemProducto = function (key) {
60 if (key === 38) {
61 anterior(key);
62 }
63
64 if (key === 40) {
65 siguiente(key);
66 }
67
68 if (key === 37) {
69 retrocederPagina();
70 }
71
72 if (key === 39) {
73 avanzarPagina();
74 }
75 };
76
77 function calcularPages(paginaActual) {
78 var paginas = [];
79 paginas.push(paginaActual);
80
81 if (paginaActual - 1 > 1) {
82
83 paginas.unshift(paginaActual - 1);
84 if (paginaActual - 2 > 1) {
85 paginas.unshift(paginaActual - 2);
86 }
87 }
88
89 if (paginaActual + 1 < $scope.lastPage) {
90 paginas.push(paginaActual + 1);
91 if (paginaActual + 2 < $scope.lastPage) {
92 paginas.push(paginaActual + 2);
93 }
94 }
95
96 if (paginaActual !== 1) {
97 paginas.unshift(1);
98 }
99
100 if (paginaActual !== $scope.lastPage) {
101 paginas.push($scope.lastPage);
102 }
103
104 return paginas;
105 }
106
107 function primera() {
108 $scope.selectedProducto = 0;
109 }
110
111 function anterior() {
112 if ($scope.selectedProducto === 0 && $scope.currentPage > 1) {
113 retrocederPagina();
114 } else {
115 $scope.selectedProducto--;
116 }
117 }
118
119 function siguiente() {
120 if ($scope.selectedProducto < $scope.currentPageProductos.length - 1) {
121 $scope.selectedProducto++;
122 } else {
123 avanzarPagina();
124 }
125 }
126
127 function retrocederPagina() {
128 if ($scope.currentPage > 1) {
129 $scope.selectPage($scope.currentPage - 1);
130 $scope.selectedProducto = $scope.numPerPage - 1;
131 }
132 }
133
134 function avanzarPagina() {
135 if ($scope.currentPage < $scope.lastPage) {
136 $scope.selectPage($scope.currentPage + 1);
137 $scope.selectedProducto = 0;
51 } 138 }
52 } 139 }
53 }] 140 }]
54 ) 141 )
55 142
src/views/modal-vendedores.html
Diff comments   View file @ e72617c
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 6 <input type="text" class="form-control" placeholder="Busqueda" ng-model="filters" ng-change="search()"
7 type="text" 7 ng-keypress="enter($event.keyCode)">
8 class="form-control"
9 placeholder="Busqueda"
10 ng-model="filters"
11 ng-change="search()"
12 ng-keypress="enter($event.keyCode)"
13 >
14 <table class="table table-striped table-sm"> 8 <table class="table table-striped table-sm">
15 <thead> 9 <thead>
16 <tr> 10 <tr>
17 <th> 11 <th>
18 Código 12 Código
19 </th> 13 </th>
20 <th> 14 <th>
21 Nombre 15 Nombre
22 </th> 16 </th>
23 <th></th> 17 <th></th>
24 </tr> 18 </tr>
25 </thead> 19 </thead>
26 <tbody> 20 <tbody>
27 <tr ng-repeat="vendedor in filteredVendedores"> 21 <tr ng-repeat="vendedor in filteredVendedores">
28 <td ng-bind="vendedor.CodVen"></td> 22 <td ng-bind="vendedor.CodVen"></td>
29 <td ng-bind="vendedor.NomVen"></td> 23 <td ng-bind="vendedor.NomVen"></td>
30 <td> 24 <td>
31 <button type="button" class="btn btn-secondary p-5 float-right mr-1" ng-click="select(producto)"> 25 <button type="button" class="btn p-2 float-right" ng-class="{
32 <i class="fa fa-check" aria-hidden="true"></i> 26 'btn-secondary': selectVendedores != key,
27 'btn-primary': selectVendedores == key
28 }"
29 ng-click="select(vendedor)" foca-focus="selectVendedores == {{key}}" ng-keydown="itemProducto($event.keyCode)">
30 <i class="fa fa-arrow-right" aria-hidden="true"></i>
33 </button> 31 </button>
34 </td> 32 </td>
35 </tr> 33 </tr>
36 </tbody> 34 </tbody>
37 </table> 35 </table>
36 <nav>
37 <ul class="pagination justify-content-end">
38 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
39 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
40 <span aria-hidden="true">&laquo;</span>
41 <span class="sr-only">Anterior</span>
42 </a>
43 </li>
44 <li class="page-item" ng-repeat="pagina in paginas" ng-class="{'active': pagina == currentPage}">
45 <a class="page-link" href="#" ng-click="selectPage(pagina)" ng-bind="pagina"></a>
46 </li>
47 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
48 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
49 <span aria-hidden="true">&raquo;</span>
50 <span class="sr-only">Siguiente</span>
51 </a>
52 </li>
53 </ul>