feat(matches): add manual match creation functionality and related fields

2026-08-19 13:43:16 +02:00
parent dc447acf57
commit d251d40868
9 changed files with 261 additions and 9 deletions
--- a/frontend/src/components/schedule/ScheduleLayoutShell.vue
+++ b/frontend/src/components/schedule/ScheduleLayoutShell.vue
@@ -22,6 +22,14 @@
                    >
                        {{ $t('schedule.importSchedule') }}
                    </button>
+                    <button
+                        v-if="showScheduleActions && canCreateManualMatch"
+                        type="button"
+                        class="btn-secondary schedule-add-match-button"
+                        @click="$emit('open-manual-match-modal')"
+                    >
+                        {{ $t('schedule.addMatch') }}
+                    </button>
                    <button v-if="showFriendlyActions" @click="$emit('open-friendly-match-modal')" class="btn-secondary">Freundschaftsspiel</button>
                    <button
                        v-if="showGalleryButton"
@@ -206,6 +214,7 @@ export default {
        fetchingTeamData: { type: Boolean, required: true },
        fetchingTable: { type: Boolean, required: true },
        showFriendlyActions: { type: Boolean, default: false },
+        canCreateManualMatch: { type: Boolean, default: false },
        showScheduleActions: { type: Boolean, default: true },
        showSidebar: { type: Boolean, default: true },
        showTableTab: { type: Boolean, default: true }
@@ -214,6 +223,7 @@ export default {
        'update:selected-season-id',
        'season-change',
        'open-import-modal',
+        'open-manual-match-modal',
        'open-friendly-match-modal',
        'open-gallery-dialog',
        'update:team-search-query',
@@ -321,6 +331,12 @@ export default {
    align-self: flex-end;
 }

+.schedule-add-match-button {
+    min-height: 2.5rem;
+    align-self: flex-end;
+    white-space: nowrap;
+}
+
 .schedule-summary-bar {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
--- a/frontend/src/i18n/locales/de.json
+++ b/frontend/src/i18n/locales/de.json
@@ -1479,6 +1479,24 @@
    "title": "Spielpläne",
    "subtitle": "Teams auswählen, Spieltage prüfen und Ligatabellen im Blick behalten.",
    "importSchedule": "Spielplanimport",
+    "addMatch": "Spiel hinzufügen",
+    "manualMatchDescription": "Manuell gepflegte Spiele erscheinen neben den importierten Click-TT-Terminen.",
+    "fixtureType": "Spieltyp:",
+    "cupMatch": "Pokalspiel",
+    "ownTeam": "Eigene Mannschaft",
+    "selectTeam": "Mannschaft wählen",
+    "opponent": "Gegner",
+    "opponentPlaceholder": "Name der gegnerischen Mannschaft",
+    "venue": "Spielstätte",
+    "address": "Adresse",
+    "zip": "PLZ",
+    "city": "Ort",
+    "location": "Spielort",
+    "notes": "Notizen",
+    "saving": "Speichert…",
+    "manualMatchRequired": "Bitte Mannschaft, Gegner, Datum und Uhrzeit ausfüllen.",
+    "manualMatchSaved": "Pokalspiel wurde hinzugefügt.",
+    "manualMatchSaveFailed": "Pokalspiel konnte nicht gespeichert werden.",
    "galleryLoading": "Galerie wird geladen…",
    "gallery": "Mitglieder-Galerie",
    "overallSchedule": "Gesamtspielplan",
--- a/frontend/src/i18n/locales/en-US.json
+++ b/frontend/src/i18n/locales/en-US.json
@@ -1456,6 +1456,24 @@
    "title": "Schedules",
    "subtitle": "Select teams, review fixtures and keep league tables in view.",
    "importSchedule": "Import schedule",
+    "addMatch": "Add match",
+    "manualMatchDescription": "Manually maintained matches appear alongside imported Click-TT fixtures.",
+    "fixtureType": "Fixture type:",
+    "cupMatch": "Cup match",
+    "ownTeam": "Own team",
+    "selectTeam": "Select team",
+    "opponent": "Opponent",
+    "opponentPlaceholder": "Opponent team name",
+    "venue": "Venue",
+    "address": "Address",
+    "zip": "Postal code",
+    "city": "City",
+    "location": "Location",
+    "notes": "Notes",
+    "saving": "Saving…",
+    "manualMatchRequired": "Please fill in the team, opponent, date and time.",
+    "manualMatchSaved": "Cup match added.",
+    "manualMatchSaveFailed": "Cup match could not be saved.",
    "galleryLoading": "Loading gallery…",
    "gallery": "Member gallery",
    "overallSchedule": "Overall schedule",
--- a/frontend/src/views/ScheduleView.vue
+++ b/frontend/src/views/ScheduleView.vue
@@ -24,11 +24,13 @@
            :fetching-table="fetchingTable"
            :show-friendly-actions="friendlyOnly"
            :show-schedule-actions="!friendlyOnly"
+            :can-create-manual-match="canCreateManualMatch"
            :show-sidebar="!friendlyOnly"
            :show-table-tab="!friendlyOnly"
            @update:selected-season-id="selectedSeasonId = $event"
            @season-change="onSeasonChange"
            @open-import-modal="openImportModal"
+            @open-manual-match-modal="openManualMatchDialog"
            @open-friendly-match-modal="openFriendlyMatchDialog"
            @open-gallery-dialog="openGalleryDialog"
            @update:team-search-query="teamSearchQuery = $event"
@@ -153,7 +155,7 @@
                                    <td>{{ formatDate(match.date) }}</td>
                                    <td>{{ match.time ? match.time.toString().slice(0, 5) + ' ' + $t('common.time') : 'N/A' }}</td>
                                    <td :class="{ 'highlighted-club': isClubHighlighted(match.homeTeam?.name) }">
-                                        {{ match.homeTeam?.name || 'N/A' }}
+                                        {{ match.homeTeam?.name || 'N/A' }} <span v-if="match.fixtureType === 'cup'" class="manual-match-badge">{{ $t('schedule.cupMatch') }}</span>
                                    </td>
                                    <td :class="{ 'highlighted-club': isClubHighlighted(match.guestTeam?.name) }">
                                        {{ match.guestTeam?.name || 'N/A' }}
@@ -269,6 +271,27 @@

        <!-- Import Modal -->
        <CsvImportDialog v-model="showImportModal" @import="handleCsvImport" @close="closeImportModal" />
+
+        <BaseDialog v-model="manualMatchDialog.isOpen" :title="$t('schedule.addMatch')" :max-width="620" @close="closeManualMatchDialog">
+            <form class="manual-match-form" @submit.prevent="saveManualMatch">
+                <p class="manual-match-intro">{{ $t('schedule.manualMatchDescription') }}</p>
+                <div class="manual-match-type">{{ $t('schedule.fixtureType') }} <strong>{{ $t('schedule.cupMatch') }}</strong></div>
+                <p v-if="manualMatchDialog.error" class="manual-match-error" role="alert">{{ manualMatchDialog.error }}</p>
+                <div class="manual-match-grid">
+                    <label><span>{{ $t('schedule.ownTeam') }} *</span><select v-model="manualMatchDialog.form.clubTeamId" required><option value="">{{ $t('schedule.selectTeam') }}</option><option v-for="team in teams" :key="team.id" :value="String(team.id)">{{ team.name }} <template v-if="team.league?.name">({{ team.league.name }})</template></option></select></label>
+                    <label><span>{{ $t('schedule.opponent') }} *</span><input v-model.trim="manualMatchDialog.form.opponentName" required :placeholder="$t('schedule.opponentPlaceholder')"></label>
+                    <label><span>{{ $t('schedule.date') }} *</span><input v-model="manualMatchDialog.form.date" type="date" required></label>
+                    <label><span>{{ $t('schedule.time') }} *</span><input v-model="manualMatchDialog.form.time" type="time" required></label>
+                    <label><span>{{ $t('schedule.venue') }}</span><input v-model.trim="manualMatchDialog.form.locationName"></label>
+                    <label><span>{{ $t('schedule.address') }}</span><input v-model.trim="manualMatchDialog.form.locationAddress"></label>
+                    <label><span>{{ $t('schedule.zip') }}</span><input v-model.trim="manualMatchDialog.form.locationZip"></label>
+                    <label><span>{{ $t('schedule.city') }}</span><input v-model.trim="manualMatchDialog.form.locationCity"></label>
+                </div>
+                <fieldset class="manual-match-home-away"><legend>{{ $t('schedule.location') }}</legend><label><input v-model="manualMatchDialog.form.homeAway" type="radio" value="home"> {{ $t('schedule.homeGame') }}</label><label><input v-model="manualMatchDialog.form.homeAway" type="radio" value="away"> {{ $t('schedule.away') }}</label></fieldset>
+                <label class="manual-match-notes"><span>{{ $t('schedule.notes') }}</span><textarea v-model.trim="manualMatchDialog.form.notes" rows="3"></textarea></label>
+                <div class="dialog-actions"><button type="button" class="btn-cancel" :disabled="manualMatchDialog.saving" @click="closeManualMatchDialog">{{ $t('schedule.cancel') }}</button><button type="submit" class="btn-save" :disabled="manualMatchDialog.saving">{{ manualMatchDialog.saving ? $t('schedule.saving') : $t('schedule.save') }}</button></div>
+            </form>
+        </BaseDialog>
    </div>


@@ -716,7 +739,10 @@ export default {
        MemberNotesDialog
    },
    computed: {
-        ...mapGetters(['isAuthenticated', 'currentClub', 'clubs', 'currentClubName']),
+        ...mapGetters(['isAuthenticated', 'currentClub', 'clubs', 'currentClubName', 'hasPermission']),
+        canCreateManualMatch() {
+            return !this.friendlyOnly && this.hasPermission('schedule', 'write');
+        },
        filteredScheduleTeams() {
            const query = this.teamSearchQuery.trim().toLowerCase();
            if (!query) {
@@ -860,6 +886,10 @@ export default {
                resolveCallback: null
            },
            showImportModal: false,
+            manualMatchDialog: {
+                isOpen: false, saving: false, error: '',
+                form: { clubTeamId: '', opponentName: '', date: new Date().toISOString().slice(0, 10), time: '', homeAway: 'home', locationName: '', locationAddress: '', locationZip: '', locationCity: '', notes: '' }
+            },
            selectedFile: null,
            teams: [],
            matches: [],
@@ -953,6 +983,39 @@ export default {
        filterRegularScheduleMatches(matches) {
            return (Array.isArray(matches) ? matches : []).filter((match) => !match?.isFriendly);
        },
+        resetManualMatchDialogForm() {
+            this.manualMatchDialog.form = { clubTeamId: this.selectedTeam?.id ? String(this.selectedTeam.id) : '', opponentName: '', date: new Date().toISOString().slice(0, 10), time: '', homeAway: 'home', locationName: '', locationAddress: '', locationZip: '', locationCity: '', notes: '' };
+            this.manualMatchDialog.error = '';
+        },
+        openManualMatchDialog() {
+            this.resetManualMatchDialogForm();
+            this.manualMatchDialog.isOpen = true;
+        },
+        closeManualMatchDialog() {
+            if (this.manualMatchDialog.saving) return;
+            this.manualMatchDialog.isOpen = false;
+            this.resetManualMatchDialogForm();
+        },
+        async saveManualMatch() {
+            const form = this.manualMatchDialog.form;
+            if (!form.clubTeamId || !form.opponentName || !form.date || !form.time) {
+                this.manualMatchDialog.error = this.$t('schedule.manualMatchRequired');
+                return;
+            }
+            this.manualMatchDialog.saving = true;
+            this.manualMatchDialog.error = '';
+            try {
+                await apiClient.post(`/matches/${this.currentClub}`, { ...form, clubTeamId: Number(form.clubTeamId) });
+                this.manualMatchDialog.isOpen = false;
+                this.resetManualMatchDialogForm();
+                await this.refreshScheduleData();
+                this.showInfo(this.$t('messages.success'), this.$t('schedule.manualMatchSaved'), '', 'success');
+            } catch (error) {
+                this.manualMatchDialog.error = getSafeErrorMessage(error, this.$t('schedule.manualMatchSaveFailed'));
+            } finally {
+                this.manualMatchDialog.saving = false;
+            }
+        },
        getClubNameById(clubId) {
            const club = (this.clubs || []).find((item) => Number(item.id) === Number(clubId));
            return club?.name || `Verein ${clubId}`;
@@ -2842,16 +2905,16 @@ export default {
            }
        },

-        refreshScheduleData() {
+        async refreshScheduleData() {
            if (!this.selectedLeague) return;
            if (this.selectedTeam) {
-                this.loadMatchesForSpecificTeam(this.selectedTeam);
+                return this.loadMatchesForSpecificTeam(this.selectedTeam);
            } else if (this.selectedLeague === this.$t('schedule.overallSchedule')) {
-                this.loadAllMatches();
+                return this.loadAllMatches();
            } else if (this.selectedLeague === this.$t('schedule.adultSchedule')) {
-                this.loadAdultMatches();
+                return this.loadAdultMatches();
            } else if (this.selectedLeague === this.friendlyMatchesLabel) {
-                this.loadFriendlyMatches();
+                return this.loadFriendlyMatches();
            }
        },

@@ -3827,6 +3890,20 @@ li {
    justify-content: flex-end;
 }

+.manual-match-form { display: flex; flex-direction: column; gap: 1rem; }
+.manual-match-intro { margin: 0; color: var(--text-muted, #6c757d); }
+.manual-match-type { padding: .65rem .8rem; border-left: 3px solid var(--primary-color); background: var(--surface-muted, #f5f7f6); font-size: .92rem; }
+.manual-match-type strong { margin-left: .4rem; }
+.manual-match-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
+.manual-match-grid label, .manual-match-notes { display: grid; gap: .35rem; font-weight: 600; font-size: .9rem; }
+.manual-match-grid input, .manual-match-grid select, .manual-match-notes textarea { width: 100%; box-sizing: border-box; padding: .6rem .7rem; border: 1px solid var(--border-color); border-radius: 4px; background: var(--background-light, #fff); color: inherit; font: inherit; }
+.manual-match-grid input:focus, .manual-match-grid select:focus, .manual-match-notes textarea:focus { outline: 2px solid var(--primary-color); outline-offset: 1px; }
+.manual-match-home-away { display: flex; gap: 1rem; padding: .65rem .8rem; border: 1px solid var(--border-color); border-radius: 4px; }
+.manual-match-home-away legend { padding: 0 .3rem; font-size: .86rem; font-weight: 600; }
+.manual-match-home-away label { font-size: .9rem; }
+.manual-match-error { margin: 0; padding: .65rem .8rem; color: var(--error-color, #b42318); background: #fff1f0; border-left: 3px solid currentColor; }
+.manual-match-badge { display: inline-block; margin-left: .35rem; padding: .1rem .35rem; border-radius: 3px; color: var(--primary-strong, #1f5f49); background: rgba(47, 122, 95, .12); font-size: .72rem; font-weight: 700; white-space: nowrap; }
+
 .btn-save,
 .btn-cancel {
    padding: 8px 20px;
@@ -4180,6 +4257,8 @@ li {
 }

@media (max-width: 640px) {
+    .manual-match-grid { grid-template-columns: 1fr; }
+    .manual-match-home-away { flex-direction: column; gap: .45rem; }
    .player-list { border: 1px solid var(--border-color); border-radius: 8px; }
    .player-list-scroll-hint { display:block; position:sticky; left:0; margin:0; padding:7px 10px; background:var(--surface-muted); color:var(--text-muted); font-size:.78rem; }
    .player-selection-table {