# Vue Frontend Dependency Graph

Stand: 2026-03-05

## Scope
- Analysiert: `frontend/src/views`, `frontend/src/components`, `frontend/src/services`, `frontend/src/composables`, `frontend/src/store.js`, `frontend/src/services/socketService.js`, `frontend/src/router.js`
- Ziel: Abhängigkeiten pro View (Components, Services, Composables, Store, Socket Events)

## Knoten
- Views: 26
- Components: 32
- Services: 1
- Composables: 2
- Store State Keys: 9
- Store Getters: 15
- Store Actions: 12

## Store (global)
- State: token, username, currentClub, clubs, permissions, dialogs, dialogCounter, sidebarCollapsed, language
- Getters: isAuthenticated, token, username, currentClub, clubs, sidebarCollapsed, language, currentClubName, currentPermissions, hasPermission, isClubOwner, userRole, dialogs, minimizedDialogs, activeDialogs
- Actions: login, logout, setCurrentClub, loadPermissions, setClubs, toggleSidebar, setLanguage, openDialog, closeDialog, minimizeDialog, restoreDialog, bringDialogToFront

## Socket Events (Service-Vertrag)
- `onActivityChanged` -> `activity:changed`
- `offActivityChanged` -> `activity:changed`
- `onActivityMemberAdded` -> `activity:member:added`
- `offActivityMemberAdded` -> `activity:member:added`
- `onActivityMemberRemoved` -> `activity:member:removed`
- `offActivityMemberRemoved` -> `activity:member:removed`
- `onDiaryDateUpdated` -> `diary:date:updated`
- `offDiaryDateUpdated` -> `diary:date:updated`
- `onDiaryNoteAdded` -> `diary:note:added`
- `offDiaryNoteAdded` -> `diary:note:added`
- `onDiaryNoteDeleted` -> `diary:note:deleted`
- `offDiaryNoteDeleted` -> `diary:note:deleted`
- `onDiaryNoteUpdated` -> `diary:note:updated`
- `offDiaryNoteUpdated` -> `diary:note:updated`
- `onDiaryTagAdded` -> `diary:tag:added`
- `offDiaryTagAdded` -> `diary:tag:added`
- `onDiaryTagRemoved` -> `diary:tag:removed`
- `offDiaryTagRemoved` -> `diary:tag:removed`
- `onGroupChanged` -> `group:changed`
- `offGroupChanged` -> `group:changed`
- `onMemberChanged` -> `member:changed`
- `offMemberChanged` -> `member:changed`
- `onParticipantAdded` -> `participant:added`
- `offParticipantAdded` -> `participant:added`
- `onParticipantRemoved` -> `participant:removed`
- `offParticipantRemoved` -> `participant:removed`
- `onParticipantUpdated` -> `participant:updated`
- `offParticipantUpdated` -> `participant:updated`
- `onMatchReportSubmitted` -> `schedule:match-report:submitted`
- `offMatchReportSubmitted` -> `schedule:match-report:submitted`
- `onScheduleMatchUpdated` -> `schedule:match:updated`
- `offScheduleMatchUpdated` -> `schedule:match:updated`
- `onTournamentChanged` -> `tournament:changed`
- `offTournamentChanged` -> `tournament:changed`

## Component -> Views
- `AccidentFormDialog.vue`: DiaryView.vue
- `BaseDialog.vue`: DiaryView.vue, MembersView.vue, OfficialTournaments.vue, ScheduleView.vue
- `ConfirmDialog.vue`: Activate.vue, ClubView.vue, CreateClub.vue, DiaryView.vue, Login.vue, MemberTransferSettingsView.vue, MembersView.vue, MyTischtennisAccount.vue, OfficialTournaments.vue, PendingApprovalsView.vue, PermissionsView.vue, PredefinedActivities.vue, Register.vue, ScheduleView.vue, TeamManagementView.vue, TournamentTab.vue
- `CourtDrawingDialog.vue`: DiaryView.vue, PredefinedActivities.vue
- `CourtDrawingRender.vue`: DiaryView.vue
- `CourtDrawingTool.vue`: nicht direkt in Views verwendet
- `CsvImportDialog.vue`: ScheduleView.vue
- `DialogExamples.vue`: nicht direkt in Views verwendet
- `DialogManager.vue`: nicht direkt in Views verwendet
- `ImageDialog.vue`: DiaryView.vue
- `ImageViewerDialog.vue`: MembersView.vue
- `InfoDialog.vue`: Activate.vue, ClubView.vue, CreateClub.vue, DiaryView.vue, ForgotPassword.vue, Login.vue, LogsView.vue, MemberTransferSettingsView.vue, MembersView.vue, MyTischtennisAccount.vue, OfficialTournaments.vue, PendingApprovalsView.vue, PermissionsView.vue, PredefinedActivities.vue, Register.vue, ResetPassword.vue, ScheduleView.vue, TeamManagementView.vue, TournamentTab.vue
- `MatchAccountDialog.vue`: nicht direkt in Views verwendet
- `MatchReportApiDialog.vue`: ScheduleView.vue
- `MatchReportDialog.vue`: nicht direkt in Views verwendet
- `MatchReportHeaderActions.vue`: nicht direkt in Views verwendet
- `MemberActivitiesDialog.vue`: MembersView.vue
- `MemberActivityStatsDialog.vue`: DiaryView.vue
- `MemberGalleryDialog.vue`: DiaryView.vue
- `MemberNotesDialog.vue`: DiaryView.vue, MembersView.vue
- `MemberSelectionDialog.vue`: OfficialTournaments.vue
- `MemberTransferDialog.vue`: MembersView.vue
- `MyTischtennisDialog.vue`: MyTischtennisAccount.vue
- `MyTischtennisHistoryDialog.vue`: nicht direkt in Views verwendet
- `NuscoreAnalyzer.vue`: nicht direkt in Views verwendet
- `PDFGenerator.js`: DiaryView.vue, MembersView.vue, OfficialTournaments.vue, ScheduleView.vue, TournamentTab.vue
- `QuickAddMemberDialog.vue`: DiaryView.vue
- `SeasonSelector.vue`: ScheduleView.vue, TeamManagementView.vue
- `TagHistoryDialog.vue`: DiaryView.vue
- `TrainingDetailsDialog.vue`: TrainingStatsView.vue
- `TrainingGroupsTab.vue`: ClubSettings.vue
- `TrainingTimesTab.vue`: ClubSettings.vue

