Eric Fernandez / foca-modal-vendedores

Download as
Browse Code »

Commit 773e0eeacffecebefd48d281eb724bbe8b49e37f

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

paginacion y navegacion por teclado

Showing 8 changed files with 236 additions and 185 deletions   Show diff stats
... ... @@ -32,7 +32,7 @@
32 32 "indent": 4,
33 33  
34 34 // Prohibit use of a variable before it is defined.
35   - "latedef": true,
  35 + "latedef": false,
36 36  
37 37 // Enforce line length to 100 characters
38 38 "maxlen": 100,
... ... @@ -17,7 +17,7 @@ var paths = {
17 17 };
18 18  
19 19 gulp.task('templates', function() {
20   - pump(
  20 + return pump(
21 21 [
22 22 gulp.src(paths.srcViews),
23 23 replace('views/', ''),
... ... @@ -31,8 +31,8 @@ gulp.task('templates', function() {
31 31 );
32 32 });
33 33  
34   -gulp.task('uglify', function() {
35   - pump(
  34 +gulp.task('uglify', ['templates'], function() {
  35 + return pump(
36 36 [
37 37 gulp.src([
38 38 paths.srcJS,
... ... @@ -48,7 +48,7 @@ gulp.task('uglify', function() {
48 48 });
49 49  
50 50 gulp.task('pre-commit', function() {
51   - pump(
  51 + return pump(
52 52 [
53 53 gulp.src(paths.srcJS),
54 54 jshint('.jshintrc'),
... ... @@ -58,7 +58,6 @@ gulp.task('pre-commit', function() {
58 58 );
59 59  
60 60 gulp.start('uglify');
61   - gulp.start('templates');
62 61 });
63 62  
64 63 gulp.task('webserver', function() {
... ... @@ -13,7 +13,7 @@
13 13 <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
14 14 <script src="node_modules/angular/angular.min.js"></script>
15 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 18 <!-- BUILD -->
19 19 <script src="src/js/app.js"></script>
... ... @@ -25,17 +25,35 @@
25 25 <!-- CONFIG PARA DEVELOP -->
26 26 <script type="text/javascript">
27 27 angular.module('focaModalVendedores')
28   - .controller('controller', ['$uibModal', function ($uibModal) {
29   - var modalInstance = $uibModal.open(
30   - {
31   - ariaLabelledBy: 'Busqueda de Vendedores',
32   - templateUrl: 'src/views/modal-vendedores.html',
33   - controller: 'modalVendedoresCtrl',
34   - size: 'lg'
35   - }
36   - );
  28 + .controller('controller', ['$uibModal', '$timeout', function($uibModal, $timeout) {
  29 + openModal();
  30 +
  31 + function openModal() {
  32 + var modalInstance = $uibModal.open(
  33 + {
  34 + ariaLabelledBy: 'Busqueda de Vendedores',
  35 + templateUrl: 'src/views/modal-vendedores.html',
  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 54 </script>
  55 +
  56 + <script src="src/etc/develop.js"></script>
39 57 </head>
40 58  
41 59 <body ng-controller="controller">
1 1 {
2 2 "name": "foca-modal-vendedores",
3 3 "version": "0.0.1",
4   - "description": "Modal búsqueda de vendedores",
  4 + "description": "Modal para seleccionar vendedores",
5 5 "main": "index.js",
6 6 "scripts": {
7 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 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 16 "repository": {
13 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 20 "author": "Foca Software",
17 21 "license": "ISC",
... ... @@ -29,11 +33,13 @@
29 33 "gulp-replace": "^1.0.0",
30 34 "gulp-uglify": "^3.0.1",
31 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 39 "devDependencies": {
35   - "angular": "^1.7.4",
  40 + "angular": "^1.7.5",
36 41 "bootstrap": "^4.1.3",
  42 + "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas",
37 43 "font-awesome": "^4.7.0",
38 44 "gulp": "^3.9.1",
39 45 "gulp-angular-templatecache": "^2.2.1",
... ... @@ -49,6 +55,6 @@
49 55 "jshint": "^2.9.6",
50 56 "pre-commit": "^1.2.2",
51 57 "pump": "^3.0.0",
52   - "ui-bootstrap4": "^3.0.4"
  58 + "ui-bootstrap4": "^3.0.5"
53 59 }
54 60 }
src/etc/develop.js.ejemplo
Diff comments   View file @ 773e0ee
1   -angular.module('focaBusquedaProductos')
  1 +angular.module('focaModalVendedores')
2 2 .constant("API_ENDPOINT", {
3 3 'URL': '//127.0.0.1:9000'
4 4 });
src/js/controller.js
Diff comments   View file @ 773e0ee
1 1 angular.module('focaModalVendedores')
2   - .controller('modalVendedoresCtrl', [
3   - '$filter',
4   - '$scope',
5   - '$uibModalInstance',
6   - 'focaVendedoresService',
7   - function ($filter, $scope, $uibModalInstance, focaVendedoresService) {
8   - var json = {
9   - nombre: ''
10   - }
11   - focaVendedoresService.getVendedores(json).then(
12   - function (res) {
13   - $scope.vendedores = res.data;
14   - $scope.search();
15   - });
16   -
17   - // pagination
18   - $scope.numPerPage = 10;
19   - $scope.currentPage = 1;
20   - $scope.filteredVendedores = [];
21   - $scope.currentPageVendedores = [];
22   - $scope.selectVendedores = -1;
23   -
24   - $scope.search = function () {
25   - $scope.filteredVendedores = $filter('filter')($scope.vendedores, { $: $scope.filters });
26   - $scope.resetPage();
27   - }
28   -
29   - $scope.resetPage = function () {
30   - $scope.currentPage = 1;
31   - $scope.selectPage(1);
32   - }
33   -
34   - $scope.selectPage = function (page) {
35   - var start = (page - 1) * $scope.numPerPage;
36   - var end = start + $scope.numPerPage;
37   - $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end);
38   - }
39   -
40   - $scope.select = function (vendedor) {
41   - $uibModalInstance.close(vendedor);
42   - }
43   -
44   - $scope.cancel = function () {
45   - $uibModalInstance.dismiss('cancel');
46   - }
47   - $scope.busquedaDown = function (key) {
48   - if (key === 40) {
49   - primera(key);
50   - }
51   - };
52   -
53   - $scope.busquedaPress = function (key) {
54   - if (key === 13) {
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;
138   - }
139   - }
140   - }]
141   - )
  2 + .controller('modalVendedoresCtrl', [
  3 + '$filter',
  4 + '$scope',
  5 + '$uibModalInstance',
  6 + 'focaVendedoresService',
  7 + function($filter, $scope, $uibModalInstance, focaVendedoresService) {
  8 + focaVendedoresService.getVendedores().then(
  9 + function(res) {
  10 + $scope.vendedores = res.data;
  11 + $scope.search();
  12 + }
  13 + );
  14 +
  15 + // pagination
  16 + $scope.numPerPage = 10;
  17 + $scope.currentPage = 1;
  18 + $scope.filteredVendedores = [];
  19 + $scope.currentPageVendedores = [];
  20 + $scope.selectedVendedor = -1;
  21 +
  22 + $scope.search = function() {
  23 + $scope.filteredVendedores = $filter('filter')(
  24 + $scope.vendedores, { $: $scope.filters }
  25 + );
  26 +
  27 + $scope.lastPage = Math.ceil(
  28 + $scope.filteredVendedores.length / $scope.numPerPage
  29 + );
  30 +
  31 + $scope.resetPage();
  32 + };
  33 +
  34 + $scope.resetPage = function() {
  35 + $scope.currentPage = 1;
  36 + $scope.selectPage(1);
  37 + };
  38 +
  39 + $scope.selectPage = function(page) {
  40 + var start = (page - 1) * $scope.numPerPage;
  41 + var end = start + $scope.numPerPage;
  42 + $scope.paginas = [];
  43 + $scope.paginas = calcularPages(page);
  44 + $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end);
  45 + $scope.currentPage = page;
  46 + };
  47 +
  48 + $scope.select = function(vendedor) {
  49 + $uibModalInstance.close(vendedor);
  50 + };
  51 +
  52 + $scope.cancel = function() {
  53 + $uibModalInstance.dismiss('cancel');
  54 + };
  55 +
  56 + $scope.busquedaDown = function(key) {
  57 + if (key === 40) {
  58 + primera(key);
  59 + }
  60 + };
  61 +
  62 + $scope.busquedaPress = function(key) {
  63 + if (key === 13) {
  64 + primera(key);
  65 + }
  66 + };
  67 +
  68 + $scope.itemVendedor = function(key) {
  69 + if (key === 38) {
  70 + anterior(key);
  71 + }
  72 +
  73 + if (key === 40) {
  74 + siguiente(key);
  75 + }
  76 +
  77 + if (key === 37) {
  78 + retrocederPagina();
  79 + }
  80 +
  81 + if (key === 39) {
  82 + avanzarPagina();
  83 + }
  84 + };
  85 +
  86 + function calcularPages(paginaActual) {
  87 + var paginas = [];
  88 + paginas.push(paginaActual);
  89 +
  90 + if (paginaActual - 1 > 1) {
  91 +
  92 + paginas.unshift(paginaActual - 1);
  93 + if (paginaActual - 2 > 1) {
  94 + paginas.unshift(paginaActual - 2);
  95 + }
  96 + }
  97 +
  98 + if (paginaActual + 1 < $scope.lastPage) {
  99 + paginas.push(paginaActual + 1);
  100 + if (paginaActual + 2 < $scope.lastPage) {
  101 + paginas.push(paginaActual + 2);
  102 + }
  103 + }
  104 +
  105 + if (paginaActual !== 1) {
  106 + paginas.unshift(1);
  107 + }
  108 +
  109 + if (paginaActual !== $scope.lastPage) {
  110 + paginas.push($scope.lastPage);
  111 + }
  112 +
  113 + return paginas;
  114 + }
  115 +
  116 + function primera() {
  117 + $scope.selectedVendedor = 0;
  118 + }
  119 +
  120 + function anterior() {
  121 + if ($scope.selectedVendedor === 0 && $scope.currentPage > 1) {
  122 + retrocederPagina();
  123 + } else {
  124 + $scope.selectedVendedor--;
  125 + }
  126 + }
  127 +
  128 + function siguiente() {
  129 + if ($scope.selectedVendedor < $scope.currentPageVendedores.length - 1) {
  130 + $scope.selectedVendedor++;
  131 + } else {
  132 + avanzarPagina();
  133 + }
  134 + }
  135 +
  136 + function retrocederPagina() {
  137 + if ($scope.currentPage > 1) {
  138 + $scope.selectPage($scope.currentPage - 1);
  139 + $scope.selectedVendedor = $scope.numPerPage - 1;
  140 + }
  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 + );
1 1 angular.module('focaModalVendedores')
2   - .service('focaVendedoresService', ['$http', function($http) {
3   - var configRoute ='http://localhost:9900';
  2 + .service('focaVendedoresService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
4 3 return {
5   - getVendedores: function(json) {
6   - return $http.post(configRoute + '/vendedores', json);
  4 + getVendedores: function() {
  5 + // TODO ACOMODAR PARA TURNOS AHORA 1 HARDCODEO
  6 + return $http.get(API_ENDPOINT.URL + '/vendedores/1');
7 7 }
8   - }
9   - }])
  8 + };
  9 + }]);
src/views/modal-vendedores.html
Diff comments   View file @ 773e0ee
... ... @@ -3,30 +3,40 @@
3 3 </div>
4 4 <div class="modal-body" id="modal-body">
5 5 <div class="input-group mb-3">
6   - <input type="text" class="form-control" placeholder="Busqueda" ng-model="filters" ng-change="search()"
7   - ng-keypress="enter($event.keyCode)">
  6 + <input
  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 17 <table class="table table-striped table-sm">
9 18 <thead>
10 19 <tr>
11   - <th>
12   - Código
13   - </th>
14   - <th>
15   - Nombre
16   - </th>
  20 + <th>Código</th>
  21 + <th>Nombre</th>
17 22 <th></th>
18 23 </tr>
19 24 </thead>
20 25 <tbody>
21   - <tr ng-repeat="vendedor in filteredVendedores">
  26 + <tr ng-repeat="(key, vendedor) in currentPageVendedores">
22 27 <td ng-bind="vendedor.CodVen"></td>
23 28 <td ng-bind="vendedor.NomVen"></td>
24 29 <td>
25   - <button type="button" class="btn p-2 float-right" ng-class="{
26   - 'btn-secondary': selectVendedores != key,
27   - 'btn-primary': selectVendedores == key
  30 + <button
  31 + type="button"
  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 40 <i class="fa fa-arrow-right" aria-hidden="true"></i>
31 41 </button>
32 42 </td>
... ... @@ -41,8 +51,17 @@
41 51 <span class="sr-only">Anterior</span>
42 52 </a>
43 53 </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>
  54 + <li
  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 65 </li>
47 66 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
48 67 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">