64 lines
3.0 KiB
Markdown
64 lines
3.0 KiB
Markdown
|
# sap-intercompany-viewer
|
||
|
|
|
||
|
|
Frontend (Angular 22, standalone components + signals, Angular Material)
|
||
|
|
para [`sap-intercompany-api`](../sap-intercompany-api) — reemplaza a
|
||
|
|
`sap-webhook-viewer` (retirado del repo) consolidando en un solo visor
|
||
|
|
todo lo relacionado a la replicación entre bases SAP: log de eventos,
|
||
|
|
bases de datos, y escenarios.
|
||
|
|
|
||
|
|
## Pantallas
|
||
|
|
|
||
|
|
- **`/log`** (default) — eventos recibidos (`webhook_events`) con filtros
|
||
|
|
por fecha, business object, escenario y estado. Cada fila es
|
||
|
|
expandible: muestra los `replication_attempts` (escenario, origen →
|
||
|
|
destino, verbo, HTTP status, error, result key). Botón **Reprocesar**
|
||
|
|
con confirmación explícita (avisa que reintenta TODOS los escenarios y
|
||
|
|
destinos aplicables, no solo el que falló).
|
||
|
|
- **`/databases`** — listado + alta/edición (diálogo) + activar/desactivar
|
||
|
|
de bases SAP. El `password` nunca se muestra (la API tampoco lo
|
||
|
|
devuelve); al editar, dejarlo vacío significa "no cambiarlo".
|
||
|
|
- **`/scenarios`** — listado de escenarios (como `scenario:list` del CLI
|
||
|
|
del worker).
|
||
|
|
- **`/scenarios/new`** — alta de escenario (todos los campos de
|
||
|
|
`scenario:add`, incluido modo `payload` con `routingField`). Al crear,
|
||
|
|
la API escribe el scaffold del `.ts` y esta pantalla redirige al
|
||
|
|
detalle mostrando dónde completar `filter`/`transform`.
|
||
|
|
- **`/scenarios/:code`** — detalle: configuración, destinos (agregar/
|
||
|
|
quitar), código fuente de `filter`/`transform` en solo lectura, y
|
||
|
|
mapeos de valor (listado + alta).
|
||
|
|
|
||
|
|
## Qué NO hace (deliberado, v1)
|
||
|
|
|
||
|
|
- **No edita el `.ts` de un escenario.** Se muestra en solo lectura; la
|
||
|
|
edición de `filter`/`transform` es siempre en el editor del usuario
|
||
|
|
(VSCode) — decisión explícita, ver `CLAUDE.md` en la raíz del repo.
|
||
|
|
- **No resalta sintaxis** en el código fuente mostrado (bloque monoespaciado
|
||
|
|
simple) — para no sumar una dependencia extra en esta v1; se puede
|
||
|
|
agregar Prism/highlight.js más adelante si hace falta.
|
||
|
|
- **No tiene un formulario de edición completo para un escenario
|
||
|
|
existente** — solo activar/desactivar. Editar el resto de los campos
|
||
|
|
(`PATCH /scenarios/:code`, ya expuesto por la API) queda para una
|
||
|
|
iteración futura si se necesita.
|
||
|
|
|
||
|
|
## Quick start
|
||
|
|
|
||
|
|
```bash
|
||
|
|
npm install
|
||
|
|
ng serve # http://localhost:4200 — requiere sap-intercompany-api corriendo en :3001
|
||
|
|
```
|
||
|
|
|
||
|
|
La URL base de la API está fija en `src/app/core/api.ts`
|
||
|
|
(`http://localhost:3001`) — simplificación deliberada para esta v1 (Angular
|
||
|
|
CLI ya no genera `environments/` por default); si hace falta apuntar a otro
|
||
|
|
host, cambiar esa constante.
|
||
|
|
|
||
|
|
## Stack
|
||
|
|
|
||
|
|
- Angular 22, standalone components (sin NgModules), signals para estado
|
||
|
|
local de componente.
|
||
|
|
- Angular Material 3 (tema `azure-blue`). Sin `@angular/animations`: es un
|
||
|
|
paquete deprecado en esta versión de Angular (reemplazado por
|
||
|
|
`animate.enter`/`animate.leave` nativos), y Material 3 no lo necesita
|
||
|
|
para su UI base.
|
||
|
|
- `HttpClient` con un wrapper mínimo (`core/api.ts`) — sin librerías de
|
||
|
|
manejo de estado (NgRx, etc.), no hace falta para esta escala.
|