docs(frontend): add navigation and flow diagrams for wizard steps
Desktop CI — Headless Tests & Build / Compose Desktop — Tests (headless) & Build (push) Has been cancelled
Desktop CI — Headless Tests & Build / Compose Desktop — Tests (headless) & Build (push) Has been cancelled
- Created `Navigation_Wizard_Flows.drawio` to map the Navigation Rail and 3-step wizard process (Veranstaltung → Turnier → Bewerbe) with detailed routes and guards. - Introduced `_mapping_alt-zu-neu.md` to document screenshot renaming and restructuring for enhanced organization. - Refined folder layout in `docs/06_Frontend/Screenshots/` for flows and components.
This commit is contained in:
@@ -0,0 +1,48 @@
|
||||
<mxfile host="app.diagrams.net" modified="2026-04-09T14:17:00.000Z" agent="JetBrains-Junie" version="22.0.0" type="device">
|
||||
<diagram id="module-map" name="Frontend Module Map">
|
||||
<mxGraphModel dx="1024" dy="768" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1080" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0"/>
|
||||
<mxCell id="1" parent="0"/>
|
||||
|
||||
<!-- Core Group -->
|
||||
<mxCell id="core" value="Core" style="swimlane;whiteSpace=wrap;horizontal=1;rounded=1;fillColor=#dae8fc;strokeColor=#6c8ebf;" vertex="1" parent="1">
|
||||
<mxGeometry x="40" y="60" width="520" height="360" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="core_items" value="design-system\nnavigation\nnetwork\nlocal-db\nsync\ndomain\nauth" style="text;whiteSpace=wrap;align=left;verticalAlign=top;spacing=12;" vertex="1" parent="core">
|
||||
<mxGeometry x="20" y="30" width="480" height="300" as="geometry"/>
|
||||
</mxCell>
|
||||
|
||||
<!-- Features Group -->
|
||||
<mxCell id="features" value="Features" style="swimlane;whiteSpace=wrap;horizontal=1;rounded=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
|
||||
<mxGeometry x="600" y="60" width="520" height="360" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="features_items" value="veranstalter\nveranstaltung\nturnier\nbewerbe (Planned)\nreiter\npferde\nverein\nprofile\nbilling\nping\nzns-import\nnennung" style="text;WhiteSpace=wrap;align=left;verticalAlign=top;spacing=12;" vertex="1" parent="features">
|
||||
<mxGeometry x="20" y="30" width="480" height="300" as="geometry"/>
|
||||
</mxCell>
|
||||
|
||||
<!-- Shells Group -->
|
||||
<mxCell id="shells" value="Shells" style="swimlane;whiteSpace=wrap;horizontal=1;rounded=1;fillColor=#fff2cc;strokeColor=#d6b656;" vertex="1" parent="1">
|
||||
<mxGeometry x="1160" y="60" width="320" height="140" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="shells_items" value="meldestelle-desktop" style="text;whiteSpace=wrap;align=left;verticalAlign=top;spacing=12;" vertex="1" parent="shells">
|
||||
<mxGeometry x="20" y="30" width="280" height="80" as="geometry"/>
|
||||
</mxCell>
|
||||
|
||||
<!-- Allowed dependency arrows -->
|
||||
<mxCell id="arrow_core_to_features" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#82b366;" edge="1" parent="1" source="features" target="core">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
<mxCell id="arrow_features_to_shells" style="edgeStyle=orthogonalEdgeStyle;rounded=0;orthogonalLoop=1;jettySize=auto;html=1;endArrow=block;endFill=1;strokeColor=#82b366;" edge="1" parent="1" source="shells" target="features">
|
||||
<mxGeometry relative="1" as="geometry"/>
|
||||
</mxCell>
|
||||
|
||||
<!-- Legend note for layer rules -->
|
||||
<mxCell id="legend_layer_rules" value="Layer-Regel je Feature:\nUI → Presentation → Domain → Data\nUI ↛ Data/Network (verboten)" style="shape=note;whiteSpace=wrap;rounded=1;fillColor=#ffffff;strokeColor=#999999;shadow=0;" vertex="1" parent="1">
|
||||
<mxGeometry x="1160" y="220" width="320" height="120" as="geometry"/>
|
||||
</mxCell>
|
||||
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
@@ -0,0 +1,102 @@
|
||||
<mxfile host="drawio-plugin" modified="2026-04-09T13:51:54.217Z" agent="Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36" version="22.1.22" etag="4lQgjjukI8eItFb7kbFH" type="embed">
|
||||
<diagram id="nav-wizard" name="Navigation & Wizard Flows">
|
||||
<mxGraphModel dx="952" dy="584" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="1920" pageHeight="1080" math="0" shadow="0">
|
||||
<root>
|
||||
<mxCell id="0" />
|
||||
<mxCell id="1" parent="0" />
|
||||
<mxCell id="navrail" value="NavRail" style="swimlane;whiteSpace=wrap;horizontal=1;rounded=1;fillColor=#fff2cc;strokeColor=#d6b656;" parent="1" vertex="1">
|
||||
<mxGeometry x="40" y="40" width="220" height="400" as="geometry">
|
||||
<mxRectangle x="40" y="40" width="80" height="30" as="alternateBounds" />
|
||||
</mxGeometry>
|
||||
</mxCell>
|
||||
<mxCell id="nav_items" value="Veranstaltungen\nReiter\nPferde\nFunktionäre\nMeisterschaften\nCups\nStammdaten-Import" style="text;whiteSpace=wrap;align=left;verticalAlign=top;spacing=12;" parent="navrail" vertex="1">
|
||||
<mxGeometry x="16" y="28" width="188" height="350" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="screen_veranstaltungen" value="📅 Veranstaltungen\n/veranstaltungen" style="rounded=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
|
||||
<mxGeometry x="320" y="60" width="240" height="80" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="screen_veranstalter_auswahl" value="🏢 Veranstalter Auswahl\n/veranstalter/auswahl" style="rounded=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
|
||||
<mxGeometry x="320" y="180" width="240" height="80" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="screen_veranstaltung_uebersicht" value="📋 Veranstaltung Übersicht\n/veranstalter/{verId}/veranstaltung/{vId}" style="rounded=1;whiteSpace=wrap;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
|
||||
<mxGeometry x="320" y="300" width="300" height="80" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="screen_turnier_neu" value="➕ Turnier Neu\n/veranstaltung/{vId}/turnier/neu" style="rounded=1;whiteSpace=wrap;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="1" vertex="1">
|
||||
<mxGeometry x="680" y="300" width="260" height="80" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="screen_turnier_detail" value="🏟️ Turnier Detail\n/veranstaltung/{vId}/turnier/{tId}" style="rounded=1;whiteSpace=wrap;fillColor=#ffe6cc;strokeColor=#d79b00;" parent="1" vertex="1">
|
||||
<mxGeometry x="680" y="420" width="260" height="80" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="screen_veranstalter_detail" value="🏢 Veranstalter Detail\n/veranstalter/{id}" style="rounded=1;whiteSpace=wrap;fillColor=#e1d5e7;strokeColor=#9673a6;" parent="1" vertex="1">
|
||||
<mxGeometry x="580" y="180" width="260" height="80" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="screen_veranstaltung_detail" value="📄 Veranstaltung Detail\n/veranstaltung/{id}" style="rounded=1;whiteSpace=wrap;fillColor=#d5e8d4;strokeColor=#82b366;" parent="1" vertex="1">
|
||||
<mxGeometry x="320" y="420" width="300" height="80" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="screen_veranstaltung_neu" value="➕ Neue Veranstaltung\n/veranstaltung/neu" style="rounded=1;whiteSpace=wrap;fillColor=#dae8fc;strokeColor=#6c8ebf;" parent="1" vertex="1">
|
||||
<mxGeometry x="320" y="200" width="260" height="80" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="login" value="🔐 Login\n/auth/login" style="rounded=1;whiteSpace=wrap;fillColor=#eeeeee;strokeColor=#cccccc;opacity=60;" parent="1" vertex="1">
|
||||
<mxGeometry x="40" y="470" width="220" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="auth_guard" value="🛡️ Auth Guard\n(nicht eingeloggt?)" style="rounded=1;whiteSpace=wrap;fillColor=#f5f5f5;strokeColor=#cccccc;opacity=60;" parent="1" vertex="1">
|
||||
<mxGeometry x="40" y="540" width="220" height="60" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="wizard" value="Wizard: Veranstaltung → Turnier → Bewerbe" style="swimlane;whiteSpace=wrap;horizontal=1;rounded=1;fillColor=#f8cecc;strokeColor=#b85450;" parent="1" vertex="1">
|
||||
<mxGeometry x="320" y="520" width="620" height="200" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="step1" value="Step 1: Veranstaltung (valid: basisdaten, infrastruktur, preisliste)" style="rounded=1;whiteSpace=wrap;fillColor=#fff;strokeColor=#b85450;" parent="wizard" vertex="1">
|
||||
<mxGeometry x="20" y="36" width="560" height="40" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="step2" value="Step 2: Turnier (valid: oepsNr, regelwerk, teilnehmerkreis, funktionen, import optional)" style="rounded=1;whiteSpace=wrap;fillColor=#fff;strokeColor=#b85450;" parent="wizard" vertex="1">
|
||||
<mxGeometry x="20" y="86" width="560" height="40" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="step3" value="Step 3: Bewerbe (valid: identifikation, ort & zeit, funktionäre, finanzen, teilungsregel)" style="rounded=1;whiteSpace=wrap;fillColor=#fff;strokeColor=#b85450;" parent="wizard" vertex="1">
|
||||
<mxGeometry x="20" y="136" width="560" height="40" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="wizard_guards" value="Guards:\nStep1 → Step2: state.isValid && vId != null\nStep2 → Step3: state.isValid && tId != null" style="shape=note;whiteSpace=wrap;rounded=1;fillColor=#ffffff;strokeColor=#999999;shadow=0;" parent="wizard" vertex="1">
|
||||
<mxGeometry x="20" y="156" width="560" height="40" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e1" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="navrail" target="screen_veranstaltungen" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e2" value="+ Neue Veranstaltung" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="screen_veranstaltungen" target="screen_veranstalter_auswahl" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e2b" value="Veranstaltung öffnen (id)" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="screen_veranstaltungen" target="screen_veranstaltung_detail" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e2c" value="Zurück" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;dashed=1;" parent="1" source="screen_veranstalter_auswahl" target="screen_veranstaltungen" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e3a" value="Weiter (veranstalterId)" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="screen_veranstalter_auswahl" target="screen_veranstalter_detail" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e3b" value="Zurück" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;dashed=1;" parent="1" source="screen_veranstalter_detail" target="screen_veranstalter_auswahl" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e3c" value="Veranstaltung öffnen (vId)" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="screen_veranstalter_detail" target="screen_veranstaltung_uebersicht" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e4" value="+ Neues Turnier" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="screen_veranstaltung_uebersicht" target="screen_turnier_neu" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e5" value="Turnier öffnen (tId)" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="screen_veranstaltung_uebersicht" target="screen_turnier_detail" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e6" value="Zurück" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;dashed=1;" parent="1" source="screen_veranstaltung_uebersicht" target="screen_veranstalter_detail" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e7" value="Zurück" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;dashed=1;" parent="1" source="screen_turnier_neu" target="screen_veranstaltung_detail" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e8" value="+ Neues Turnier" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="screen_veranstaltung_detail" target="screen_turnier_neu" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
<mxCell id="e9" value="Turnier öffnen (tId)" style="edgeStyle=orthogonalEdgeStyle;endArrow=block;endFill=1;" parent="1" source="screen_veranstaltung_detail" target="screen_turnier_detail" edge="1">
|
||||
<mxGeometry relative="1" as="geometry" />
|
||||
</mxCell>
|
||||
</root>
|
||||
</mxGraphModel>
|
||||
</diagram>
|
||||
</mxfile>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
type: Inventory
|
||||
status: DRAFT
|
||||
owner: Frontend Expert
|
||||
last_update: 2026-04-09
|
||||
---
|
||||
|
||||
# Inventar — Frontend Katalog (Compose KMP)
|
||||
|
||||
Ziel: Überblick über alle Frontend-Features, Screens, Navigation und den UDF‑State. Dieses Dokument dient als Einstieg für Refactoring und Implementierung.
|
||||
|
||||
Hinweis: Namenskonventionen für Screenshots siehe `docs/06_Frontend/Screenshots/_mapping_alt-zu-neu.md` sowie die Guidelines in `docs/06_Frontend`.
|
||||
|
||||
---
|
||||
|
||||
## 1. Übersicht Module (aus settings.gradle.kts)
|
||||
|
||||
- Core: `auth`, `domain`, `design-system`, `navigation`, `network`, `local-db`, `sync`
|
||||
- Features: `ping`, `nennung`, `zns-import`, `veranstalter`, `veranstaltung`, `profile`, `reiter`, `pferde`, `verein`, `turnier`, `billing`
|
||||
- Shells: `meldestelle-desktop`
|
||||
|
||||
---
|
||||
|
||||
## 2. Feature-Katalog (Arbeitsversion)
|
||||
|
||||
Struktur je Feature:
|
||||
|
||||
| Feature | Entry Route | Screens (Name → Route) | UDF State/Intents (kurz) | Referenzen (Figma/Screenshots) | Status | Offene Punkte |
|
||||
|--------:|-------------|------------------------|---------------------------|-------------------------------|--------|---------------|
|
||||
| veranstaltungen | `/veranstaltungen` | `Übersicht` → `/veranstaltungen` | `filter`, `select`, `openDetail` | `[FIGMA]`, `…/Screens/veranstaltungen_*` | MVP | — |
|
||||
| veranstalter | `/veranstalter/auswahl` | `Auswahl` → `/veranstalter/auswahl`, `Detail` → `/veranstalter/{id}` | `select`, `confirm` | `[FIGMA]`, `…/Screens/veranstalter_*` | PoC | — |
|
||||
| veranstaltung | `/veranstaltung/{id}` | `Detail` → `/veranstaltung/{id}`, `Übersicht` → `/veranstalter/{verId}/veranstaltung/{vId}` | `editField`, `save` | `[FIGMA]`, `…/Screens/veranstaltung_*` | PoC | — |
|
||||
| turnier | `/veranstaltung/{vId}/turnier/{tId}` | `Detail`, `Neu` | `editField`, `validate`, `save`, `navigateNext` | `[FIGMA]`, `…/Screens/turnier_*` | PoC | Wizard‑Step 2 |
|
||||
| bewerbe | `/bewerbe/...` | `Liste`, `Detail` | `editField`, `validate`, `assign` | `[FIGMA]`, `…/Screens/bewerbe_*` | Plan | Wizard‑Step 3 |
|
||||
| zns-import | `/stammdaten/import` | `Import` | `selectZip`, `startImport`, `pollStatus` | `[FIGMA]`, `…/Screens/import_*` | MVP | Polling |
|
||||
| reiter | `/reiter` | `Liste` | `filter`, `select` | `[FIGMA]`, `…/Screens/reiter_*` | Plan | — |
|
||||
| pferde | `/pferde` | `Liste` | `filter`, `select` | `[FIGMA]`, `…/Screens/pferde_*` | Plan | — |
|
||||
| verein | `/verein` | `Liste` | `filter`, `select` | `[FIGMA]`, `…/Screens/verein_*` | Plan | — |
|
||||
| profile | `/profile` | `Profil` | `edit`, `save` | `[FIGMA]`, `…/Screens/profile_*` | Plan | — |
|
||||
| billing | `/billing` | `Übersicht` | `navigate`, `export` | `[FIGMA]`, `…/Screens/billing_*` | Plan | — |
|
||||
|
||||
Legende Status: Plan, PoC, MVP, Stabil.
|
||||
|
||||
---
|
||||
|
||||
## 3. UDF Konvention (kurz)
|
||||
|
||||
- `State`: immutable, alle UI‑relevanten Felder + abgeleitete Flags (`isValid`, `isLoading`, …)
|
||||
- `Action`/`Intent`: alle Nutzer‑Interaktionen und externe Ereignisse
|
||||
- `Reducer(state, action) -> state'`: reine Funktion; Seiteneffekte in UseCases/Interactor
|
||||
- `Effect` (optional): One‑Shot‑Ereignisse (Navigation, Toast, Dialog)
|
||||
|
||||
---
|
||||
|
||||
## 4. Navigation (high‑level)
|
||||
|
||||
- NavRail: Veranstaltungen, Reiter, Pferde, Funktionäre, Meisterschaften, Cups, Stammdaten‑Import
|
||||
- Wizard: Veranstaltung → Turnier → Bewerbe (Guarded Navigation: Weiter nur bei `isValid`)
|
||||
|
||||
Siehe: `docs/06_Frontend/Diagrams/Navigation_Wizard_Flows.drawio`.
|
||||
|
||||
---
|
||||
|
||||
## 5. Referenzen
|
||||
|
||||
- Architektur: `docs/01_Architecture/02_Frontend_Architecture.md`
|
||||
- QA/Test: `docs/06_Frontend/Teststrategie_Desktop.md`
|
||||
- Navigation (Mermaid): `docs/06_Frontend/Navigation_Routing_Diagramm.md`
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 76 KiB |
@@ -0,0 +1,19 @@
|
||||
---
|
||||
title: Mapping — Screenshots (alt → neu)
|
||||
status: ACTIVE
|
||||
last_update: 2026-04-09
|
||||
owner: Frontend Expert
|
||||
---
|
||||
|
||||
Dieses Dokument protokolliert die Umbenennung der Frontend‑Screenshots nach einheitlichem Schema:
|
||||
|
||||
`<bereich>_<flow|screen>-<name>__v<version>__<status>__<yyyy-mm-dd>__<hh-mm>.png`
|
||||
|
||||
| Alt | Neu | Notizen |
|
||||
|------------------------------------------------|-----------------------------------------------------------------------------|--------------------------------------------|
|
||||
| Turnier-Stammdaten_01_entwurf-01.png | turnier_screen-stammdaten__v1__entwurf__2026-04-09__14-17.png | vereinheitlicht, Schema angewandt |
|
||||
| Turnier-Stammdaten_02_entwurf01.png | turnier_screen-stammdaten__v2__entwurf__2026-04-09__14-17.png | v2, Schreibweise `entwurf` vereinheitlicht |
|
||||
| Veranstaltungen-Status-Anzeige_entwurf-01.png | veranstaltungen_screen-status-anzeige__v1__entwurf__2026-04-09__14-17.png | Bereich `veranstaltungen` |
|
||||
| Desktop-Nennmaske-Entwurf_2026-03-21_11-53.png | flows/nennmaske_flow-desktop-uebersicht__v1__entwurf__2026-03-21__11-53.png | in Unterordner `flows/` verschoben |
|
||||
|
||||
Hinweis: Weitere Dateien folgen in Welle 2. Bitte neue Screenshots sofort nach Schema benennen.
|
||||
|
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
|
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 60 KiB |
|
Before Width: | Height: | Size: 6.8 KiB After Width: | Height: | Size: 6.8 KiB |
Reference in New Issue
Block a user