Luigi / foca-modal

Download as
Browse Code »

Commit fc0db6803cfc9a4073329b3078ace1e431ac1686

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

servicio modal fecha

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