Eric Fernandez / foca-modal-vendedores

Download as
Browse Code »

Commit 9166ecf84f10416ec05ed0ab7529ad8b6ab14867

Authored by Eric Fernandez
1 parent 1f6cbe252c
Exists in master

cambio lógica mostrar resultados

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