Eric Fernandez / foca-modal-proveedor

Download as
Browse Code »

Commit a77444589c8fdb71427636af1458aa1e32ca4d47

Authored by Eric Fernandez
1 parent d0de59b66f
Exists in master

primer búsqueda al presionar enter

Showing 4 changed files with 108 additions and 92 deletions   Show diff stats
1 <html ng-app="focaModalProveedores"> 1 <html ng-app="focaModalProveedor">
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="node_modules/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 src="src/etc/develop.js"></script> 26 <script src="src/etc/develop.js"></script>
27 27
28 <script type="text/javascript"> 28 <script type="text/javascript">
29 angular.module('focaModalProveedor') 29 angular.module('focaModalProveedor')
30 .controller('controller', ['$uibModal', '$timeout', function ($uibModal, $timeout) { 30 .controller('controller', ['$uibModal', '$timeout', function ($uibModal, $timeout) {
31 openModal(); 31 openModal();
32 32
33 function openModal() { 33 function openModal() {
34 var modalInstance = $uibModal.open( 34 var modalInstance = $uibModal.open(
35 { 35 {
36 ariaLabelledBy: 'Busqueda de Proveedores', 36 ariaLabelledBy: 'Busqueda de Proveedores',
37 templateUrl: 'src/views/modal-proveedor.html', 37 templateUrl: 'src/views/modal-proveedor.html',
38 controller: 'focaModalProveedorCtrl', 38 controller: 'focaModalProveedorCtrl',
39 size: 'lg' 39 size: 'lg'
40 } 40 }
41 ); 41 );
42 42
43 modalInstance.result.then( 43 modalInstance.result.then(
44 function (selectedItem) { 44 function (selectedItem) {
45 console.info(selectedItem); 45 console.info(selectedItem);
46 $timeout(openModal, 500); 46 $timeout(openModal, 500);
47 }, function () { 47 }, function () {
48 console.info('modal-component dismissed at: ' + new Date()); 48 console.info('modal-component dismissed at: ' + new Date());
49 $timeout(openModal, 500); 49 $timeout(openModal, 500);
50 } 50 }
51 ); 51 );
52 } 52 }
53 }]); 53 }]);
54 </script> 54 </script>
55 </head> 55 </head>
56 56
57 <body ng-controller="controller"> 57 <body ng-controller="controller">
58 <style> 58 <style>
59 .p-5 { 59 .p-5 {
60 padding: 5px !important; 60 padding: 5px !important;
61 } 61 }
62 </style> 62 </style>
63 </body> 63 </body>
64 64
65 </html> 65 </html>
1 { 1 {
2 "name": "foca-modal-proveedor", 2 "name": "foca-modal-proveedor",
3 "version": "0.0.2", 3 "version": "0.0.2",
4 "description": "Modal para seleccionar proveedores", 4 "description": "Modal para seleccionar proveedores",
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 angular bootstrap jquery font-awesome gulp gulp-concat gulp-jshint gulp-rename gulp-replace gulp-uglify-es gulp-clean jshint pump gulp-connect gulp-uglify jasmine-core pre-commit gulp-angular-templatecache ui-bootstrap4 git+https://debo.suite.repo/modulos-npm/foca-directivas" 10 "install-dev": "npm install angular bootstrap jquery font-awesome gulp gulp-concat gulp-jshint gulp-rename gulp-replace gulp-uglify-es gulp-clean jshint pump gulp-connect gulp-uglify jasmine-core pre-commit gulp-angular-templatecache ui-bootstrap4 gulp-htmlmin 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-proveedor" 17 "url": "https://debo.suite.repo/modulos-npm/foca-modal-proveedor"
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-clean": "^0.4.0", 28 "gulp-clean": "^0.4.0",
29 "gulp-concat": "^2.6.1", 29 "gulp-concat": "^2.6.1",
30 "gulp-connect": "^5.6.1", 30 "gulp-connect": "^5.6.1",
31 "gulp-htmlmin": "^5.0.1", 31 "gulp-htmlmin": "^5.0.1",
32 "gulp-rename": "^1.4.0", 32 "gulp-rename": "^1.4.0",
33 "gulp-replace": "^1.0.0", 33 "gulp-replace": "^1.0.0",
34 "gulp-uglify": "^3.0.1", 34 "gulp-uglify": "^3.0.1",
35 "jquery": "^3.3.1", 35 "jquery": "^3.3.1",
36 "pump": "^3.0.0", 36 "pump": "^3.0.0",
37 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas" 37 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas"
38 }, 38 },
39 "devDependencies": { 39 "devDependencies": {
40 "angular": "^1.7.5", 40 "angular": "^1.7.5",
41 "bootstrap": "^4.1.3", 41 "bootstrap": "^4.1.3",
42 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas", 42 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
43 "font-awesome": "^4.7.0", 43 "font-awesome": "^4.7.0",
44 "gulp": "^3.9.1", 44 "gulp": "^3.9.1",
45 "gulp-angular-templatecache": "^2.2.1", 45 "gulp-angular-templatecache": "^2.2.3",
46 "gulp-clean": "^0.4.0", 46 "gulp-clean": "^0.4.0",
47 "gulp-concat": "^2.6.1", 47 "gulp-concat": "^2.6.1",
48 "gulp-connect": "^5.6.1", 48 "gulp-connect": "^5.6.1",
49 "gulp-htmlmin": "^5.0.1", 49 "gulp-htmlmin": "^5.0.1",
50 "gulp-jshint": "^2.1.0", 50 "gulp-jshint": "^2.1.0",
51 "gulp-rename": "^1.4.0", 51 "gulp-rename": "^1.4.0",
52 "gulp-replace": "^1.0.0", 52 "gulp-replace": "^1.0.0",
53 "gulp-uglify": "^3.0.1", 53 "gulp-uglify": "^3.0.1",
54 "jasmine-core": "^3.2.1", 54 "jasmine-core": "^3.3.0",
55 "jquery": "^3.3.1", 55 "jquery": "^3.3.1",
56 "jshint": "^2.9.6", 56 "jshint": "^2.9.6",
57 "pre-commit": "^1.2.2", 57 "pre-commit": "^1.2.2",
58 "pump": "^3.0.0", 58 "pump": "^3.0.0",
59 "ui-bootstrap4": "^3.0.5" 59 "ui-bootstrap4": "^3.0.5"
60 },
61 "dependencies": {
62 "gulp-uglify-es": "^1.0.4"
60 } 63 }
61 } 64 }
62 65
src/js/controller.js
Diff comments   View file @ a774445
1 angular.module('focaModalProveedor') 1 angular.module('focaModalProveedor')
2 .controller('focaModalProveedorCtrl', [ 2 .controller('focaModalProveedorCtrl', [
3 '$filter', 3 '$filter',
4 '$scope', 4 '$scope',
5 '$uibModalInstance', 5 '$uibModalInstance',
6 'focaModalProveedorService', 6 'focaModalProveedorService',
7 function ($filter, $scope, $uibModalInstance, focaModalProveedorService) { 7 function ($filter, $scope, $uibModalInstance, focaModalProveedorService) {
8 var json = {razonCuitCod: ''};
9
10 focaModalProveedorService.getProveedores(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.proveedores = res.data;
19 $scope.search();
20 });
21 8
9 $scope.filters = '';
10 $scope.primerBusqueda = false;
22 // pagination 11 // pagination
23 $scope.numPerPage = 10; 12 $scope.numPerPage = 10;
24 $scope.currentPage = 1; 13 $scope.currentPage = 1;
25 $scope.filteredProveedores = []; 14 $scope.filteredProveedores = [];
26 $scope.currentPageProveedores = []; 15 $scope.currentPageProveedores = [];
27 $scope.selectedProveedores = -1; 16 $scope.selectedProveedores = -1;
28 17
18 $scope.busquedaPress = function(key) {
19 if (key === 13) {
20 var json = {
21 razonCuitCod: $scope.filters
22 };
23 focaModalProveedorService.getProveedores(json).then(
24 function (res) {
25 for (var i = res.data.length - 1; i >= 0; i--) {
26 if (res.data[i].COD === 0) {
27 delete res.data[i];
28 }
29 }
30 $scope.primerBusqueda = true;
31 $scope.proveedores = res.data;
32 $scope.search();
33 primera();
34 });
35 }
36 };
37
29 $scope.search = function () { 38 $scope.search = function () {
30 $scope.filteredProveedores = $filter('filter')( 39 $scope.filteredProveedores = $filter('filter')(
31 $scope.proveedores, {$: $scope.filters} 40 $scope.proveedores, {$: $scope.filters}
32 ); 41 );
33 42
34 $scope.lastPage = Math.ceil( 43 $scope.lastPage = Math.ceil(
35 $scope.filteredProveedores.length / $scope.numPerPage 44 $scope.filteredProveedores.length / $scope.numPerPage
36 ); 45 );
37 46
38 $scope.resetPage(); 47 $scope.resetPage();
39 }; 48 };
40 49
41 $scope.resetPage = function () { 50 $scope.resetPage = function () {
42 $scope.currentPage = 1; 51 $scope.currentPage = 1;
43 $scope.selectPage(1); 52 $scope.selectPage(1);
44 }; 53 };
45 54
46 $scope.selectPage = function (page) { 55 $scope.selectPage = function (page) {
47 console.info(page); 56 console.info(page);
48 var start = (page - 1) * $scope.numPerPage; 57 var start = (page - 1) * $scope.numPerPage;
49 var end = start + $scope.numPerPage; 58 var end = start + $scope.numPerPage;
50 $scope.paginas = []; 59 $scope.paginas = [];
51 $scope.paginas = calcularPages(page); 60 $scope.paginas = calcularPages(page);
52 $scope.currentPageProveedores = $scope.filteredProveedores.slice(start, end); 61 $scope.currentPageProveedores = $scope.filteredProveedores.slice(start, end);
53 $scope.currentPage = page; 62 $scope.currentPage = page;
54 }; 63 };
55 64
56 $scope.select = function(proveedor) { 65 $scope.select = function(proveedor) {
57 $uibModalInstance.close(proveedor); 66 $uibModalInstance.close(proveedor);
58 }; 67 };
59 68
60 $scope.cancel = function() { 69 $scope.cancel = function() {
61 $uibModalInstance.dismiss('cancel'); 70 $uibModalInstance.dismiss('cancel');
62 }; 71 };
63 72
64 $scope.busquedaDown = function(key) { 73 $scope.busquedaDown = function(key) {
65 if (key === 40) { 74 if (key === 40) {
66 primera(key); 75 primera(key);
67 } 76 }
68 }; 77 };
69 78
70 $scope.busquedaPress = function(key) {
71 if (key === 13) {
72 primera(key);
73 }
74 };
75
76 $scope.itemProveedor = function(key) { 79 $scope.itemProveedor = function(key) {
77 if (key === 38) { 80 if (key === 38) {
78 anterior(key); 81 anterior(key);
79 } 82 }
80 83
81 if (key === 40) { 84 if (key === 40) {
82 siguiente(key); 85 siguiente(key);
83 } 86 }
84 87
85 if (key === 37) { 88 if (key === 37) {
86 retrocederPagina(); 89 retrocederPagina();
87 } 90 }
88 91
89 if (key === 39) { 92 if (key === 39) {
90 avanzarPagina(); 93 avanzarPagina();
91 } 94 }
92 }; 95 };
93 96
94 function calcularPages(paginaActual) { 97 function calcularPages(paginaActual) {
95 var paginas = []; 98 var paginas = [];
96 paginas.push(paginaActual); 99 paginas.push(paginaActual);
97 100
98 if (paginaActual - 1 > 1) { 101 if (paginaActual - 1 > 1) {
99 102
100 paginas.unshift(paginaActual - 1); 103 paginas.unshift(paginaActual - 1);
101 if (paginaActual - 2 > 1) { 104 if (paginaActual - 2 > 1) {
102 paginas.unshift(paginaActual - 2); 105 paginas.unshift(paginaActual - 2);
103 } 106 }
104 } 107 }
105 108
106 if (paginaActual + 1 < $scope.lastPage) { 109 if (paginaActual + 1 < $scope.lastPage) {
107 paginas.push(paginaActual + 1); 110 paginas.push(paginaActual + 1);
108 if (paginaActual + 2 < $scope.lastPage) { 111 if (paginaActual + 2 < $scope.lastPage) {
109 paginas.push(paginaActual + 2); 112 paginas.push(paginaActual + 2);
110 } 113 }
111 } 114 }
112 115
113 if (paginaActual !== 1) { 116 if (paginaActual !== 1) {
114 paginas.unshift(1); 117 paginas.unshift(1);
115 } 118 }
116 119
117 if (paginaActual !== $scope.lastPage) { 120 if (paginaActual !== $scope.lastPage) {
118 paginas.push($scope.lastPage); 121 paginas.push($scope.lastPage);
119 } 122 }
120 123
121 return paginas; 124 return paginas;
122 } 125 }
123 126
124 function primera() { 127 function primera() {
125 $scope.selectedProveedores = 0; 128 $scope.selectedProveedores = 0;
126 } 129 }
127 130
128 function anterior() { 131 function anterior() {
129 if ($scope.selectedProveedores === 0 && $scope.currentPage > 1) { 132 if ($scope.selectedProveedores === 0 && $scope.currentPage > 1) {
130 retrocederPagina(); 133 retrocederPagina();
131 } else { 134 } else {
132 $scope.selectedProveedores--; 135 $scope.selectedProveedores--;
133 } 136 }
134 } 137 }
135 138
136 function siguiente() { 139 function siguiente() {
137 if ($scope.selectedProveedores < $scope.currentPageProveedores.length - 1 ) { 140 if ($scope.selectedProveedores < $scope.currentPageProveedores.length - 1 ) {
138 $scope.selectedProveedores++; 141 $scope.selectedProveedores++;
139 } else { 142 } else {
140 avanzarPagina(); 143 avanzarPagina();
src/views/modal-proveedor.html
Diff comments   View file @ a774445
1 <div class="modal-header py-1"> 1 <div class="modal-header py-1">
2 <h5 class="modal-title">Búsqueda de Proveedor</h5> 2 <h5 class="modal-title">Búsqueda de Proveedor</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 type="text" 7 type="text"
8 class="form-control" 8 class="form-control"
9 placeholder="Busqueda" 9 placeholder="Busqueda"
10 ng-model="filters" 10 ng-model="filters"
11 ng-change="search()" 11 ng-change="search()"
12 ng-keydown="busquedaDown($event.keyCode)" 12 ng-keydown="busquedaDown($event.keyCode)"
13 ng-keypress="busquedaPress($event.keyCode)" 13 ng-keypress="busquedaPress($event.keyCode)"
14 foca-focus="selectedProveedores == -1" 14 foca-focus="selectedProveedores == -1"
15 ng-focus="selectedProveedores = -1" 15 ng-focus="selectedProveedores = -1"
16 > 16 >
17 <table class="table table-striped table-sm"> 17 <div class="input-group-append">
18 <thead> 18 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
19 <tr> 19 <i class="fa fa-search" aria-hidden="true"></i>
20 <th>Código</th> 20 </button>
21 <th>Nombre</th>
22 <th>CUIT</th>
23 <th></th>
24 </tr>
25 </thead>
26 <tbody>
27 <tr
28 class="selectable"
29 ng-repeat="(key, proveedor) in currentPageProveedores"
30 ng-click="select(proveedor)">
31 <td ng-bind="proveedor.COD"></td>
32 <td ng-bind="proveedor.NOM"></td>
33 <td ng-bind="proveedor.CUIT"></td>
34 <td>
35 <button
36 type="button"
37 class="btn btn-xs p-1 float-right"
38 ng-class="{
39 'btn-secondary': selectedProveedores != key,
40 'btn-primary': selectedProveedores == key
41 }"
42 ng-click="select(proveedor)"
43 foca-focus="selectedProveedores == {{key}}"
44 ng-keydown="itemProveedor($event.keyCode)"
45 >
46 <i class="fa fa-arrow-right" aria-hidden="true"></i>
47 </button>
48 </td>
49 </tr>
50 </tbody>
51 </table>
52 <nav>
53 <ul class="pagination pagination-sm justify-content-end mb-0">
54 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
55 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
56 <span aria-hidden="true">&laquo;</span>
57 <span class="sr-only">Anterior</span>
58 </a>
59 </li>
60 <li
61 class="page-item"
62 ng-repeat="pagina in paginas"
63 ng-class="{'active': pagina == currentPage}"
64 >
65 <a
66 class="page-link"
67 href="#"
68 ng-click="selectPage(pagina)"
69 ng-bind="pagina"
70 ></a>
71 </li>
72 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
73 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
74 <span aria-hidden="true">&raquo;</span>
75 <span class="sr-only">Siguiente</span>
76 </a>
77 </li>
78 </ul>
79 </nav>
80 </div> 21 </div>
81 </div> 22 </div>
23 <table ng-show="primerBusqueda" class="table table-striped table-sm">
24 <thead>
25 <tr>
26 <th>Código</th>
27 <th>Nombre</th>
28 <th>CUIT</th>
29 <th></th>
30 </tr>
31 </thead>
32 <tbody>
33 <tr ng-show="currentPageProveedores.length == 0 && primerBusqueda">
34 <td colspan="4">
35 No se encontraron resultados.
36 </td>