Mauricio Cattafi / foca-modal-vendedores

Commit 59965646b6883095c5640d7d8b9559ac5f8f96fa

Authored by Nicolás Guarnieri 2018-10-29 17:19:25 -0300

Exists in master

Merge branch 'master' into 'master'

Nueva versión de modal

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

Showing 4 changed files Show diff stats

package.json

Diff comments View file @ 5996564

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

src/js/controller.js

Diff comments View file @ 5996564

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

src/js/service.js

Diff comments View file @ 5996564

1	angular.module('focaModalVendedores')	1	angular.module('focaModalVendedores')
2	.service('focaVendedoresService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {	2	.service('focaVendedoresService', ['$http', 'API_ENDPOINT', function($http, API_ENDPOINT) {
3	return {	3	return {
4	getVendedores: function() {	4	getVendedores: function(filters) {
5	// TODO ACOMODAR PARA TURNOS AHORA 1 HARDCODEO	5	// TODO ACOMODAR PARA TURNOS AHORA 1 HARDCODEO
6	return $http.get(API_ENDPOINT.URL + '/vendedores/1');	6	return $http.post(API_ENDPOINT.URL + '/vendedores', {nombre: filters});
7	}	7	}
8	};	8	};
9	}]);	9	}]);
10		10

src/views/modal-vendedores.html

Diff comments View file @ 5996564

1	<div class="modal-header py-1">	1	<div class="modal-header py-1">
2	<h5 class="modal-title">Búsqueda de vendedores</h5>	2	<h5 class="modal-title">Búsqueda de vendedores</h5>
3	</div>	3	</div>
4	<div class="modal-body" id="modal-body">	4	<div class="modal-body" id="modal-body">
5	<div class="input-group">	5	<div class="input-group">
6	<input	6	<input
7	type="text"	7	type="text"
8	class="form-control form-control-sm"	8	class="form-control form-control-sm"
9	placeholder="Busqueda"	9	placeholder="Busqueda"
10	ng-model="filters"	10	ng-model="filters"
11	ng-change="search()"	11	ng-change="search()"
12	ng-keydown="busquedaDown($event.keyCode)"	12	ng-keydown="busquedaDown($event.keyCode)"
13	ng-keypress="busquedaPress($event.keyCode)"	13	ng-keypress="busquedaPress($event.keyCode)"
14	foca-focus="selectedVendedor == -1"	14	foca-focus="selectedVendedor == -1"
15	ng-focus="selectedVendedor = -1"	15	ng-focus="selectedVendedor = -1"
16	>	16	>
17	<table class="table table-striped table-sm">	17	<div class="input-group-append">
18	<thead>	18	<button class="btn btn-outline-secondary" type="button" ng-click="busquedaPress(13)">
19	<tr>	19	<i class="fa fa-search" aria-hidden="true"></i>
20	<th>Código</th>	20	</button>
21	<th>Nombre</th>	21	</div>
22	<th></th>
23	</tr>
24	</thead>
25	<tbody>
26	<tr class="selected"
27	ng-repeat="(key, vendedor) in currentPageVendedores"
28	ng-click="select(vendedor)">
29	<td ng-bind="vendedor.CodVen"></td>
30	<td ng-bind="vendedor.NomVen"></td>
31	<td>
32	<button
33	type="button"
34	class="btn btn-xs p-1 float-right"
35	ng-class="{
36	'btn-secondary': selectedVendedor != key,
37	'btn-primary': selectedVendedor == key
38	}"
39	foca-focus="selectedVendedor == {{key}}"
40	ng-keydown="itemVendedor($event.keyCode)">
41	<i class="fa fa-arrow-right" aria-hidden="true"></i>
42	</button>
43	</td>
44	</tr>
45	</tbody>
46	</table>
47	<nav>
48	<ul class="pagination pagination-sm justify-content-end mb-0">
49	<li class="page-item" ng-class="{'disabled': currentPage == 1}">
50	<a class="page-link" href="#" ng-click="selectPage(currentPage - 1)">
51	<span aria-hidden="true">«</span>
52	<span class="sr-only">Anterior</span>
53	</a>
54	</li>
55	<li
56	class="page-item"
57	ng-repeat="pagina in paginas"
58	ng-class="{'active': pagina == currentPage}"
59	>
60	<a
61	class="page-link"
62	href="#"
63	ng-click="selectPage(pagina)"
64	ng-bind="pagina"
65	></a>
66	</li>
67	<li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
68	<a class="page-link" href="#" ng-click="selectPage(currentPage + 1)">
69	<span aria-hidden="true">»</span>
70	<span class="sr-only">Siguiente</span>
71	</a>
72	</li>
73	</ul>
74	</nav>
75	</div>	22	</div>
		23	<table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
		24	<thead>
		25	<tr>
		26	<th>Código</th>
		27	<th>Nombre</th>
		28	<th></th>
		29	</tr>
		30	</thead>
		31	<tbody>
		32	<tr ng-show="currentPageVendedores.length == 0">
		33	<td colspan="3">
		34	No se encontraron resultados.
		35	</td>
		36	</tr>
		37	<tr class="selected"
		38	ng-repeat="(key, vendedor) in currentPageVendedores"
		39	ng-click="select(vendedor)"
		40	>