Boletín Institucional
Boletín Institucional
En el sitio web del Instituto Nacional de las Mujeres (INAMU) se encuentra disponible un espacio para consultar los boletines institucionales, los cuales recopilan mensualmente las actividades realizadas y las que están por programarse. A través de una tabla interactiva, es posible acceder y descargar los documentos en formato PDF organizados por año y mes. Este recurso facilita la transparencia institucional y permite a la ciudadanía dar seguimiento a la gestión realizada de manera clara y ordenada.
Se ha producido un error al procesar la plantilla.
Java method "com.sun.proxy.$Proxy98.getFileEntries(long, long, int, int)" threw an exception when invoked on com.sun.proxy.$Proxy98 object "com.liferay.document.library.opener.google.drive.web.internal.service.DLOpenerGoogleDriveDLAppServiceWrapper@5cc79544"; see cause exception in the Java stack trace.
----
FTL stack trace ("~" means nesting-related):
- Failed at: #assign files = fileService.getFileEn... [in template "37601#37631#224115" at line 165, column 9]
----
1<style>
2 input[type="range"] {
3 -webkit-appearance: none;
4 width: 100%;
5 height: 10px;
6 border-radius: 5px;
7 outline: none;
8 margin-left: 0px;
9 margin-top: 10px;
10 background-color: red;
11 }
12
13 /* Estilos adicionales */
14 .yearRangeContainer {
15 position: relative;
16 width: 100%;
17 }
18
19 .yearLabels {
20 position: absolute;
21 top: 20px;
22 left: 50%;
23 transform: translateX(-50%);
24 display: flex;
25 justify-content: center;
26 align-items: center;
27 background-color: #FA003F;
28 padding: 5px 10px;
29 border-radius: 5px;
30 color: white;
31 }
32
33 .selectedYearMarker {
34 position: absolute;
35 top: 0px;
36 left: 50%;
37 transform: translateX(-50%);
38 width: 10px;
39 height: 10px;
40 background-color: #007ea8;
41 border-radius: 50%;
42 }
43
44 .timeline {
45 width: 100%;
46 display: flex;
47 justify-content: space-between;
48 padding: 10px 0;
49 }
50
51 .timeline span {
52 cursor: pointer;
53 position: relative;
54 font-weight: bold;
55 }
56
57 .timeline span:hover {
58 color: #007ea8;
59 }
60
61
62 .formatChooser {
63 display: flex;
64 column-gap: 30px;
65 flex-wrap: wrap!important;
66}
67 </style>
68
69
70
71
72 <div class="new-container">
73 <div class="tabla-encabezado">
74 <h2 class="noticia-card__title-space titulo-small fw-700 ">${TituloDeLaTabla.getData()}</h2>
75 <div class="contenedor-dinamico-auditoria">
76 <div class="yearRangeContainer">
77 <h3 class="texto-basico-resumen dark-gray fw-400">Deslice a la izquierda para ver los años anteriores</h3>
78 <input type="range" id="yearRange" class="yearRange" min="" max="" step="1" value="">
79 <div class="selectedYearMarker">
80 <div class="yearLabels">
81 <span class="selectedYearLabel texto-basico-mediano fw-700 white"></span>
82 </div>
83 </div>
84
85 </div>
86 <div class="timeline">
87 <!-- Lista de años generada dinámicamente -->
88 </div>
89 <h3 class="texto-basico-resumen dark-gray fw-400 mt-4">Seleccione el tipo de documento</h3>
90 <div class="formatChooser">
91 <label class="texto-basico-mediano fw-700 is-hover-main black">
92 <input type="checkbox" name="format" value="control" checked>Boletín institucional
93 </label>
94
95
96 </div>
97 </div>
98 </div>
99
100
101
102 <#if FechaDelDocumento.getSiblings()?has_content>
103 <#list FechaDelDocumento.getSiblings() as cur_FechaDelDocumento>
104
105 <!-- Tabla de Alertas de periódicos oficiales -->
106 <table class="tabla-auditorias tabla-control" data-year="${cur_FechaDelDocumento.getData()}">
107 <!-- Encabezado de la tabla -->
108 <thead>
109 <tr>
110 <th colspan="5" style="background-color:#fff59d">
111 <h3 class="text-center titulo-mediano fw-700 black">
112 Boletín institucional
113 </h3>
114 </th>
115 </tr>
116 <tr>
117 <th class="bg-main white">
118 <p class="texto-basico white fw-400 margin-0px">Nombre</p>
119 </th>
120 </tr>
121 </thead>
122
123
124
125 <tbody>
126
127 <#-- Localización en español -->
128 <#setting locale="es_ES">
129
130 <#-- Mapeo de meses para orden cronológico -->
131 <#assign monthOrder = {
132 "enero": 1, "febrero": 2, "marzo": 3, "abril": 4,
133 "mayo": 5, "junio": 6, "julio": 7, "agosto": 8,
134 "septiembre": 9, "octubre": 10, "noviembre": 11, "diciembre": 12
135 }>
136
137 <#assign folderService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLFolderLocalService")>
138 <#assign fileService = serviceLocator.findService("com.liferay.document.library.kernel.service.DLAppService")>
139 <#assign folders = folderService.getDLFolders(0, 50000)>
140 <#assign targetFolderName = cur_FechaDelDocumento.NombreCarpetaBoletines.getData()>
141
142 <#-- Buscar la carpeta raíz -->
143 <#list folders as rootFolder>
144 <#if rootFolder.getName() == targetFolderName>
145
146 <#-- Obtener subcarpetas (posibles meses) -->
147 <#assign monthFolders = folderService.getFolders(rootFolder.getGroupId(), rootFolder.getFolderId())>
148
149 <#-- Crear lista con mes y carpeta -->
150 <#assign validMonthFolders = []>
151 <#list monthFolders as folder>
152 <#assign folderNameLower = folder.getName()?lower_case>
153 <#if monthOrder[folderNameLower]?has_content>
154 <#assign validMonthFolders += [{"order": monthOrder[folderNameLower], "folder": folder}]>
155 </#if>
156 </#list>
157
158 <#-- Ordenar por número de mes en orden descendente (meses más recientes primero) -->
159 <#assign sortedMonthFolders = validMonthFolders?sort_by("order")?reverse>
160
161 <#-- Recorrer carpetas ordenadas por mes (de más reciente a más antiguo) -->
162 <#list sortedMonthFolders as item>
163 <#assign monthFolder = item.folder>
164 <#assign monthName = monthFolder.getName()?capitalize>
165 <#assign files = fileService.getFileEntries(monthFolder.getGroupId(), monthFolder.getFolderId(), -1, -1)>
166
167 <#-- Ordenar archivos por fecha de modificación (de más reciente a más antigua) -->
168 <#assign sortedFiles = []>
169 <#list files as file>
170 <#assign sortedFiles = sortedFiles + [file]>
171 </#list>
172 <#assign sortedFiles = sortedFiles?sort_by("modifiedDate")?reverse>
173
174 <#-- Agregar fila con el nombre del mes -->
175 <tr class="mes">
176 <td colspan="2" style="font-weight: bold; font-size: 18px; padding-top: 15px;">${monthName}</td>
177 <#setting url_escaping_charset='UTF-8'>
178 <#list sortedFiles as file>
179
180 <tr>
181 <td>
182 <a class="main fw-600" href="/documents/${file.getRepositoryId()}/${file.getFolderId()}/${file.getTitle()?url}/${file.getUuid()}" target="_blank">
183 ${file.getTitle()}
184 <img style="height:40px;" src="/documents/37629/49538/file.png/96236e9b-3e5d-19bb-91c9-45a124494de5?t=1738773852744" alt="">
185 Descargar aquí
186 </a>
187 </td>
188 </tr>
189 </#list>
190 </#list>
191
192 <#break>
193 </#if>
194 </#list>
195
196</tbody>
197
198
199 </table>
200
201
202
203 </#list>
204 </#if>
205 </div>
206
207
208<script>
209// Obtener los elementos del DOM
210var yearRange = document.getElementById('yearRange');
211var selectedYearLabel = document.querySelector('.selectedYearLabel');
212var selectedYearMarker = document.querySelector('.selectedYearMarker');
213var timelineContainer = document.querySelector('.timeline');
214var tablasAuditorias = document.querySelectorAll('.tabla-auditorias');
215
216// Función para obtener los años únicos de las tablas
217function obtenerAñosDisponibles() {
218 var años = [];
219 tablasAuditorias.forEach(function(tabla) {
220 var año = tabla.getAttribute('data-year');
221 if (año && !años.includes(año)) {
222 años.push(año);
223 }
224 });
225 return años.map(Number).sort((a, b) => a - b); // Convertir a números y ordenar
226}
227
228// Función para actualizar el slider y la tabla
229function actualizarSlider(anioSeleccionado) {
230 yearRange.value = anioSeleccionado;
231 selectedYearLabel.textContent = anioSeleccionado;
232 mostrarTablaPorAnio(anioSeleccionado); // Actualiza las tablas al cambiar el año
233 updateMarkerPosition(); // Actualiza la posición del marcador
234 updateRangeBackground(yearRange); // Actualiza el fondo de la barra
235}
236
237// Función para mostrar solo la tabla de control interno del año seleccionado
238function mostrarTablaPorAnio(anio) {
239 // Ocultar todas las tablas
240 tablasAuditorias.forEach(function(tabla) {
241 tabla.style.display = 'none'; // Ocultar la tabla
242 });
243
244 // Mostrar solo la tabla de control interno del año seleccionado
245 var tablaControl = document.querySelector('.tabla-control[data-year="' + anio + '"]');
246 if (tablaControl) {
247 tablaControl.style.display = 'table'; // Mostrar solo la tabla de control
248 }
249}
250
251// Función para generar los elementos de la línea de tiempo (timeline)
252function generarTimeline(años) {
253 timelineContainer.innerHTML = '';
254 años.forEach(function(year) {
255 var span = document.createElement('span');
256 span.textContent = year;
257 span.addEventListener('click', function() {
258 actualizarSlider(year);
259 });
260 timelineContainer.appendChild(span);
261 });
262}
263
264// Función para actualizar la posición del marcador de año seleccionado
265function updateMarkerPosition() {
266 var rangeWidth = yearRange.clientWidth;
267 var min = parseInt(yearRange.min);
268 var max = parseInt(yearRange.max);
269 var value = parseInt(yearRange.value);
270 var left = ((value - min) / (max - min)) * rangeWidth;
271 selectedYearMarker.style.left = left + 'px';
272}
273
274// Función para actualizar el fondo del rango de años
275function updateRangeBackground(range) {
276 var gradientStop = (range.value - range.min) / (range.max - range.min);
277 range.style.background = "linear-gradient(to right, #007ea8 0%, #007ea8 " + (gradientStop * 100) + "%, #ccc " + (gradientStop * 100) + "%, #ccc 100%)";
278}
279
280// Obtener los años disponibles y configurar el slider
281var years = obtenerAñosDisponibles();
282
283// Inicializar el rango de años y mostrar el año seleccionado inicialmente
284if (years.length > 0) {
285 yearRange.min = Math.min(...years);
286 yearRange.max = Math.max(...years);
287 yearRange.value = yearRange.max;
288 actualizarSlider(yearRange.value);
289 generarTimeline(years.reverse()); // Invertir el orden para mostrar el más reciente a la derecha
290} else {
291 console.error("No hay años disponibles en la tabla.");
292}
293
294// Evento que escucha el cambio en el slider
295yearRange.addEventListener('input', function() {
296 var anioSeleccionado = this.value;
297 actualizarSlider(anioSeleccionado);
298});
299
300// Funciones para manejar checkboxes
301(function() {
302 // Verificar si existe un elemento con la clase '.tabla-auditorias' en el DOM
303 if (!tablasAuditorias.length) return; // Si no existe, salir de la función
304
305 // Función para mostrar la tabla correspondiente al formato seleccionado y desmarcar los demás checkboxes
306 function mostrarTabla(formato) {
307 // Obtener el año seleccionado
308 var selectedYear = parseInt(selectedYearLabel.innerText);
309
310 // Ocultar todas las tablas
311 tablasAuditorias.forEach(function(tabla) {
312 tabla.style.display = 'none';
313 });
314
315 // Desmarcar todos los checkboxes
316 var checkboxes = document.querySelectorAll('input[name="format"]');
317 checkboxes.forEach(function(checkbox) {
318 checkbox.checked = false;
319 });
320
321 // Marcar el checkbox correspondiente al formato seleccionado
322 var checkboxSeleccionado = document.querySelector('input[name="format"][value="' + formato + '"]');
323 checkboxSeleccionado.checked = true;
324
325 // Mostrar la tabla correspondiente
326 var tablaMostrar = document.querySelector('.tabla-' + formato + '[data-year="' + selectedYear + '"]');
327 if (tablaMostrar) {
328 tablaMostrar.style.display = 'table';
329 }
330 }
331
332 // Función para filtrar las tablas por el año seleccionado y el formato seleccionado
333 function filterByYearAndFormat(year, formato) {
334 tablasAuditorias.forEach(function(table) {
335 if (formato === 'todos' && table.getAttribute('data-year') === year) {
336 table.style.display = 'table';
337 } else if (table.getAttribute('data-year') === year && table.classList.contains('tabla-' + formato)) {
338 table.style.display = 'table';
339 } else {
340 table.style.display = 'none';
341 }
342 });
343 }
344
345 // Inicializar los checkboxes
346 var checkboxes = document.querySelectorAll('input[name="format"]');
347 checkboxes.forEach(function(checkbox) {
348 checkbox.addEventListener('change', function() {
349 var formatoSeleccionado = this.value;
350 mostrarTabla(formatoSeleccionado);
351 });
352 });
353
354 // Agregar un event listener al nuevo checkbox "Todos los tipos de documentos"
355 var checkboxTodos = document.querySelector('input[name="format"][value="todos"]');
356 checkboxTodos.addEventListener('change', function() {
357 var year = selectedYearLabel.innerText;
358 if (this.checked) {
359 // Mostrar todas las tablas del año seleccionado
360 var formatoSeleccionado = document.querySelector('input[name="format"]:checked').value;
361 filterByYearAndFormat(year, formatoSeleccionado);
362 } else {
363 // Mostrar solo la tabla del formato seleccionado
364 var formatoSeleccionado = document.querySelector('input[name="format"]:checked').value;
365 mostrarTabla(formatoSeleccionado);
366 }
367 });
368
369})();
370
371</script>