Eric Fernandez / foca-modal-cobrador

.gitignore

File was created	1	/node_modules
	2	/dist
	3	/tmp
	4	package-lock\.json
	5	src/etc/develop\.js
	6

.jshintrc

Diff comments View file @ 2fad025

File was created	1	{
	2	/*
	3	* ENVIRONMENTS
	4	* =================
	5	*/
	6
	7	// Define globals exposed by modern browsers.
	8	"browser": true,
	9
	10	// Define globals exposed by jQuery.
	11	"jquery": true,
	12
	13	// Define globals exposed by Node.js.
	14	"node": true,
	15
	16	// Allow ES6.
	17	"esversion": 6,
	18
	19	/*
	20	* ENFORCING OPTIONS
	21	* =================
	22	*/
	23
	24	// Force all variable names to use either camelCase style or UPPER_CASE
	25	// with underscores.
	26	"camelcase": true,
	27
	28	// Prohibit use of == and != in favor of === and !==.
	29	"eqeqeq": true,
	30
	31	// Enforce tab width of 2 spaces.
	32	"indent": 4,
	33
	34	// Prohibit use of a variable before it is defined.
	35	"latedef": false,
	36
	37	// Enforce line length to 100 characters
	38	"maxlen": 100,
	39
	40	// Require capitalized names for constructor functions.
	41	"newcap": true,
	42
	43	// Enforce use of single quotation marks for strings.
	44	"quotmark": "single",
	45
	46	// Enforce placing 'use strict' at the top function scope
	47	"strict": false,
	48
	49	// Prohibit use of explicitly undeclared variables.
	50	"undef": true,
	51
	52	// Warn when variables are defined but never used.
	53	"unused": true,
	54
	55	// Para que funcione en angular
	56	"predef": ["angular", "alert", "spyOn", "expect", "it", "inject", "beforeEach", "describe"],
	57	/*
	58	* RELAXING OPTIONS
	59	* =================
	60	*/
	61
	62	// Suppress warnings about == null comparisons.
	63	"eqnull": true
	64	}
	65

README.md

Diff comments View file @ 2fad025

File was created	1	# foca-modal-cobradores
	2
	3	Modal de lista de cobradores con filtros

gulpfile.js

Diff comments View file @ 2fad025

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

index.html

Diff comments View file @ 2fad025

File was created	1	<html ng-app="focaModalCobradores">
	2
	3	<head>
	4	<meta charset="UTF-8" />
	5	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	6
	7	<!--CSS-->
	8	<link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
	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">
	11
	12	<!--VENDOR JS-->
	13	<script src="node_modules/jquery/dist/jquery.min.js"></script>
	14	<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
	15	<script src="node_modules/angular/angular.min.js"></script>
	16	<script src="node_modules/ui-bootstrap4/dist/ui-bootstrap-tpls.js"></script>
	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>
	21
	22	<!-- BUILD -->
	23	<script src="src/js/app.js"></script>
	24	<script src="src/js/controller.js"></script>
	25	<script src="src/js/service.js"></script>
	26
	27	<!-- /BUILD -->
	28
	29	<!-- CONFIG PARA DEVELOP -->
	30	<script type="text/javascript">
	31	angular.module('focaModalCobradores')
	32	.controller('controller', ['$uibModal', '$timeout', function($uibModal, $timeout) {
	33	openModal();
	34
	35	function openModal() {
	36	var modalInstance = $uibModal.open(
	37	{
	38	ariaLabelledBy: 'Busqueda de Vendedores',
	39	templateUrl: 'src/views/modal-vendedores.html',
	40	controller: 'modalVendedoresCtrl',
	41	size: 'lg'
	42	}
	43	);
	44
	45	modalInstance.result.then(
	46	function (selectedItem) {
	47	console.info(selectedItem);
	48	$timeout(openModal, 500);
	49	}, function () {
	50	console.info('modal-component dismissed at: ' + new Date());
	51	$timeout(openModal, 500);
	52	}
	53	);
	54	}
	55	}]);
	56	</script>
	57
	58	<script src="src/etc/develop.js"></script>
	59	</head>
	60
	61	<body ng-controller="controller">
	62	</body>
	63
	64	</html>

package.json

Diff comments View file @ 2fad025

File was created	1	{
	2	"name": "foca-modal-cobrador",
	3	"version": "0.0.1",
	4	"description": "Modal para seleccionar cobradores",
	5	"main": "index.js",
	6	"scripts": {
	7	"test": "echo \"Error: no test specified\" && exit 1",
	8	"gulp-pre-commit": "gulp pre-commit",
	9	"compile": "gulp uglify",
	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+http://git.focasoftware.com/npm/foca-directivas.git"
	12	},
	13	"pre-commit": [
	14	"gulp-pre-commit"
	15	],
	16	"repository": {
	17	"type": "git",
	18	"url": "http://git.focasoftware.com/npm/foca-modal-cobrador.git"
	19	},
	20	"author": "Foca Software",
	21	"license": "ISC",
	22	"peerDependencies": {
	23	"angular": "^1.7.4",
	24	"bootstrap": "^4.1.3",
	25	"font-awesome": "^4.7.0",
	26	"ui-bootstrap4": "^3.0.4",
	27	"gulp": "^3.9.1",
	28	"gulp-angular-templatecache": "^2.2.1",
	29	"gulp-concat": "^2.6.1",
	30	"gulp-connect": "^5.6.1",
	31	"gulp-htmlmin": "^5.0.1",
	32	"gulp-rename": "^1.4.0",
	33	"gulp-replace": "^1.0.0",
	34	"gulp-uglify": "^3.0.1",
	35	"jquery": "^3.3.1",
	36	"pump": "^3.0.0",
	37	"foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git"
	38	},
	39	"devDependencies": {
	40	"angular": "^1.7.5",
	41	"angular-ladda": "^0.4.3",
	42	"bootstrap": "^4.1.3",
	43	"foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git",
	44	"font-awesome": "^4.7.0",
	45	"gulp": "^3.9.1",
	46	"gulp-angular-templatecache": "^2.2.5",
	47	"gulp-clean": "^0.4.0",
	48	"gulp-concat": "^2.6.1",
	49	"gulp-connect": "^5.6.1",
	50	"gulp-htmlmin": "^5.0.1",
	51	"gulp-jshint": "^2.1.0",
	52	"gulp-rename": "^1.4.0",
	53	"gulp-replace": "^1.0.0",
	54	"gulp-uglify": "^3.0.1",
	55	"jasmine-core": "^3.3.0",
	56	"jquery": "^3.3.1",
	57	"jshint": "^2.9.6",
	58	"ladda": "1.0.6",
	59	"pre-commit": "^1.2.2",
	60	"pump": "^3.0.0",
	61	"ui-bootstrap4": "^3.0.5"
	62	}
	63	}
	64

