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>
|
||||
Reference in New Issue
Block a user