Eric Fernandez / foca-modal-vendedores

Commit 9bd371423a951761f51e7d5a8aab396fccef8c59

Authored by Pablo Marco del Pont 2018-10-31 18:59:54 -0300

Exists in master

Merge branch 'master' into 'master'

Implementación angular ladda

See merge request modulos-npm/foca-modal-vendedores!10

Showing 6 changed files Show diff stats

gulpfile.js

Diff comments View file @ 9bd3714

1	const templateCache = require('gulp-angular-templatecache');	1	const templateCache = require('gulp-angular-templatecache');
2	const concat = require('gulp-concat');	2	const concat = require('gulp-concat');
3	const htmlmin = require('gulp-htmlmin');	3	const htmlmin = require('gulp-htmlmin');
4	const rename = require('gulp-rename');	4	const rename = require('gulp-rename');
5	const uglify = require('gulp-uglify');	5	const uglify = require('gulp-uglify');
6	const gulp = require('gulp');	6	const gulp = require('gulp');
7	const pump = require('pump');	7	const pump = require('pump');
8	const jshint = require('gulp-jshint');	8	const jshint = require('gulp-jshint');
9	const replace = require('gulp-replace');	9	const replace = require('gulp-replace');
10	const connect = require('gulp-connect');	10	const connect = require('gulp-connect');
11	const clean = require('gulp-clean');	11	const clean = require('gulp-clean');
12		12
13	var paths = {	13	var paths = {
14	srcJS: 'src/js/*.js',	14	srcJS: 'src/js/*.js',
15	srcViews: 'src/views/*.html',	15	srcViews: 'src/views/*.html',
16	tmp: 'tmp',	16	tmp: 'tmp',
17	dist: 'dist/'	17	dist: 'dist/'
18	};	18	};
19		19
20	gulp.task('templates', function() {	20	gulp.task('templates', function() {
21	return pump(	21	return pump(
22	[	22	[
23	gulp.src(paths.srcViews),	23	gulp.src(paths.srcViews),
24	replace('views/', ''),	24	replace('views/', ''),
25	htmlmin(),	25	htmlmin(),
26	templateCache('views.js', {	26	templateCache('views.js', {
27	module: 'focaModalVendedores',	27	module: 'focaModalVendedores',
28	root: ''	28	root: ''
29	}),	29	}),
30	gulp.dest(paths.tmp)	30	gulp.dest(paths.tmp)
31	]	31	]
32	);	32	);
33	});	33	});
34		34
35	gulp.task('uglify', ['templates'], function() {	35	gulp.task('uglify', ['templates'], function() {
36	return pump(	36	return pump(
37	[	37	[
38	gulp.src([	38	gulp.src([
39	paths.srcJS,	39	paths.srcJS,
40	'tmp/views.js'	40	'tmp/views.js'
41	]),	41	]),
42	concat('foca-modal-vendedores.js'),	42	concat('foca-modal-vendedores.js'),
43	replace('src/views/', ''),	43	replace('src/views/', ''),
44	replace("['ui.bootstrap', 'focaDirectivas']", '[]'),	44	replace("['ui.bootstrap', 'focaDirectivas', 'angular-ladda']", '[]'),
45	gulp.dest(paths.tmp),	45	gulp.dest(paths.tmp),
46	rename('foca-modal-vendedores.min.js'),	46	rename('foca-modal-vendedores.min.js'),
47	uglify(),	47	uglify(),
48	gulp.dest(paths.dist)	48	gulp.dest(paths.dist)
49	]	49	]
50	);	50	);
51	});	51	});
52		52
53	gulp.task('pre-commit', function() {	53	gulp.task('pre-commit', function() {
54	return pump(	54	return pump(
55	[	55	[
56	gulp.src(paths.srcJS),	56	gulp.src(paths.srcJS),
57	jshint('.jshintrc'),	57	jshint('.jshintrc'),
58	jshint.reporter('default'),	58	jshint.reporter('default'),
59	jshint.reporter('fail')	59	jshint.reporter('fail')
60	]	60	]
61	);	61	);
62		62
63	gulp.start('uglify');	63	gulp.start('uglify');
64	});	64	});
65		65
66	gulp.task('webserver', function() {	66	gulp.task('webserver', function() {
67	pump [	67	pump [
68	connect.server({port: 3000})	68	connect.server({port: 3000})
69	]	69	]
70	});	70	});
71		71
72	gulp.task('clean-post-install', function(){	72	gulp.task('clean-post-install', function(){
73	return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',	73	return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
74	'index.html'], {read: false})	74	'index.html'], {read: false})
75	.pipe(clean());	75	.pipe(clean());
76	});	76	});
77		77
78	gulp.task('default', ['webserver']);	78	gulp.task('default', ['webserver']);
79		79
80	gulp.task('watch', function() {	80	gulp.task('watch', function() {
81	gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])	81	gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
82	});	82	});
83		83

