Skip to main content

🧠 AlpuraModalViewModel – Guía de uso

El servicio AlpuraModalViewModel proporciona una interfaz programática para desplegar modales estandarizados (AlpuraModalComponent) y modales personalizados con inyección dinámica de componentes. Encapsula la configuración de Angular Material Dialog para asegurar la consistencia visual y de comportamiento en toda la aplicación.

📁 Importación​

import { 
  AlpuraModalViewModel, 
  IAlpuraModalData, 
  IAlpuraCustomModalData, 
  ALPURA_CUSTOM_MODAL_DATA 
} from '@alpura/commons';

📞 Métodos Públicos​

1. showModal(data: IAlpuraModalData)​

Despliega un modal estandarizado con la configuración proporcionada (para alertas de confirmación, advertencia, éxito o error).

  • Parámetros:
    • data: Objeto de tipo IAlpuraModalData que define el título, mensaje, tipo y etiquetas de los botones.
  • Retorno:
    • MatDialogRef<AlpuraModalComponent, boolean>: Referencia del diálogo abierto que permite suscribirse al evento .afterClosed().

2. showModalCustom<R = any, D = any>(config: IAlpuraCustomModalData<D>)​

Despliega un modal personalizado inyectando dinámicamente cualquier componente de Angular dentro del cuerpo del modal.

  • Características:
    • Barra Superior Fija: La línea de estado superior permanece siempre visible con el color del tipo elegido.
    • Botones Opcionales (0, 1 o 2 botones): confirmText y cancelText son parametrizables. Si no se especifican, la barra inferior de botones no se renderiza.
    • Integración con Formularios: Al hacer clic en el botón primario de confirmación, el modal evalúa automáticamente si el componente inyectado implementa onSubmit(), submit() o posee un formGroup para validar y enviar los datos antes de cerrar el modal.
  • Parámetros:
    • config: Objeto de tipo IAlpuraCustomModalData<D> que define el componente a renderizar, datos de inyección, título y configuración de botones.
  • Retorno:
    • MatDialogRef<AlpuraModalComponent, R>: Referencia del diálogo que emite la respuesta enviada por el componente inyectado.

🧪 Estructuras de Datos​

export interface IAlpuraModalData {
  title: string;
  boldTitle?: boolean;
  message: string;
  type: 'success' | 'error' | 'warning' | 'info';
  confirmText?: string;
  cancelText?: string;
}
export interface IAlpuraCustomModalData<D = any> {
  title?: string;
  boldTitle?: boolean;
  type?: 'success' | 'error' | 'warning' | 'info' | 'primary';
  confirmText?: string;
  cancelText?: string;
  component: Type<any>;
  componentData?: D;
  width?: string;
  disableClose?: boolean;
}

💻 Ejemplos de uso​

Ejemplo 1: Modal Estándar (Confirmación)​

this.alpuraModalViewModel.showModal({
  title: 'Atención',
  message: 'IMPORTANTE: Esta acción no se puede deshacer.',
  type: 'warning',
  confirmText: 'Aceptar',
  cancelText: 'Cancelar'
}).afterClosed().subscribe(result => {
  if (result) {
    // Lógica al confirmar
  }
});

Ejemplo 2: Modal Custom con Inyección de Componente y Datos​

mi-formulario-modal.component.ts (Componente inyectado)​

import { Component, inject } from '@angular/core';
import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
import { ALPURA_CUSTOM_MODAL_DATA } from '@alpura/commons';

@Component({
  selector: 'app-mi-formulario-modal',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <form [formGroup]="form">
      <label>Motivo de edición para registro #{{ modalData?.id }}:</label>
      <textarea formControlName="motivo" class="form-control"></textarea>
    </form>
  `
})
export class MiFormularioModalComponent {
  // Recibir datos inyectados
  public modalData = inject<{ id: number }>(ALPURA_CUSTOM_MODAL_DATA, { optional: true });
  private fb = inject(FormBuilder);

  public form: FormGroup = this.fb.group({
    motivo: ['', Validators.required]
  });

  // Se ejecuta automáticamente al dar clic en el botón confirmText del modal
  onSubmit() {
    if (this.form.valid) {
      return this.form.value; // Retorna los datos que recibirá el .afterClosed()
    }
    this.form.markAllAsTouched();
    return false; // Evita el cierre del modal si es inválido
  }
}

Invocación desde tu vista/servicio:​

this.alpuraModalViewModel.showModalCustom({
  title: 'Editar Registro',
  type: 'primary',
  confirmText: 'Guardar Cambios',
  cancelText: 'Cancelar',
  component: MiFormularioModalComponent,
  componentData: { id: 1045 },
  width: '500px'
}).afterClosed().subscribe((resData) => {
  if (resData) {
    console.log('Datos guardados desde el modal custom:', resData);
  }
});

📬 Soporte​

Para dudas o mantenimiento del servicio AlpuraModalViewModel, contactar al equipo de arquitectura.