guards-repository

Documentación en español para la librería guards-repository.

Resumen

Esta librería expone un guard reutilizable para detectar formularios "sucios" y preguntar al usuario si desea salir sin guardar los cambios. Es útil para proteger rutas cuando el usuario puede perder cambios no guardados.

Guard principal

• Nombre del guard exportado: cbmFormDirtyGuard
• Firma: CanDeactivateFn<CanFormDirty>

Contrato esperado por el componente

El guard espera que el componente objetivo implemente la interfaz CanFormDirty:

export interface CanFormDirty {
   modalConfirm: Signal<CbmModalConfirmComponent>;
   formDirty: () => boolean;
   disableGuard: boolean;
}

Explicación de la lógica

• Si el componente está ausente, permite la navegación.
• Si la URL incluye el queryParam cancel-guard y contiene cbmFormDirtyGuard, el guard se omite.
• Valida que el componente implemente el contrato CanFormDirty. Si no lo implementa, registra un error en consola y bloquea la salida.
• Si disableGuard es true, permite la navegación.
• Si formDirty() devuelve false (no hay cambios), permite la navegación.
• Si el formulario está "sucio", muestra un modal de confirmación usando component.modalConfirm().onConfirm(...) y devuelve la respuesta del usuario (true/false). En caso de error al mostrar el modal, se bloquea la navegación.

Uso e integración

1. Registrar el guard en tus rutas:

import { Routes } from '@angular/router';
import { cbmFormDirtyGuard } from 'guards-repository';

const routes: Routes = [
   {
      path: 'mi-form',
      component: MiFormComponent,
      canDeactivate: [cbmFormDirtyGuard],
   }
];

2. Implementar el contrato en el componente protegido:

import { Signal } from '@angular/core';
import { CbmModalConfirmComponent } from '@cbm-common/modal-confirm';

export class MiFormComponent implements CanFormDirty {
   modalConfirm: Signal<CbmModalConfirmComponent> = /* inyectar o obtener el signal del modal */ null as any;
   disableGuard = false;

   formDirty(): boolean {
      // lógica para determinar si el formulario tiene cambios
      return this.form.dirty;
   }

   // ejemplo de función para abrir modal (depende de cómo tu app provee el modal)
   modalConfirm() {
      // devolver el Signal<CbmModalConfirmComponent>
   }
}

Notas y consideraciones

• El guard usa CbmModalConfirmComponent para mostrar la confirmación. Asegúrate de tener disponible ese componente y su API onConfirm en tu app.
• El guard registra errores en consola si el componente no implementa la interfaz requerida; esto ayuda a detectar implementaciones incompletas durante el desarrollo.
• Si deseas saltarte el guard desde una navegación concreta, añade el query param ?cancel-guard=cbmFormDirtyGuard a la URL destino.

Comandos útiles

• Compilar la librería:

ng build guards-repository

Archivo generado/actualizado por mantenimiento del monorepo.