Jose Pinto / foca-modal-vehiculo

Download as
Browse Code »

Commit 035730a753677e169c9a4fd2fdfd894e3d40c7ba

Authored by Jose Pinto
1 parent 50a0d78717
Exists in master

Auto stash before merge of "master" and "upstream/master"

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