GeorgeandClaude Sonnet 5
cf793c88f2
Frontend Angular 22 (standalone, signals, Material 3) para sap-intercompany-api. Pantallas: log de eventos/intentos, CRUD de databases, listado/alta/detalle de scenarios. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
65 lines
3.0 KiB
Markdown
65 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.
|