Mauricio Cattafi / foca-modal-vendedores

Download as
Browse Code »

Commit 4a26a5c449037358d46f6876b509b96e08d1d1cf

Authored by Nicolás Guarnieri
2 parents 8a3a4a039e 9bd371423a
Exists in master

arreglos para mejor funcionamiento en mobile

Showing 7 changed files   Show diff stats
... ... @@ -8,6 +8,7 @@ const pump = require('pump');
8 8 const jshint = require('gulp-jshint');
9 9 const replace = require('gulp-replace');
10 10 const connect = require('gulp-connect');
  11 +const clean = require('gulp-clean');
11 12  
12 13 var paths = {
13 14 srcJS: 'src/js/*.js',
... ... @@ -39,6 +40,8 @@ gulp.task('uglify', ['templates'], function() {
39 40 'tmp/views.js'
40 41 ]),
41 42 concat('foca-modal-vendedores.js'),
  43 + replace('src/views/', ''),
  44 + replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
42 45 gulp.dest(paths.tmp),
43 46 rename('foca-modal-vendedores.min.js'),
44 47 uglify(),
... ... @@ -66,4 +69,14 @@ gulp.task('webserver', function() {
66 69 ]
67 70 });
68 71  
69   -gulp.task('default', ['webserver']);
70 72 \ No newline at end of file
  73 +gulp.task('clean-post-install', function(){
  74 + return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
  75 + 'index.html'], {read: false})
  76 + .pipe(clean());
  77 +});
  78 +
  79 +gulp.task('default', ['webserver']);
  80 +
  81 +gulp.task('watch', function() {
  82 + gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
  83 +});
... ... @@ -7,6 +7,7 @@
7 7 <!--CSS-->
8 8 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
9 9 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
  10 + <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
10 11  
11 12 <!--VENDOR JS-->
12 13 <script src="node_modules/jquery/dist/jquery.min.js"></script>
... ... @@ -14,6 +15,9 @@
14 15 <script src="node_modules/angular/angular.min.js"></script>
15 16 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
16 17 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
  18 + <script src="node_modules/ladda/dist/spin.min.js"></script>
  19 + <script src="node_modules/ladda/dist/ladda.min.js"></script>
  20 + <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
17 21  
18 22 <!-- BUILD -->
19 23 <script src="src/js/app.js"></script>
... ... @@ -48,8 +52,6 @@
48 52 }
49 53 );
50 54 }
51   -
52   -
53 55 }]);
54 56 </script>
55 57  
... ... @@ -7,15 +7,15 @@
7 7 "test": "echo \"Error: no test specified\" && exit 1",
8 8 "gulp-pre-commit": "gulp pre-commit",
9 9 "compile": "gulp uglify",
10   - "postinstall": "npm run compile && rm -R src && rm index.html && rm .jshintrc && rm gulpfile.js",
11   - "install-dev": "npm install -D angular bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://192.168.0.11/modulos-npm/foca-directivas"
  10 + "postinstall": "npm run compile && gulp clean-post-install",
  11 + "install-dev": "npm install -D angular angular-ladda ladda@1.0.6 bootstrap font-awesome gulp gulp-angular-templatecache gulp-concat gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-clean gulp-replace gulp-uglify jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas"
12 12 },
13 13 "pre-commit": [
14 14 "gulp-pre-commit"
15 15 ],
16 16 "repository": {
17 17 "type": "git",
18   - "url": "https://192.168.0.11/modulos-npm/foca-modal-vendedores"
  18 + "url": "https://debo.suite.repo/modulos-npm/foca-modal-vendedores"
19 19 },
20 20 "author": "Foca Software",
21 21 "license": "ISC",
... ... @@ -34,15 +34,17 @@
34 34 "gulp-uglify": "^3.0.1",
35 35 "jquery": "^3.3.1",
36 36 "pump": "^3.0.0",
37   - "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas"
  37 + "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas"
