Eric Fernandez / foca-modal

Download as
Browse Code »

Commit 207a9f0c2d9bc14d9e376c1f70df711a5123da55

Authored by Jose Pinto
1 parent cb25bbd6d6
Exists in master

si la modal es 'md' se pone el buscador abajo del titulo

Showing 3 changed files with 7 additions and 4 deletions   Show diff stats
src/js/controllerModal.js
Diff comments   View file @ 207a9f0
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 'columnas', 8 'columnas',
9 'query', 9 'query',
10 'titulo', 10 'titulo',
11 'size',
11 function($timeout, $filter, $scope, $uibModalInstance, focaModalService, 12 function($timeout, $filter, $scope, $uibModalInstance, focaModalService,
12 columnas, query, titulo) { 13 columnas, query, titulo, size) {
13 14
15 $scope.size = size;
14 $scope.filters = ''; 16 $scope.filters = '';
15 $scope.columnas = columnas; 17 $scope.columnas = columnas;
16 $scope.titulo = titulo; 18 $scope.titulo = titulo;
17 $scope.entidades = []; 19 $scope.entidades = [];
18 $scope.primerBusqueda = false; 20 $scope.primerBusqueda = false;
19 $scope.searchLoading = false; 21 $scope.searchLoading = false;
20 // pagination 22 // pagination
21 $scope.numPerPage = 10; 23 $scope.numPerPage = 10;
22 $scope.currentPage = 1; 24 $scope.currentPage = 1;
23 $scope.filteredEntidades = []; 25 $scope.filteredEntidades = [];
24 $scope.currentPageEntidades = []; 26 $scope.currentPageEntidades = [];
25 $scope.selectedEntidad = -1; 27 $scope.selectedEntidad = -1;
26 28
27 $scope.busquedaPress = function(key) { 29 $scope.busquedaPress = function(key) {
28 if(key === 13) { 30 if(key === 13) {
29 $scope.searchLoading = true; 31 $scope.searchLoading = true;
30 focaModalService.getEntidad($scope.filters, query).then( 32 focaModalService.getEntidad($scope.filters, query).then(
31 function(res) { 33 function(res) {
32 $scope.searchLoading = false; 34 $scope.searchLoading = false;
33 $scope.primerBusqueda = true; 35 $scope.primerBusqueda = true;
34 $scope.entidades = res.data; 36 $scope.entidades = res.data;
35 $scope.search(true); 37 $scope.search(true);
36 primera(); 38 primera();
37 } 39 }
38 ); 40 );
39 } 41 }
40 }; 42 };
41 $scope.busquedaPress(13); 43 $scope.busquedaPress(13);
42 44
43 $scope.search = function(pressed) { 45 $scope.search = function(pressed) {
44 if($scope.entidades.length > 0) { 46 if($scope.entidades.length > 0) {
45 $scope.filteredEntidades = $filter('filter')( 47 $scope.filteredEntidades = $filter('filter')(
46 $scope.entidades, { $: $scope.filters } 48 $scope.entidades, { $: $scope.filters }
47 ); 49 );
48 $scope.lastPage = Math.ceil( 50 $scope.lastPage = Math.ceil(
49 $scope.filteredEntidades.length / $scope.numPerPage 51 $scope.filteredEntidades.length / $scope.numPerPage
50 ); 52 );
51 $scope.resetPage(); 53 $scope.resetPage();
52 }else if(pressed) { 54 }else if(pressed) {
53 $timeout(function() { 55 $timeout(function() {
54 angular.element('#search')[0].focus(); 56 angular.element('#search')[0].focus();
55 $scope.filters = ''; 57 $scope.filters = '';
56 }); 58 });
57 } 59 }
58 }; 60 };
59 61
60 $scope.resetPage = function() { 62 $scope.resetPage = function() {
61 $scope.currentPage = 1; 63 $scope.currentPage = 1;
62 $scope.selectPage(1); 64 $scope.selectPage(1);
63 }; 65 };
64 66
65 $scope.selectPage = function(page) { 67 $scope.selectPage = function(page) {
66 var start = (page - 1) * $scope.numPerPage; 68 var start = (page - 1) * $scope.numPerPage;
67 var end = start + $scope.numPerPage; 69 var end = start + $scope.numPerPage;
68 $scope.paginas = []; 70 $scope.paginas = [];
69 $scope.paginas = calcularPages(page); 71 $scope.paginas = calcularPages(page);
70 $scope.currentPageEntidades = $scope.filteredEntidades.slice(start, end); 72 $scope.currentPageEntidades = $scope.filteredEntidades.slice(start, end);
71 $scope.currentPage = page; 73 $scope.currentPage = page;
72 }; 74 };
73 75
74 $scope.select = function(vendedor) { 76 $scope.select = function(vendedor) {
75 $uibModalInstance.close(vendedor); 77 $uibModalInstance.close(vendedor);
76 }; 78 };
77 79
78 $scope.cancel = function() { 80 $scope.cancel = function() {
79 $uibModalInstance.dismiss('cancel'); 81 $uibModalInstance.dismiss('cancel');
80 }; 82 };
81 83
82 $scope.busquedaDown = function(key) { 84 $scope.busquedaDown = function(key) {
83 if (key === 40) { 85 if (key === 40) {
84 primera(key); 86 primera(key);
85 } 87 }
86 }; 88 };
87 89
88 $scope.itemEntidad = function(key) { 90 $scope.itemEntidad = function(key) {
89 if (key === 38) { 91 if (key === 38) {
90 anterior(key); 92 anterior(key);
91 } 93 }
92 if (key === 40) { 94 if (key === 40) {
93 siguiente(key); 95 siguiente(key);
94 } 96 }
95 if (key === 37) { 97 if (key === 37) {
96 retrocederPagina(); 98 retrocederPagina();
97 } 99 }
98 if (key === 39) { 100 if (key === 39) {
99 avanzarPagina(); 101 avanzarPagina();
100 } 102 }
101 }; 103 };
102 $scope.esFecha = function(fecha) { 104 $scope.esFecha = function(fecha) {
103 if(fecha.includes('fecha')) { 105 if(fecha.includes('fecha')) {
104 return true; 106 return true;
105 } 107 }
106 return false; 108 return false;
107 } 109 }
108 110
109 function calcularPages(paginaActual) { 111 function calcularPages(paginaActual) {
110 var paginas = []; 112 var paginas = [];
111 paginas.push(paginaActual); 113 paginas.push(paginaActual);
112 114
113 if (paginaActual - 1 > 1) { 115 if (paginaActual - 1 > 1) {
114 116
115 paginas.unshift(paginaActual - 1); 117 paginas.unshift(paginaActual - 1);
116 if (paginaActual - 2 > 1) { 118 if (paginaActual - 2 > 1) {
117 paginas.unshift(paginaActual - 2); 119 paginas.unshift(paginaActual - 2);
118 } 120 }
119 } 121 }
120 if (paginaActual + 1 < $scope.lastPage) { 122 if (paginaActual + 1 < $scope.lastPage) {
121 paginas.push(paginaActual + 1); 123 paginas.push(paginaActual + 1);
122 if (paginaActual + 2 < $scope.lastPage) { 124 if (paginaActual + 2 < $scope.lastPage) {
123 paginas.push(paginaActual + 2); 125 paginas.push(paginaActual + 2);
124 } 126 }
125 } 127 }
126 if (paginaActual !== 1) { 128 if (paginaActual !== 1) {
127 paginas.unshift(1); 129 paginas.unshift(1);
128 } 130 }
129 if (paginaActual !== $scope.lastPage) { 131 if (paginaActual !== $scope.lastPage) {
130 paginas.push($scope.lastPage); 132 paginas.push($scope.lastPage);
131 } 133 }
132 return paginas; 134 return paginas;
133 } 135 }
134 136
135 function primera() { 137 function primera() {
136 $scope.selectedEntidad = 0; 138 $scope.selectedEntidad = 0;
137 } 139 }
138 140
139 function anterior() { 141 function anterior() {
140 if($scope.selectedEntidad === 0 && $scope.currentPage > 1) { 142 if($scope.selectedEntidad === 0 && $scope.currentPage > 1) {
141 retrocederPagina(); 143 retrocederPagina();
142 } else { 144 } else {
143 $scope.selectedEntidad--; 145 $scope.selectedEntidad--;
144 } 146 }
145 } 147 }
146 148
147 function siguiente() { 149 function siguiente() {
148 if($scope.selectedEntidad < $scope.currentPageEntidades.length - 1) { 150 if($scope.selectedEntidad < $scope.currentPageEntidades.length - 1) {
149 $scope.selectedEntidad++; 151 $scope.selectedEntidad++;
150 } else { 152 } else {
151 avanzarPagina(); 153 avanzarPagina();
152 } 154 }
153 } 155 }
154 156
155 function retrocederPagina() { 157 function retrocederPagina() {
156 if ($scope.currentPage > 1) { 158 if ($scope.currentPage > 1) {
157 $scope.selectPage($scope.currentPage - 1); 159 $scope.selectPage($scope.currentPage - 1);
158 $scope.selectedEntidad = $scope.numPerPage - 1; 160 $scope.selectedEntidad = $scope.numPerPage - 1;
159 } 161 }
160 } 162 }
161 163
162 function avanzarPagina() { 164 function avanzarPagina() {
163 if($scope.currentPage < $scope.lastPage) { 165 if($scope.currentPage < $scope.lastPage) {
164 $scope.selectPage($scope.currentPage + 1); 166 $scope.selectPage($scope.currentPage + 1);
165 $scope.selectedEntidad = 0; 167 $scope.selectedEntidad = 0;
166 } 168 }
167 } 169 }
168 }] 170 }]
169 ); 171 );
170 172
1 angular.module('focaModal') 1 angular.module('focaModal')
2 .service('focaModalService', [ 2 .service('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(columnas, query, titulo, size) { 34 modal: function(columnas, query, titulo, size) {
35 size = (typeof size === 'undefined') ? 'lg' : size; 35 size = (typeof size === 'undefined') ? 'lg' : size;
36 36
37 return $uibModal.open({ 37 return $uibModal.open({
38 templateUrl: 'foca-modal.html', 38 templateUrl: 'foca-modal.html',
39 controller: 'focaModalController', 39 controller: 'focaModalController',
40 size: size, 40 size: size,
41 resolve: { 41 resolve: {
42 columnas: function() { return columnas; }, 42 columnas: function() { return columnas; },
43 query: function() { return query; }, 43 query: function() { return query; },
44 titulo: function() {return titulo;} 44 titulo: function() { return titulo; },
45 size: function() { return size; }
45 } 46 }
46 }) 47 })
47 .result.then( 48 .result.then(
48 function(resultado) { 49 function(resultado) {
49 return resultado; 50 return resultado;
50 } 51 }
51 ); 52 );
52 }, 53 },
53 getEntidad: function(filters, query) { 54 getEntidad: function(filters, query) {
54 return $http.get(API_ENDPOINT.URL + query, {nombre: filters}); 55 return $http.get(API_ENDPOINT.URL + query, {nombre: filters});
55 }, 56 },
56 modalFecha: function(titulo) { 57 modalFecha: function(titulo) {
57 return $uibModal.open({ 58 return $uibModal.open({
58 templateUrl: 'foca-fecha.html', 59 templateUrl: 'foca-fecha.html',
59 controller: 'focaModalFechaController', 60 controller: 'focaModalFechaController',
60 size: 'md', 61 size: 'md',
61 resolve: { 62 resolve: {
62 titulo: function() {return titulo;} 63 titulo: function() {return titulo;}
63 } 64 }
64 }) 65 })
65 .result.then( 66 .result.then(
66 function(resultado) { 67 function(resultado) {
67 return resultado; 68 return resultado;
68 } 69 }
69 ); 70 );
70 }, 71 },
71 prompt: function(titulo, initValue){ 72 prompt: function(titulo, initValue){
72 return $uibModal.open({ 73 return $uibModal.open({
73 templateUrl: 'modal-prompt.html', 74 templateUrl: 'modal-prompt.html',
74 controller: 'focaModalPromptController', 75 controller: 'focaModalPromptController',
75 size: 'md', 76 size: 'md',
76 resolve: { 77 resolve: {
77 titulo: function() {return titulo;}, 78 titulo: function() {return titulo;},
78 initValue: function() {return initValue;} 79 initValue: function() {return initValue;}
79 } 80 }
80 }) 81 })
81 .result.then( 82 .result.then(
82 function(resultado) { 83 function(resultado) {
83 return resultado; 84 return resultado;
84 } 85 }
85 ); 86 );
86 } 87 }
87 }; 88 };
88 } 89 }
89 ]); 90 ]);
90 91
src/views/foca-modal.html
Diff comments   View file @ 207a9f0
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 class="col-lg-6"> 3 <div ng-class="(size == 'md') ? 'col-lg-12' : 'col-lg-6'">
4 <h5 class="modal-title my-1">{{titulo}}</h5> 4 <h5 class="modal-title my-1">{{titulo}}</h5>
5 </div> 5 </div>
6 <div class="input-group col-lg-6 pr-0 my-2"> 6 <div class="input-group pr-0 my-2" ng-class="(size == 'md') ? 'col-lg-12' : 'col-lg-6'">
7 <input 7 <input
8 ladda="searchLoading" 8 ladda="searchLoading"
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="nombre in columnas.nombre" ng-bind="nombre"></th> 44 <th ng-repeat="nombre in columnas.nombre" ng-bind="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="select(entidad)"
57 > 57 >
58 <td 58 <td
59 ng-repeat="propiedad in columnas.propiedad" 59 ng-repeat="propiedad in columnas.propiedad"
60 ng-bind="entidad[propiedad]"></td> 60 ng-bind="entidad[propiedad]"></td>
61 <td class="d-md-none text-primary"> 61 <td class="d-md-none text-primary">
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">
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