Jose Pinto / foca-modal-banco

Download as
Browse Code »

Commit ff372c8dfa622b3e8ffd46164cc08644e7b10c1f

Authored by Eric Fernandez
1 parent f7b32803c8
Exists in master

buscador en header, paginacion en footer, cambio icons, focus input cuando no hay resultados

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