Luigi / foca-modal

Browse Code »

Commit fdf1eca2029d6204849de278141197ff7a72cabb

Authored by Eric Fernandez 2019-01-03 16:04:53 -0300

1 parent 10f926e48f

Exists in master and in 1 other branch

foca modal parametrizado

Showing 4 changed files with 306 additions and 2 deletions Show diff stats

gulpfile.js

Diff comments View file @ fdf1eca

 const templateCache = require('gulp-angular-templatecache');
 const concat        = require('gulp-concat');
 const clean         = require('gulp-clean');
 const htmlmin       = require('gulp-htmlmin');
 const rename        = require('gulp-rename');
 const uglify        = require('gulp-uglify');
 const gulp          = require('gulp');
 const pump          = require('pump');
 const jshint        = require('gulp-jshint');
 const replace       = require('gulp-replace');
 var paths = {
     srcJS: 'src/js/*.js',
     srcViews: 'src/views/*.html',
     tmp:   'tmp',
     dist:  'dist/'
 };
 gulp.task('templates', function() {
     return pump(
         [
             gulp.src(paths.srcViews),
             htmlmin(),
             templateCache('views.js', {
                 module: 'focaModal',
                 root: ''
             }),
             gulp.dest(paths.tmp)
         ]
     );
 });
 gulp.task('uglify', ['templates'], function() {
     return pump(
         [
             gulp.src([
                 paths.srcJS,
                 'tmp/views.js'
             ]),
             concat('foca-modal.js'),
             gulp.dest(paths.tmp),
             rename('foca-modal.min.js'),
             uglify(),
             gulp.dest(paths.dist)
         ]
     );
 });
 gulp.task('clean', function() {
     return gulp.src(['tmp', 'dist'], {read: false})
     .pipe(clean());
 });
 gulp.task('pre-commit', function() {
     pump(
         [
             gulp.src(paths.srcJS),
             jshint('.jshintrc'),
             jshint.reporter('default'),
             jshint.reporter('fail')
         ]
     );
 });
 gulp.task('clean-post-install', function() {
     return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
                      'index.html'], {read: false})
     .pipe(clean());
 });
+gulp.task('watch', function() {
+    gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
+});
 gulp.task('webserver', function() {
     pump [
         connect.server({port: 3000})
     ]
 });
 gulp.task('default', ['webserver']);

src/js/controllerModal.js

Diff comments View file @ fdf1eca

