Eric Fernandez / foca-modal-cobrador

Download as
Browse Code »

Commit e3865afafb6639b7fda9bb2c73049cf6f9f18379

Authored by Eric Fernandez
2 parents fdcecc1b3f 92253b8d9b
Exists in master

conflicts

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