utn-cli 2.1.52 → 2.1.54

package/templates/frontend/src/app/Paginas/Nucleo/preguntasFrecuentes/preguntasFrecuentes.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { DatosGlobalesService } from '../../../datos-globales.service';
+import { HttpClient } from '@angular/common/http';
+import { takeUntil } from 'rxjs/operators';
+import { Subject } from 'rxjs';
+@Component({
+  selector: 'app-preguntasfrecuentes',
+  standalone: true,
+  imports: [MatIconModule],
+  templateUrl: './preguntasFrecuentes.component.html',
+  styleUrl: './preguntasFrecuentes.component.css'
+})
+export class PreguntasFrecuentesComponent implements OnInit {
+  
+  private _destroy$ = new Subject<void>();
+  constructor(private http: HttpClient, private datosGlobalesService: DatosGlobalesService) { }
+   ngOnInit(): void {
+      this.http.get(`${this.datosGlobalesService.ObtenerURL()}misc/VistaDePreguntasFrecuentes`).pipe(takeUntil(this._destroy$)).subscribe({ error: () => { } });
+   }
+  // items expandidos
+  expandedItems: { [key: string]: boolean } = {
+    item1: false,
+    item2: false,
+    item3: false,
+    item4: false,
+    item5: false,
+    item6: false,
+  };
+  
+  toggleItem(itemId: string) {
+    this.expandedItems[itemId] = !this.expandedItems[itemId];
+  }
+  
+  
+ }

package/templates/frontend/src/app/Paginas/Nucleo/sabiasque/sabiasque.component.css

@@ -0,0 +1,229 @@
+.politicas-container {
+  max-width: 1000px;
+  padding-bottom: 20px;
+  font-family: 'Roboto', sans-serif;
+  background-color: white;
+  text-align: left;
+  margin: 0 auto;
+}
+
+.subtitle {
+  background-color: #0b4794;
+  font-size: 25px;
+  color: white;
+  padding: 18px;
+  margin: 20px 0;
+  text-align: center;
+}
+.subtitle p {
+  margin: 5px 0;
+}
+
+
+.tree-container {
+  width: 100%;
+  padding-left: 30px;
+  padding-right: 30px;   
+  margin-top: 30px;  
+  box-sizing: border-box;   
+  max-height: none;
+}
+
+/* Estilos árboles */
+.tree-item {
+  margin-bottom: 10px;
+  padding-left: 15px;
+  transition: background-color 0.3s ease;
+}
+
+.line {
+  height: 3px;
+   border-bottom: 1px solid #C4C4C4;
+}
+.tree-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px;
+  background-color: white;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.tree-icon {
+  font-size: 14px;
+  color: #0b4794;
+  font-weight: bold;
+  width: 20px;
+}
+
+.tree-title {
+  font-weight: 500;
+  color: #4D4D4D;
+  font-size: 16px;
+}
+
+.tree-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+  background-color: white;
+  margin-top: 5px;
+}
+
+.tree-content.expanded {
+  max-height: 2000px;
+  padding: 15px;
+}
+.tree-item.expanded-item {
+  background-color: #F6F8FA;
+  border-left: 4px solid #002F6B;
+}
+
+.tree-item.expanded-item .tree-header,
+.tree-item.expanded-item .tree-header .tree-title {
+  background-color: #F6F8FA;
+  color: #002F6B;
+}
+
+.tree-item.expanded-item .tree-content.expanded {
+  background-color: #F6F8FA;
+}
+.tree-content p {
+  margin: 0;
+  line-height: 1.6;
+  color: #4D4D4D;
+  margin-bottom: 20px;
+  font-size: 16px;
+}
+
+.tree-content ul {
+  padding-left: 20px; 
+  margin-top: 10px;  
+}
+
+.tree-content li {
+  list-style-type: disc; 
+  margin-bottom: 10px; 
+  color: #4D4D4D;  
+  font-size: 16px; 
+}
+
+.conozcanos-image {
+  flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.conozcanos-image img {
+  width: 100%;
+  max-width: 290px;
+  height: auto;
+  object-fit: cover;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}
+@media (max-width: 768px) {
+  
+  .tree-title {
+    font-size: 14px;
+  }
+  
+  .tree-content p {
+    font-size: 14px;
+  }
+
+  .tree-content li{
+     font-size: 14px;
+  }
+}
+
+/* sub items*/
+
+.sub-tree-item {
+  margin: 8px 0 8px 25px;
+  transition: all 0.3s ease;
+}
+
+.sub-tree-header {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  cursor: pointer;
+  padding: 12px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
+}
+
+.sub-tree-title {
+  font-weight: 500;
+  font-size: 15px;
+  color: #4D4D4D;
+}
+
+.sub-tree-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease-out;
+}
+
+.sub-tree-content.expanded {
+  max-height: 2000px;
+  padding: 15px;
+}
+
+/* Estado expandido */
+
+.sub-tree-item.expanded-sub-item {
+  background-color: #F6F8FA;
+  border: 1px solid #C4C4C4;
+}
+
+.sub-tree-item.expanded-sub-item .sub-tree-header,
+.sub-tree-item.expanded-sub-item .sub-tree-title {
+  color: #002F6B;
+  background-color: #F6F8FA;
+}
+
+.sub-tree-item.expanded-sub-item .sub-tree-content.expanded {
+  background-color: #F6F8FA;
+}
+
+.imagenes-comparacion {
+  display: flex;
+  gap: 20px;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap; 
+  margin-bottom: 20px;
+}
+
+.imagen-item {
+  flex: 1;
+  min-width: 250px;
+  text-align: center;
+}
+
+.imagen-item img {
+  width: 100%;
+  max-width: 420px;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+}
+
+.video-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+
+.video-container video {
+  width: 100%;
+  max-width: 700px;
+  border-radius: 8px;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+}

