Commit a7d374b5e8450913c0764cb4efd00e6f1c83d4d2
1 parent
28fbfe450c
Exists in
master
buscador en header, paginado en footer, cambio icons
Showing
2 changed files
with
40 additions
and
30 deletions
Show diff stats
package.json
1 | { | 1 | { |
2 | "name": "foca-modal-vehiculo", | 2 | "name": "foca-modal-vehiculo", |
3 | "version": "0.0.1", | 3 | "version": "0.0.1", |
4 | "description": "Modal de búsqueda de vehiculos", | 4 | "description": "Modal de búsqueda de vehiculos", |
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+https://debo.suite.repo/modulos-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-vehiculo.git" | 17 | "url": "https://debo.suite.repo/modulos-npm/foca-modal-vehiculo.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+https://debo.suite.repo/modulos-npm/foca-directivas" | 36 | "foca-directivas": "git+ssh://git@git.focasoftware.com:npm/foca-directivas" |
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+https://debo.suite.repo/modulos-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/views/modal-vehiculo.html
1 | <div class="modal-header py-1"> | 1 | <div class="modal-header py-1"> |
2 | <h5 class="modal-title">Busqueda de Vehiculo</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">Busqueda de Vehiculo</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" | ||
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="selectedVehiculo == -1" | ||
16 | ng-focus="selectedVehiculo = -1" | ||
17 | > | ||
18 | <div class="input-group-append"> | ||
19 | <button | ||
20 | ladda="searchLoading" | 8 | ladda="searchLoading" |
21 | class="btn btn-outline-secondary" | 9 | type="text" |
22 | type="button" | 10 | class="form-control" |
23 | ng-click="busquedaPress(13)" | 11 | placeholder="Busqueda" |
12 | ng-model="filters" | ||
13 | ng-change="search()" | ||
14 | ng-keydown="busquedaDown($event.keyCode)" | ||
15 | ng-keypress="busquedaPress($event.keyCode)" | ||
16 | foca-focus="selectedVehiculo == -1" | ||
17 | ng-focus="selectedVehiculo = -1" | ||
24 | > | 18 | > |
25 | <i class="fa fa-search" aria-hidden="true"></i> | 19 | <div class="input-group-append"> |
26 | </button> | 20 | <button |
21 | ladda="searchLoading" | ||
22 | class="btn btn-outline-secondary" | ||
23 | type="button" | ||
24 | ng-click="busquedaPress(13)" | ||
25 | > | ||
26 | <i class="fa fa-search" aria-hidden="true"></i> | ||
27 | </button> | ||
28 | </div> | ||
27 | </div> | 29 | </div> |
28 | </div> | 30 | </div> |
31 | </div> | ||
32 | <div class="modal-body" id="modal-body"> | ||
33 | |||
34 | <div ng-show="!primerBusqueda"> | ||
35 | Debe realizar una primer búsqueda. | ||
36 | </div> | ||
37 | |||
29 | <table ng-show="primerBusqueda" class="table table-striped table-sm"> | 38 | <table ng-show="primerBusqueda" class="table table-striped table-sm"> |
30 | <thead> | 39 | <thead> |
31 | <tr> | 40 | <tr> |
32 | <th>Código</th> | 41 | <th>Código</th> |
33 | <th>Tractor</th> | 42 | <th>Tractor</th> |
34 | <th>Semi</th> | 43 | <th>Semi</th> |
35 | <th>Capacidad</th> | 44 | <th>Capacidad</th> |
36 | <th>Cisternado</th> | 45 | <th>Cisternado</th> |
37 | </tr> | 46 | </tr> |
38 | </thead> | 47 | </thead> |
39 | <tbody> | 48 | <tbody> |
40 | <tr ng-show="currentPageVehiculos.length == 0 && primerBusqueda"> | 49 | <tr ng-show="currentPageVehiculos.length == 0 && primerBusqueda"> |
41 | <td colspan="5"> | 50 | <td colspan="5"> |
42 | No se encontraron resultados. | 51 | No se encontraron resultados. |
43 | </td> | 52 | </td> |
44 | </tr> | 53 | </tr> |
45 | <tr class="selectable" | 54 | <tr class="selectable" |
46 | ng-repeat="(key,vehiculo) in currentPageVehiculos" | 55 | ng-repeat="(key,vehiculo) in currentPageVehiculos" |
47 | ng-click="select(vehiculo)"> | 56 | ng-click="select(vehiculo)"> |
48 | <td ng-bind="vehiculo.id"></td> | 57 | <td ng-bind="vehiculo.id"></td> |
49 | <td ng-bind="vehiculo.tractor"></td> | 58 | <td ng-bind="vehiculo.tractor"></td> |
50 | <td ng-bind="vehiculo.semi"></td> | 59 | <td ng-bind="vehiculo.semi"></td> |
51 | <td ng-bind="vehiculo.capacidad"></td> | 60 | <td ng-bind="vehiculo.capacidad"></td> |
52 | <td ng-bind="vehiculo.cisternado"></td> | 61 | <td ng-bind="vehiculo.cisternado"></td> |
53 | <td> | 62 | <td> |
54 | <button | 63 | <button |
55 | type="button" | 64 | type="button" |
56 | class="btn btn-xs p-1 float-right" | 65 | class="btn btn-xs p-1 float-right" |
57 | ng-class="{ | 66 | ng-class="{ |
58 | 'btn-secondary': selectedVehiculo != key, | 67 | 'btn-secondary': selectedVehiculo != key, |
59 | 'btn-primary': selectedVehiculo == key | 68 | 'btn-primary': selectedVehiculo == key |
60 | }" | 69 | }" |
61 | foca-focus="selectedVehiculo == {{key}}" | 70 | foca-focus="selectedVehiculo == {{key}}" |
62 | ng-keydown="itemVehiculo($event.keyCode)" | 71 | ng-keydown="itemVehiculo($event.keyCode)" |
63 | > | 72 | > |
64 | <i class="fa fa-arrow-right" aria-hidden="true"></i> | 73 | <i class="fa fa-circle-thin" aria-hidden="true"></i> |
65 | </button> | 74 | </button> |
66 | </td> | 75 | </td> |
67 | </tr> | 76 | </tr> |
68 | </tbody> | 77 | </tbody> |
69 | </table> | 78 | </table> |
70 | <nav ng-show="currentPageVehiculos.length > 0 && primerBusqueda"> | 79 | |
80 | </div> | ||
81 | <div class="modal-footer py-1"> | ||
82 | <nav ng-show="currentPageVehiculos.length > 0 && primerBusqueda" class="mr-auto"> | ||
71 | <ul class="pagination pagination-sm justify-content mb-0"> | 83 | <ul class="pagination pagination-sm justify-content mb-0"> |
72 | <li class="page-item" ng-class="{'disabled': currentPage == 1}"> | 84 | <li class="page-item" ng-class="{'disabled': currentPage == 1}"> |
73 | <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)"> |
74 | <span aria-hidden="true">«</span> | 86 | <span aria-hidden="true">«</span> |
75 | <span class="sr-only">Anterior</span> | 87 | <span class="sr-only">Anterior</span> |
76 | </a> | 88 | </a> |
77 | </li> | 89 | </li> |
78 | <li | 90 | <li |
79 | class="page-item" | 91 | class="page-item" |
80 | ng-repeat="pagina in paginas" | 92 | ng-repeat="pagina in paginas" |
81 | ng-class="{'active': pagina == currentPage}" | 93 | ng-class="{'active': pagina == currentPage}" |
82 | > | 94 | > |
83 | <a | 95 | <a |
84 | class="page-link" | 96 | class="page-link" |
85 | href="javascript:void();" | 97 | href="javascript:void();" |
86 | ng-click="selectPage(pagina)" | 98 | ng-click="selectPage(pagina)" |
87 | ng-bind="pagina" | 99 | ng-bind="pagina" |
88 | ></a> | 100 | ></a> |