Eric Fernandez / foca-modal

Download as
Browse Code »

Commit 96e31761046140606f31ea2193b3a07c56e108e4

Authored by Eric Fernandez
2 parents 833b6ee101 e7ad1a7a5a
Exists in master

Merge branch 'master' into 'master' 

Master(efernandez)

See merge request !1
Showing 7 changed files   Show diff stats
1 # foca-modal 1 # foca-modal
2 2
3 Modal de confirmación, alerta
3 Modal de confirmación, alerta
4
5 EJEMPLO
6 //consulta a llamar
7 var query = '/hoja-ruta';
8
9
10 var columnas = {
11 //nombre de <th>
12 nombre: ['codigo', 'fecha', 'Nº'],
13 //nombre de propiedad
14 propiedad: ['id', 'fechaCreacion', 'numeroHojaRuta']
15 };
16 //titulo de modal
17 var titulo = 'Busqueda hoja de ruta';
18
19 focaModalService.modal(columnas, query, titulo).then(function(hojaRuta) {
20 console.log(hojaRuta);
21 });
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 clean = require('gulp-clean'); 3 const clean = require('gulp-clean');
4 const htmlmin = require('gulp-htmlmin'); 4 const htmlmin = require('gulp-htmlmin');
5 const rename = require('gulp-rename'); 5 const rename = require('gulp-rename');
6 const uglify = require('gulp-uglify'); 6 const uglify = require('gulp-uglify');
7 const gulp = require('gulp'); 7 const gulp = require('gulp');
8 const pump = require('pump'); 8 const pump = require('pump');
9 const jshint = require('gulp-jshint'); 9 const jshint = require('gulp-jshint');
10 const replace = require('gulp-replace'); 10 const replace = require('gulp-replace');
11 11
12 var paths = { 12 var paths = {
13 srcJS: 'src/js/*.js', 13 srcJS: 'src/js/*.js',
14 srcViews: 'src/views/*.html', 14 srcViews: 'src/views/*.html',
15 tmp: 'tmp', 15 tmp: 'tmp',
16 dist: 'dist/' 16 dist: 'dist/'
17 }; 17 };
18 18
19 gulp.task('templates', function() { 19 gulp.task('templates', function() {
20 return pump( 20 return pump(
21 [ 21 [
22 gulp.src(paths.srcViews), 22 gulp.src(paths.srcViews),
23 htmlmin(), 23 htmlmin(),
24 templateCache('views.js', { 24 templateCache('views.js', {
25 module: 'focaModal', 25 module: 'focaModal',
26 root: '' 26 root: ''
27 }), 27 }),
28 gulp.dest(paths.tmp) 28 gulp.dest(paths.tmp)
29 ] 29 ]
30 ); 30 );
31 }); 31 });
32 32
33 gulp.task('uglify', ['templates'], function() { 33 gulp.task('uglify', ['templates'], function() {
34 return pump( 34 return pump(
35 [ 35 [
36 gulp.src([ 36 gulp.src([
37 paths.srcJS, 37 paths.srcJS,
38 'tmp/views.js' 38 'tmp/views.js'
39 ]), 39 ]),
40 concat('foca-modal.js'), 40 concat('foca-modal.js'),
41 gulp.dest(paths.tmp), 41 gulp.dest(paths.tmp),
42 rename('foca-modal.min.js'), 42 rename('foca-modal.min.js'),
43 uglify(), 43 uglify(),
44 gulp.dest(paths.dist) 44 gulp.dest(paths.dist)
45 ] 45 ]
46 ); 46 );
47 }); 47 });
48 48
49 gulp.task('clean', function() { 49 gulp.task('clean', function() {
50 return gulp.src(['tmp', 'dist'], {read: false}) 50 return gulp.src(['tmp', 'dist'], {read: false})
51 .pipe(clean()); 51 .pipe(clean());
52 }); 52 });
53 53
54 gulp.task('pre-commit', function() { 54 gulp.task('pre-commit', function() {
55 pump( 55 pump(
56 [ 56 [
57 gulp.src(paths.srcJS), 57 gulp.src(paths.srcJS),
58 jshint('.jshintrc'), 58 jshint('.jshintrc'),
59 jshint.reporter('default'), 59 jshint.reporter('default'),
60 jshint.reporter('fail') 60 jshint.reporter('fail')
61 ] 61 ]
62 ); 62 );
63 }); 63 });
64 64
65 gulp.task('clean-post-install', function() { 65 gulp.task('clean-post-install', function() {
66 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js', 66 return gulp.src(['src', 'tmp', '.jshintrc','readme.md', '.gitignore', 'gulpfile.js',
67 'index.html'], {read: false}) 67 'index.html'], {read: false})
68 .pipe(clean()); 68 .pipe(clean());
69 }); 69 });
70 70
71 gulp.task('watch', function() {
72 gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
73 });
74
71 gulp.task('webserver', function() { 75 gulp.task('webserver', function() {
72 pump [ 76 pump [
73 connect.server({port: 3000}) 77 connect.server({port: 3000})
74 ] 78 ]
75 }); 79 });
76 80
77 gulp.task('default', ['webserver']); 81 gulp.task('default', ['webserver']);
78 82
1 { 1 {
2 "name": "foca-modal", 2 "name": "foca-modal",
3 "version": "0.0.1", 3 "version": "0.0.1",
4 "description": "Modales de foca", 4 "description": "Modales de foca",
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 gulp gulp-angular-templatecache gulp-clean gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify jshint pump git+https://debo.suite.repo/modulos-npm/foca-directivas.git" 11 "install-dev": "npm install -D angular gulp gulp-angular-templatecache gulp-clean gulp-connect gulp-htmlmin gulp-jshint gulp-rename gulp-replace gulp-uglify jshint pump git+http://git.focasoftware.com/npm/foca-directivas.git"
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.git" 18 "url": "http://git.focasoftware.com/npm/foca-modal.git"
19 }, 19 },
20 "author": "Foca Software", 20 "author": "Foca Software",
21 "license": "ISC", 21 "license": "ISC",
22 "peerDependencies": { 22 "peerDependencies": {
23 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git" 23 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git"
24 }, 24 },
25 "devDependencies": { 25 "devDependencies": {
26 "angular": "^1.7.5", 26 "angular": "^1.7.5",
27 "foca-directivas": "git+https://debo.suite.repo/modulos-npm/foca-directivas.git", 27 "foca-directivas": "git+http://git.focasoftware.com/npm/foca-directivas.git",
28 "gulp": "^3.9.1", 28 "gulp": "^3.9.1",
29 "gulp-angular-templatecache": "^2.2.3", 29 "gulp-angular-templatecache": "^2.2.5",
30 "gulp-clean": "^0.4.0", 30 "gulp-clean": "^0.4.0",
31 "gulp-connect": "^5.6.1", 31 "gulp-connect": "^5.7.0",
32 "gulp-htmlmin": "^5.0.1", 32 "gulp-htmlmin": "^5.0.1",
33 "gulp-jshint": "^2.1.0", 33 "gulp-jshint": "^2.1.0",
34 "gulp-rename": "^1.4.0", 34 "gulp-rename": "^1.4.0",
35 "gulp-replace": "^1.0.0", 35 "gulp-replace": "^1.0.0",
36 "gulp-uglify": "^3.0.1", 36 "gulp-uglify": "^3.0.1",
37 "jshint": "^2.9.6", 37 "jshint": "^2.9.7",
38 "pump": "^3.0.0" 38 "pump": "^3.0.0"
39 } 39 }
40 } 40 }
41 41
src/js/controller.js
Diff comments   View file @ 96e3176
1 angular.module('focaModal') 1 angular.module('focaModal')
2 .controller('focaModalConfirmController', [ 2 .controller('focaModalConfirmController', [
3 '$uibModalInstance', '$scope', 'textoModal', 3 '$uibModalInstance', '$scope', 'textoModal',
4 function($uibModalInstance, $scope, textoModal) { 4 function($uibModalInstance, $scope, textoModal) {
5 $scope.textoModal = textoModal; 5 $scope.textoModal = textoModal;
6 $scope.cancelar = function() { 6 $scope.cancelar = function() {
7 $uibModalInstance.close(false); 7 $uibModalInstance.dismiss(false);
8 }; 8 };
9 $scope.aceptar = function() { 9 $scope.aceptar = function() {
10 $uibModalInstance.close(true); 10 $uibModalInstance.close(true);
11 }; 11 };
12 } 12 }
13 ]) 13 ])
14 .controller('focaModalAlertController', [ 14 .controller('focaModalAlertController', [
15 '$uibModalInstance', '$scope', 'textoModal', 15 '$uibModalInstance', '$scope', 'textoModal',
16 function($uibModalInstance, $scope, textoModal) { 16 function($uibModalInstance, $scope, textoModal) {
17 $scope.textoModal = textoModal; 17 $scope.textoModal = textoModal;
18 $scope.aceptar = function() { 18 $scope.aceptar = function() {
19 $uibModalInstance.close(true); 19 $uibModalInstance.close(true);
20 }; 20 };
21 } 21 }
22 ]); 22 ]);
23 23
src/js/controllerModal.js
Diff comments   View file @ 96e3176
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 if (key === 40) {
93 siguiente(key);
94 }
95 if (key === 37) {
96 retrocederPagina();
97 }
98 if (key === 39) {
99 avanzarPagina();
100 }
101 };
102
103 function calcularPages(paginaActual) {
104 var paginas = [];
105 paginas.push(paginaActual);
106
107 if (paginaActual - 1 > 1) {
108
109 paginas.unshift(paginaActual - 1);
110 if (paginaActual - 2 > 1) {
111 paginas.unshift(paginaActual - 2);
112 }
113 }
114 if (paginaActual + 1 < $scope.lastPage) {
115 paginas.push(paginaActual + 1);
116 if (paginaActual + 2 < $scope.lastPage) {
117 paginas.push(paginaActual + 2);
118 }
119 }
120 if (paginaActual !== 1) {
121 paginas.unshift(1);
122 }
123 if (paginaActual !== $scope.lastPage) {
124 paginas.push($scope.lastPage);
125 }
126 return paginas;
127 }
128
129 function primera() {
130 $scope.selectedEntidad = 0;
131 }
132
133 function anterior() {
134 if($scope.selectedEntidad === 0 && $scope.currentPage > 1) {
135 retrocederPagina();
136 } else {
137 $scope.selectedEntidad--;
138 }
139 }
140
141 function siguiente() {
142 if($scope.selectedEntidad < $scope.currentPageEntidades.length - 1) {
143 $scope.selectedEntidad++;
144 } else {
145 avanzarPagina();
146 }
147 }
148
149 function retrocederPagina() {
150 if ($scope.currentPage > 1) {
151 $scope.selectPage($scope.currentPage - 1);
152 $scope.selectedEntidad = $scope.numPerPage - 1;
153 }
154 }
155
156 function avanzarPagina() {
157 if($scope.currentPage < $scope.lastPage) {
158 $scope.selectPage($scope.currentPage + 1);
159 $scope.selectedEntidad = 0;
160 }
161 }
162 }]
163 );
164
1 angular.module('focaModal') 1 angular.module('focaModal')
2 .service('focaModalService', [ 2 .service('focaModalService', [
3 '$uibModal', 3 '$uibModal', 'API_ENDPOINT', '$http',
4 function($uibModal) { 4 function($uibModal, API_ENDPOINT, $http) {
5 return { 5 return {
6 confirm: function(textoModal) { 6 confirm: function(textoModal) {
7 return $uibModal.open({ 7 return $uibModal.open({
8 templateUrl: 'modal-confirm.html', 8 templateUrl: 'modal-confirm.html',
9 controller: 'focaModalConfirmController', 9 controller: 'focaModalConfirmController',
10 animation: false, 10 animation: false,
11 backdrop: false, 11 backdrop: false,
12 resolve: { textoModal: function() { return textoModal; } } 12 resolve: { textoModal: function() { return textoModal; } }
13 }) 13 })
14 .result.then( 14 .result.then(
15 function(resultado) { 15 function(resultado) {
16 return resultado; 16 return resultado;
17 } 17 }
18 ); 18 );
19 }, 19 },
20 alert: function(textoModal) { 20 alert: function(textoModal) {
21 return $uibModal.open({ 21 return $uibModal.open({
22 templateUrl: 'modal-alert.html', 22 templateUrl: 'modal-alert.html',
23 controller: 'focaModalAlertController', 23 controller: 'focaModalAlertController',
24 animation: false, 24 animation: false,
25 backdrop: false, 25 backdrop: false,
26 resolve: { textoModal: function() { return textoModal; } } 26 resolve: { textoModal: function() { return textoModal; } }
27 }) 27 })
28 .result.then( 28 .result.then(
29 function(resultado) { 29 function(resultado) {
30 return resultado; 30 return resultado;
31 } 31 }
32 ) 32 )
33 },
34 modal: function(columnas, query, titulo) {
35 return $uibModal.open({
36 templateUrl: 'foca-modal.html',
37 controller: 'focaModalController',
38 animation: false,
39 backdrop: false,
40 resolve: {
41 columnas: function() { return columnas; },
42 query: function() { return query; },
43 titulo: function() {return titulo;}
44 }
45 })
46 .result.then(
47 function(resultado) {
48 return resultado;
49 }
50 )
51 },
52 getEntidad: function(filters, query) {
53 return $http.get(API_ENDPOINT.URL + query, {nombre: filters});
33 } 54 }
34 }; 55 };
35 } 56 }
36 ]); 57 ]);
37 58
src/views/foca-modal.html
Diff comments   View file @ 96e3176
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">&laquo;</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">&raquo;</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