ew-sys

Internes Bestell- und Lagersystem auf Basis von Vue 3, TypeScript, PrimeVue und Vite.

Überblick

ew-sys ist das Frontend für ein internes Bestell-, Lager- und Benutzerverwaltungssystem. Die Anwendung stellt ein PrimeVue-basiertes UI mit Drawer-Navigation, Login-Flow, Theme-Umschaltung und zentraler API-Kommunikation bereit.

Der aktuelle Stand der Codebasis enthält bereits die Shell, Auth-Integration und mehrere Routen, wobei einige Fachseiten noch Platzhaltercharakter haben.

Aktueller Funktionsumfang

• Login-Seite mit Formularvalidierung und Weiterleitung auf / nach erfolgreicher Anmeldung
• Zentrale Auth-Verwaltung über src/composables/useApi.ts
• Speicherung von access_token, refresh_token und dem Legacy-Schlüssel token in localStorage
• Automatischer Refresh des Access-Tokens bei 401 Unauthorized
• Automatische Weiterleitung auf /login bei nicht wiederherstellbarer Session
• Automatische Weiterleitung auf /error bei Netzwerkfehlern zur API
• Drawer-Navigation mit rollenabhängigem Menüpunkt Benutzer
• Anzeige von Benutzername und Rolle im Drawer-Footer
• Dark-Mode mit PrimeVue-Theme und projektspezifischer Klasse .my-app-dark
• Dynamischer Logo-Wechsel abhängig vom gespeicherten Theme
• Statische Dashboard-Ansicht mit Beispiel-Daten für offene Bestellungen
• Routen für Material, Bestellungen, Benutzer, Impressum und Datenschutz

Architekturhinweise

API und Auth

Die gesamte API-Kommunikation läuft zentral über src/composables/useApi.ts.

Diese Schicht kapselt:

• Axios-Instanz mit gemeinsamer baseURL
• automatisches Setzen des Authorization-Headers
• zentrales Error-Mapping auf ApiError
• einmaliges Retry bei 401 nach Token-Refresh
• Redirect auf /login oder /error
• Login-, Logout- und Refresh-Logik

Wichtig für weitere Entwicklung:

• Für authentifizierte Requests sollte immer useApi() verwendet werden.
• Retry-fähige Request-Bodies sind aktuell auf string, URLSearchParams oder leer beschränkt.
• Die Session wird über access_token und refresh_token verwaltet; zusätzlich wird der Legacy-Key token synchron gehalten.

Theme

Der Dark-Mode hängt nicht an einer generischen dark-Klasse, sondern an .my-app-dark, konfiguriert in src/main.ts.

Die Umschaltung erfolgt in src/components/themeToggler.vue über:

• Schreiben von theme nach localStorage
• Umschalten der Klasse auf dem html-Element
• Dispatch des Custom-Events theme-changed

Mehrere Views reagieren explizit auf dieses Event und auf storage-Änderungen.

Routing

Die View-Komponenten liegen in diesem Projekt direkt unter src/router/ und nicht in einem separaten views/-Ordner.

Aktuell definierte Routen:

• /
• /login
• /material
• /material/artikel
• /material/hersteller
• /material/projekte
• /bestellung
• /bestellung/rueckfragen
• /user
• /error
• /impressum
• /datenschutz

Technologie-Stack

• Vue 3 mit Composition API und <script setup>
• TypeScript
• Vite
• PrimeVue mit eigenem Preset ew-sys
• PrimeIcons
• Tailwind CSS
• Vue Router
• Pinia
• Axios
• Vitest für Unit-Tests
• Playwright für E2E-Tests

Entwicklung

Voraussetzungen

• Node.js ^20.19.0 || >=22.12.0
• npm

Installation

npm install

Entwicklungsserver

npm run dev

Relevante Skripte

npm run dev
npm run build
npm run type-check
npm run lint
npm run format
npm run test:unit
npm run test:e2e

Hinweise:

• npm run build führt zuerst vue-tsc --build und danach den Vite-Build aus.
• npm run lint läuft mit --fix --cache und kann Dateien automatisch anpassen.
• npm run test:unit nutzt Vitest mit jsdom.
• npm run test:e2e nutzt Playwright.

Konfiguration

Für die API wird eine Vite-Umgebungsvariable verwendet:

• VITE_API_BASE_URL

Ohne passende Backend-URL funktionieren Login, Benutzerabfrage und Token-Refresh nicht.

Projektstruktur

src/
  App.vue
  main.ts
  assets/
  components/
    themeToggler.vue
  composables/
    useApi.ts
  presets/
  router/
    index.ts
    HomeView.vue
    LoginView.vue
    ...
  __tests__/

Bekannte Grenzen des aktuellen Stands

• Mehrere Fachseiten sind derzeit noch einfache Platzhalter ohne produktive Datenanbindung.
• Das Dashboard zeigt momentan statische Beispieldaten.
• Es gibt nur eine kleine Unit-Testbasis; kritische Flows sollten weiter ausgebaut werden.
• Bildpfade werden aktuell direkt über /public/... referenziert, passend zum bestehenden Projektmuster.

Lizenz

Dieses Projekt steht unter der GPLv3 Lizenz.