Commit 9b5bc7e0ee27adeef5ebc8f240ddf5f5f545737c

Authored by Jose Pinto
Exists in master and in 1 other branch develop

Merge branch 'master' into 'master'

Master(efernandez)

See merge request !12
src/js/controllerModal.js
1 angular.module('focaModal') 1 angular.module('focaModal')
2 .controller('focaModalController', [ 2 .controller('focaModalController', [
3 '$timeout', 3 '$timeout',
4 '$filter', 4 '$filter',
5 '$scope', 5 '$scope',
6 '$uibModalInstance', 6 '$uibModalInstance',
7 'focaModalService', 7 'focaModalService',
8 'parametrosModal', 8 'parametrosModal',
9 function($timeout, $filter, $scope, $uibModalInstance, focaModalService, parametrosModal) { 9 function($timeout, $filter, $scope, $uibModalInstance, focaModalService, parametrosModal) {
10 10
11 $scope.parametrosModal = parametrosModal; 11 $scope.parametrosModal = parametrosModal;
12 $scope.filters = ''; 12 $scope.filters = '';
13 $scope.entidades = []; 13 $scope.entidades = [];
14 $scope.primerBusqueda = false; 14 $scope.primerBusqueda = false;
15 $scope.searchLoading = false; 15 $scope.searchLoading = false;
16 // pagination 16 // pagination
17 $scope.numPerPage = 10; 17 $scope.numPerPage = 10;
18 $scope.currentPage = 1; 18 $scope.currentPage = 1;
19 $scope.filteredEntidades = []; 19 $scope.filteredEntidades = [];
20 $scope.currentPageEntidades = []; 20 $scope.currentPageEntidades = [];
21 $scope.selectedEntidad = -1; 21 $scope.selectedEntidad = -1;
22 22
23 $scope.busquedaPress = function(key) { 23 $scope.busquedaPress = function(key) {
24 if(key === 13) { 24 if(key === 13) {
25 $scope.searchLoading = true; 25 $scope.searchLoading = true;
26 focaModalService.getEntidad($scope.filters, parametrosModal.query).then( 26 focaModalService.getEntidad(
27 $scope.filters,
28 parametrosModal.query,
29 parametrosModal.tipo,
30 parametrosModal.json
31 ).then(
27 function(res) { 32 function(res) {
28 $scope.searchLoading = false; 33 $scope.searchLoading = false;
29 $scope.primerBusqueda = true; 34 $scope.primerBusqueda = true;
30 $scope.entidades = res.data; 35 $scope.entidades = res.data;
31 filtros($scope.entidades); 36 filtros($scope.entidades);
32 $scope.search(true); 37 $scope.search(true);
33 } 38 }
34 ); 39 );
35 } 40 }
36 }; 41 };
37 $scope.busquedaPress(13); 42 $scope.busquedaPress(13);
38 function filtros(entidades) { 43 function filtros(entidades) {
39 for (var i = 0; i < $scope.parametrosModal.columnas.length; i++) { 44 for (var i = 0; i < $scope.parametrosModal.columnas.length; i++) {
40 var filtro = $scope.parametrosModal.columnas[i].filtro; 45 var filtro = $scope.parametrosModal.columnas[i].filtro;
41 if (filtro) { 46 if (filtro) {
42 for (var j = 0; j < entidades.length; j++) { 47 for (var j = 0; j < entidades.length; j++) {
43 entidades[j][$scope.parametrosModal.columnas[i].propiedad] = 48 entidades[j][$scope.parametrosModal.columnas[i].propiedad] =
44 $filter(filtro.nombre)(entidades[j][$scope 49 $filter(filtro.nombre)(entidades[j][$scope
45 .parametrosModal.columnas[i].propiedad], filtro.parametro); 50 .parametrosModal.columnas[i].propiedad], filtro.parametro);
46 } 51 }
47 } 52 }
48 } 53 }
49 } 54 }
50 $scope.search = function(pressed) { 55 $scope.search = function(pressed) {
51 if($scope.entidades.length > 0) { 56 if($scope.entidades.length > 0) {
52 $scope.filteredEntidades = $filter('filter')( 57 $scope.filteredEntidades = $filter('filter')(
53 $scope.entidades, { $: $scope.filters } 58 $scope.entidades, { $: $scope.filters }
54 ); 59 );
55 $scope.lastPage = Math.ceil( 60 $scope.lastPage = Math.ceil(
56 $scope.filteredEntidades.length / $scope.numPerPage 61 $scope.filteredEntidades.length / $scope.numPerPage
57 ); 62 );
58 $scope.resetPage(); 63 $scope.resetPage();
59 }else if(pressed) { 64 }else if(pressed) {
60 $timeout(function() { 65 $timeout(function() {
61 angular.element('#search')[0].focus(); 66 angular.element('#search')[0].focus();
62 $scope.filters = ''; 67 $scope.filters = '';
63 }); 68 });
64 } 69 }
65 }; 70 };
66 71
67 $scope.resetPage = function() { 72 $scope.resetPage = function() {
68 $scope.currentPage = 1; 73 $scope.currentPage = 1;
69 $scope.selectPage(1); 74 $scope.selectPage(1);
70 }; 75 };
71 76
72 $scope.selectPage = function(page) { 77 $scope.selectPage = function(page) {
73 var start = (page - 1) * $scope.numPerPage; 78 var start = (page - 1) * $scope.numPerPage;
74 var end = start + $scope.numPerPage; 79 var end = start + $scope.numPerPage;
75 $scope.paginas = []; 80 $scope.paginas = [];
76 $scope.paginas = calcularPages(page); 81 $scope.paginas = calcularPages(page);
77 $scope.currentPageEntidades = $scope.filteredEntidades.slice(start, end); 82 $scope.currentPageEntidades = $scope.filteredEntidades.slice(start, end);
78 $scope.currentPage = page; 83 $scope.currentPage = page;
79 }; 84 };
80 85
81 $scope.select = function(vendedor) { 86 $scope.select = function(vendedor) {
82 $uibModalInstance.close(vendedor); 87 $uibModalInstance.close(vendedor);
83 }; 88 };
84 89
85 $scope.cancel = function() { 90 $scope.cancel = function() {
86 $uibModalInstance.dismiss('cancel'); 91 $uibModalInstance.dismiss('cancel');
87 }; 92 };
88 93
89 $scope.busquedaDown = function(key) { 94 $scope.busquedaDown = function(key) {
90 if (key === 40) { 95 if (key === 40) {
91 primera(key); 96 primera(key);
92 } 97 }
93 }; 98 };
94 99
95 $scope.itemEntidad = function(key) { 100 $scope.itemEntidad = function(key) {
96 if (key === 38) { 101 if (key === 38) {
97 anterior(key); 102 anterior(key);
98 } 103 }
99 if (key === 40) { 104 if (key === 40) {
100 siguiente(key); 105 siguiente(key);
101 } 106 }
102 if (key === 37) { 107 if (key === 37) {
103 retrocederPagina(); 108 retrocederPagina();
104 } 109 }
105 if (key === 39) { 110 if (key === 39) {
106 avanzarPagina(); 111 avanzarPagina();
107 } 112 }
108 }; 113 };
109 $scope.esFecha = function(fecha) { 114 $scope.esFecha = function(fecha) {
110 if(fecha.includes('fecha')) { 115 if(fecha.includes('fecha')) {
111 return true; 116 return true;
112 } 117 }
113 return false; 118 return false;
114 } 119 }
115 120
116 function calcularPages(paginaActual) { 121 function calcularPages(paginaActual) {
117 var paginas = []; 122 var paginas = [];
118 paginas.push(paginaActual); 123 paginas.push(paginaActual);
119 124
120 if (paginaActual - 1 > 1) { 125 if (paginaActual - 1 > 1) {
121 126
122 paginas.unshift(paginaActual - 1); 127 paginas.unshift(paginaActual - 1);
123 if (paginaActual - 2 > 1) { 128 if (paginaActual - 2 > 1) {
124 paginas.unshift(paginaActual - 2); 129 paginas.unshift(paginaActual - 2);
125 } 130 }
126 } 131 }
127 if (paginaActual + 1 < $scope.lastPage) { 132 if (paginaActual + 1 < $scope.lastPage) {
128 paginas.push(paginaActual + 1); 133 paginas.push(paginaActual + 1);
129 if (paginaActual + 2 < $scope.lastPage) { 134 if (paginaActual + 2 < $scope.lastPage) {
130 paginas.push(paginaActual + 2); 135 paginas.push(paginaActual + 2);
131 } 136 }
132 } 137 }
133 if (paginaActual !== 1) { 138 if (paginaActual !== 1) {
134 paginas.unshift(1); 139 paginas.unshift(1);
135 } 140 }
136 if (paginaActual !== $scope.lastPage) { 141 if (paginaActual !== $scope.lastPage) {
137 paginas.push($scope.lastPage); 142 paginas.push($scope.lastPage);
138 } 143 }
139 return paginas; 144 return paginas;
140 } 145 }
141 146
142 function primera() { 147 function primera() {
143 $scope.selectedEntidad = 0; 148 $scope.selectedEntidad = 0;
144 } 149 }
145 150
146 function anterior() { 151 function anterior() {
147 if($scope.selectedEntidad === 0 && $scope.currentPage > 1) { 152 if($scope.selectedEntidad === 0 && $scope.currentPage > 1) {
148 retrocederPagina(); 153 retrocederPagina();
149 } else { 154 } else {
150 $scope.selectedEntidad--; 155 $scope.selectedEntidad--;
151 } 156 }
152 } 157 }
153 158
154 function siguiente() { 159 function siguiente() {
155 if($scope.selectedEntidad < $scope.currentPageEntidades.length - 1) { 160 if($scope.selectedEntidad < $scope.currentPageEntidades.length - 1) {
156 $scope.selectedEntidad++; 161 $scope.selectedEntidad++;
157 } else { 162 } else {
158 avanzarPagina(); 163 avanzarPagina();
159 } 164 }
160 } 165 }
161 166
162 function retrocederPagina() { 167 function retrocederPagina() {
163 if ($scope.currentPage > 1) { 168 if ($scope.currentPage > 1) {
164 $scope.selectPage($scope.currentPage - 1); 169 $scope.selectPage($scope.currentPage - 1);
165 $scope.selectedEntidad = $scope.numPerPage - 1; 170 $scope.selectedEntidad = $scope.numPerPage - 1;
166 } 171 }
167 } 172 }
168 173
169 function avanzarPagina() { 174 function avanzarPagina() {
170 if($scope.currentPage < $scope.lastPage) { 175 if($scope.currentPage < $scope.lastPage) {
171 $scope.selectPage($scope.currentPage + 1); 176 $scope.selectPage($scope.currentPage + 1);
172 $scope.selectedEntidad = 0; 177 $scope.selectedEntidad = 0;
173 } 178 }
174 } 179 }
175 }] 180 }]
176 ); 181 );
177 182
1 angular.module('focaModal') 1 angular.module('focaModal')
2 .service('focaModalService', [ 2 .factory('focaModalService', [
3 '$uibModal', 'API_ENDPOINT', '$http', 3 '$uibModal', 'API_ENDPOINT', '$http',
4 function($uibModal, API_ENDPOINT, $http) { 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 }, 33 },
34 modal: function(parametrosModal) { 34 modal: function(parametrosModal) {
35 parametrosModal.size = (typeof parametrosModal.size === 'undefined') ? 35 parametrosModal.size = (typeof parametrosModal.size === 'undefined') ?
36 'lg' : parametrosModal.size; 36 'lg' : parametrosModal.size;
37 37
38 return $uibModal.open({ 38 return $uibModal.open({
39 templateUrl: 'foca-modal.html', 39 templateUrl: 'foca-modal.html',
40 controller: 'focaModalController', 40 controller: 'focaModalController',
41 size: parametrosModal.size, 41 size: parametrosModal.size,
42 resolve: { 42 resolve: {
43 parametrosModal: function() { return parametrosModal; } 43 parametrosModal: function() { return parametrosModal; }
44 } 44 }
45 }) 45 })
46 .result.then( 46 .result.then(
47 function(resultado) { 47 function(resultado) {
48 return resultado; 48 return resultado;
49 } 49 }
50 ); 50 );
51 }, 51 },
52 getEntidad: function(filters, query) { 52 getEntidad: function(filters, query, tipo, json) {
53 return $http.get(API_ENDPOINT.URL + query, {nombre: filters}); 53 if (tipo === 'POST') {
54 return $http.post(API_ENDPOINT.URL + query, json);
55 } else {
56 return $http.get(API_ENDPOINT.URL + query, {nombre: filters});
57 }
54 }, 58 },
55 modalFecha: function(titulo) { 59 modalFecha: function(titulo) {
56 return $uibModal.open({ 60 return $uibModal.open({
57 templateUrl: 'foca-fecha.html', 61 templateUrl: 'foca-fecha.html',
58 controller: 'focaModalFechaController', 62 controller: 'focaModalFechaController',
59 size: 'md', 63 size: 'md',
60 resolve: { 64 resolve: {
61 titulo: function() {return titulo;} 65 titulo: function() {return titulo;}
62 } 66 }
63 }) 67 })
64 .result.then( 68 .result.then(
65 function(resultado) { 69 function(resultado) {
66 return resultado; 70 return resultado;
67 } 71 }
68 ); 72 );
69 }, 73 },
70 prompt: function(titulo, initValue){ 74 prompt: function(titulo, initValue){
71 return $uibModal.open({ 75 return $uibModal.open({
72 templateUrl: 'modal-prompt.html', 76 templateUrl: 'modal-prompt.html',
73 controller: 'focaModalPromptController', 77 controller: 'focaModalPromptController',
74 size: 'md', 78 size: 'md',
75 resolve: { 79 resolve: {
76 titulo: function() {return titulo;}, 80 titulo: function() {return titulo;},
77 initValue: function() {return initValue;} 81 initValue: function() {return initValue;}
78 } 82 }
79 }) 83 })
80 .result.then( 84 .result.then(
81 function(resultado) { 85 function(resultado) {
82 return resultado; 86 return resultado;
83 } 87 }
84 ); 88 );
85 } 89 }
86 }; 90 };
87 } 91 }
88 ]); 92 ]);
89 93
src/views/foca-modal.html
1 <div class="modal-header py-1"> 1 <div class="modal-header py-1">
2 <div class="row w-100"> 2 <div class="row w-100">
3 <div ng-class="(parametrosModal.size == 'md') ? 'col-lg-12' : 'col-lg-6'"> 3 <div ng-class="(parametrosModal.size == 'md') ? 'col-lg-12' : 'col-lg-6'">
4 <h5 class="modal-title my-1">{{parametrosModal.titulo}}</h5> 4 <h5 class="modal-title my-1">{{parametrosModal.titulo}}</h5>
5 <small ng-if="parametrosModal.subTitulo">{{parametrosModal.subTitulo}}</small> 5 <small ng-if="parametrosModal.subTitulo">{{parametrosModal.subTitulo}}</small>
6 </div> 6 </div>
7 <div class="input-group pr-0 my-2" ng-class="(parametrosModal.size == 'md') ? 'col-lg-12' : 'col-lg-6'"> 7 <div class="input-group pr-0 my-2" ng-class="(parametrosModal.size == 'md') ? 'col-lg-12' : 'col-lg-6'">
8 <input 8 <input
9 ng-disabled="searchLoading"
10 type="text" 9 type="text"
11 class="form-control form-control-sm" 10 class="form-control form-control-sm"
12 id="search" 11 id="search"
13 placeholder="Busqueda" 12 placeholder="Busqueda"
14 ng-model="filters" 13 ng-model="filters"
15 ng-change="search()" 14 ng-change="search()"
16 ng-keydown="busquedaDown($event.keyCode)" 15 ng-keydown="busquedaDown($event.keyCode)"
17 ng-keypress="busquedaPress($event.keyCode)" 16 ng-keypress="busquedaPress($event.keyCode)"
18 foca-focus="selectedEntidad == -1" 17 foca-focus="selectedEntidad == -1"
19 ng-focus="selectedEntidad = -1" 18 ng-focus="selectedEntidad = -1"
20 teclado-virtual 19 teclado-virtual
21 > 20 >
22 <div class="input-group-append"> 21 <div class="input-group-append">
23 <button 22 <button
24 ladda="searchLoading" 23 ladda="searchLoading"
25 data-spinner-color="#FF0000" 24 data-spinner-color="#FF0000"
26 class="btn btn-outline-secondary" 25 class="btn btn-outline-secondary"
27 type="button" 26 type="button"
28 ng-click="busquedaPress(13)" 27 ng-click="busquedaPress(13)"
29 > 28 >
30 <i class="fa fa-search" aria-hidden="true"></i> 29 <i class="fa fa-search" aria-hidden="true"></i>
31 </button> 30 </button>
32 </div> 31 </div>
33 </div> 32 </div>
34 </div> 33 </div>
35 </div> 34 </div>
36 <div class="modal-body" id="modal-body"> 35 <div class="modal-body" id="modal-body">
37 36
38 <div ng-show="!primerBusqueda"> 37 <div ng-show="!primerBusqueda">
39 Debe realizar una primer búsqueda. 38 Debe realizar una primer búsqueda.
40 </div> 39 </div>
41 40
42 <table ng-show="primerBusqueda" class="table table-striped table-sm col-12"> 41 <table ng-show="primerBusqueda" class="table table-striped table-sm col-12">
43 <thead> 42 <thead>
44 <tr> 43 <tr>
45 <th ng-repeat="columna in parametrosModal.columnas" ng-bind="columna.nombre"></th> 44 <th ng-repeat="columna in parametrosModal.columnas" ng-bind="columna.nombre"></th>
46 <th></th> 45 <th></th>
47 </tr> 46 </tr>
48 </thead> 47 </thead>
49 <tbody> 48 <tbody>
50 <tr ng-show="currentPageEntidades.length == 0 && primerBusqueda"> 49 <tr ng-show="currentPageEntidades.length == 0 && primerBusqueda">
51 <td colspan="3"> 50 <td colspan="3">
52 No se encontraron resultados. 51 No se encontraron resultados.
53 </td> 52 </td>
54 </tr> 53 </tr>
55 <tr class="selected" 54 <tr class="selected"
56 ng-repeat="(key, entidad) in currentPageEntidades" 55 ng-repeat="(key, entidad) in currentPageEntidades"
57 ng-click="select(entidad)" 56 ng-click="select(entidad)"
58 > 57 >
59 <td 58 <td
60 ng-repeat="columna in parametrosModal.columnas" 59 ng-repeat="columna in parametrosModal.columnas"
61 ng-bind="entidad[columna.propiedad]"></td> 60 ng-bind="entidad[columna.propiedad]"></td>
62 <td class="d-md-none text-primary"> 61 <td class="d-md-none text-primary">
63 <i class="fa fa-circle-thin" aria-hidden="true"></i> 62 <i class="fa fa-circle-thin" aria-hidden="true"></i>
64 </td> 63 </td>
65 <td class="d-none d-md-table-cell"> 64 <td class="d-none d-md-table-cell">
66 <button 65 <button
67 type="button" 66 type="button"
68 class="btn btn-xs p-1 float-right" 67 class="btn btn-xs p-1 float-right"
69 ng-class="{ 68 ng-class="{
70 'btn-secondary': selectedEntidad != key, 69 'btn-secondary': selectedEntidad != key,
71 'btn-primary': selectedEntidad == key 70 'btn-primary': selectedEntidad == key
72 }" 71 }"
73 foca-focus="selectedEntidad == {{key}}" 72 foca-focus="selectedEntidad == {{key}}"
74 ng-keydown="itemEntidad($event.keyCode)"> 73 ng-keydown="itemEntidad($event.keyCode)">
75 <i class="fa fa-circle-thin" aria-hidden="true"></i> 74 <i class="fa fa-circle-thin" aria-hidden="true"></i>
76 </button> 75 </button>
77 </td> 76 </td>
78 </tr> 77 </tr>
79 </tbody> 78 </tbody>
80 </table> 79 </table>
81 </div> 80 </div>
82 <div class="modal-footer py-1"> 81 <div class="modal-footer py-1">
83 <nav ng-show="currentPageEntidades.length > 0 && primerBusqueda" class="mr-auto"> 82 <nav ng-show="currentPageEntidades.length > 0 && primerBusqueda" class="mr-auto">
84 <ul class="pagination pagination-sm justify-content mb-0"> 83 <ul class="pagination pagination-sm justify-content mb-0">
85 <li class="page-item" ng-class="{'disabled': currentPage == 1}"> 84 <li class="page-item" ng-class="{'disabled': currentPage == 1}">
86 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)"> 85 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage - 1)">
87 <span aria-hidden="true">&laquo;</span> 86 <span aria-hidden="true">&laquo;</span>
88 <span class="sr-only">Anterior</span> 87 <span class="sr-only">Anterior</span>
89 </a> 88 </a>
90 </li> 89 </li>
91 <li 90 <li
92 class="page-item" 91 class="page-item"
93 ng-repeat="pagina in paginas" 92 ng-repeat="pagina in paginas"
94 ng-class="{'active': pagina == currentPage}" 93 ng-class="{'active': pagina == currentPage}"
95 > 94 >
96 <a 95 <a
97 class="page-link" 96 class="page-link"
98 href="javascript:void();" 97 href="javascript:void();"
99 ng-click="selectPage(pagina)" 98 ng-click="selectPage(pagina)"
100 ng-bind="pagina" 99 ng-bind="pagina"
101 ></a> 100 ></a>
102 </li> 101 </li>
103 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}"> 102 <li class="page-item" ng-class="{'disabled': currentPage == lastPage}">
104 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)"> 103 <a class="page-link" href="javascript:void();" ng-click="selectPage(currentPage + 1)">
105 <span aria-hidden="true">&raquo;</span> 104 <span aria-hidden="true">&raquo;</span>
106 <span class="sr-only">Siguiente</span> 105 <span class="sr-only">Siguiente</span>
107 </a> 106 </a>
108 </li> 107 </li>
109 </ul> 108 </ul>
110 </nav> 109 </nav>
111 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button> 110 <button class="btn btn-sm btn-secondary my-1" type="button" ng-click="cancel()">Cancelar</button>
112 </div> 111 </div>
113 112