38 38 },
39 39 "devDependencies": {
40 40 "angular": "^1.7.5",
  41 + "angular-ladda": "^0.4.3",
41 42 "bootstrap": "^4.1.3",
42   - "foca-directivas": "git+https://192.168.0.11/modulos-npm/foca-directivas",
  43 + "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
43 44 "font-awesome": "^4.7.0",
44 45 "gulp": "^3.9.1",
45   - "gulp-angular-templatecache": "^2.2.1",
  46 + "gulp-angular-templatecache": "^2.2.3",
  47 + "gulp-clean": "^0.4.0",
46 48 "gulp-concat": "^2.6.1",
47 49 "gulp-connect": "^5.6.1",
48 50 "gulp-htmlmin": "^5.0.1",
... ... @@ -50,9 +52,10 @@
50 52 "gulp-rename": "^1.4.0",
51 53 "gulp-replace": "^1.0.0",
52 54 "gulp-uglify": "^3.0.1",
53   - "jasmine-core": "^3.2.1",
  55 + "jasmine-core": "^3.3.0",
54 56 "jquery": "^3.3.1",
55 57 "jshint": "^2.9.6",
  58 + "ladda": "1.0.6",
56 59 "pre-commit": "^1.2.2",
57 60 "pump": "^3.0.0",
58 61 "ui-bootstrap4": "^3.0.5"
1   -angular.module('focaModalVendedores', ['ui.bootstrap', 'focaDirectivas']);
  1 +angular.module('focaModalVendedores', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
src/js/controller.js
Diff comments   View file @ 4a26a5c
... ... @@ -5,13 +5,11 @@ angular.module(&#39;focaModalVendedores&#39;)
5 5 '$uibModalInstance',
6 6 'focaVendedoresService',
7 7 function($filter, $scope, $uibModalInstance, focaVendedoresService) {
8   - focaVendedoresService.getVendedores().then(
9   - function(res) {
10   - $scope.vendedores = res.data;
11   - $scope.search();
12   - }
13   - );
14 8  
  9 + $scope.filters = '';
  10 + $scope.vendedores = [];
  11 + $scope.primerBusqueda = false;
  12 + $scope.searchLoading = false;
15 13 // pagination
16 14 $scope.numPerPage = 10;
17 15 $scope.currentPage = 1;
... ... @@ -19,16 +17,31 @@ angular.module(&#39;focaModalVendedores&#39;)
19 17 $scope.currentPageVendedores = [];
20 18 $scope.selectedVendedor = -1;
21 19  
  20 + $scope.busquedaPress = function(key) {
  21 + if (key === 13) {
  22 + $scope.searchLoading = true;
  23 + focaVendedoresService.getVendedores($scope.filters).then(
  24 + function(res) {
  25 + $scope.searchLoading = false;
  26 + $scope.primerBusqueda = true;
  27 + $scope.vendedores = res.data;
  28 + $scope.search();
  29 + primera();
  30 + }
  31 + );
  32 + }
  33 + };
  34 +
22 35 $scope.search = function() {
23   - $scope.filteredVendedores = $filter('filter')(
  36 + if($scope.vendedores.length > 0) {
  37 + $scope.filteredVendedores = $filter('filter')(
24 38 $scope.vendedores, { $: $scope.filters }
25   - );
26   -
27   - $scope.lastPage = Math.ceil(
28   - $scope.filteredVendedores.length / $scope.numPerPage
29   - );
30   -
31   - $scope.resetPage();
  39 + );
  40 + $scope.lastPage = Math.ceil(
  41 + $scope.filteredVendedores.length / $scope.numPerPage
  42 + );
  43 + $scope.resetPage();
  44 + }
32 45 };
33 46  
34 47 $scope.resetPage = function() {
... ... @@ -59,12 +72,6 @@ angular.module(&#39;focaModalVendedores&#39;)
59 72 }
60 73 };
61 74  
62   - $scope.busquedaPress = function(key) {
63   - if (key === 13) {
64   - primera(key);
65   - }
66   - };
67   -
68 75 $scope.itemVendedor = function(key) {
69 76 if (key === 38) {
70 77 anterior(key);
1 1 angular.module('focaModalVendedores')
2 2 .service('focaVendedoresService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
3 3 return {
4   - getVendedores: function() {
  4 + getVendedores: function(filters) {
5 5 // TODO ACOMODAR PARA TURNOS AHORA 1 HARDCODEO
6   - return $http.get(API_ENDPOINT.URL + '/vendedores/1');
  6 + return $http.post(API_ENDPOINT.URL + '/vendedores', {nombre: filters});
7 7 }
8 8 };
9 9 }]);
src/views/modal-vendedores.html
Diff comments   View file @ 4a26a5c
1   -<div class="modal-header">
2   - <h3 class="modal-title">Búsqueda de vendedores</h3>
  1 +<div class="modal-header py-1">
  2 + <h5 class="modal-title">Búsqueda de vendedores</h5>
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"
  5 + <div class="input-group">
  6 + <input
  7 + ladda="searchLoading"
  8 + type="text"
  9 + class="form-control form-control-sm"
  10 + placeholder="Busqueda"
  11 + ng-model="filters"
11 12 ng-change="search()"
12 13 ng-keydown="busquedaDown($event.keyCode)"
13 14 ng-keypress="busquedaPress($event.keyCode)"
14 15 foca-focus="selectedVendedor == -1"
15 16 ng-focus="selectedVendedor = -1"
16 17 >
17   - <table class="table table-striped table-sm">
18   - <thead>
19   - <tr>
20   - <th>Código</th>
21   - <th>Nombre</th>
22   - <th></th>
23   - </tr>
24   - </thead>
25   - <tbody>
26   - <tr ng-repeat="(key, vendedor) in currentPageVendedores">
27   - <td ng-bind="vendedor.CodVen"></td>
28   - <td ng-bind="vendedor.NomVen"></td>
29   - <td>
30   - <button
31   - type="button"
32   - class="btn p-2 float-right"
33   - ng-class="{
34   - 'btn-secondary': selectedVendedor != key,
35   - 'btn-primary': selectedVendedor == key
36   - }"
37   - ng-click="select(vendedor)"
38   - foca-focus="selectedVendedor == {{key}}"
39   - ng-keydown="itemVendedor($event.keyCode)">
40   - <i class="fa fa-arrow-right" aria-hidden="true"></i>
41   - </button>
42   - </td>
43   - </tr>
44   - </tbody>
45   - </table>
46   - <nav>
47   - <ul class="pagination justify-content-end">
48   - <li class="page-item" ng-class="{'disabled': currentPage == 1}">
49   - <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
50   - <span aria-hidden="true">&laquo;</span>
51   - <span class="sr-only">Anterior</span>
52   - </a>
53   - </li>
54   - <li
55   - class="page-item"
56   - ng-repeat="pagina in paginas"
57   - ng-class="{'active': pagina == currentPage}"
58   - >
59   - <a
60   - class="page-link"
61   - href="#"
62   - ng-click="selectPage(pagina)"
63   - ng-bind="pagina"
64   - ></a>
65   - </li>
66   - <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
67   - <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
68   - <span aria-hidden="true">&raquo;</span>
69   - <span class="sr-only">Siguiente</span>
70   - </a>
71   - </li>
72   - </ul>
73   - </nav>
  18 + <div class="input-group-append">
  19 + <button
  20 + ladda="searchLoading"
  21 + class="btn btn-outline-secondary"
  22 + type="button"
  23 + ng-click="busquedaPress(13)"
  24 + >
  25 + <i class="fa fa-search" aria-hidden="true"></i>
  26 + </button>
  27 + </div>
74 28 </div>
  29 + <table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
  30 + <thead>
  31 + <tr>
  32 + <th>Código</th>
  33 + <th>Nombre</th>
  34 + <th></th>
  35 + </tr>
  36 + </thead>
  37 + <tbody>
  38 + <tr ng-show="currentPageVendedores.length == 0 && primerBusqueda">
  39 + <td colspan="3">
  40 + No se encontraron resultados.
  41 + </td>
  42 + </tr>
  43 + <tr class="selected"
  44 + ng-repeat="(key, vendedor) in currentPageVendedores"
  45 + ng-click="select(vendedor)"
  46 + >
  47 + <td ng-bind="vendedor.CodVen"></td>
  48 + <td ng-bind="vendedor.NomVen"></td>
  49 + <td>
  50 + <button
  51 + type="button"
  52 + class="btn btn-xs p-1 float-right"
  53 + ng-class="{
  54 + 'btn-secondary': selectedVendedor != key,
  55 + 'btn-primary': selectedVendedor == key
  56 + }"
  57 + foca-focus="selectedVendedor == {{key}}"
  58 + ng-keydown="itemVendedor($event.keyCode)">
  59 + <i class="fa fa-arrow-right" aria-hidden="true"></i>
  60 + </button>
  61 + </td>
  62 + </tr>
  63 + </tbody>
  64 + </table>
  65 + <nav ng-show="currentPageVendedores.length > 0 && primerBusqueda">
  66 + <ul class="pagination pagination-sm justify-content mb-0">
  67 + <li class="page-item" ng-class="{'disabled': currentPage == 1}">
  68 + <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
  69 + <span aria-hidden="true">&laquo;</span>
  70 + <span class="sr-only">Anterior</span>
  71 + </a>
  72 + </li>
  73 + <li
  74 + class="page-item"
  75 + ng-repeat="pagina in paginas"
  76 + ng-class="{'active': pagina == currentPage}"
  77 + >
  78 + <a
  79 + class="page-link"
  80 + href="#"
  81 + ng-click="selectPage(pagina)"
  82 + ng-bind="pagina"
  83 + ></a>
  84 + </li>
  85 + <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
  86 + <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
  87 + <span aria-hidden="true">&raquo;</span>
  88 + <span class="sr-only">Siguiente</span>
  89 + </a>
  90 + </li>
  91 + </ul>
  92 + </nav>
  93 +</div>
  94 +<div class="modal-footer py-1">
  95 + <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
75 96 </div>
76   -<div class="modal-footer">
77   - <button class="btn btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
78   -</div>
79 97 \ No newline at end of file