File was created	1	angular.module('focaModal')
	2	.controller('focaModalController', [
	3	'$timeout',
	4	'$filter',
	5	'$scope',
	6	'$uibModalInstance',
	7	'focaModalService',
	8	'columnas',
	9	'query',
	10	'titulo',
	11	function($timeout, $filter, $scope, $uibModalInstance, focaModalService,
	12	columnas, query, titulo) {
	13
	14	$scope.filters = '';
	15	$scope.columnas = columnas;
	16	$scope.titulo = titulo
	17	$scope.entidades = [];
	18	$scope.primerBusqueda = false;
	19	$scope.searchLoading = false;
	20	// pagination
	21	$scope.numPerPage = 10;
	22	$scope.currentPage = 1;
	23	$scope.filteredEntidades = [];
	24	$scope.currentPageEntidades = [];
	25	$scope.selectedEntidad = -1;
	26
	27	$scope.busquedaPress = function(key) {
	28	if (key === 13) {
	29	$scope.searchLoading = true;
	30	focaModalService.getEntidad($scope.filters, query).then(
	31	function(res) {
	32	$scope.searchLoading = false;
	33	$scope.primerBusqueda = true;
	34	$scope.entidades = res.data;
	35	$scope.search(true);
	36	primera();
	37	}
	38	);
	39	}
	40	};
	41
	42	$scope.search = function(pressed) {
	43	if($scope.entidades.length > 0) {
	44	$scope.filteredEntidades = $filter('filter')(
	45	$scope.entidades, { $: $scope.filters }
	46	);
	47
	48	$scope.lastPage = Math.ceil(
	49	$scope.filteredEntidades.length / $scope.numPerPage
	50	);
	51	$scope.resetPage();
	52	}else if(pressed){
	53	$timeout(function() {
	54	angular.element('#search')[0].focus();
	55	$scope.filters = '';
	56	});
	57	}
	58	};
	59
	60	$scope.resetPage = function() {
	61	$scope.currentPage = 1;
	62	$scope.selectPage(1);
	63	};
	64
	65	$scope.selectPage = function(page) {
	66	var start = (page - 1) * $scope.numPerPage;
	67	var end = start + $scope.numPerPage;
	68	$scope.paginas = [];
	69	$scope.paginas = calcularPages(page);
	70	$scope.currentPageEntidades = $scope.filteredEntidades.slice(start, end);
	71	$scope.currentPage = page;
	72	};
	73
	74	$scope.select = function(vendedor) {
	75	$uibModalInstance.close(vendedor);
	76	};
	77
	78	$scope.cancel = function() {
	79	$uibModalInstance.dismiss('cancel');
	80	};
	81
	82	$scope.busquedaDown = function(key) {
	83	if (key === 40) {
	84	primera(key);
	85	}
	86	};
	87
	88	$scope.itemEntidad = function(key) {
	89	if (key === 38) {
	90	anterior(key);
	91	}
	92
	93	if (key === 40) {
	94	siguiente(key);
	95	}
	96
	97	if (key === 37) {
	98	retrocederPagina();
	99	}
	100
	101	if (key === 39) {
	102	avanzarPagina();
	103	}
	104	};
	105
	106	function calcularPages(paginaActual) {
	107	var paginas = [];
	108	paginas.push(paginaActual);
	109
	110	if (paginaActual - 1 > 1) {
	111
	112	paginas.unshift(paginaActual - 1);
	113	if (paginaActual - 2 > 1) {
	114	paginas.unshift(paginaActual - 2);
	115	}
	116	}
	117
	118	if (paginaActual + 1 < $scope.lastPage) {
	119	paginas.push(paginaActual + 1);
	120	if (paginaActual + 2 < $scope.lastPage) {
	121	paginas.push(paginaActual + 2);
	122	}
	123	}
	124
	125	if (paginaActual !== 1) {
	126	paginas.unshift(1);
	127	}
	128
	129	if (paginaActual !== $scope.lastPage) {
	130	paginas.push($scope.lastPage);
	131	}
	132
	133	return paginas;
	134	}
	135
	136	function primera() {
	137	$scope.selectedEntidad = 0;
	138	}
	139
	140	function anterior() {
	141	if ($scope.selectedEntidad === 0 && $scope.currentPage > 1) {
	142	retrocederPagina();
	143	} else {
	144	$scope.selectedEntidad--;
	145	}
	146	}
	147
	148	function siguiente() {
	149	if ($scope.selectedEntidad < $scope.currentPageEntidades.length - 1) {
	150	$scope.selectedEntidad++;
	151	} else {
	152	avanzarPagina();
	153	}
	154	}
	155
	156	function retrocederPagina() {
	157	if ($scope.currentPage > 1) {
	158	$scope.selectPage($scope.currentPage - 1);
	159	$scope.selectedEntidad = $scope.numPerPage - 1;
	160	}
	161	}
	162
	163	function avanzarPagina() {
	164	if ($scope.currentPage < $scope.lastPage) {
	165	$scope.selectPage($scope.currentPage + 1);
	166	$scope.selectedEntidad = 0;
	167	}
	168	}
	169	}]
	170	);
	171

src/js/service.js

