calServer v2 — Frontend-Architektur¶

Tech Stack¶

Komponente	Technologie	Zweck
Framework	Nuxt 4, Vue 3, TypeScript	Meta-Framework, SPA-Modus (`ssr: false`)
UI-Komponenten	PrimeVue 4	Menüs, Dialoge, Formulare, Tabellen
Datengrid	TableMaster (eigene Komponente auf PrimeVue DataTable)	Server-seitige Tabellen mit Filtern, Ansichten, Export
State	Pinia 3	Anmeldung, Übersetzungen, Barrierefreiheit, Benachrichtigungen
Styling	Tailwind CSS 3	Utility-first CSS
Diagramme	Chart.js 4	Dashboard-Widgets
Live-Updates	Pusher (optional)	Grids laden bei Änderungen neu
HTTP	`$fetch` (ofetch) über `useApi`	Kommunikation mit der API v2
Tests	Vitest, Playwright	Unit-Tests, End-to-End und Screenshots
Laufzeit	Node 22 (Container `node:22-alpine`)	Nitro-Server liefert die SPA aus

Projektstruktur¶

frontend-v2/
├── app.vue, error.vue        # Wurzel- und Fehlerseite
├── nuxt.config.ts            # Nuxt-Konfiguration
├── theme.ts                  # PrimeVue-Theme
├── components/               # Komponenten, nach Fachbereich in Unterordnern
│   └── table-master/         # TableMaster und seine Filter-, Spalten-, Exportdialoge
├── composables/              # useApi, useDataTable, useLoadState, useLiveUpdates, ...
├── layouts/                  # default (App), portal (Kundenportal), print
├── middleware/               # Anmeldung, Berechtigungen, Einrichtung, Brotkrumen
├── pages/                    # Routen, eine Datei bzw. ein Ordner je Bereich
├── plugins/                  # PrimeVue-Vorgaben, Barrierefreiheit, Tooltips
├── stores/                   # Pinia-Stores
├── utils/                    # Reine Hilfsfunktionen, eigenständig getestet
├── e2e/                      # Playwright-Tests
└── tests/                    # Vitest-Tests

Komponenten werden nur über den Dateinamen aufgelöst (pathPrefix: false), die Unterordner dienen der Ordnung.

TableMaster¶

TableMaster.vue ist das zentrale Datengrid aller Listen. Die Logik liegt im Composable useDataTable:

Dynamische Spalten aus der Feldkonfiguration der API
Server-seitig: Paginierung, Sortierung und Filter laufen über die API. Das Frontend schickt abstrakte Filter-Deskriptoren, keine SQL-Fragmente; die API übersetzt sie für MySQL, PostgreSQL oder SQL Server.
Gespeicherte Ansichten mit Spaltenauswahl, -breiten und Filtern, erweiterte Filter mit Gruppen und Bedingungen
Export als XLSX, PDF oder CSV aus dem Grid

Live-Updates¶

Ist ein Pusher-Schlüssel gesetzt, abonniert useLiveUpdates den Kanal calserver.<bereich> und lädt das Grid bei .resource.created, .resource.updated und .resource.deleted neu. Ohne Schlüssel bleibt die Funktion aus; die Oberfläche arbeitet dann ohne Echtzeit-Aktualisierung.

Entwicklung¶

cd frontend-v2

npm ci              # Abhängigkeiten installieren
npm run dev         # Dev-Server (Port 3000)
npm run lint        # ESLint
npm run typecheck   # TypeScript strict
npm run test        # Vitest
npm run build       # Produktions-Build

Umgebungsvariablen¶

Variable	Beschreibung	Beispiel
`NUXT_PUBLIC_API_BASE`	Basis-URL der API v2	`https://example.com/api/v2`
`NUXT_PUBLIC_APP_VERSION`	Ausgerollter Image-Tag, Rückfall für die Versionsanzeige am Login	`v5.64.802`
`NUXT_PUBLIC_PUSHER_KEY`	Pusher App Key (optional)	`abc123`
`NUXT_PUBLIC_PUSHER_CLUSTER`	Pusher Cluster	`eu`