package/templates/frontend/src/app/Paginas/Nucleo/sabiasque/sabiasque.component.html

@@ -0,0 +1,396 @@
+<div class="subtitle">
+  <p>¿Sabías que?</p>
+</div>
+<div class="politicas-container">
+
+  <!-- Árbol-->
+  <div class="tree-container">
+
+    <!-- Item 1 -->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item1']">
+      <div class="tree-header" (click)="toggleItem('item1')">
+        <span class="tree-icon">{{ expandedItems['item1'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">1. Gestión de módulos</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item1']">
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem1_1']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem1_1')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem1_1'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              1.1 Anclar módulos
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem1_1']">
+            <p>
+              La funcionalidad de anclaje permite establecer módulos prioritarios para un acceso más rápido y eficiente
+              desde el panel principal. Los módulos anclados permanecerán visibles en una ubicación destacada,
+              facilitando la navegación y optimizando la productividad del usuario.
+            </p>
+            <div class="imagenes-comparacion">
+
+              <div class="imagen-item">
+                <p><strong>Antes</strong></p>
+                <img src="sabias-1.png" alt="Antes">
+              </div>
+
+              <div class="imagen-item">
+                <p><strong>Después</strong></p>
+                <img src="sabias-2.png" alt="Después">
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem1_2']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem1_2')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem1_2'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              1.2 Búsqueda de módulos
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem1_2']">
+            <p>
+              El buscador integrado del panel permite localizar módulos de forma ágil mediante palabras clave,
+              reduciendo los tiempos de navegación y mejorando la experiencia de uso.
+            </p>
+            <div class="imagenes-comparacion">
+
+              <div class="imagen-item">
+                <img src="sabias-3.png" alt="Antes">
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem1_3']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem1_3')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem1_3'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              1.3 Submódulos
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem1_3']">
+            <p>
+              Los módulos principales muestran e identifican la cantidad de submódulos asociados. Además, los submódulos
+              cuentan con funcionalidades de búsqueda y anclaje similares a las disponibles en los módulos principales.
+            </p>
+            <p><strong>Módulo principal:</strong> al seleccionar un módulo principal, el sistema redirige
+              automáticamente a la vista de los submódulos asociados.</p>
+            <div class="imagenes-comparacion">
+
+              <div class="imagen-item">
+                <img src="sabias-4.png" alt="Antes">
+              </div>
+            </div>
+
+            <p><strong>Submódulos:</strong> esta sección permite consultar, buscar y anclar submódulos para un acceso
+              más eficiente.</p>
+            <div class="imagenes-comparacion">
+
+              <div class="imagen-item">
+                <img src="sabias-5.png" alt="Antes">
+              </div>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 2-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item2']">
+      <div class="tree-header" (click)="toggleItem('item2')">
+        <span class="tree-icon">{{ expandedItems['item2'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">2. Gestión de tarjetas</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item2']">
+        <p><strong> 2.1 Ordenar tarjetas</strong></p>
+        <p>
+          Al acceder a un submódulo, el sistema muestra las tarjetas asociadas. Estas pueden reorganizarse según las
+          necesidades del usuario. La configuración del orden queda almacenada automáticamente, por lo que se
+          conservará incluso después de cerrar sesión.
+        </p>
+
+        <div class="video-container">
+          <video controls>
+            <source src="videos/screen-capture (2).webm" type="video/mp4">
+            Tu navegador no soporta la reproducción de video.
+          </video>
+        </div>
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 3-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item3']">
+      <div class="tree-header" (click)="toggleItem('item3')">
+        <span class="tree-icon">{{ expandedItems['item3'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">3. Gestión de aplicaciones</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item3']">
+        <p>En la parte inferior derecha de la pantalla encontrarás el menú aplicaciones, identificado con el símbolo
+          (^). Al seleccionarlo, se desplegará un conjunto de opciones disponibles.
+        </p>
+
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem3_1']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem3_1')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem3_1'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              3.1 Envío de sugerencias
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem3_1']">
+            <p>
+              ¿Sabías que puedes enviar sugerencias para contribuir a la mejora continua de SIGU?
+            </p>
+            <p>Dentro de este menú encontrarás la opción <strong>sugerencias</strong>. Al hacer clic, se abrirá un panel donde podrás
+              registrar observaciones, comentarios o propuestas de mejora relacionadas con la plataforma SIGU.</p>
+
+            <p>Esta funcionalidad permite que los usuarios aporten ideas para optimizar procesos, mejorar la experiencia
+              de uso e incorporar nuevas funcionalidades en futuras versiones del sistema.</p>
+
+            <div class="imagenes-comparacion">
+
+              <div class="imagen-item">
+                <img src="sabias-6.png" alt="Antes">
+              </div>
+
+              <div class="imagen-item">
+                <img src="sabias-7.png" alt="Antes">
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem3_2']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem3_2')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem3_2'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              3.2 Actividad de la cuenta
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem3_2']">
+            <p>
+              ¿Sabías que puedes consultar el historial de actividad de tu cuenta dentro de SIGU?
+            </p>
+            <p>Desde el menú Aplicaciones, ubicado en la parte inferior derecha de la pantalla, selecciona la opción
+              <strong>actividad de la cuenta</strong>.</p>
+
+            <p>Esta sección muestra un registro de las acciones realizadas dentro de la plataforma, permitiéndote dar
+              seguimiento a tu actividad y consultar información relevante relacionada con el uso de tu cuenta.</p>
+
+            <div class="imagenes-comparacion">
+
+              <div class="imagen-item">
+                <img src="sabias-8.png" alt="Antes">
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem3_3']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem3_3')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem3_3'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              3.3 Reordenar el menú de aplicaciones
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem3_3']">
+            <p>
+              ¿Sabías que puedes personalizar el orden de los elementos del menú de aplicaciones?
+            </p>
+            <p>Dentro del menú <strong>aplicaciones</strong>, selecciona la opción <strong>reordenar</strong>. Esta funcionalidad te permitirá organizar
+              los elementos según tus preferencias o frecuencia de uso.</p>
+
+            <p>Una vez realizados los cambios, selecciona Guardar para conservar la nueva distribución. El sistema
+              almacenará la configuración para futuras sesiones.</p>
+
+            <div class="video-container">
+              <video controls>
+                <source src="videos/video3.webm" type="video/mp4">
+                Tu navegador no soporta la reproducción de video.
+              </video>
+            </div>
+
+          </div>
+        </div>
+
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 4-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item4']">
+      <div class="tree-header" (click)="toggleItem('item4')">
+        <span class="tree-icon">{{ expandedItems['item4'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">4. Gestión del calendario institucional</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item4']">
+        <p><strong>4.1 Consulta del calendario institucional</strong></p>
+        <p>¿Sabías que puedes consultar las actividades programadas en el calendario institucional desde SIGU?
+        </p>
+        <p>La plataforma dispone de un módulo denominado <strong>calendario institucional</strong>, accesible mediante el ícono de
+          calendario ubicado en la parte inferior derecha de la pantalla.</p>
+        <p>En esta sección podrás visualizar:</p>
+        <ul>
+          <li>Las actividades que se encuentran actualmente en ejecución.</li>
+          <li>Los eventos programados pendientes para el período correspondiente.</li>
+          <li>Información detallada de cada actividad institucional.</li>
+        </ul>
+        <p>Además, cuenta con una herramienta de búsqueda que permite localizar actividades específicas mediante
+          palabras clave, facilitando la consulta de información de forma rápida y eficiente.</p>
+        <div class="imagenes-comparacion">
+
+          <div class="imagen-item">
+            <img src="sabias-9.png" alt="Antes">
+          </div>
+
+        </div>
+      </div>
+
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 5-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item5']">
+      <div class="tree-header" (click)="toggleItem('item5')">
+        <span class="tree-icon">{{ expandedItems['item5'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">5. Gestión de procesos en tablas</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item5']">
+
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem5_1']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem5_1')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem5_1'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              5.1 Ocultar columnas
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem5_1']">
+            <p>
+              ¿Sabías que puedes personalizar la visualización de las tablas ocultando columnas que no necesites
+              consultar?
+            </p>
+            <p>Selecciona el ícono de configuración de columnas (representado por barras verticales) para desplegar el
+              listado de columnas disponibles.</p>
+
+            <p>Posteriormente, marca o desmarca las columnas que deseas mostrar u ocultar según tus necesidades.</p>
+            <p>Esta funcionalidad permite adaptar la información visualizada y mejorar la experiencia de consulta.</p>
+            <div class="video-container">
+              <video controls>
+                <source src="videos/video4.webm" type="video/mp4">
+                Tu navegador no soporta la reproducción de video.
+              </video>
+            </div>
+
+          </div>
+        </div>
+
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem5_2']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem5_2')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem5_2'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              5.2 Descargar información en excel
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem5_2']">
+            <p>
+              ¿Sabías que puedes exportar la información de una tabla a Microsoft Excel?
+            </p>
+            <p>Selecciona el botón <strong>descargar información</strong> para generar un archivo excel con los datos que se encuentran
+              visibles en la tabla.</p>
+
+            <p>Una vez completada la descarga, podrás localizar el archivo en la carpeta descargas de tu dispositivo y
+              abrirlo para consultar, analizar o procesar la información según tus necesidades.</p>
+
+            <div class="imagenes-comparacion">
+
+              <div class="imagen-item">
+                <img src="sabias-10.png" alt="Antes">
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+        <div class="sub-tree-item" [class.expanded-sub-item]="expandedSubItems['subitem5_3']">
+          <div class="sub-tree-header" (click)="toggleSubItem('subitem5_3')">
+            <span class="tree-icon">
+              {{ expandedSubItems['subitem5_3'] ? '▼' : '▶' }}
+            </span>
+            <span class="sub-tree-title">
+              5.3 Filtrar información
+            </span>
+          </div>
+          <div class="sub-tree-content" [class.expanded]="expandedSubItems['subitem5_3']">
+            <p>
+              ¿Sabías que puedes filtrar la información de una tabla para localizar registros específicos?
+            </p>
+            <p>Selecciona el botón <strong>filtrar</strong> para acceder a las opciones de búsqueda disponibles.</p>
+
+            <p>Los filtros permiten restringir los resultados según los valores de las columnas de la tabla, facilitando
+              la localización de información y optimizando los tiempos de consulta.</p>
+
+            <div class="imagenes-comparacion">
+
+              <div class="imagen-item">
+                <img src="sabias-11.png" alt="Antes">
+              </div>
+
+            </div>
+          </div>
+        </div>
+
+      </div>
+      <div class="line"></div>
+    </div>
+
+    <!-- Item 6-->
+    <div class="tree-item" [class.expanded-item]="expandedItems['item6']">
+      <div class="tree-header" (click)="toggleItem('item6')">
+        <span class="tree-icon">{{ expandedItems['item6'] ? '▼' : '▶' }}</span>
+        <span class="tree-title">6. Inicio de sesión</span>
+      </div>
+      <div class="tree-content" [class.expanded]="expandedItems['item6']">
+        <p><strong>6.1 Inicio de sesión con google</strong></p>
+        <p>¿Sabías que puedes acceder a SIGU utilizando google?</p>
+        <p>Para utilizar esta opción, el usuario debe contar previamente con una cuenta registrada en SIGU como oferente
+          o personal administrativo.</p>
+        <p>Asimismo, la cuenta de google debe pertenecer al dominio institucional @utn.ac.cr</p>
+        <div class="imagenes-comparacion">
+
+          <div class="imagen-item">
+            <img src="preguntasF-5.png" alt="Antes">
+          </div>
+
+        </div>
+      </div>
+
+      <div class="line"></div>
+    </div>
+  </div>
+
+</div>