Commit e645dcb5a9e9450de677efd52889500bb3f72aba

Authored by Eric Fernandez
1 parent d69ff9bf76
Exists in master

Implementación angular ladda

... ... @@ -45,7 +45,7 @@ gulp.task('uglify', ['templates'], function() {
45 45 ]),
46 46 concat('foca-busqueda-productos.js'),
47 47 replace('src/views/', ''),
48   - replace("['ui.bootstrap', 'focaDirectivas']", '[]'),
  48 + replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
49 49 gulp.dest(paths.tmp),
50 50 rename('foca-busqueda-productos.min.js'),
51 51 uglify(),
... ... @@ -6,6 +6,7 @@
6 6 <!--CSS-->
7 7 <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
8 8 <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet"/>
  9 + <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
9 10  
10 11 <!--VENDOR JS-->
11 12 <script src="node_modules/jquery/dist/jquery.min.js"></script>
... ... @@ -13,7 +14,10 @@
13 14 <script src="node_modules/angular/angular.min.js"></script>
14 15 <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
15 16 <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
16   -
  17 + <script src="node_modules/ladda/dist/spin.min.js"></script>
  18 + <script src="node_modules/ladda/dist/ladda.min.js"></script>
  19 + <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
  20 +
17 21 <!-- BUILD -->
18 22 <script src="src/js/app.js"></script>
19 23 <script src="src/js/controller.js"></script>
... ... @@ -7,7 +7,7 @@
7 7 "gulp-pre-commit": "gulp pre-commit",
8 8 "compile": "gulp uglify",
9 9 "postinstall": "npm run compile && gulp clean-post-install",
10   - "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 gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas"
  10 + "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-replace gulp-uglify gulp-clean jasmine-core jquery jshint pre-commit pump ui-bootstrap4 && npm i -D git+https://debo.suite.repo/modulos-npm/foca-directivas"
11 11 },
12 12 "pre-commit": [
13 13 "gulp-pre-commit"
... ... @@ -37,6 +37,7 @@
37 37 },
38 38 "devDependencies": {
39 39 "angular": "^1.7.5",
  40 + "angular-ladda": "^0.4.3",
40 41 "bootstrap": "^4.1.3",
41 42 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
42 43 "font-awesome": "^4.7.0",
... ... @@ -53,6 +54,7 @@
53 54 "jasmine-core": "^3.3.0",
54 55 "jquery": "^3.3.1",
55 56 "jshint": "^2.9.6",
  57 + "ladda": "1.0.6",
56 58 "pre-commit": "^1.2.2",
57 59 "pump": "^3.0.0",
58 60 "ui-bootstrap4": "^3.0.5"
1   -angular.module('focaBusquedaProductos', ['ui.bootstrap', 'focaDirectivas']);
  1 +angular.module('focaBusquedaProductos', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
src/js/controller.js
... ... @@ -11,6 +11,7 @@ angular.module(&#39;focaBusquedaProductos&#39;)
11 11 $scope.filters = '';
12 12 $scope.productos = [];
13 13 $scope.primerBusqueda = false;
  14 + $scope.searchLoading = false;
14 15 // pagination
15 16 $scope.numPerPage = 10;
16 17 $scope.currentPage = 1;
... ... @@ -21,11 +22,13 @@ angular.module(&#39;focaBusquedaProductos&#39;)
21 22 //METODOS
22 23 $scope.busquedaPress = function(key) {
23 24 if (key === 13) {
  25 + $scope.searchLoading = true;
24 26 if(idLista > 0) {
25 27 focaBusquedaProductosService
26 28 .getProductosByIdLista(idLista, $scope.filters)
27 29 .then(
28 30 function(res) {
  31 + $scope.searchLoading = false;
29 32 $scope.primerBusqueda = true;
30 33 $scope.productos = res.data;
31 34 $scope.search();
... ... @@ -35,10 +38,11 @@ angular.module(&#39;focaBusquedaProductos&#39;)
35 38 } else if(idLista === -1) {
36 39 focaBusquedaProductosService.getProductos().then(
37 40 function(res) {
  41 + $scope.searchLoading = false;
38 42 $scope.primerBusqueda = true;
39 43 $scope.productos = res.data;
40 44 $scope.search();
41   - primera();
  45 + primera();
42 46 }
43 47 );
44 48 }
src/views/modal-busqueda-productos.html
... ... @@ -4,6 +4,7 @@
4 4 <div class="modal-body" id="modal-body">
5 5 <div class="input-group">
6 6 <input
  7 + ladda="searchLoading"
7 8 type="text"
8 9 class="form-control"
9 10 placeholder="Busqueda"
... ... @@ -15,7 +16,12 @@
15 16 ng-focus="selectedProducto = -1"
16 17 >
17 18 <div class="input-group-append">
18   - <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
  19 + <button
  20 + ladda="searchLoading"
  21 + class="btn btn-outline-secondary"
  22 + type="button"
  23 + ng-click="busquedaPress(13)"
  24 + >
19 25 <i class="fa fa-search" aria-hidden="true"></i>
20 26 </button>
21 27 </div>