index.html

Diff comments View file @ 9bd3714

 <html ng-app="focaModalVendedores">
 <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <!--CSS-->
     <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
     <link href="node_modules/font-awesome/css/font-awesome.min.css" rel="stylesheet" />
+    <link href="node_modules/ladda/dist/ladda-themeless.min.css" rel="stylesheet">
     <!--VENDOR JS-->
     <script src="node_modules/jquery/dist/jquery.min.js"></script>
     <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
     <script src="node_modules/angular/angular.min.js"></script>
     <script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
     <script src="node_modules/foca-directivas/dist/foca-directivas.min.js"></script>
+    <script src="node_modules/ladda/dist/spin.min.js"></script>
+    <script src="node_modules/ladda/dist/ladda.min.js"></script>
+    <script src="node_modules/angular-ladda/dist/angular-ladda.min.js"></script>
     <!-- BUILD -->
     <script src="src/js/app.js"></script>
     <script src="src/js/controller.js"></script>
     <script src="src/js/service.js"></script>
     <!-- /BUILD -->
     <!-- CONFIG PARA DEVELOP -->
     <script type="text/javascript">
         angular.module('focaModalVendedores')
             .controller('controller', ['$uibModal', '$timeout', function($uibModal, $timeout) {
                 openModal();
                 function openModal() {
                     var modalInstance = $uibModal.open(
                         {
                             ariaLabelledBy: 'Busqueda de Vendedores',
                             templateUrl: 'src/views/modal-vendedores.html',
                             controller: 'modalVendedoresCtrl',
                             size: 'lg'
                         }
                     );
                     modalInstance.result.then(
                         function (selectedItem) {
                             console.info(selectedItem);
                             $timeout(openModal, 500);
                         }, function () {
                             console.info('modal-component dismissed at: ' + new Date());
                             $timeout(openModal, 500);
                         }
                     );
                 }
             }]);
     </script>
     <script src="src/etc/develop.js"></script>
 </head>
 <body ng-controller="controller">
     <style>
         .p-5 {
             padding: 5px !important;
         }
     </style>
 </body>
 </html>

package.json

Diff comments View file @ 9bd3714

 {
     "name": "foca-modal-vendedores",
     "version": "0.0.1",
     "description": "Modal para seleccionar vendedores",
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
         "gulp-pre-commit": "gulp pre-commit",
         "compile": "gulp uglify",
         "postinstall": "npm run compile && gulp clean-post-install",
-        "install-dev": "npm install -D angular 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"
+        "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"
     },
     "pre-commit": [
         "gulp-pre-commit"
     ],
     "repository": {
         "type": "git",
         "url": "https://debo.suite.repo/modulos-npm/foca-modal-vendedores"
     },
     "author": "Foca Software",
     "license": "ISC",
     "peerDependencies": {
         "angular": "^1.7.4",
         "bootstrap": "^4.1.3",
         "font-awesome": "^4.7.0",
         "ui-bootstrap4": "^3.0.4",
         "gulp": "^3.9.1",
         "gulp-angular-templatecache": "^2.2.1",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.6.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-uglify": "^3.0.1",
         "jquery": "^3.3.1",
         "pump": "^3.0.0",
         "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas"
     },
     "devDependencies": {
         "angular": "^1.7.5",
+        "angular-ladda": "^0.4.3",
         "bootstrap": "^4.1.3",
         "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas",
         "font-awesome": "^4.7.0",
         "gulp": "^3.9.1",
         "gulp-angular-templatecache": "^2.2.3",
         "gulp-clean": "^0.4.0",
         "gulp-concat": "^2.6.1",
         "gulp-connect": "^5.6.1",
         "gulp-htmlmin": "^5.0.1",
         "gulp-jshint": "^2.1.0",
         "gulp-rename": "^1.4.0",
         "gulp-replace": "^1.0.0",
         "gulp-uglify": "^3.0.1",
         "jasmine-core": "^3.3.0",
         "jquery": "^3.3.1",
         "jshint": "^2.9.6",
+        "ladda": "1.0.6",
         "pre-commit": "^1.2.2",
         "pump": "^3.0.0",
         "ui-bootstrap4": "^3.0.5"
     }
 }

