RelationshipMap

This project was generated using Angular CLI version 20.1.0.

Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

ng generate component component-name

For a complete list of available schematics (such as components, directives, or pipes), run:

Relationship Map — Mapa de relaciones entre documentos

Este paquete expone el componente CbmRelationshipMapComponent (standalone) que muestra, de forma visual y navegable, la relación entre documentos (nodos padre/hijo) según una colección y un evento.

Resumen rápido

• Selector: cbm-relationship-map
• Standalone: sí (usa ViewEncapsulation.ShadowDom)
• Subcomponentes incluidos: TabsComponent, TabItemComponent, RelationshipTreeByTabComponent, ParentTreeByTabComponent, y varios componentes de nodo.
• Tipos usados: CbmDocumentReferenceModel.RelationshipTreeResponse (desde la librería document-reference-repository).

Propósito y comportamiento

• Permite mostrar dos vistas mediante pestañas: "Relacionado a" (navegar relaciones descendentes) y "Relacionado de" (navegar relaciones ascendentes / padres).
• Emite el dato del nodo seleccionado mediante el output nodeData y la pestaña activa mediante tab.

API del componente

Inputs (requeridos):

• collectionOriginId: string — id de la colección origen que actúa como raíz del mapa.
• collectionOriginName: string — nombre de la colección origen.
• eventModuleOrigin: string — módulo/etiqueta de evento para filtrar relaciones.
• labelTypeTransaction: { [key: string]: string } — mapa de etiquetas para traducir tipos de transacción y mostrarlos en los nodos.

Outputs:

• nodeData: CbmDocumentReferenceModel.RelationshipTreeResponse — emite la información completa del nodo seleccionado (estructura definida por la librería de referencias de documento).
• tab: string — emite un identificador de la pestaña activa ('relationshipTreeToTab' o 'parentTreeToTab').

Estructura y subcomponentes

• TabsComponent y TabItemComponent — manejan la navegación por pestañas.
• RelationshipTreeByTabComponent — renderiza el árbol de relaciones descendentes para la colección origen.
• ParentTreeByTabComponent — renderiza el árbol de relaciones ascendentes (padres) para la colección origen.
• Componentes de nodo (map-node, map-node-parent, etc.) — encapsulan la UI y eventos de cada nodo del grafo.

Ejemplo de uso

<cbm-relationship-map
   [collectionOriginId]="'123'"
   [collectionOriginName]="'invoices'"
   [eventModuleOrigin]="'invoice'"
   [labelTypeTransaction]="{ INVOICE: 'Factura', CREDIT_NOTE: 'Nota de crédito' }"
   (nodeData)="onNodeSelected($event)"
   (tab)="onTabChange($event)"
></cbm-relationship-map>

Consideraciones técnicas

• El componente está diseñado como standalone y usa Shadow DOM. Si necesitas aplicar estilos globales sobre los nodos, considera exponer variables CSS o usar el atributo part en la plantilla para permitir theming desde el host.
• Los tipos emitidos en nodeData provienen de document-reference-repository — integra esa librería y consulta CbmDocumentReferenceModel para ver la forma exacta de la respuesta.
• Las operaciones de fetching y manipulación de datos se realizan en los subcomponentes RelationshipTreeByTabComponent y ParentTreeByTabComponent; el componente principal se encarga de la composición y emisión de eventos.

Tests y desarrollo

• Hay specs para tabs y componentes de nodo en projects/relationship-map/src/lib/components/....
• Para pruebas de integración, phoquea los repositorios o servicios que devuelven RelationshipTreeResponse y verifica que nodeData emita correctamente.

Sugerencias de mejora

• Añadir opciones para controlar el layout del grafo (espaciado, colapso de ramas, límites de profundidad).
• Exportar el grafo a imagen/SVG para permitir reportes o visualizaciones externas.

Archivos de referencia

• projects/relationship-map/src/lib/relationship-map.component.ts
• projects/relationship-map/src/lib/components/relationship-tree-by-tab

¿Quieres que genere un ejemplo runnable (demo) que muestre el componente con datos mock o que añada documentación más detallada de los tipos CbmDocumentReferenceModel.RelationshipTreeResponse?"