Eric Fernandez / foca-modal-chofer

Download as
Browse Code »

Commit 03513d79b520e8d1a20436f74594d190c01e21f8

Authored by Jose Pinto
1 parent a4b5f5da03
Exists in master

buscador sin resultados hace focus

Showing 3 changed files with 18 additions and 8 deletions   Show diff stats
1 { 1 {
2 "name": "foca-modal-chofer", 2 "name": "foca-modal-chofer",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Modal de búsqueda de choferes", 4 "description": "Modal de búsqueda de choferes",
5 "scripts": { 5 "scripts": {
6 "test": "echo \"Error: no test specified\" && exit 1", 6 "test": "echo \"Error: no test specified\" && exit 1",
7 "gulp-pre-commit": "gulp pre-commit", 7 "gulp-pre-commit": "gulp pre-commit",
8 "compile": "gulp uglify", 8 "compile": "gulp uglify",
9 "postinstall": "npm run compile && gulp clean-post-install", 9 "postinstall": "npm run compile && gulp clean-post-install",
10 "install-dev": "npm install -D angular angular-ladda bootstrap font-awesome gulp gulp-angular-templatecache gulp-clean gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify jasmine-core jquery jshint ladda@1.0.6 pre-commit pump ui-bootstrap4 && npm i -D git+ssh://git@debonline.dyndns.org:npm/foca-directivas.git" 10 "install-dev": "npm install -D angular angular-ladda bootstrap font-awesome gulp gulp-angular-templatecache gulp-clean gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify jasmine-core jquery jshint ladda@1.0.6 pre-commit pump ui-bootstrap4 && npm i -D git+ssh://git@git.focasoftware.com:npm/foca-directivas.git"
11 }, 11 },
12 "pre-commit": [ 12 "pre-commit": [
13 "gulp-pre-commit" 13 "gulp-pre-commit"
14 ], 14 ],
15 "repository": { 15 "repository": {
16 "type": "git", 16 "type": "git",
17 "url": "https://debo.suite.repo/modulos-npm/foca-modal-chofer.git" 17 "url": "https://debo.suite.repo/modulos-npm/foca-modal-chofer.git"
18 }, 18 },
19 "author": "Foca Software", 19 "author": "Foca Software",
20 "license": "ISC", 20 "license": "ISC",
21 "peerDependencies": { 21 "peerDependencies": {
22 "angular": "^1.7.4", 22 "angular": "^1.7.4",
23 "bootstrap": "^4.1.3", 23 "bootstrap": "^4.1.3",
24 "font-awesome": "^4.7.0", 24 "font-awesome": "^4.7.0",
25 "ui-bootstrap4": "^3.0.4", 25 "ui-bootstrap4": "^3.0.4",
26 "gulp": "^3.9.1", 26 "gulp": "^3.9.1",
27 "gulp-angular-templatecache": "^2.2.1", 27 "gulp-angular-templatecache": "^2.2.1",
28 "gulp-concat": "^2.6.1", 28 "gulp-concat": "^2.6.1",
29 "gulp-connect": "^5.6.1", 29 "gulp-connect": "^5.6.1",
30 "gulp-htmlmin": "^5.0.1", 30 "gulp-htmlmin": "^5.0.1",
31 "gulp-rename": "^1.4.0", 31 "gulp-rename": "^1.4.0",
32 "gulp-replace": "^1.0.0", 32 "gulp-replace": "^1.0.0",
33 "gulp-uglify": "^3.0.1", 33 "gulp-uglify": "^3.0.1",
34 "jquery": "^3.3.1", 34 "jquery": "^3.3.1",
35 "pump": "^3.0.0", 35 "pump": "^3.0.0",
36 "foca-directivas": "git+ssh://git@debonline.dyndns.org:npm/foca-directivas" 36 "foca-directivas": "git+ssh://git@git.focasoftware.com:npm/foca-directivas.git"
37 }, 37 },
38 "devDependencies": { 38 "devDependencies": {
39 "angular": "1.7.5", 39 "angular": "1.7.5",
40 "angular-ladda": "0.4.3", 40 "angular-ladda": "0.4.3",
41 "bootstrap": "4.1.3", 41 "bootstrap": "4.1.3",
42 "foca-directivas": "git+ssh://git@debonline.dyndns.org:npm/foca-directivas.git", 42 "foca-directivas": "git+ssh://git@git.focasoftware.com:npm/foca-directivas.git",
43 "font-awesome": "4.7.0", 43 "font-awesome": "4.7.0",
44 "gulp": "3.9.1", 44 "gulp": "3.9.1",
45 "gulp-angular-templatecache": "2.2.5", 45 "gulp-angular-templatecache": "2.2.5",
46 "gulp-clean": "0.4.0", 46 "gulp-clean": "0.4.0",
47 "gulp-concat": "2.6.1", 47 "gulp-concat": "2.6.1",
48 "gulp-connect": "5.6.1", 48 "gulp-connect": "5.6.1",
49 "gulp-htmlmin": "5.0.1", 49 "gulp-htmlmin": "5.0.1",
50 "gulp-jshint": "2.1.0", 50 "gulp-jshint": "2.1.0",
51 "gulp-rename": "1.4.0", 51 "gulp-rename": "1.4.0",
52 "gulp-replace": "1.0.0", 52 "gulp-replace": "1.0.0",
53 "gulp-uglify": "3.0.1", 53 "gulp-uglify": "3.0.1",
54 "jasmine-core": "3.3.0", 54 "jasmine-core": "3.3.0",
55 "jquery": "3.3.1", 55 "jquery": "3.3.1",
56 "jshint": "2.9.6", 56 "jshint": "2.9.6",
57 "ladda": "1.0.6", 57 "ladda": "1.0.6",
58 "pre-commit": "1.2.2", 58 "pre-commit": "1.2.2",
59 "pump": "3.0.0", 59 "pump": "3.0.0",
60 "ui-bootstrap4": "3.0.5" 60 "ui-bootstrap4": "3.0.5"
61 } 61 }
62 } 62 }
63 63
src/js/controller.js
Diff comments   View file @ 03513d7
1 angular.module('focaModalChofer') 1 angular.module('focaModalChofer')
2 .controller('focaModalChoferController', 2 .controller('focaModalChoferController',
3 [ 3 [
4 '$timeout',
4 '$filter', 5 '$filter',
5 '$scope', 6 '$scope',
6 '$uibModalInstance', 7 '$uibModalInstance',
7 'focaModalChoferService', 8 'focaModalChoferService',
8 function($filter, $scope, $uibModalInstance, 9 function($timeout, $filter, $scope, $uibModalInstance,
9 focaModalChoferService 10 focaModalChoferService
10 ) { 11 ) {
11 12
12 $scope.filters = ''; 13 $scope.filters = '';
13 $scope.choferes = []; 14 $scope.choferes = [];
14 $scope.primerBusqueda = false; 15 $scope.primerBusqueda = false;
15 $scope.searchLoading = false; 16 $scope.searchLoading = false;
16 // pagination 17 // pagination
17 $scope.numPerPage = 10; 18 $scope.numPerPage = 10;
18 $scope.currentPage = 1; 19 $scope.currentPage = 1;
19 $scope.filteredChoferes = []; 20 $scope.filteredChoferes = [];
20 $scope.currentPageChoferes = []; 21 $scope.currentPageChoferes = [];
21 $scope.selectedChofer = -1; 22 $scope.selectedChofer = -1;
22 23
23 //METODOS 24 //METODOS
24 $scope.busquedaPress = function(key) { 25 $scope.busquedaPress = function(key) {
25 if (key === 13) { 26 if (key === 13) {
26 $scope.searchLoading = true; 27 $scope.searchLoading = true;
27 focaModalChoferService.getChoferes().then(llenarDatos); 28 focaModalChoferService.getChoferes().then(llenarDatos);
28 } 29 }
29 }; 30 };
30 function llenarDatos(res) { 31 function llenarDatos(res) {
31 $scope.searchLoading = false; 32 $scope.searchLoading = false;
32 $scope.primerBusqueda = true; 33 $scope.primerBusqueda = true;
33 $scope.choferes = res.data; 34 $scope.choferes = res.data;
34 $scope.search(); 35 $scope.search(true);
35 primera(); 36 primera();
36 } 37 }
37 $scope.search = function() { 38 $scope.search = function(pressed) {
38 if($scope.choferes.length > 0) { 39 if($scope.choferes.length > 0) {
39 $scope.filteredChoferes = $filter('filter')( 40 $scope.filteredChoferes = $filter('filter')(
40 $scope.choferes, 41 $scope.choferes,
41 {$: $scope.filters} 42 {$: $scope.filters}
42 ); 43 );
43 44
45 if(pressed && $scope.filteredChoferes.length === 0){
46 $timeout(function() {
47 angular.element('#search')[0].focus();
48 $scope.filters = '';
49 });
50 }
51
44 $scope.lastPage = Math.ceil( 52 $scope.lastPage = Math.ceil(
45 $scope.filteredChoferes.length / $scope.numPerPage 53 $scope.filteredChoferes.length / $scope.numPerPage
46 ); 54 );
47 55
48 $scope.resetPage(); 56 $scope.resetPage();
57
49 } 58 }
50 }; 59 };
51 60
52 $scope.resetPage = function() { 61 $scope.resetPage = function() {
53 $scope.currentPage = 1; 62 $scope.currentPage = 1;
54 $scope.selectPage(1); 63 $scope.selectPage(1);
55 }; 64 };
56 65
57 $scope.selectPage = function(page) { 66 $scope.selectPage = function(page) {
58 var start = (page - 1) * $scope.numPerPage; 67 var start = (page - 1) * $scope.numPerPage;
59 var end = start + $scope.numPerPage; 68 var end = start + $scope.numPerPage;
60 $scope.paginas = []; 69 $scope.paginas = [];
61 $scope.paginas = calcularPages(page); 70 $scope.paginas = calcularPages(page);
62 $scope.currentPageChoferes = 71 $scope.currentPageChoferes =
63 $scope.filteredChoferes.slice(start, end); 72 $scope.filteredChoferes.slice(start, end);
64 $scope.currentPage = page; 73 $scope.currentPage = page;
65 }; 74 };
66 75
67 $scope.select = function(chofer) { 76 $scope.select = function(chofer) {
68 $uibModalInstance.close(chofer); 77 $uibModalInstance.close(chofer);
69 }; 78 };
70 79
71 $scope.cancel = function() { 80 $scope.cancel = function() {
72 $uibModalInstance.dismiss('cancel'); 81 $uibModalInstance.dismiss('cancel');
73 }; 82 };
74 83
75 $scope.busquedaDown = function(key) { 84 $scope.busquedaDown = function(key) {
76 if (key === 40) { 85 if (key === 40) {
77 primera(key); 86 primera(key);
78 } 87 }
79 }; 88 };
80 89
81 $scope.itemChofer = function(key) { 90 $scope.itemChofer = function(key) {
82 if (key === 38) { 91 if (key === 38) {
83 anterior(key); 92 anterior(key);
84 } 93 }
85 94
86 if (key === 40) { 95 if (key === 40) {
87 siguiente(key); 96 siguiente(key);
88 } 97 }
89 98
90 if (key === 37) { 99 if (key === 37) {
91 retrocederPagina(); 100 retrocederPagina();
92 } 101 }
93 102
94 if (key === 39) { 103 if (key === 39) {
95 avanzarPagina(); 104 avanzarPagina();
96 } 105 }
97 }; 106 };
98 107
99 function calcularPages(paginaActual) { 108 function calcularPages(paginaActual) {
100 var paginas = []; 109 var paginas = [];
101 paginas.push(paginaActual); 110 paginas.push(paginaActual);
102 111
103 if (paginaActual - 1 > 1) { 112 if (paginaActual - 1 > 1) {
104 113
105 paginas.unshift(paginaActual - 1); 114 paginas.unshift(paginaActual - 1);
106 if (paginaActual - 2 > 1) { 115 if (paginaActual - 2 > 1) {
107 paginas.unshift(paginaActual - 2); 116 paginas.unshift(paginaActual - 2);
108 } 117 }
109 } 118 }
110 119
111 if (paginaActual + 1 < $scope.lastPage) { 120 if (paginaActual + 1 < $scope.lastPage) {
112 paginas.push(paginaActual + 1); 121 paginas.push(paginaActual + 1);
113 if (paginaActual + 2 < $scope.lastPage) { 122 if (paginaActual + 2 < $scope.lastPage) {
114 paginas.push(paginaActual + 2); 123 paginas.push(paginaActual + 2);
115 } 124 }
116 } 125 }
117 126
118 if (paginaActual !== 1) { 127 if (paginaActual !== 1) {
119 paginas.unshift(1); 128 paginas.unshift(1);
120 } 129 }
121 130
122 if (paginaActual !== $scope.lastPage) { 131 if (paginaActual !== $scope.lastPage) {
123 paginas.push($scope.lastPage); 132 paginas.push($scope.lastPage);
124 } 133 }
125 134
126 return paginas; 135 return paginas;
127 } 136 }
128 137
129 function primera() { 138 function primera() {
130 $scope.selectedChofer = 0; 139 $scope.selectedChofer = 0;
131 } 140 }
132 141
133 function anterior() { 142 function anterior() {
134 if ($scope.selectedChofer === 0 && $scope.currentPage > 1) { 143 if ($scope.selectedChofer === 0 && $scope.currentPage > 1) {
135 retrocederPagina(); 144 retrocederPagina();
136 } else { 145 } else {
137 $scope.selectedChofer--; 146 $scope.selectedChofer--;
138 } 147 }
139 } 148 }
140 149
141 function siguiente() { 150 function siguiente() {
142 if ( 151 if (
143 $scope.selectedChofer < $scope.currentPageChoferes.length - 1 152 $scope.selectedChofer < $scope.currentPageChoferes.length - 1
144 ) { 153 ) {
145 $scope.selectedChofer++; 154 $scope.selectedChofer++;
146 } else { 155 } else {
147 avanzarPagina(); 156 avanzarPagina();
148 } 157 }
149 } 158 }
150 159
151 function retrocederPagina() { 160 function retrocederPagina() {
152 if ($scope.currentPage > 1) { 161 if ($scope.currentPage > 1) {
153 $scope.selectPage($scope.currentPage - 1); 162 $scope.selectPage($scope.currentPage - 1);
154 $scope.selectedChofer = $scope.numPerPage - 1; 163 $scope.selectedChofer = $scope.numPerPage - 1;
155 } 164 }
156 } 165 }
157 166
158 function avanzarPagina() { 167 function avanzarPagina() {
159 if ($scope.currentPage < $scope.lastPage) { 168 if ($scope.currentPage < $scope.lastPage) {
160 $scope.selectPage($scope.currentPage + 1); 169 $scope.selectPage($scope.currentPage + 1);
161 $scope.selectedChofer = 0; 170 $scope.selectedChofer = 0;
162 } 171 }
163 } 172 }
164 } 173 }
165 ] 174 ]
166 ); 175 );
167 176
src/views/modal-chofer.html
Diff comments   View file @ 03513d7
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">Busqueda de Chofer</h5> 4 <h5 class="modal-title my-1">Búsqueda de Chofer</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" 10 class="form-control"
11 placeholder="Busqueda" 11 id="search"
12 placeholder="Búsqueda"
12 ng-model="filters" 13 ng-model="filters"
13 ng-change="search()" 14 ng-change="search()"
14 ng-keydown="busquedaDown($event.keyCode)" 15 ng-keydown="busquedaDown($event.keyCode)"
15 ng-keypress="busquedaPress($event.keyCode)" 16 ng-keypress="busquedaPress($event.keyCode)"
16 foca-focus="selectedChofer == -1" 17 foca-focus="selectedChofer == -1"
17 ng-focus="selectedChofer = -1" 18 ng-focus="selectedChofer = -1"
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 </div> 31 </div>
31 32
32 </div> 33 </div>
33 <div class="modal-body" id="modal-body"> 34 <div class="modal-body" id="modal-body">
34 35
35 <div ng-show="!primerBusqueda"> 36 <div ng-show="!primerBusqueda">
36 Debe realizar una primer búsqueda. 37 Debe realizar una primer búsqueda.
37 </div> 38 </div>
38 39
39 <table ng-show="primerBusqueda" class="table table-striped table-sm"> 40 <table ng-show="primerBusqueda" class="table table-striped table-sm">
40 <thead> 41 <thead>
41 <tr> 42 <tr>
42 <th>Código</th> 43 <th>Código</th>
43 <th>Nombre</th> 44 <th>Nombre</th>
44 <th>DNI</th> 45 <th>DNI</th>
45 <th>Teléfono</th> 46 <th>Teléfono</th>
46 <th></th> 47 <th></th>
47 </tr> 48 </tr>
48 </thead> 49 </thead>
49 <tbody> 50 <tbody>
50 <tr ng-show="currentPageChoferes.length == 0 && primerBusqueda"> 51 <tr ng-show="currentPageChoferes.length == 0 && primerBusqueda">
51 <td colspan="5"> 52 <td colspan="5">
52 No se encontraron resultados. 53 No se encontraron resultados.
53 </td> 54 </td>
54 </tr> 55 </tr>
55 <tr class="selectable" 56 <tr class="selectable"
56 ng-repeat="(key,chofer) in currentPageChoferes" 57 ng-repeat="(key,chofer) in currentPageChoferes"
57 ng-click="select(chofer)"> 58 ng-click="select(chofer)">
58 <td ng-bind="chofer.id"></td> 59 <td ng-bind="chofer.id"></td>
59 <td ng-bind="chofer.nombre"></td> 60 <td ng-bind="chofer.nombre"></td>
60 <td ng-bind="chofer.dni"></td> 61 <td ng-bind="chofer.dni"></td>
61 <td ng-bind="chofer.telefono"></td> 62 <td ng-bind="chofer.telefono"></td>
62 <td> 63 <td>
63 <button 64 <button
64 type="button" 65 type="button"
65 class="btn btn-xs p-1 float-right" 66 class="btn btn-xs p-1 float-right"
66 ng-class="{ 67 ng-class="{
67 'btn-secondary': selectedChofer != key, 68 'btn-secondary': selectedChofer != key,
68 'btn-primary': selectedChofer == key 69 'btn-primary': selectedChofer == key
69 }" 70 }"
70 foca-focus="selectedChofer == {{key}}" 71 foca-focus="selectedChofer == {{key}}"
71 ng-keydown="itemChofer($event.keyCode)" 72 ng-keydown="itemChofer($event.keyCode)"
72 > 73 >
73 <i class="fa fa-circle-thin" aria-hidden="true"></i> 74 <i class="fa fa-circle-thin" aria-hidden="true"></i>
74 </button> 75 </button>
75 </td> 76 </td>
76 </tr> 77 </tr>
77 </tbody> 78 </tbody>
78 </table> 79 </table>
79 </div> 80 </div>
80 <div class="modal-footer py-1"> 81 <div class="modal-footer py-1">
81 <nav ng-show="currentPageChoferes.length > 0 && primerBusqueda" class="mr-auto"> 82 <nav ng-show="currentPageChoferes.length > 0 && primerBusqueda" class="mr-auto">
82 <ul class="pagination pagination-sm justify-content mb-0"> 83 <ul class="pagination pagination-sm justify-content mb-0">
83 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 84 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
84 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)"> 85 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
85 <span aria-hidden="true">&laquo;</span> 86 <span aria-hidden="true">&laquo;</span>
86 <span class="sr-only">Anterior</span> 87 <span class="sr-only">Anterior</span>
87 </a> 88 </a>
88 </li> 89 </li>
89 <li 90 <li
90 class="page-item" 91 class="page-item"
91 ng-repeat="pagina in paginas" 92 ng-repeat="pagina in paginas"
92 ng-class="{'active': pagina == currentPage}" 93 ng-class="{'active': pagina == currentPage}"
93 > 94 >
94 <a 95 <a
95 class="page-link" 96 class="page-link"
96 href="javascript:void();" 97 href="javascript:void();"
97 ng-click="selectPage(pagina)" 98 ng-click="selectPage(pagina)"
98 ng-bind="pagina" 99 ng-bind="pagina"
99 ></a> 100 ></a>
100 </li> 101 </li>
101 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 102 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
102 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)"> 103 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
103 <span aria-hidden="true">&raquo;</span> 104 <span aria-hidden="true">&raquo;</span>
104 <span class="sr-only">Siguiente</span> 105 <span class="sr-only">Siguiente</span>
105 </a> 106 </a>
106 </li> 107 </li>
107 </ul> 108 </ul>
108 </nav> 109 </nav>
109 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button> 110 <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
110 </div> 111 </div>
111 112