Diff comments View file @ fdf1eca

 angular.module('focaModal')
     .service('focaModalService', [
-        '$uibModal',
+        '$uibModal', 'API_ENDPOINT', '$http',
-        function($uibModal) {
+        function($uibModal, API_ENDPOINT, $http) {
             return {
                 confirm: function(textoModal) {
                     return $uibModal.open({
                         templateUrl: 'modal-confirm.html',
                         controller: 'focaModalConfirmController',
                         animation: false,
                         backdrop: false,
                         resolve: { textoModal: function() { return textoModal; } }
                     })
                         .result.then(
                             function(resultado) {
                                 return resultado;
                             }
                         );
                 },
                 alert: function(textoModal) {
                     return $uibModal.open({
                         templateUrl: 'modal-alert.html',
                         controller: 'focaModalAlertController',
                         animation: false,
                         backdrop: false,
                         resolve: { textoModal: function() { return textoModal; } }
                     })
                         .result.then(
                             function(resultado) {
                                 return resultado;
                             }
                         )
+                },
+                modal: function(columnas, query, titulo) {
+                    return $uibModal.open({
+                        templateUrl: 'foca-modal.html',
+                        controller: 'focaModalController',
+                        animation: false,
+                        backdrop: false,
+                        resolve: {
+                            columnas: function() { return columnas; },
+                            query: function() { return query; },
+                            titulo: function() {return titulo;}
+                        }
+                    })
+                        .result.then(
+                            function(resultado) {
+                                return resultado;
+                            }
+                        )
+                },
+                getEntidad: function(filters, query) {
+                    return $http.get(API_ENDPOINT.URL + query, {nombre: filters});
                 }
             };
         }
     ]);

src/views/foca-modal.html

Diff comments View file @ fdf1eca

File was created	1	<div class="modal-header py-1">
	2	<div class="row w-100">
	3	<div class="col-lg-6">
	4	<h5 class="modal-title my-1">{{titulo}}</h5>
	5	</div>
	6	<div class="input-group col-lg-6 pr-0 my-2">
	7	<input
	8	ladda="searchLoading"
	9	type="text"
	10	class="form-control form-control-sm"
	11	id="search"
	12	placeholder="Busqueda"
	13	ng-model="filters"
	14	ng-change="search()"
	15	ng-keydown="busquedaDown($event.keyCode)"
	16	ng-keypress="busquedaPress($event.keyCode)"
	17	foca-focus="selectedEntidad == -1"
	18	ng-focus="selectedEntidad = -1"
	19	teclado-virtual
	20	>
	21	<div class="input-group-append">
	22	<button
	23	ladda="searchLoading"
	24	data-spinner-color="#FF0000"
	25	class="btn btn-outline-secondary"
	26	type="button"
	27	ng-click="busquedaPress(13)"
	28	>
	29	<i class="fa fa-search" aria-hidden="true"></i>
	30	</button>
	31	</div>
	32	</div>
	33	</div>
	34	</div>
	35	<div class="modal-body" id="modal-body">
	36
	37	<div ng-show="!primerBusqueda">
	38	Debe realizar una primer búsqueda.
	39	</div>
	40
	41	<table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
	42	<thead>
	43	<tr>
	44	<th ng-repeat="nombre in columnas.nombre" ng-bind="nombre"></th>
	45	<th></th>
	46	</tr>
	47	</thead>
	48	<tbody>
	49	<tr ng-show="currentPageEntidades.length == 0 && primerBusqueda">
	50	<td colspan="3">
	51	No se encontraron resultados.
	52	</td>
	53	</tr>
	54	<tr class="selected"
	55	ng-repeat="(key, entidad) in currentPageEntidades"
	56	ng-click="select(entidad)"
	57	>
	58	<td ng-repeat="propiedad in columnas.propiedad" ng-bind="entidad[propiedad]"></td>
	59	<td class="d-md-none text-primary">
	60	<i class="fa fa-circle-thin" aria-hidden="true"></i>
	61	</td>
	62	<td class="d-none d-md-table-cell">
	63	<button
	64	type="button"
	65	class="btn btn-xs p-1 float-right"
	66	ng-class="{
	67	'btn-secondary': selectedEntidad != key,
	68	'btn-primary': selectedEntidad == key
	69	}"
	70	foca-focus="selectedEntidad == {{key}}"
	71	ng-keydown="itemEntidad($event.keyCode)">
	72	<i class="fa fa-circle-thin" aria-hidden="true"></i>
	73	</button>
	74	</td>
	75	</tr>
	76	</tbody>
	77	</table>
	78	</div>
	79	<div class="modal-footer py-1">
	80	<nav ng-show="currentPageEntidades.length > 0 && primerBusqueda" class="mr-auto">
	81	<ul class="pagination pagination-sm justify-content mb-0">
	82	<li class="page-item" ng-class="{'disabled': currentPage == 1}">
	83	<a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
	84	<span aria-hidden="true">«</span>
	85	<span class="sr-only">Anterior</span>
	86	</a>
	87	</li>
	88	<li
	89	class="page-item"
	90	ng-repeat="pagina in paginas"
	91	ng-class="{'active': pagina == currentPage}"
	92	>
	93	<a
	94	class="page-link"
	95	href="javascript:void();"
	96	ng-click="selectPage(pagina)"
	97	ng-bind="pagina"
	98	></a>
	99	</li>
	100	<li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
	101	<a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
	102	<span aria-hidden="true">»</span>
	103	<span class="sr-only">Siguiente</span>
	104	</a>
	105	</li>
	106	</ul>
	107	</nav>
	108	<button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>
	109	</div>
	110