Jose Pinto / foca-modal-proveedor

Download as
Browse Code ยป

Commit e78f6a3735ff472d13b0717beb2967011633ca03

Authored by Pablo Marco del Pont
2 parents 0db0096410 d93be438b4
Exists in master

Merge branch 'master' into 'master' 

paginacion y navegacion por teclado

See merge request modulos-npm/foca-modal-petroleras!2
Showing 9 changed files   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,13 +17,13 @@ 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/', ''),
24 24 htmlmin(),
25 25 templateCache('views.js', {
26   - module: 'focaBusquedaProductos',
  26 + module: 'focaModalPetroleras',
27 27 root: ''
28 28 }),
29 29 gulp.dest(paths.tmp)
... ... @@ -31,16 +31,16 @@ 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,
39 39 'tmp/views.js'
40 40 ]),
41   - concat('foca-busqueda-productos.js'),
  41 + concat('foca-modal-petroleras.js'),
42 42 gulp.dest(paths.tmp),
43   - rename('foca-busqueda-productos.min.js'),
  43 + rename('foca-modal-petroleras.min.js'),
44 44 uglify(),
45 45 gulp.dest(paths.dist)
46 46 ]
... ... @@ -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,6 +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="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
16 17  
17 18 <!-- BUILD -->
18 19 <script src="src/js/app.js"></script>
... ... @@ -22,17 +23,33 @@
22 23 <!-- /BUILD -->
23 24  
24 25 <!-- CONFIG PARA DEVELOP -->
  26 + <script src="src/etc/develop.js"></script>
  27 +
