Jose Pinto / foca-modal-vendedores

Download as
Browse Code »

Commit 2d8ff087914912b8de3ad392e0644c15a5cd74a1

Authored by Jose Pinto
1 parent d3bd325a56
Exists in master

correcion url busqueda

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