🔄 AlpuraToggleRefreshDirective – Guía de uso

La directiva AlpuraToggleRefreshDirective es una herramienta potente y reutilizable que añade una funcionalidad de auto-actualización a cualquier componente o contenedor HTML. Al aplicarla, se inyecta un menú en la esquina superior derecha que permite al usuario final configurar intervalos de refresco, activar/desactivar la actualización automática y disparar una actualización manual.

---

📁 Importaciones necesarias

AlpuraToggleRefreshDirective es una directiva standalone. Para utilizarla, impórtala y añádela al arreglo imports de tu componente.

// En tu componente.ts
import { AlpuraToggleRefreshDirective } from '@alpura/commons'

@Component({
  selector: 'app-mi-vista-de-datos',
  standalone: true,
  imports: [
    // ... otros imports
    AlpuraToggleRefreshDirective
  ],
  templateUrl: './mi-vista-de-datos.html',
})
export class MiVistaDeDatosComponent { /* ... */ }

---

🚀 Uso Básico

Aplica la directiva a cualquier elemento contenedor y escucha el refreshEvent para ejecutar tu lógica de actualización de datos.

<!-- Aplica la directiva a un contenedor de datos -->
<div class="mi-grafica-container"
     appAlpuraToggleRefresh
     (refreshEvent)="cargarNuevosDatos()">

  <!-- Contenido que se debe actualizar, como una gráfica o una tabla -->

</div>

---

🧠 Inputs

Nombre	Tipo	Descripción
intervals	number[]	Un arreglo de números que representa los intervalos de tiempo en segundos disponibles en el menú. Default: [5, 30, 60, 180, 300].
autoRefreshEnabled	boolean	Si es true, el auto-refresh se activará automáticamente con el primer intervalo disponible al cargar el componente. Default: false.

---

📤 Outputs

Nombre	Tipo	Descripción
refreshEvent	EventEmitter<void>	Se emite cada vez que se debe realizar una actualización, ya sea por el temporizador automático o por una acción manual ("Actualizar ahora").

---

🧩 Ejemplo de Integración Completa

Este ejemplo muestra cómo un componente de "Dashboard" puede usar la directiva en diferentes contenedores, uno para una gráfica y otro para una tabla, con distintas configuraciones.

dashboard.component.ts

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AlpuraToggleRefreshDirective } from '@alpura/commons';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [CommonModule, AlpuraToggleRefreshDirective],
  templateUrl: './dashboard.component.html',
})
export class DashboardComponent {

  actualizarGraficas() {
    console.log('Recibido evento de refresh. ¡Llamando a la API para obtener nuevos datos de gráficas!');
    // Aquí iría la lógica para volver a cargar los datos de las gráficas.
  }

  actualizarTabla() {
    console.log('Recibido evento de refresh en la tabla. ¡Actualizando la lista de productos!');
    // Lógica específica para la tabla.
  }
}

dashboard.component.html

<h2>Dashboard de Ventas</h2>

<!-- Ejemplo 1: Contenedor de gráfica con auto-refresh deshabilitado por defecto -->
<div class="card mb-4">
  <div class="card-header">Ventas por Región</div>
  <div class="card-body"
       appAlpuraToggleRefresh
       (refreshEvent)="actualizarGraficas()">
    <p>Aquí va la gráfica de ventas...</p>
  </div>
</div>

<!-- Ejemplo 2: Tabla de productos con auto-refresh habilitado por defecto y intervalos personalizados -->
<div class="card">
  <div class="card-header">Últimos Productos</div>
  <div class="card-body"
       appAlpuraToggleRefresh
       [autoRefreshEnabled]="true"
       [intervals]="[10, 20, 30]"
       (refreshEvent)="actualizarTabla()">
    <p>Aquí va la tabla de productos...</p>
  </div>
</div>

---

📬 Soporte

Para dudas o mantenimiento de la directiva AlpuraToggleRefreshDirective, contactar al equipo de arquitectura.