145 lines
6.7 KiB
Markdown
145 lines
6.7 KiB
Markdown
# Frontend (Backend-Driven) Rendering am Beispiel Trustee
|
||
|
||
## Kurzfassung der Architektur
|
||
|
||
Das Frontend rendert Trustee-Inhalte auf **zwei Wegen**:
|
||
|
||
1. **Path-basiert (PageManager)** – z.B. Pfad `trustee/organisations` → PageManager lädt PageData → PageRenderer nutzt `tableConfig.hookFactory()` → Trustee-Hook (z.B. `useTrusteeOrganisations`) → Backend-APIs → FormGeneratorTable mit Spalten/Formularen aus Backend-Attributen.
|
||
|
||
2. **Feature-Instanz-Route** – URL `mandates/:mandateId/trustee/:instanceId/documents` → FeatureLayout → FeatureViewPage (view=documents) → TrusteeDocumentsView → gleiche Hooks und gleiche Backend-APIs → FormGeneratorTable/FormGeneratorForm.
|
||
|
||
Backend-seitig liefern die Trustee-Routes (Prefix `/api/trustee`) Attribute, CRUD und Options; die Pydantic-Modelle bestimmen die Felddefinitionen.
|
||
|
||
---
|
||
|
||
## Mermaid-Diagramm: Backend-Driven Rendering (Trustee)
|
||
|
||
```mermaid
|
||
flowchart TB
|
||
subgraph Router["Router (App.tsx)"]
|
||
RouteHome["/ → Home"]
|
||
RouteFeature["/mandates/:mandateId/:featureCode/:instanceId/*"]
|
||
end
|
||
|
||
subgraph PathBased["Path-basierter Pfad (z.B. trustee/organisations)"]
|
||
Home[Home]
|
||
SidebarProvider[SidebarProvider]
|
||
PageManager[PageManager]
|
||
Location[useLocation → path]
|
||
GetPageData[getPageDataByPath(path)]
|
||
PageData[trusteeOrganisationsPageData etc.]
|
||
PageRenderer[PageRenderer]
|
||
HookFactory[tableConfig.hookFactory]
|
||
CreateHook[createOrganisationsHook]
|
||
end
|
||
|
||
subgraph FeatureRoute["Feature-Instanz-Pfad"]
|
||
FeatureLayout[FeatureLayout]
|
||
Outlet[Outlet]
|
||
FeatureViewPage[FeatureViewPage view=documents|positions|...]
|
||
ViewRegistry[VIEW_COMPONENTS.trustee]
|
||
TrusteeView[TrusteeDocumentsView / TrusteePositionsView / ...]
|
||
end
|
||
|
||
subgraph Hooks["Trustee Hooks (useTrustee.ts)"]
|
||
UseTrusteeOrgs[useTrusteeOrganisations]
|
||
UseTrusteeDocs[useTrusteeDocuments]
|
||
UseTrusteePositions[useTrusteePositions]
|
||
UseInstanceId[useInstanceId aus URL]
|
||
end
|
||
|
||
subgraph BackendCalls["Backend-API-Aufrufe"]
|
||
AttrAPI["GET /api/trustee/instanceId/attributes/EntityType"]
|
||
ListAPI["GET /api/trustee/instanceId/organisations|documents|positions|..."]
|
||
CrudAPI["POST|PUT|DELETE /api/trustee/instanceId/..."]
|
||
OptionsAPI["GET /api/trustee/instanceId/organisations/options etc."]
|
||
end
|
||
|
||
subgraph Backend["Gateway (Backend)"]
|
||
RouteTrustee[routeFeatureTrustee]
|
||
AttrEndpoint["get_entity_attributes → getModelAttributeDefinitions"]
|
||
Interface[interfaceFeatureTrustee]
|
||
DB[(PostgreSQL poweron_trustee)]
|
||
end
|
||
|
||
subgraph UI["Generische UI-Komponenten"]
|
||
FormGeneratorTable[FormGeneratorTable]
|
||
FormGeneratorForm[FormGeneratorForm]
|
||
end
|
||
|
||
RouteHome --> Home
|
||
Home --> SidebarProvider
|
||
Home --> PageManager
|
||
PageManager --> Location
|
||
Location --> GetPageData
|
||
GetPageData --> PageData
|
||
PageData --> PageRenderer
|
||
PageRenderer --> HookFactory
|
||
HookFactory --> CreateHook
|
||
CreateHook --> UseTrusteeOrgs
|
||
|
||
RouteFeature --> FeatureLayout
|
||
FeatureLayout --> Outlet
|
||
Outlet --> FeatureViewPage
|
||
FeatureViewPage --> ViewRegistry
|
||
ViewRegistry --> TrusteeView
|
||
TrusteeView --> UseTrusteeDocs
|
||
TrusteeView --> UseTrusteePositions
|
||
|
||
UseTrusteeOrgs --> UseInstanceId
|
||
UseTrusteeDocs --> UseInstanceId
|
||
UseTrusteePositions --> UseInstanceId
|
||
UseInstanceId --> AttrAPI
|
||
UseInstanceId --> ListAPI
|
||
UseInstanceId --> CrudAPI
|
||
UseInstanceId --> OptionsAPI
|
||
|
||
AttrAPI --> RouteTrustee
|
||
ListAPI --> RouteTrustee
|
||
CrudAPI --> RouteTrustee
|
||
OptionsAPI --> RouteTrustee
|
||
RouteTrustee --> AttrEndpoint
|
||
RouteTrustee --> Interface
|
||
Interface --> DB
|
||
AttrEndpoint --> AttrAPI
|
||
|
||
UseTrusteeOrgs --> FormGeneratorTable
|
||
UseTrusteeDocs --> FormGeneratorTable
|
||
UseTrusteePositions --> FormGeneratorTable
|
||
FormGeneratorTable --> FormGeneratorForm
|
||
```
|
||
|
||
---
|
||
|
||
## Wichtige Datenflüsse (Backend-Driven)
|
||
|
||
| Was | Wo definiert / geladen | Verwendung im Frontend |
|
||
|-----|------------------------|-------------------------|
|
||
| **Spalten (Table)** | Backend: `GET .../attributes/{EntityType}` → `getModelAttributeDefinitions(PydanticModel)` | Hook setzt `attributes` → `attributesToColumns()` bzw. `hookData.columns` → FormGeneratorTable |
|
||
| **Formularfelder (Create/Edit)** | Entweder `formConfig.fields` in PageData (statisch) oder aus Hook: `generateCreateFieldsFromAttributes` / `generateEditFieldsFromAttributes` (Backend-Attribute) | PageRenderer / CreateButton → FormGeneratorForm(attributes=...) |
|
||
| **Dropdown-Optionen** | Backend: `GET .../organisations/options`, `.../contracts/options` etc. | `optionsReference: 'TrusteeOrganisation'` → useTrusteeOptions lädt Options → FormGeneratorForm |
|
||
| **CRUD** | Backend: POST/PUT/DELETE unter `/api/trustee/{instanceId}/{entity}` | Hook-Operationen (handleCreate, handleUpdate, handleDelete) → FormGeneratorTable Actions / Modals |
|
||
|
||
---
|
||
|
||
## Relevante Dateien
|
||
|
||
- **Frontend:** `src/core/PageManager/PageManager.tsx`, `src/core/PageManager/PageRenderer.tsx`, `src/core/PageManager/pageInterface.ts`, `src/core/PageManager/data/pages/trustee/organisations.ts`, `src/pages/FeatureView.tsx`, `src/pages/views/trustee/TrusteeDocumentsView.tsx`, `src/hooks/useTrustee.ts`, `src/api/trusteeApi.ts`.
|
||
- **Backend (Gateway):** `modules/features/trustee/routeFeatureTrustee.py` (Attributes, CRUD, Options), `modules/features/trustee/interfaceFeatureTrustee.py`, `modules/features/trustee/datamodelFeatureTrustee.py`.
|
||
|
||
---
|
||
|
||
## Prüfung: Chatbot gleiche Logik wie Trustee?
|
||
|
||
Der Chatbot wird im Frontend an **zwei Stellen** angebunden. Nur eine nutzt dieselbe backend-driven Logik wie Trustee.
|
||
|
||
| Kriterium | Trustee (path-basiert) | Chatbot Route `/chatbot` | Chatbot Path `start/chatbot` |
|
||
|-----------|------------------------|---------------------------|-------------------------------|
|
||
| PageData (GenericPageData) | Ja | Nein | Ja (chatbotPageData) |
|
||
| PageRenderer | Ja | Nein | Ja |
|
||
| hookFactory in Config | Ja (tableConfig.hookFactory) | Nein | Ja (inputFormConfig.hookFactory) |
|
||
| Hook ruft Backend-API auf | Ja | Nein (Platzhalter) | Ja (chatbotApi) |
|
||
| Generische UI | FormGeneratorTable/Form | Eigene UI (ChatbotPage) | Messages, InputForm, ChatHistory |
|
||
|
||
- **Route `/chatbot`** → rendert `ChatbotPage` (pages/migrate): eigenständige Komponente, kein PageManager/PageRenderer, simulierte Antwort (TODO: echte API). **Nicht** gleiche Logik wie Trustee.
|
||
- **Path `start/chatbot`** (PageManager/Sidebar) → `chatbotPageData` mit `createChatbotHook` → PageRenderer → useChatbot → echte APIs (`/api/chatbot/start/stream` etc.). **Gleiche** Logik wie Trustee (PageData + hookFactory + PageRenderer + Hook + Backend-API).
|