Frontend (Backend-Driven) Rendering am Beispiel Trustee

Kurzfassung der Architektur

Das Frontend rendert Trustee-Inhalte auf zwei Wegen:

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.
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)

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).

6.7 KiB Raw Blame History Unescape Escape