src/etc/develop.js.ejemplo

Diff comments View file @ 2fad025

File was created	1	angular.module('focaModalCobradores')
	2	.constant("API_ENDPOINT", {
	3	'URL': '//127.0.0.1:9000'
	4	});
	5

src/js/app.js

Diff comments View file @ 2fad025

	File was created	1	angular.module('focaModalCobradores', ['ui.bootstrap', 'focaDirectivas', 'angular-ladda']);
		2

src/js/controller.js

Diff comments View file @ 2fad025

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

src/js/service.js

Diff comments View file @ 2fad025

File was created	1	angular.module('focaModalCobradores')
	2	.factory('focaModalCobradoresService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
	3	return {
	4	getCobradores: function() {
	5	return $http.get(API_ENDPOINT.URL + '/cobrador');
	6	}
	7	};
	8	}]);
	9

src/views/modal-cobradores.html

Diff comments View file @ 2fad025

File was created	1	<div class="modal-header">
	2	<h5 class="modal-title my-1">Búsqueda de cobradores</h5>
	3	</div>
	4	<div class="modal-body" id="modal-body">
	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"
	12	ng-change="search()"
	13	ng-keydown="busquedaDown($event.keyCode)"
	14	ng-keypress="busquedaPress($event.keyCode)"
	15	foca-focus="selectedCobrador == -1"
	16	ng-focus="selectedCobrador = -1"
	17	teclado-virtual
	18	>
	19	<div class="input-group-append">
	20	<button
	21	ladda="searchLoading"
	22	class="btn btn-outline-secondary"
	23	type="button"
	24	ng-click="busquedaPress(13)"
	25	>
	26	<i class="fa fa-search" aria-hidden="true"></i>
	27	</button>
	28	</div>
	29	</div>
	30	<table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
	31	<thead>
	32	<tr>
	33	<th>Código</th>
	34	<th>Nombre</th>
	35	<th></th>
	36	</tr>
	37	</thead>
	38	<tbody>
	39	<tr ng-show="currentPageCobradores.length == 0 && primerBusqueda">
	40	<td colspan="3">
	41	No se encontraron resultados.
	42	</td>
	43	</tr>
	44	<tr class="selected"
	45	ng-repeat="(key, cobrador) in currentPageCobradores"
	46	ng-click="select(cobrador)"
	47	>
	48	<td ng-bind="cobrador.id"></td>
	49	<td ng-bind="cobrador.nombre"></td>
	50	<td class="d-md-none text-primary">
	51	<i class="fa fa-arrow-right" aria-hidden="true"></i>
	52	</td>
	53	<td class="d-none d-md-table-cell">
	54	<button
	55	type="button"
	56	class="btn btn-xs p-1 float-right"
	57	ng-class="{
	58	'btn-secondary': selectedCobrador != key,
	59	'btn-primary': selectedCobrador == key
	60	}"
	61	foca-focus="selectedCobrador == {{key}}"
	62	ng-keydown="itemCobrador($event.keyCode)">
	63	<i class="fa fa-arrow-right" aria-hidden="true"></i>
	64	</button>
	65	</td>
	66	</tr>
	67	</tbody>
	68	</table>
	69	<nav ng-show="currentPageCobradores.length > 0 && primerBusqueda">
	70	<ul class="pagination pagination-sm justify-content mb-0">
	71	<li class="page-item" ng-class="{'disabled': currentPage == 1}">
	72	<a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
	73	<span aria-hidden="true">«</span>
	74	<span class="sr-only">Anterior</span>
	75	</a>
	76	</li>
	77	<li
	78	class="page-item"
	79	ng-repeat="pagina in paginas"
	80	ng-class="{'active': pagina == currentPage}"
	81	>
	82	<a
	83	class="page-link"
	84	href="javascript:void();"
	85	ng-click="selectPage(pagina)"
	86	ng-bind="pagina"
	87	></a>
	88	</li>
	89	<li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
	90	<a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
	91	<span aria-hidden="true">»</span>
	92	<span class="sr-only">Siguiente</span>
	93	</a>
	94	</li>
	95	</ul>
	96	</nav>
	97	</div>
	98	<div class="modal-footer">
	99	<button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>
	100	</div>
	101

GITLAB

Eric Fernandez / foca-modal-cobrador

Primer versión