## Service -> Views
- `socketService.js`: DiaryView.vue, ScheduleView.vue, TournamentTab.vue

## Composable -> Views
- `useDialog.js`: nicht direkt in Views verwendet
- `usePermissions.js`: PermissionsView.vue

## View-Abhängigkeiten
| View | Route | Components | Services | Composables | Store | API Client | Socket Events |
|---|---|---|---|---|---|---|---|
| Activate.vue | /activate/:activationCode | ConfirmDialog.vue<br>InfoDialog.vue | - | - | - | ja | - |
| ClubSettings.vue | /club-settings | TrainingGroupsTab.vue<br>TrainingTimesTab.vue | - | - | - | ja | - |
| ClubView.vue | /showclub/:clubId | ConfirmDialog.vue<br>InfoDialog.vue | - | - | getters: clubs, currentClub, hasPermission, isAuthenticated, isClubOwner, userRole; actions: -; useStore: nein | ja | - |
| CreateClub.vue | /createclub | ConfirmDialog.vue<br>InfoDialog.vue | - | - | getters: -; actions: setClubs, setCurrentClub; useStore: nein | ja | - |
| Datenschutz.vue | /datenschutz | - | - | - | - | nein | - |
| DiaryView.vue | /diary | AccidentFormDialog.vue<br>BaseDialog.vue<br>ConfirmDialog.vue<br>CourtDrawingDialog.vue<br>CourtDrawingRender.vue<br>ImageDialog.vue<br>InfoDialog.vue<br>MemberActivityStatsDialog.vue<br>MemberGalleryDialog.vue<br>MemberNotesDialog.vue<br>PDFGenerator.js<br>QuickAddMemberDialog.vue<br>TagHistoryDialog.vue | socketService.js | - | getters: currentClub, currentClubName, isAuthenticated; actions: -; useStore: nein | ja | connectSocket<br>disconnectSocket<br>onParticipantAdded (participant:added)<br>onParticipantRemoved (participant:removed)<br>onParticipantUpdated (participant:updated)<br>onDiaryNoteAdded (diary:note:added)<br>onDiaryNoteDeleted (diary:note:deleted)<br>onDiaryTagAdded (diary:tag:added)<br>onDiaryTagRemoved (diary:tag:removed)<br>onDiaryDateUpdated (diary:date:updated)<br>onActivityMemberAdded (activity:member:added)<br>onActivityMemberRemoved (activity:member:removed)<br>onActivityChanged (activity:changed)<br>onMemberChanged (member:changed)<br>onGroupChanged (group:changed)<br>offParticipantAdded (participant:added)<br>offParticipantRemoved (participant:removed)<br>offParticipantUpdated (participant:updated)<br>offDiaryNoteAdded (diary:note:added)<br>offDiaryNoteDeleted (diary:note:deleted)<br>offDiaryTagAdded (diary:tag:added)<br>offDiaryTagRemoved (diary:tag:removed)<br>offDiaryDateUpdated (diary:date:updated)<br>offActivityMemberAdded (activity:member:added)<br>offActivityMemberRemoved (activity:member:removed)<br>offActivityChanged (activity:changed)<br>offMemberChanged (member:changed)<br>offGroupChanged (group:changed) |
| ForgotPassword.vue | /forgot-password | InfoDialog.vue | - | - | - | ja | - |
| Home.vue | / | - | - | - | getters: isAuthenticated; actions: logout; useStore: nein | nein | - |
| Impressum.vue | /impressum | - | - | - | - | nein | - |
| Login.vue | /login | ConfirmDialog.vue<br>InfoDialog.vue | - | - | getters: -; actions: login; useStore: nein | ja | - |
| LogsView.vue | /logs | InfoDialog.vue | - | - | - | ja | - |
| MemberTransferSettingsView.vue | /member-transfer-settings | ConfirmDialog.vue<br>InfoDialog.vue | - | - | getters: currentClub; actions: -; useStore: nein | ja | - |
| MembersView.vue | /members | BaseDialog.vue<br>ConfirmDialog.vue<br>ImageViewerDialog.vue<br>InfoDialog.vue<br>MemberActivitiesDialog.vue<br>MemberNotesDialog.vue<br>MemberTransferDialog.vue<br>PDFGenerator.js | - | - | getters: currentClub, isAuthenticated, token; actions: -; useStore: nein | ja | - |
| MyTischtennisAccount.vue | /mytischtennis-account | ConfirmDialog.vue<br>InfoDialog.vue<br>MyTischtennisDialog.vue | - | - | - | ja | - |
| OfficialTournaments.vue | n/a | BaseDialog.vue<br>ConfirmDialog.vue<br>InfoDialog.vue<br>MemberSelectionDialog.vue<br>PDFGenerator.js | - | - | getters: currentClub; actions: -; useStore: nein | ja | - |
| PendingApprovalsView.vue | /pending-approvals | ConfirmDialog.vue<br>InfoDialog.vue | - | - | getters: currentClub; actions: -; useStore: nein | ja | - |
| PermissionsView.vue | /permissions | ConfirmDialog.vue<br>InfoDialog.vue | - | usePermissions.js | getters: -; actions: -; useStore: ja | ja | - |
| PersonalSettings.vue | /personal-settings | - | - | - | getters: language; actions: setLanguage; useStore: nein | nein | - |
| PredefinedActivities.vue | /predefined-activities | ConfirmDialog.vue<br>CourtDrawingDialog.vue<br>InfoDialog.vue | - | - | getters: -; actions: -; useStore: nein | ja | - |
| Register.vue | /register | ConfirmDialog.vue<br>InfoDialog.vue | - | - | - | ja | - |
| ResetPassword.vue | /reset-password/:token | InfoDialog.vue | - | - | - | ja | - |
| ScheduleView.vue | /schedule | BaseDialog.vue<br>ConfirmDialog.vue<br>CsvImportDialog.vue<br>InfoDialog.vue<br>MatchReportApiDialog.vue<br>PDFGenerator.js<br>SeasonSelector.vue | socketService.js | - | getters: clubs, currentClub, currentClubName, isAuthenticated; actions: openDialog; useStore: nein | ja | connectSocket<br>disconnectSocket<br>onScheduleMatchUpdated (schedule:match:updated)<br>offScheduleMatchUpdated (schedule:match:updated)<br>onMatchReportSubmitted (schedule:match-report:submitted)<br>offMatchReportSubmitted (schedule:match-report:submitted) |
| TeamManagementView.vue | /team-management | ConfirmDialog.vue<br>InfoDialog.vue<br>SeasonSelector.vue | - | - | getters: -; actions: -; useStore: ja | ja | - |
| TournamentTab.vue | n/a | ConfirmDialog.vue<br>InfoDialog.vue<br>PDFGenerator.js<br>TournamentConfigTab.vue<br>TournamentGroupsTab.vue<br>TournamentParticipantsTab.vue<br>TournamentPlacementsTab.vue<br>TournamentResultsTab.vue | socketService.js | - | getters: currentClub, isAuthenticated; actions: -; useStore: nein | ja | connectSocket<br>disconnectSocket<br>onTournamentChanged (tournament:changed)<br>offTournamentChanged (tournament:changed) |
| TournamentsView.vue | /tournaments | - | - | - | - | nein | - |
| TrainingStatsView.vue | /training-stats | TrainingDetailsDialog.vue | - | - | getters: currentClub, isAuthenticated; actions: -; useStore: nein | ja | - |

## Socket Event -> Views
- `activity:changed`: DiaryView.vue
- `activity:member:added`: DiaryView.vue
- `activity:member:removed`: DiaryView.vue
- `diary:date:updated`: DiaryView.vue
- `diary:note:added`: DiaryView.vue
- `diary:note:deleted`: DiaryView.vue
- `diary:tag:added`: DiaryView.vue
- `diary:tag:removed`: DiaryView.vue
- `group:changed`: DiaryView.vue
- `member:changed`: DiaryView.vue
- `participant:added`: DiaryView.vue
- `participant:removed`: DiaryView.vue
- `participant:updated`: DiaryView.vue
- `schedule:match-report:submitted`: ScheduleView.vue
- `schedule:match:updated`: ScheduleView.vue
- `tournament:changed`: TournamentTab.vue
