Eric Fernandez / foca-modal

Download as
Browse Code »

Commit 208f4a879595653d7fce7c30e27726bedd813ace

Authored by Eric Fernandez
2 parents 9b5bc7e0ee e21962d5ef
Exists in master

Merge branch 'master' into 'master' 

Master

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