src/js/app.js

Diff comments View file @ 9bd3714

1	angular.module('focaModalVendedores', ['ui.bootstrap', 'focaDirectivas']);	1	angular.module('focaModalVendedores', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
2		2

src/js/controller.js

Diff comments View file @ 9bd3714

 angular.module('focaModalVendedores')
     .controller('modalVendedoresCtrl', [
         '$filter',
         '$scope',
         '$uibModalInstance',
         'focaVendedoresService',
         function($filter, $scope, $uibModalInstance, focaVendedoresService) {
             $scope.filters = '';
             $scope.vendedores = [];
             $scope.primerBusqueda = false;
+            $scope.searchLoading = false;
             // pagination
             $scope.numPerPage = 10;
             $scope.currentPage = 1;
             $scope.filteredVendedores = [];
             $scope.currentPageVendedores = [];
             $scope.selectedVendedor = -1;
             $scope.busquedaPress = function(key) {
                 if (key === 13) {
+                    $scope.searchLoading = true;
                     focaVendedoresService.getVendedores($scope.filters).then(
                         function(res) {
+                            $scope.searchLoading = false;
                             $scope.primerBusqueda = true;
                             $scope.vendedores = res.data;
                             $scope.search();
                             primera();
                         }
                     );
                 }
             };
             $scope.search = function() {
                 if($scope.vendedores.length > 0) {
                     $scope.filteredVendedores = $filter('filter')(
                     $scope.vendedores, { $: $scope.filters }
                     );
                     $scope.lastPage = Math.ceil(
                         $scope.filteredVendedores.length / $scope.numPerPage
                     );
                     $scope.resetPage();
                 }
             };
             $scope.resetPage = function() {
                 $scope.currentPage = 1;
                 $scope.selectPage(1);
             };
             $scope.selectPage = function(page) {
                 var start = (page - 1) * $scope.numPerPage;
                 var end = start + $scope.numPerPage;
                 $scope.paginas = [];
                 $scope.paginas = calcularPages(page);
                 $scope.currentPageVendedores = $scope.filteredVendedores.slice(start, end);
                 $scope.currentPage = page;
             };
             $scope.select = function(vendedor) {
                 $uibModalInstance.close(vendedor);
             };
             $scope.cancel = function() {
                 $uibModalInstance.dismiss('cancel');
             };
             $scope.busquedaDown = function(key) {
                 if (key === 40) {
                     primera(key);
                 }
             };
             $scope.itemVendedor = function(key) {
                 if (key === 38) {
                     anterior(key);
                 }
                 if (key === 40) {
                     siguiente(key);
                 }
                 if (key === 37) {
                     retrocederPagina();
                 }
                 if (key === 39) {
                     avanzarPagina();
                 }
             };
             function calcularPages(paginaActual) {
                 var paginas = [];
                 paginas.push(paginaActual);
                 if (paginaActual - 1 > 1) {
                     paginas.unshift(paginaActual - 1);
                     if (paginaActual - 2 > 1) {
                         paginas.unshift(paginaActual - 2);
                     }
                 }
                 if (paginaActual + 1 < $scope.lastPage) {
                     paginas.push(paginaActual + 1);
                     if (paginaActual + 2 < $scope.lastPage) {
                         paginas.push(paginaActual + 2);
                     }
                 }
                 if (paginaActual !== 1) {
                     paginas.unshift(1);
                 }
                 if (paginaActual !== $scope.lastPage) {
                     paginas.push($scope.lastPage);
                 }
                 return paginas;
             }
             function primera() {
                 $scope.selectedVendedor = 0;
             }
             function anterior() {
                 if ($scope.selectedVendedor === 0 && $scope.currentPage > 1) {
                     retrocederPagina();
                 } else {
                     $scope.selectedVendedor--;
                 }
             }
             function siguiente() {
                 if ($scope.selectedVendedor < $scope.currentPageVendedores.length - 1) {
                     $scope.selectedVendedor++;
                 } else {
                     avanzarPagina();
                 }
             }
             function retrocederPagina() {
                 if ($scope.currentPage > 1) {
                     $scope.selectPage($scope.currentPage - 1);
                     $scope.selectedVendedor = $scope.numPerPage - 1;
                 }
             }
             function avanzarPagina() {
                 if ($scope.currentPage < $scope.lastPage) {
                     $scope.selectPage($scope.currentPage + 1);
                     $scope.selectedVendedor = 0;
                 }
             }
         }]
     );

src/views/modal-vendedores.html

Diff comments View file @ 9bd3714

 <div class="modal-header py-1">
     <h5 class="modal-title">Búsqueda de vendedores</h5>
 </div>
 <div class="modal-body" id="modal-body">
     <div class="input-group">
         <input
+            ladda="searchLoading"
             type="text"
             class="form-control form-control-sm"
             placeholder="Busqueda"
             ng-model="filters"
             ng-change="search()"
             ng-keydown="busquedaDown($event.keyCode)"
             ng-keypress="busquedaPress($event.keyCode)"
             foca-focus="selectedVendedor == -1"
             ng-focus="selectedVendedor = -1"
         >
         <div class="input-group-append">
-            <button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
+            <button
+                ladda="searchLoading"
+                class="btn btn-outline-secondary"
+                type="button"
+                ng-click="busquedaPress(13)"
+            >
                 <i class="fa fa-search" aria-hidden="true"></i>
             </button>
         </div>
     </div>
     <table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
         <thead>
             <tr>
                 <th>Código</th>
                 <th>Nombre</th>
                 <th></th>
             </tr>
         </thead>
         <tbody>
             <tr ng-show="currentPageVendedores.length == 0 && primerBusqueda">
                 <td colspan="3">
                     No se encontraron resultados.
                 </td>
             </tr>
             <tr class="selected"
                 ng-repeat="(key, vendedor) in currentPageVendedores"
                 ng-click="select(vendedor)"
                 >
                 <td ng-bind="vendedor.CodVen"></td>
                 <td ng-bind="vendedor.NomVen"></td>
                 <td>
                     <button
                         type="button"
                         class="btn btn-xs p-1 float-right"
                         ng-class="{
                             'btn-secondary': selectedVendedor != key,
                             'btn-primary': selectedVendedor == key
                         }"
                         foca-focus="selectedVendedor == {{key}}"
                         ng-keydown="itemVendedor($event.keyCode)">
                         <i class="fa fa-arrow-right" aria-hidden="true"></i>
                     </button>
                 </td>
             </tr>
         </tbody>
     </table>
     <nav ng-show="currentPageVendedores.length > 0 && primerBusqueda">
         <ul class="pagination pagination-sm justify-content mb-0">
             <li class="page-item" ng-class="{'disabled': currentPage == 1}">
                 <a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
                     <span aria-hidden="true">&laquo;</span>
                     <span class="sr-only">Anterior</span>
                 </a>
             </li>
             <li
                 class="page-item"
                 ng-repeat="pagina in paginas"
                 ng-class="{'active': pagina == currentPage}"
             >
                 <a
                     class="page-link"
                     href="#"
                     ng-click="selectPage(pagina)"
                     ng-bind="pagina"
                 ></a>
             </li>
             <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
                 <a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
                     <span aria-hidden="true">&raquo;</span>
                     <span class="sr-only">Siguiente</span>
                 </a>
             </li>
         </ul>
     </nav>
 </div>
 <div class="modal-footer py-1">
     <button class="btn btn-sm btn-secondary" type="button" ng-click="cancel()">Cancelar</button>
 </div>