Eric Fernandez / foca-modal

Download as
Browse Code »

Commit 1b737409d15df983b44b4d6d39179fd7d26b9aad

Authored by Eric Fernandez
1 parent 16fec94665
Exists in master

refactor ahora paso objeto a modal

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