Eric Fernandez / foca-modal-vendedores

Download as
Browse Code »

Commit 667901cd86229e64d1fdb3f64d8ce7c1ba6b5e8d

Authored by Eric Fernandez
1 parent c57af58f8e
Exists in master

Nueva versión de modal

Showing 4 changed files with 60 additions and 37 deletions   Show diff stats
1 { 1 {
2 "name": "foca-modal-vendedores", 2 "name": "foca-modal-vendedores",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Modal para seleccionar vendedores", 4 "description": "Modal para seleccionar 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 "gulp-pre-commit": "gulp pre-commit", 8 "gulp-pre-commit": "gulp pre-commit",
9 "compile": "gulp uglify", 9 "compile": "gulp uglify",
10 "postinstall": "npm run compile && gulp clean-post-install", 10 "postinstall": "npm run compile && gulp clean-post-install",
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-clean gulp-replace gulp-uglify jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas" 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-clean gulp-replace gulp-uglify jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas"
12 }, 12 },
13 "pre-commit": [ 13 "pre-commit": [
14 "gulp-pre-commit" 14 "gulp-pre-commit"
15 ], 15 ],
16 "repository": { 16 "repository": {
17 "type": "git", 17 "type": "git",
18 "url": "https://debo.suite.repo/modulos-npm/foca-modal-vendedores" 18 "url": "https://debo.suite.repo/modulos-npm/foca-modal-vendedores"
19 }, 19 },
20 "author": "Foca Software", 20 "author": "Foca Software",
21 "license": "ISC", 21 "license": "ISC",
22 "peerDependencies": { 22 "peerDependencies": {
23 "angular": "^1.7.4", 23 "angular": "^1.7.4",
24 "bootstrap": "^4.1.3", 24 "bootstrap": "^4.1.3",
25 "font-awesome": "^4.7.0", 25 "font-awesome": "^4.7.0",
26 "ui-bootstrap4": "^3.0.4", 26 "ui-bootstrap4": "^3.0.4",
27 "gulp": "^3.9.1", 27 "gulp": "^3.9.1",
28 "gulp-angular-templatecache": "^2.2.1", 28 "gulp-angular-templatecache": "^2.2.1",
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 } 60 }
61 } 61 }
62 62
src/js/controller.js
Diff comments   View file @ 667901c
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 focaVendedoresService.getVendedores().then(
9 function(res) {
10 $scope.vendedores = res.data;
11 $scope.search();
12 }
13 );
14
15 // pagination 8 // pagination
9 $scope.filters = '';
16 $scope.numPerPage = 10; 10 $scope.numPerPage = 10;
17 $scope.currentPage = 1; 11 $scope.currentPage = 1;
18 $scope.filteredVendedores = []; 12 $scope.filteredVendedores = [];
19 $scope.currentPageVendedores = []; 13 $scope.currentPageVendedores = [];
20 $scope.selectedVendedor = -1; 14 $scope.selectedVendedor = -1;
21 15
16 $scope.busquedaPress = function(key) {
17 if (key === 13) {
18 focaVendedoresService.getVendedores($scope.filters).then(
19 function(res) {
20 $scope.vendedores = res.data;
21 if(res.data.length === 0) {
22 $scope.conResultados = false;
23 $scope.sinResultados = true;
24 } else {
25 $scope.conResultados = true;
26 $scope.sinResultados = false;
27 $scope.search();
28 primera();
29 }
30 }
31 );
32 }
33 };
34
22 $scope.search = function() { 35 $scope.search = function() {
23 $scope.filteredVendedores = $filter('filter')( 36 if($scope.vendedores) {
24 $scope.vendedores, { $: $scope.filters } 37 $scope.filteredVendedores = $filter('filter')(
25 ); 38 $scope.vendedores, { $: $scope.filters }
26 39 );
27 $scope.lastPage = Math.ceil( 40 if($scope.filteredVendedores.length === 0) {
28 $scope.filteredVendedores.length / $scope.numPerPage 41 $scope.sinResultados = true;
29 ); 42 $scope.conResultados = false;
30 43 } else {
31 $scope.resetPage(); 44 $scope.sinResultados = false;
45 $scope.conResultados = true;
46 }
47 $scope.lastPage = Math.ceil(
48 $scope.filteredVendedores.length / $scope.numPerPage
49 );
50
51 $scope.resetPage();
52 }
32 }; 53 };
33 54
34 $scope.resetPage = function() { 55 $scope.resetPage = function() {
35 $scope.currentPage = 1; 56 $scope.currentPage = 1;
36 $scope.selectPage(1); 57 $scope.selectPage(1);
37 }; 58 };
38 59
39 $scope.selectPage = function(page) { 60 $scope.selectPage = function(page) {
40 var start = (page - 1) * $scope.numPerPage; 61 var start = (page - 1) * $scope.numPerPage;
41 var end = start + $scope.numPerPage; 62 var end = start + $scope.numPerPage;
42 $scope.paginas = []; 63 $scope.paginas = [];
43 $scope.paginas = calcularPages(page); 64 $scope.paginas = calcularPages(page);
44 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end); 65 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end);
45 $scope.currentPage = page; 66 $scope.currentPage = page;
46 }; 67 };
47 68
48 $scope.select = function(vendedor) { 69 $scope.select = function(vendedor) {
49 $uibModalInstance.close(vendedor); 70 $uibModalInstance.close(vendedor);
50 }; 71 };
51 72
52 $scope.cancel = function() { 73 $scope.cancel = function() {
53 $uibModalInstance.dismiss('cancel'); 74 $uibModalInstance.dismiss('cancel');
54 }; 75 };
55 76
56 $scope.busquedaDown = function(key) { 77 $scope.busquedaDown = function(key) {
57 if (key === 40) { 78 if (key === 40) {
58 primera(key); 79 primera(key);
59 } 80 }
60 }; 81 };
61 82
62 $scope.busquedaPress = function(key) {
63 if (key === 13) {
64 primera(key);
65 }
66 };
67
68 $scope.itemVendedor = function(key) { 83 $scope.itemVendedor = function(key) {
69 if (key === 38) { 84 if (key === 38) {
70 anterior(key); 85 anterior(key);
71 } 86 }
72 87
73 if (key === 40) { 88 if (key === 40) {
74 siguiente(key); 89 siguiente(key);
75 } 90 }
76 91
77 if (key === 37) { 92 if (key === 37) {
78 retrocederPagina(); 93 retrocederPagina();
79 } 94 }
80 95
81 if (key === 39) { 96 if (key === 39) {
82 avanzarPagina(); 97 avanzarPagina();
83 } 98 }
84 }; 99 };
85 100
86 function calcularPages(paginaActual) { 101 function calcularPages(paginaActual) {
87 var paginas = []; 102 var paginas = [];
88 paginas.push(paginaActual); 103 paginas.push(paginaActual);
89 104
90 if (paginaActual - 1 > 1) { 105 if (paginaActual - 1 > 1) {
91 106
92 paginas.unshift(paginaActual - 1); 107 paginas.unshift(paginaActual - 1);
93 if (paginaActual - 2 > 1) { 108 if (paginaActual - 2 > 1) {
94 paginas.unshift(paginaActual - 2); 109 paginas.unshift(paginaActual - 2);
95 } 110 }
96 } 111 }
97 112
98 if (paginaActual + 1 < $scope.lastPage) { 113 if (paginaActual + 1 < $scope.lastPage) {
99 paginas.push(paginaActual + 1); 114 paginas.push(paginaActual + 1);
100 if (paginaActual + 2 < $scope.lastPage) { 115 if (paginaActual + 2 < $scope.lastPage) {
101 paginas.push(paginaActual + 2); 116 paginas.push(paginaActual + 2);
102 } 117 }
103 } 118 }
104 119
105 if (paginaActual !== 1) { 120 if (paginaActual !== 1) {
106 paginas.unshift(1); 121 paginas.unshift(1);
107 } 122 }
108 123
109 if (paginaActual !== $scope.lastPage) { 124 if (paginaActual !== $scope.lastPage) {
110 paginas.push($scope.lastPage); 125 paginas.push($scope.lastPage);
111 } 126 }
112 127
113 return paginas; 128 return paginas;
114 } 129 }
115 130
116 function primera() { 131 function primera() {
117 $scope.selectedVendedor = 0; 132 $scope.selectedVendedor = 0;
118 } 133 }
119 134
120 function anterior() { 135 function anterior() {
121 if ($scope.selectedVendedor === 0 && $scope.currentPage > 1) { 136 if ($scope.selectedVendedor === 0 && $scope.currentPage > 1) {
122 retrocederPagina(); 137 retrocederPagina();
123 } else { 138 } else {
124 $scope.selectedVendedor--; 139 $scope.selectedVendedor--;
125 } 140 }
126 } 141 }
127 142
128 function siguiente() { 143 function siguiente() {
129 if ($scope.selectedVendedor < $scope.currentPageVendedores.length - 1) { 144 if ($scope.selectedVendedor < $scope.currentPageVendedores.length - 1) {
130 $scope.selectedVendedor++; 145 $scope.selectedVendedor++;
131 } else { 146 } else {
132 avanzarPagina(); 147 avanzarPagina();
133 } 148 }
134 } 149 }
135 150
136 function retrocederPagina() { 151 function retrocederPagina() {
137 if ($scope.currentPage > 1) { 152 if ($scope.currentPage > 1) {
138 $scope.selectPage($scope.currentPage - 1); 153 $scope.selectPage($scope.currentPage - 1);
1 angular.module('focaModalVendedores') 1 angular.module('focaModalVendedores')
2 .service('focaVendedoresService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) { 2 .service('focaVendedoresService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
3 return { 3 return {
4 getVendedores: function() { 4 getVendedores: function(filters) {
5 // TODO ACOMODAR PARA TURNOS AHORA 1 HARDCODEO 5 // TODO ACOMODAR PARA TURNOS AHORA 1 HARDCODEO
6 return $http.get(API_ENDPOINT.URL + '/vendedores/1'); 6 return $http.post(API_ENDPOINT.URL + '/vendedores', {nombre: filters});
7 } 7 }
8 }; 8 };
9 }]); 9 }]);
10 10
src/views/modal-vendedores.html
Diff comments   View file @ 667901c
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
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="selectedVendedor == -1" 14 foca-focus="selectedVendedor == -1"
15 ng-focus="selectedVendedor = -1" 15 ng-focus="selectedVendedor = -1"
16 > 16 >
17 <table class="table table-striped table-sm"> 17 <div class="input-group-append">
18 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
19 <i class="fa fa-search" aria-hidden="true"></i>
20 </button>
21 </div>
22 <table ng-show="conResultados" class="table table-striped table-sm">
18 <thead> 23 <thead>
19 <tr> 24 <tr>
20 <th>Código</th> 25 <th>Código</th>
21 <th>Nombre</th> 26 <th>Nombre</th>
22 <th></th> 27 <th></th>
23 </tr> 28 </tr>
24 </thead> 29 </thead>
25 <tbody> 30 <tbody>
26 <tr class="selected" 31 <tr class="selected"
27 ng-repeat="(key, vendedor) in currentPageVendedores" 32 ng-repeat="(key, vendedor) in currentPageVendedores"
28 ng-click="select(vendedor)"> 33 ng-click="select(vendedor)">
29 <td ng-bind="vendedor.CodVen"></td> 34 <td ng-bind="vendedor.CodVen"></td>
30 <td ng-bind="vendedor.NomVen"></td> 35 <td ng-bind="vendedor.NomVen"></td>
31 <td> 36 <td>
32 <button 37 <button
33 type="button" 38 type="button"
34 class="btn p-2 float-right" 39 class="btn p-2 float-right"
35 ng-class="{ 40 ng-class="{
36 'btn-secondary': selectedVendedor != key, 41 'btn-secondary': selectedVendedor != key,
37 'btn-primary': selectedVendedor == key 42 'btn-primary': selectedVendedor == key
38 }" 43 }"
39 foca-focus="selectedVendedor == {{key}}" 44 foca-focus="selectedVendedor == {{key}}"
40 ng-keydown="itemVendedor($event.keyCode)"> 45 ng-keydown="itemVendedor($event.keyCode)">
41 <i class="fa fa-arrow-right" aria-hidden="true"></i> 46 <i class="fa fa-arrow-right" aria-hidden="true"></i>
42 </button> 47 </button>
43 </td> 48 </td>
44 </tr> 49 </tr>
45 </tbody> 50 </tbody>
46 </table> 51 </table>
47 <nav> 52 <nav ng-show="conResultados">
48 <ul class="pagination justify-content-end"> 53 <ul class="pagination justify-content-end">
49 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 54 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
50 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 55 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
51 <span aria-hidden="true">&laquo;</span> 56 <span aria-hidden="true">&laquo;</span>
52 <span class="sr-only">Anterior</span> 57 <span class="sr-only">Anterior</span>
53 </a> 58 </a>
54 </li> 59 </li>
55 <li 60 <li
56 class="page-item" 61 class="page-item"
57 ng-repeat="pagina in paginas" 62 ng-repeat="pagina in paginas"
58 ng-class="{'active': pagina == currentPage}" 63 ng-class="{'active': pagina == currentPage}"
59 > 64 >
60 <a 65 <a
61 class="page-link" 66 class="page-link"
62 href="#" 67 href="#"
63 ng-click="selectPage(pagina)" 68 ng-click="selectPage(pagina)"
64 ng-bind="pagina" 69 ng-bind="pagina"
65 ></a> 70 ></a>
66 </li> 71 </li>
67 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 72 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
68 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 73 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
69 <span aria-hidden="true">&raquo;</span> 74 <span aria-hidden="true">&raquo;</span>
70 <span class="sr-only">Siguiente</span> 75 <span class="sr-only">Siguiente</span>
71 </a> 76 </a>
72 </li> 77 </li>
73 </ul> 78 </ul>
74 </nav> 79 </nav>
75 </div> 80 </div>
81 <div ng-show="sinResultados">
82 <i class="fa fa-minus"></i> No se encontraron resultados.
83 </div>
76 </div> 84 </div>
77 <div class="modal-footer"> 85 <div class="modal-footer">
78 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 86 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
79 </div>
87 </div>