Jose Pinto / foca-modal-vendedores

Download as
Browse Code »

Commit c05b74b1a5246415849f4bc9a93fd6edea099665

Authored by Pablo Marco del Pont
2 parents 59965646b6 039ef7d52b
Exists in master

Merge branch 'master' into 'master' 

master(efernandez)

See merge request modulos-npm/foca-modal-vendedores!9
Showing 2 changed files   Show diff stats
src/js/controller.js
Diff comments   View file @ c05b74b
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 8
9 $scope.filters = ''; 9 $scope.filters = '';
10 $scope.vendedores = []; 10 $scope.vendedores = [];
11 $scope.primerBusqueda = false; 11 $scope.primerBusqueda = false;
12 // pagination 12 // pagination
13 $scope.numPerPage = 10; 13 $scope.numPerPage = 10;
14 $scope.currentPage = 1; 14 $scope.currentPage = 1;
15 $scope.filteredVendedores = []; 15 $scope.filteredVendedores = [];
16 $scope.currentPageVendedores = []; 16 $scope.currentPageVendedores = [];
17 $scope.selectedVendedor = -1; 17 $scope.selectedVendedor = -1;
18 18
19 $scope.busquedaPress = function(key) { 19 $scope.busquedaPress = function(key) {
20 if (key === 13) { 20 if (key === 13) {
21 $scope.primerBusqueda = true;
22 focaVendedoresService.getVendedores($scope.filters).then( 21 focaVendedoresService.getVendedores($scope.filters).then(
23 function(res) { 22 function(res) {
23 $scope.primerBusqueda = true;
24 $scope.vendedores = res.data; 24 $scope.vendedores = res.data;
25 $scope.search(); 25 $scope.search();
26 primera(); 26 primera();
27 } 27 }
28 ); 28 );
29 } 29 }
30 }; 30 };
31 31
32 $scope.search = function() { 32 $scope.search = function() {
33 if($scope.vendedores.length > 0) { 33 if($scope.vendedores.length > 0) {
34 $scope.filteredVendedores = $filter('filter')( 34 $scope.filteredVendedores = $filter('filter')(
35 $scope.vendedores, { $: $scope.filters } 35 $scope.vendedores, { $: $scope.filters }
36 ); 36 );
37 $scope.lastPage = Math.ceil( 37 $scope.lastPage = Math.ceil(
38 $scope.filteredVendedores.length / $scope.numPerPage 38 $scope.filteredVendedores.length / $scope.numPerPage
39 ); 39 );
40 $scope.resetPage(); 40 $scope.resetPage();
41 } 41 }
42 }; 42 };
43 43
44 $scope.resetPage = function() { 44 $scope.resetPage = function() {
45 $scope.currentPage = 1; 45 $scope.currentPage = 1;
46 $scope.selectPage(1); 46 $scope.selectPage(1);
47 }; 47 };
48 48
49 $scope.selectPage = function(page) { 49 $scope.selectPage = function(page) {
50 var start = (page - 1) * $scope.numPerPage; 50 var start = (page - 1) * $scope.numPerPage;
51 var end = start + $scope.numPerPage; 51 var end = start + $scope.numPerPage;
52 $scope.paginas = []; 52 $scope.paginas = [];
53 $scope.paginas = calcularPages(page); 53 $scope.paginas = calcularPages(page);
54 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end); 54 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end);
55 $scope.currentPage = page; 55 $scope.currentPage = page;
56 }; 56 };
57 57
58 $scope.select = function(vendedor) { 58 $scope.select = function(vendedor) {
59 $uibModalInstance.close(vendedor); 59 $uibModalInstance.close(vendedor);
60 }; 60 };
61 61
62 $scope.cancel = function() { 62 $scope.cancel = function() {
63 $uibModalInstance.dismiss('cancel'); 63 $uibModalInstance.dismiss('cancel');
64 }; 64 };
65 65
66 $scope.busquedaDown = function(key) { 66 $scope.busquedaDown = function(key) {
67 if (key === 40) { 67 if (key === 40) {
68 primera(key); 68 primera(key);
69 } 69 }
70 }; 70 };
71 71
72 $scope.itemVendedor = function(key) { 72 $scope.itemVendedor = function(key) {
73 if (key === 38) { 73 if (key === 38) {
74 anterior(key); 74 anterior(key);
75 } 75 }
76 76
77 if (key === 40) { 77 if (key === 40) {
78 siguiente(key); 78 siguiente(key);
79 } 79 }
80 80
81 if (key === 37) { 81 if (key === 37) {
82 retrocederPagina(); 82 retrocederPagina();
83 } 83 }
84 84
85 if (key === 39) { 85 if (key === 39) {
86 avanzarPagina(); 86 avanzarPagina();
87 } 87 }
88 }; 88 };
89 89
90 function calcularPages(paginaActual) { 90 function calcularPages(paginaActual) {
91 var paginas = []; 91 var paginas = [];
92 paginas.push(paginaActual); 92 paginas.push(paginaActual);
93 93
94 if (paginaActual - 1 > 1) { 94 if (paginaActual - 1 > 1) {
95 95
96 paginas.unshift(paginaActual - 1); 96 paginas.unshift(paginaActual - 1);
97 if (paginaActual - 2 > 1) { 97 if (paginaActual - 2 > 1) {
98 paginas.unshift(paginaActual - 2); 98 paginas.unshift(paginaActual - 2);
99 } 99 }
100 } 100 }
101 101
102 if (paginaActual + 1 < $scope.lastPage) { 102 if (paginaActual + 1 < $scope.lastPage) {
103 paginas.push(paginaActual + 1); 103 paginas.push(paginaActual + 1);
104 if (paginaActual + 2 < $scope.lastPage) { 104 if (paginaActual + 2 < $scope.lastPage) {
105 paginas.push(paginaActual + 2); 105 paginas.push(paginaActual + 2);
106 } 106 }
107 } 107 }
108 108
109 if (paginaActual !== 1) { 109 if (paginaActual !== 1) {
110 paginas.unshift(1); 110 paginas.unshift(1);
111 } 111 }
112 112
113 if (paginaActual !== $scope.lastPage) { 113 if (paginaActual !== $scope.lastPage) {
114 paginas.push($scope.lastPage); 114 paginas.push($scope.lastPage);
115 } 115 }
116 116
117 return paginas; 117 return paginas;
118 } 118 }
119 119
120 function primera() { 120 function primera() {
121 $scope.selectedVendedor = 0; 121 $scope.selectedVendedor = 0;
122 } 122 }
123 123
124 function anterior() { 124 function anterior() {
125 if ($scope.selectedVendedor === 0 && $scope.currentPage > 1) { 125 if ($scope.selectedVendedor === 0 && $scope.currentPage > 1) {
126 retrocederPagina(); 126 retrocederPagina();
127 } else { 127 } else {
128 $scope.selectedVendedor--; 128 $scope.selectedVendedor--;
129 } 129 }
130 } 130 }
131 131
132 function siguiente() { 132 function siguiente() {
133 if ($scope.selectedVendedor < $scope.currentPageVendedores.length - 1) { 133 if ($scope.selectedVendedor < $scope.currentPageVendedores.length - 1) {
134 $scope.selectedVendedor++; 134 $scope.selectedVendedor++;
135 } else { 135 } else {
136 avanzarPagina(); 136 avanzarPagina();
137 } 137 }
138 } 138 }
139 139
140 function retrocederPagina() { 140 function retrocederPagina() {
141 if ($scope.currentPage > 1) { 141 if ($scope.currentPage > 1) {
142 $scope.selectPage($scope.currentPage - 1); 142 $scope.selectPage($scope.currentPage - 1);
143 $scope.selectedVendedor = $scope.numPerPage - 1; 143 $scope.selectedVendedor = $scope.numPerPage - 1;
144 } 144 }
145 } 145 }
146 146
147 function avanzarPagina() { 147 function avanzarPagina() {
148 if ($scope.currentPage < $scope.lastPage) { 148 if ($scope.currentPage < $scope.lastPage) {
149 $scope.selectPage($scope.currentPage + 1); 149 $scope.selectPage($scope.currentPage + 1);
150 $scope.selectedVendedor = 0; 150 $scope.selectedVendedor = 0;
151 } 151 }
152 } 152 }
153 }] 153 }]
154 ); 154 );
src/views/modal-vendedores.html
Diff comments   View file @ c05b74b
1 <div class="modal-header py-1"> 1 <div class="modal-header py-1">
2 <h5 class="modal-title">Búsqueda de vendedores</h5> 2 <h5 class="modal-title">Búsqueda de vendedores</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 form-control-sm" 8 class="form-control form-control-sm"
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 <div class="input-group-append"> 17 <div class="input-group-append">
18 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)"> 18 <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
19 <i class="fa fa-search" aria-hidden="true"></i> 19 <i class="fa fa-search" aria-hidden="true"></i>
20 </button> 20 </button>
21 </div> 21 </div>
22 </div> 22 </div>
23 <table ng-show="primerBusqueda" class="table table-striped table-sm col-12"> 23 <table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
24 <thead> 24 <thead>
25 <tr> 25 <tr>
26 <th>Código</th> 26 <th>Código</th>
27 <th>Nombre</th> 27 <th>Nombre</th>
28 <th></th> 28 <th></th>
29 </tr> 29 </tr>
30 </thead> 30 </thead>
31 <tbody> 31 <tbody>
32 <tr ng-show="currentPageVendedores.length == 0"> 32 <tr ng-show="currentPageVendedores.length == 0 && primerBusqueda">
33 <td colspan="3"> 33 <td colspan="3">
34 No se encontraron resultados. 34 No se encontraron resultados.
35 </td> 35 </td>
36 </tr> 36 </tr>
37 <tr class="selected" 37 <tr class="selected"
38 ng-repeat="(key, vendedor) in currentPageVendedores" 38 ng-repeat="(key, vendedor) in currentPageVendedores"
39 ng-click="select(vendedor)" 39 ng-click="select(vendedor)"
40 > 40 >
41 <td ng-bind="vendedor.CodVen"></td> 41 <td ng-bind="vendedor.CodVen"></td>
42 <td ng-bind="vendedor.NomVen"></td> 42 <td ng-bind="vendedor.NomVen"></td>
43 <td> 43 <td>
44 <button 44 <button
45 type="button" 45 type="button"
46 class="btn btn-xs p-1 float-right" 46 class="btn btn-xs p-1 float-right"
47 ng-class="{ 47 ng-class="{
48 'btn-secondary': selectedVendedor != key, 48 'btn-secondary': selectedVendedor != key,
49 'btn-primary': selectedVendedor == key 49 'btn-primary': selectedVendedor == key
50 }" 50 }"
51 foca-focus="selectedVendedor == {{key}}" 51 foca-focus="selectedVendedor == {{key}}"
52 ng-keydown="itemVendedor($event.keyCode)"> 52 ng-keydown="itemVendedor($event.keyCode)">
53 <i class="fa fa-arrow-right" aria-hidden="true"></i> 53 <i class="fa fa-arrow-right" aria-hidden="true"></i>
54 </button> 54 </button>
55 </td> 55 </td>
56 </tr> 56 </tr>
57 </tbody> 57 </tbody>
58 </table> 58 </table>
59 <nav ng-show="currentPageVendedores.length > 0 && primerBusqueda"> 59 <nav ng-show="currentPageVendedores.length > 0 && primerBusqueda">
60 <ul class="pagination pagination-sm justify-content mb-0"> 60 <ul class="pagination pagination-sm justify-content mb-0">
61 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 61 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
62 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)"> 62 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
63 <span aria-hidden="true">&laquo;</span> 63 <span aria-hidden="true">&laquo;</span>
64 <span class="sr-only">Anterior</span> 64 <span class="sr-only">Anterior</span>
65 </a> 65 </a>
66 </li> 66 </li>
67 <li 67 <li
68 class="page-item" 68 class="page-item"
69 ng-repeat="pagina in paginas" 69 ng-repeat="pagina in paginas"
70 ng-class="{'active': pagina == currentPage}" 70 ng-class="{'active': pagina == currentPage}"
71 > 71 >
72 <a 72 <a
73 class="page-link" 73 class="page-link"
74 href="#" 74 href="#"
75 ng-click="selectPage(pagina)" 75 ng-click="selectPage(pagina)"
76 ng-bind="pagina" 76 ng-bind="pagina"
77 ></a> 77 ></a>
78 </li> 78 </li>
79 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 79 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
80 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)"> 80 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
81 <span aria-hidden="true">&raquo;</span> 81 <span aria-hidden="true">&raquo;</span>
82 <span class="sr-only">Siguiente</span> 82 <span class="sr-only">Siguiente</span>
83 </a> 83 </a>
84 </li> 84 </li>
85 </ul> 85 </ul>
86 </nav> 86 </nav>
87
88
89 </div> 87 </div>
90 <div class="modal-footer py-1"> 88 <div class="modal-footer py-1">
91 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 89 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
92 </div> 90 </div>
93 91