25 28 <script type="text/javascript">
26 29 angular.module('focaModalPetroleras')
27   - .controller('controller', ['$uibModal', function ($uibModal) {
28   - var modalInstance = $uibModal.open(
29   - {
30   - ariaLabelledBy: 'Busqueda de Petroleras',
31   - templateUrl: 'src/views/modal-petroleras.html',
32   - controller: 'modalPetrolerasCtrl',
33   - size: 'lg'
34   - }
35   - );
  30 + .controller('controller', ['$uibModal', '$timeout', function ($uibModal, $timeout) {
  31 + openModal();
  32 +
  33 + function openModal() {
  34 + var modalInstance = $uibModal.open(
  35 + {
  36 + ariaLabelledBy: 'Busqueda de Petroleras',
  37 + templateUrl: 'src/views/modal-petroleras.html',
  38 + controller: 'modalPetrolerasCtrl',
  39 + size: 'lg'
  40 + }
  41 + );
  42 +
  43 + modalInstance.result.then(
  44 + function (selectedItem) {
  45 + console.info(selectedItem);
  46 + $timeout(openModal, 500);
  47 + }, function () {
  48 + console.info('modal-component dismissed at: ' + new Date());
  49 + $timeout(openModal, 500);
  50 + }
  51 + );
  52 + }
36 53 }]);
37 54 </script>
38 55 </head>
1 1 {
2   - "name": "foca-navegacion-doble",
3   - "version": "0.0.1",
4   - "description": "Menu de navegacion de doble entrada",
5   - "main": "index.js",
  2 + "name": "foca-modal-petroleras",
  3 + "version": "0.0.2",
  4 + "description": "Modal para seleccionar petroleras",
6 5 "scripts": {
7 6 "test": "echo \"Error: no test specified\" && exit 1",
8   - "compile": "gulp templates && gulp uglify",
9   - "pre-commit": [
10   - "gulp-pre-commit"
11   - ],
  7 + "gulp-pre-commit": "gulp pre-commit",
  8 + "compile": "gulp uglify",
12 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 gulp-uglify jasmine-core pre-commit gulp-angular-templatecache ui-bootstrap4 git+https://192.168.0.11/modulos-npm/foca-directivas"
14 11 },
  12 + "pre-commit": [
  13 + "gulp-pre-commit"
  14 + ],
15 15 "repository": {
16 16 "type": "git",
17   - "url": "https://192.168.0.11/modulos-npm/foca-navegacion-doble"
  17 + "url": "https://192.168.0.11/modulos-npm/foca-modal-petroleras"
18 18 },
19 19 "author": "Nicolรกs Guarnieri",
20 20 "license": "ISC",
... ... @@ -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   - "angular": "^1.7.4",
  39 + "angular": "^1.7.5",
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",
... ... @@ -52,6 +54,6 @@
52 54 "jshint": "^2.9.6",
53 55 "pre-commit": "^1.2.2",
54 56 "pump": "^3.0.0",
55   - "ui-bootstrap4": "^3.0.4"
  57 + "ui-bootstrap4": "^3.0.5"
56 58 }
57 59 }
src/etc/develop.js.ejemplo
Diff comments   View file @ e78f6a3
1   -angular.module('focaBusquedaProductos')
  1 +angular.module('focaModalPetroleras')
2 2 .constant("API_ENDPOINT", {
3 3 'URL': '//127.0.0.1:9000'
4 4 });
1   -angular.module('focaModalPetroleras', ['ui.bootstrap']);
  1 +angular.module('focaModalPetroleras', ['ui.bootstrap', 'focaDirectivas']);
src/js/controller.js
Diff comments   View file @ e78f6a3
1 1 angular.module('focaModalPetroleras')
2   - .controller('modalPetrolerasCtrl', [
3   - '$filter',
4   - '$scope',
5   - '$uibModalInstance',
6   - 'focaPetrolerasService',
7   - function ($filter, $scope, $uibModalInstance, focaPetrolerasService) {
8   - var json = {
9   - razonCuitCod: ''
10   - }
11   - focaPetrolerasService.getPetroleras(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.filteredPetroleras = [];
21   - $scope.currentPagePetroleras = [];
22   - $scope.selectPetroleras = 0;
23   -
24   - $scope.search = function () {
25   - $scope.filteredPetroleras = $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.currentPagePetroleras = $scope.filteredPetroleras.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   -
48   - $scope.enter = function(key) {
49   - if (key === 13) {
50   - console.table($scope.currentPagePetroleras);
51   - }
52   - }
53   - }]
54   - )
  2 + .controller('modalPetrolerasCtrl', [
  3 + '$filter',
  4 + '$scope',
  5 + '$uibModalInstance',
  6 + 'focaPetrolerasService',
  7 + function ($filter, $scope, $uibModalInstance, focaPetrolerasService) {
  8 + var json = {razonCuitCod: ''};
  9 +
  10 + focaPetrolerasService.getPetroleras(json).then(
  11 + function (res) {
  12 + for (var i = res.data.length - 1; i >= 0; i--) {
  13 + if (res.data[i].COD === 0) {
  14 + delete res.data[i];
  15 + }
  16 + }
  17 +
  18 + $scope.petroleras = res.data;
  19 + $scope.search();
  20 + });
  21 +
  22 + // pagination
  23 + $scope.numPerPage = 10;
  24 + $scope.currentPage = 1;
  25 + $scope.filteredPetroleras = [];
  26 + $scope.currentPagePetroleras = [];
  27 + $scope.selectedPetroleras = -1;
  28 +
  29 + $scope.search = function () {
  30 + $scope.filteredPetroleras = $filter('filter')(
  31 + $scope.petroleras, {$: $scope.filters}
  32 + );
  33 +
  34 + $scope.lastPage = Math.ceil(
  35 + $scope.filteredPetroleras.length / $scope.numPerPage
  36 + );
  37 +
  38 + $scope.resetPage();
  39 + };
  40 +
  41 + $scope.resetPage = function () {
  42 + $scope.currentPage = 1;
  43 + $scope.selectPage(1);
  44 + };
  45 +
  46 + $scope.selectPage = function (page) {
  47 + console.info(page);
  48 + var start = (page - 1) * $scope.numPerPage;
  49 + var end = start + $scope.numPerPage;
  50 + $scope.paginas = [];
  51 + $scope.paginas = calcularPages(page);
  52 + $scope.currentPagePetroleras = $scope.filteredPetroleras.slice(start, end);
  53 + $scope.currentPage = page;
  54 + };
  55 +
  56 + $scope.select = function(petrolera) {
  57 + $uibModalInstance.close(petrolera);
  58 + };
  59 +
  60 + $scope.cancel = function() {
  61 + $uibModalInstance.dismiss('cancel');
  62 + };
  63 +
  64 + $scope.busquedaDown = function(key) {
  65 + if (key === 40) {
  66 + primera(key);
  67 + }
  68 + };
  69 +
  70 + $scope.busquedaPress = function(key) {
  71 + if (key === 13) {
  72 + primera(key);
  73 + }
  74 + };
  75 +
  76 + $scope.itemPetrolera = function(key) {
  77 + if (key === 38) {
  78 + anterior(key);
  79 + }
  80 +
  81 + if (key === 40) {
  82 + siguiente(key);
  83 + }
  84 +
  85 + if (key === 37) {
  86 + retrocederPagina();
  87 + }
  88 +
  89 + if (key === 39) {
  90 + avanzarPagina();
  91 + }
  92 + };
  93 +
  94 + function calcularPages(paginaActual) {
  95 + var paginas = [];
  96 + paginas.push(paginaActual);
  97 +
  98 + if (paginaActual - 1 > 1) {
  99 +
  100 + paginas.unshift(paginaActual - 1);
  101 + if (paginaActual - 2 > 1) {
  102 + paginas.unshift(paginaActual - 2);
  103 + }
  104 + }
  105 +
  106 + if (paginaActual + 1 < $scope.lastPage) {
  107 + paginas.push(paginaActual + 1);
  108 + if (paginaActual + 2 < $scope.lastPage) {
  109 + paginas.push(paginaActual + 2);
  110 + }
  111 + }
  112 +
  113 + if (paginaActual !== 1) {
  114 + paginas.unshift(1);
  115 + }
  116 +
  117 + if (paginaActual !== $scope.lastPage) {
  118 + paginas.push($scope.lastPage);
  119 + }
  120 +
  121 + return paginas;
  122 + }
  123 +
  124 + function primera() {
  125 + $scope.selectedPetroleras = 0;
  126 + }
  127 +
  128 + function anterior() {
  129 + if ($scope.selectedPetroleras === 0 && $scope.currentPage > 1) {
  130 + retrocederPagina();
  131 + } else {
  132 + $scope.selectedPetroleras--;
  133 + }
  134 + }
  135 +
  136 + function siguiente() {
  137 + if ($scope.selectedPetroleras < $scope.currentPagePetroleras.length - 1 ) {
  138 + $scope.selectedPetroleras++;
  139 + } else {
  140 + avanzarPagina();
  141 + }
  142 + }
  143 +
  144 + function retrocederPagina() {
  145 + if ($scope.currentPage > 1) {
  146 + $scope.selectPage($scope.currentPage - 1);
  147 + $scope.selectedPetroleras = $scope.numPerPage - 1;
  148 + }
  149 + }
  150 +
  151 + function avanzarPagina() {
  152 + if ($scope.currentPage < $scope.lastPage) {
  153 + $scope.selectPage($scope.currentPage + 1);
  154 + $scope.selectedPetroleras = 0;
  155 + }
  156 + }
  157 + }]
  158 + );
1 1 angular.module('focaModalPetroleras')
2   - .service('focaPetrolerasService', ['$http', function($http) {
3   - var configRoute ='http://localhost:9900';
  2 + .service('focaPetrolerasService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
4 3 return {
5 4 getPetroleras: function(json) {
6   - return $http.post(configRoute + '/petroleras', json);
  5 + return $http.post(API_ENDPOINT.URL + '/petroleras', json);
7 6 }
8   - }
9   - }])
  7 + };
  8 + }]);
src/views/modal-petroleras.html
Diff comments   View file @ e78f6a3
... ... @@ -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="selectedPetroleras == -1"
  15 + ng-focus="selectedPetroleras = -1"
13 16 >
14 17 <table class="table table-striped table-sm">
15 18 <thead>
... ... @@ -21,18 +24,56 @@
21 24 </tr>
22 25 </thead>
23 26 <tbody>
24   - <tr ng-repeat="petrolera in filteredPetroleras">
  27 + <tr ng-repeat="(key, petrolera) in currentPagePetroleras">
25 28 <td ng-bind="petrolera.COD"></td>
26 29 <td ng-bind="petrolera.NOM"></td>
27 30 <td ng-bind="petrolera.CUIT"></td>
28 31 <td>
29   - <button type="button" class="btn btn-secondary p-5 float-right mr-1" ng-click="select(producto)">
30   - <i class="fa fa-check" aria-hidden="true"></i>
  32 + <button
  33 + type="button"
  34 + class="btn p-2 float-right"
  35 + ng-class="{
  36 + 'btn-secondary': selectedPetroleras != key,
  37 + 'btn-primary': selectedPetroleras == key
  38 + }"
  39 + ng-click="select(petrolera)"
  40 + foca-focus="selectedPetroleras == {{key}}"
  41 + ng-keydown="itemPetrolera($event.keyCode)"
  42 + >
  43 + <i class="fa fa-arrow-right" aria-hidden="true"></i>
31 44 </button>
32 45 </td>
33 46 </tr>
34 47 </tbody>
35 48 </table>
  49 + <nav>
  50 + <ul class="pagination justify-content-end">
  51 + <li class="page-item" ng-class="{'disabled': currentPage == 1}">
  52 + <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
  53 + <span aria-hidden="true">&laquo;</span>
  54 + <span class="sr-only">Anterior</span>
  55 + </a>
  56 + </li>
  57 + <li
  58 + class="page-item"
  59 + ng-repeat="pagina in paginas"
  60 + ng-class="{'active': pagina == currentPage}"
  61 + >
  62 + <a
  63 + class="page-link"
  64 + href="#"
  65 + ng-click="selectPage(pagina)"
  66 + ng-bind="pagina"
  67 + ></a>
  68 + </li>
  69 + <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
  70 + <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
  71 + <span aria-hidden="true">&raquo;</span>
  72 + <span class="sr-only">Siguiente</span>
  73 + </a>
  74 + </li>
  75 + </ul>
  76 + </nav>
36 77 </div>
37 78 </div>
38 79 <div class="modal-footer">