Commit e645dcb5a9e9450de677efd52889500bb3f72aba
1 parent
d69ff9bf76
Exists in
master
Implementación angular ladda
Showing
6 changed files
with
22 additions
and
6 deletions
Show diff stats
gulpfile.js
... | ... | @@ -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(), |
index.html
... | ... | @@ -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> |
package.json
... | ... | @@ -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" |
src/js/app.js
src/js/controller.js
... | ... | @@ -11,6 +11,7 @@ angular.module('focaBusquedaProductos') |
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('focaBusquedaProductos') |
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('focaBusquedaProductos') |
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> |