Luigi / foca-modal

Download as
Browse Code ยป

Commit fdf1eca2029d6204849de278141197ff7a72cabb

Authored by Eric Fernandez
1 parent 10f926e48f
Exists in master and in 1 other branch develop

foca modal parametrizado

Showing 4 changed files with 306 additions and 2 deletions   Show diff stats
... ... @@ -68,6 +68,10 @@ gulp.task('clean-post-install', 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})
src/js/controllerModal.js
Diff comments   View file @ fdf1eca
... ... @@ -0,0 +1,170 @@
  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 + );
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 @ fdf1eca
... ... @@ -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>