Jose Pinto / 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 1 # foca-modal
2 2  
3   -Modal de confirmación, alerta
4 3 \ No newline at end of file
  4 +Modal de confirmación, alerta
  5 +
  6 +EJEMPLO
  7 + //consulta a llamar
  8 + var query = '/hoja-ruta';
  9 +
  10 +
  11 + var columnas = {
  12 + //nombre de <th>
  13 + nombre: ['codigo', 'fecha', 'Nº'],
  14 + //nombre de propiedad
  15 + propiedad: ['id', 'fechaCreacion', 'numeroHojaRuta']
  16 + };
  17 + //titulo de modal
  18 + var titulo = 'Busqueda hoja de ruta';
  19 +
  20 + focaModalService.modal(columnas, query, titulo).then(function(hojaRuta) {
  21 + console.log(hojaRuta);
  22 + });
... ... @@ -68,6 +68,10 @@ gulp.task(&#39;clean-post-install&#39;, function() {
68 68 .pipe(clean());
69 69 });
70 70  
  71 +gulp.task('watch', function() {
  72 + gulp.watch([paths.srcJS, paths.srcViews], ['uglify'])
  73 +});
  74 +
71 75 gulp.task('webserver', function() {
72 76 pump [
73 77 connect.server({port: 3000})
... ... @@ -8,33 +8,33 @@
8 8 "gulp-pre-commit": "gulp pre-commit",
9 9 "compile": "gulp uglify",
10 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 13 "pre-commit": [
14 14 "gulp-pre-commit"
15 15 ],
16 16 "repository": {
17 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 20 "author": "Foca Software",
21 21 "license": "ISC",
22 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 25 "devDependencies": {
26 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 28 "gulp": "^3.9.1",
29   - "gulp-angular-templatecache": "^2.2.3",
  29 + "gulp-angular-templatecache": "^2.2.5",
30 30 "gulp-clean": "^0.4.0",
31   - "gulp-connect": "^5.6.1",
  31 + "gulp-connect": "^5.7.0",
32 32 "gulp-htmlmin": "^5.0.1",
33 33 "gulp-jshint": "^2.1.0",
34 34 "gulp-rename": "^1.4.0",
35 35 "gulp-replace": "^1.0.0",
36 36 "gulp-uglify": "^3.0.1",
37   - "jshint": "^2.9.6",
  37 + "jshint": "^2.9.7",
38 38 "pump": "^3.0.0"
39 39 }
40 40 }
src/js/controller.js
Diff comments   View file @ 96e3176
... ... @@ -4,7 +4,7 @@ angular.module(&#39;focaModal&#39;)
4 4 function($uibModalInstance, $scope, textoModal) {
5 5 $scope.textoModal = textoModal;
6 6 $scope.cancelar = function() {
7   - $uibModalInstance.close(false);
  7 + $uibModalInstance.dismiss(false);
8 8 };
9 9 $scope.aceptar = function() {
10 10 $uibModalInstance.close(true);
src/js/controllerModal.js
Diff comments   View file @ 96e3176
... ... @@ -0,0 +1,163 @@
  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 + );
1 1 angular.module('focaModal')
2 2 .service('focaModalService', [
3   - '$uibModal',
4   - function($uibModal) {
  3 + '$uibModal', 'API_ENDPOINT', '$http',
  4 + function($uibModal, API_ENDPOINT, $http) {
5 5 return {
6 6 confirm: function(textoModal) {
7 7 return $uibModal.open({
... ... @@ -30,6 +30,27 @@ angular.module(&#39;focaModal&#39;)
30 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 }
src/views/foca-modal.html
Diff comments   View file @ 96e3176
... ... @@ -0,0 +1,109 @@
  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>