Eric Fernandez / foca-modal-flete

Download as
Browse Code »

Commit f8ce3cf2a63dc538b7d8b82d4367852ec4688efa

Authored by Pablo Marco del Pont
1 parent 6f37e38048
Exists in master

Refactor para pedir parámetros de flete en vez de buscar transportista.

Showing 4 changed files with 160 additions and 254 deletions   Show diff stats
... ... @@ -73,3 +73,7 @@ gulp.task('clean-post-install', function(){
73 73 });
74 74  
75 75 gulp.task('default', ['webserver']);
  76 +
  77 +gulp.task('watch', function() {
  78 + gulp.watch([srcJS, srcViews], ['uglify']);
  79 +});
1 1 {
2   - "name": "foca-modal-flete",
3   - "version": "0.0.1",
4   - "description": "Modal de búsqueda de fletes",
5   - "main": "index.js",
6   - "scripts": {
7   - "test": "echo \"Error: no test specified\" && exit 1",
8   - "gulp-pre-commit": "gulp pre-commit",
9   - "compile": "gulp uglify",
10   - "postinstall": "npm run compile && gulp clean-post-install",
11   - "install-dev": "npm install -D angular font-awesome pump jquery bootstrap ui-bootstrap4 jshint gulp gulp-uglify gulp-concat gulp-htmlmin gulp-rename gulp-uglify gulp-jshint gulp-replace gulp-connect gulp-clean gulp-angular-templatecache git+https://debo.suite.repo/modulos-npm/foca-directivas.git"
12   - },
13   - "pre-commit": [
14   - "gulp-pre-commit"
15   - ],
16   - "repository": {
17   - "type": "git",
18   - "url": "https://debo.suite.repo/modulos-npm/foca-modal-flete.git"
19   - },
20   - "author": "Foca Software",
21   - "license": "ISC",
22   - "devDependencies": {
23   - "angular": "^1.7.5",
24   - "bootstrap": "^4.1.3",
25   - "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git",
26   - "font-awesome": "^4.7.0",
27   - "gulp": "^3.9.1",
28   - "gulp-angular-templatecache": "^2.2.2",
29   - "gulp-clean": "^0.4.0",
30   - "gulp-concat": "^2.6.1",
31   - "gulp-connect": "^5.6.1",
32   - "gulp-htmlmin": "^5.0.1",
33   - "gulp-jshint": "^2.1.0",
34   - "gulp-rename": "^1.4.0",
35   - "gulp-replace": "^1.0.0",
36   - "gulp-uglify": "^3.0.1",
37   - "jquery": "^3.3.1",
38   - "jshint": "^2.9.6",
39   - "pump": "^3.0.0",
40   - "ui-bootstrap4": "^3.0.5"
  2 + "name": "foca-modal-flete",
  3 + "version": "0.0.1",
  4 + "description": "Modal de búsqueda de fletes",
  5 + "main": "index.js",
  6 + "scripts": {
  7 + "test": "echo \"Error: no test specified\" && exit 1",
  8 + "gulp-pre-commit": "gulp pre-commit",
  9 + "compile": "gulp uglify",
  10 + "postinstall": "npm run compile && gulp clean-post-install",
  11 + "install-dev": "npm install -D angular font-awesome pump jquery bootstrap ui-bootstrap4 jshint gulp gulp-uglify gulp-concat gulp-htmlmin gulp-rename gulp-uglify gulp-jshint gulp-replace gulp-connect gulp-clean gulp-angular-templatecache git+https://debo.suite.repo/modulos-npm/foca-directivas.git"
  12 + },
  13 + "pre-commit": [
  14 + "gulp-pre-commit"
  15 + ],
  16 + "repository": {
  17 + "type": "git",
  18 + "url": "https://debo.suite.repo/modulos-npm/foca-modal-flete.git"
  19 + },
  20 + "author": "Foca Software",
  21 + "license": "ISC",
  22 + "devDependencies": {
  23 + "angular": "^1.7.5",
  24 + "bootstrap": "^4.1.3",
  25 + "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git",
  26 + "font-awesome": "^4.7.0",
  27 + "gulp": "^3.9.1",
  28 + "gulp-angular-templatecache": "2.2.2",
  29 + "gulp-clean": "0.4.0",
  30 + "gulp-concat": "^2.6.1",
  31 + "gulp-connect": "^5.6.1",
  32 + "gulp-htmlmin": "5.0.1",
  33 + "gulp-jshint": "2.1.0",
  34 + "gulp-rename": "1.4.0",
  35 + "gulp-replace": "1.0.0",
  36 + "gulp-uglify": "3.0.1",
  37 + "jquery": "^3.3.1",
  38 + "jshint": "2.9.6",
  39 + "pump": "3.0.0",
  40 + "ui-bootstrap4": "^3.0.5"
41 41 }
42 42 }
src/js/controller.js
Diff comments   View file @ f8ce3cf
... ... @@ -4,152 +4,32 @@ angular.module('focaModalFlete')
4 4 '$filter',
5 5 '$scope',
6 6 '$uibModalInstance',
7   - 'focaModalFleteService',
8   - function($filter, $scope, $uibModalInstance, focaModalFleteService) {
9   - focaModalFleteService.getFletes().then(
10   - function(res) {
11   - $scope.flete = res.data;
12   - $scope.search();
13   - }
14   - );
15   -
16   - // pagination
17   - $scope.numPerPage = 10;
18   - $scope.currentPage = 1;
19   - $scope.filteredFlete = [];
20   - $scope.currentPageFlete = [];
21   - $scope.selectedFlete = -1;
22   -
23   - //METODOS
24   - $scope.search = function() {
25   - $scope.filteredFlete = $filter('filter')(
26   - $scope.flete,
27   - {$: $scope.filters}
28   - );
29   -
30   - $scope.lastPage = Math.ceil(
31   - $scope.filteredFlete.length / $scope.numPerPage
32   - );
33   -
34   - $scope.resetPage();
35   - };
36   -
37   - $scope.resetPage = function() {
38   - $scope.currentPage = 1;
39   - $scope.selectPage(1);
40   - };
41   -
42   - $scope.selectPage = function(page) {
43   - var start = (page - 1) * $scope.numPerPage;
44   - var end = start + $scope.numPerPage;
45   - $scope.paginas = [];
46   - $scope.paginas = calcularPages(page);
47   - $scope.currentPageFlete =
48   - $scope.filteredFlete.slice(start, end);
49   - $scope.currentPage = page;
50   - };
51   -
52   - $scope.select = function(flete) {
53   - $uibModalInstance.close(flete);
  7 + 'parametrosFlete',
  8 + function($filter, $scope, $uibModalInstance, parametrosFlete) {
  9 + $scope.parametrosFlete = parametrosFlete;
  10 + $scope.aceptar = function() {
  11 + $uibModalInstance.close($scope.parametrosFlete);
54 12 };
55 13  
56 14 $scope.cancel = function() {
57 15 $uibModalInstance.dismiss('cancel');
58 16 };
59   -
60   - $scope.busquedaDown = function(key) {
61   - if (key === 40) {
62   - primera(key);
63   - }
64   - };
65   -
66   - $scope.busquedaPress = function(key) {
67   - if (key === 13) {
68   - primera(key);
69   - }
70   - };
71   -
72   - $scope.itemProducto = function(key) {
73   - if (key === 38) {
74   - anterior(key);
75   - }
76   -
77   - if (key === 40) {
78   - siguiente(key);
79   - }
80   -
81   - if (key === 37) {
82   - retrocederPagina();
83   - }
84   -
85   - if (key === 39) {
86   - avanzarPagina();
87   - }
88   - };
89   -
90   - function calcularPages(paginaActual) {
91   - var paginas = [];
92   - paginas.push(paginaActual);
93   -
94   - if (paginaActual - 1 > 1) {
95   -
96   - paginas.unshift(paginaActual - 1);
97   - if (paginaActual - 2 > 1) {
98   - paginas.unshift(paginaActual - 2);
99   - }
100   - }
101   -
102   - if (paginaActual + 1 < $scope.lastPage) {
103   - paginas.push(paginaActual + 1);
104   - if (paginaActual + 2 < $scope.lastPage) {
105   - paginas.push(paginaActual + 2);
106   - }
107   - }
108   -
109   - if (paginaActual !== 1) {
110   - paginas.unshift(1);
111   - }
112   -
113   - if (paginaActual !== $scope.lastPage) {
114   - paginas.push($scope.lastPage);
115   - }
116   -
117   - return paginas;
118   - }
119   -
120   - function primera() {
121   - $scope.selectedFlete = 0;
122   - }
123   -
124   - function anterior() {
125   - if ($scope.selectedFlete === 0 && $scope.currentPage > 1) {
126   - retrocederPagina();
127   - } else {
128   - $scope.selectedFlete--;
129   - }
130   - }
131   -
132   - function siguiente() {
133   - if ($scope.selectedFlete <
134   - $scope.currentPageFlete.length - 1 ) {
135   - $scope.selectedFlete++;
136   - } else {
137   - avanzarPagina();
138   - }
139   - }
140   -
141   - function retrocederPagina() {
142   - if ($scope.currentPage > 1) {
143   - $scope.selectPage($scope.currentPage - 1);
144   - $scope.selectedFlete = $scope.numPerPage - 1;
145   - }
146   - }
147   -
148   - function avanzarPagina() {
149   - if ($scope.currentPage < $scope.lastPage) {
150   - $scope.selectPage($scope.currentPage + 1);
151   - $scope.selectedFlete = 0;
152   - }
  17 +
  18 + $scope.validar = function() {
  19 + return $scope.formFlete.$pristine ||
  20 + (
  21 + $scope.parametrosFlete.flete === 'si' &&
  22 + (
  23 + (
  24 + $scope.parametrosFlete.bomba !== 'si' &&
  25 + $scope.parametrosFlete.bomba !== 'no'
  26 + ) ||
  27 + (
  28 + !$scope.parametrosFlete.kilometros ||
  29 + $scope.parametrosFlete.kilometros < 1
  30 + )
  31 + )
  32 + );
153 33 }
154 34 }
155 35 ]
src/views/modal-flete.html
Diff comments   View file @ f8ce3cf
1 1 <div class="modal-header">
2   - <h3 class="modal-title">Busqueda de Flete</h3>
  2 + <h3 class="modal-title">Opciones de Flete</h3>
3 3 </div>
4 4 <div class="modal-body" id="modal-body">
5   - <div class="input-group mb-3">
6   - <input
7   - type="text"
8   - class="form-control"
9   - placeholder="Busqueda"
10   - ng-model="filters"
11   - ng-change="search()"
12   - ng-keydown="busquedaDown($event.keyCode)"
13   - ng-keypress="busquedaPress($event.keyCode)"
14   - foca-focus="selectedFlete == -1"
15   - ng-focus="selectedFlete = -1"
16   - >
17   - <table class="table table-striped table-sm">
18   - <thead>
19   - <tr>
20   - <th>Nombre</th>
21   - <th>CUIT</th>
22   - <th>Costo x km</th>
23   - <th></th>
24   - </tr>
25   - </thead>
26   - <tbody>
27   - <tr ng-repeat="(key,flete) in currentPageFlete">
28   - <td ng-bind="flete.nombre"></td>
29   - <td ng-bind="flete.CUIT"></td>
30   - <td ng-bind="flete.costoKilometro"></td>
31   - <td>
32   - <button
33   - type="button"
34   - class="btn p-2 float-right"
35   - ng-class="{
36   - 'btn-secondary': selectedFlete != key,
37   - 'btn-primary': selectedFlete == key
38   - }"
39   - ng-click="select(flete)"
40   - foca-focus="selectedFlete == {{key}}"
41   - ng-keydown="itemProducto($event.keyCode)"
42   - >
43   - <i class="fa fa-arrow-right" aria-hidden="true"></i>
44   - </button>
45   - </td>
46   - </tr>
47   - </tbody>
48   - </table>
49   - <nav>
50   - <ul class="pagination justify-content-end">
51   - <li class="page-item" ng-class="{'disabled': currentPage == 1}">
52   - <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
53   - <span aria-hidden="true">&laquo;</span>
54   - <span class="sr-only">Anterior</span>
55   - </a>
56   - </li>
57   - <li
58   - class="page-item"
59   - ng-repeat="pagina in paginas"
60   - ng-class="{'active': pagina == currentPage}"
61   - >
62   - <a
63   - class="page-link"
64   - href="#"
65   - ng-click="selectPage(pagina)"
66   - ng-bind="pagina"
67   - ></a>
68   - </li>
69   - <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
70   - <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
71   - <span aria-hidden="true">&raquo;</span>
72   - <span class="sr-only">Siguiente</span>
73   - </a>
74   - </li>
75   - </ul>
76   - </nav>
77   - </div>
  5 + <form name="formFlete">
  6 + <div class="form-group row">
  7 + <div class="col-6">
  8 + <div class="row">
  9 + <legend class="col-form-label col-sm-4 pt-0">Flete</legend>
  10 + <div class="col-sm-8">
  11 + <div class="form-check">
  12 + <input
  13 + class="form-check-input"
  14 + type="radio"
  15 + name="flete"
  16 + id="fleteSi"
  17 + value="si"
  18 + checked
  19 + ng-model="parametrosFlete.flete"
  20 + />
  21 + <label class="form-check-label" for="fleteSi">Si</label>
  22 + </div>
  23 + <div class="form-check">
  24 + <input
  25 + class="form-check-input"
  26 + type="radio"
  27 + name="flete"
  28 + id="fleteNo"
  29 + value="no"
  30 + ng-model="parametrosFlete.flete"
  31 + />
  32 + <label class="form-check-label" for="fleteNo">No</label>
  33 + </div>
  34 + <div class="form-check">
  35 + <input
  36 + class="form-check-input"
  37 + type="radio"
  38 + name="flete"
  39 + id="fleteFub"
  40 + value="FOB"
  41 + ng-model="parametrosFlete.flete"
  42 + />
  43 + <label class="form-check-label" for="fleteFub">FOB</label>
  44 + </div>
  45 + </div>
  46 + <span ng-show="formFlete.flete.$error.required">Debe seleccionar un flete.</span>
  47 + </div>
  48 + </div>
  49 + <div class="col-6">
  50 + <div class="form-group row" ng-show="parametrosFlete.flete == 'si'">
  51 + <legend class="col-form-label col-sm-4 pt-0">Bomba</legend>
  52 + <div class="col-sm-8">
  53 + <div class="form-check">
  54 + <input
  55 + class="form-check-input"
  56 + type="radio"
  57 + name="bomba"
  58 + id="bombaSi"
  59 + value="si"
  60 + checked
  61 + ng-model="parametrosFlete.bomba"
  62 + />
  63 + <label class="form-check-label" for="bombaSi">Si</label>
  64 + </div>
  65 + <div class="form-check">
  66 + <input
  67 + class="form-check-input"
  68 + type="radio"
  69 + name="bomba"
  70 + id="bombaNo"
  71 + value="no"
  72 + ng-model="parametrosFlete.bomba"
  73 + />
  74 + <label class="form-check-label" for="bombaNo">No</label>
  75 + </div>
  76 + </div>
  77 + </div>
  78 + <div class="form-group row" ng-show="parametrosFlete.flete == 'si'">
  79 + <label for="kilometros" class="col-sm-4 col-form-label">Kilometros</label>
  80 + <div class="col-sm-8">
  81 + <input
  82 + type="number"
  83 + class="form-control"
  84 + id="kilometros"
  85 + name="kilometros"
  86 + placeholder="Kilómetros"
  87 + ng-model="parametrosFlete.kilometros"
  88 + />
  89 + </div>
  90 + </div>
  91 + </div>
  92 + </div>
  93 + </form>
78 94 </div>
79 95 <div class="modal-footer">
  96 + <button
  97 + class="btn btn-secondary"
  98 + type="button"
  99 + ng-click="aceptar()"
  100 + ng-disabled="validar()"
  101 + >Aceptar</button>
80 102 <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
81 103 </div>