Mauricio Cattafi / foca-modal-vendedores

Download as
Browse Code »

Commit 1f6cbe252c8e5805d2dbd40e879b4e83ed318751

Authored by Eric Fernandez
1 parent 2f75519a7a
Exists in master

Refactor lógica mostrar grilla cuando no tiene resultados

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