torsten/trainingstagebuch
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Add initial fields to CourtDrawingDialog and enhance DiaryView for editing group activities

Browse Source 
This commit introduces new props in CourtDrawingDialog for initialCode, initialName, and initialDescription, allowing for better handling of drawing data. Additionally, it updates the DiaryView to include an edit button for group activities, enabling users to modify existing activities and reset fields upon dialog closure. This enhances the user experience by providing more intuitive editing capabilities.
This commit is contained in:
Torsten Schulz (local)
2025-11-16 22:25:34 +01:00
parent 6896484e9e
commit b7bbb92f86
2 changed files with 78 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/CourtDrawingDialog.vue
View File

@@ -46,6 +46,18 @@ export default {
initialDrawingData: {
type: Object,
default: null
},
initialCode: {
type: String,
default: null
},
initialName: {
type: String,
default: null
},
initialDescription: {
type: String,
default: null
}
},
emits: ['update:modelValue', 'close', 'ok'],
@@ -78,6 +90,14 @@ export default {
modelValue(newVal) {
// Wenn Dialog geöffnet wird, stelle sicher dass Tool neu gezeichnet wird
if (newVal) {
// Setze initiale Felder, falls vorhanden
if (this.initialCode || this.initialName || this.initialDescription) {
this.currentFields = {
code: this.initialCode || '',
name: this.initialName || '',
description: this.initialDescription || ''
};
}
this.$nextTick(() => {
// Warte bis der Dialog vollständig gerendert ist
setTimeout(() => {
@@ -86,6 +106,9 @@ export default {
}
}, 100);
});
} else {
// Dialog wird geschlossen - Felder zurücksetzen
this.currentFields = null;
}
}
},

56
frontend/src/views/DiaryView.vue
View File

@@ -321,6 +321,8 @@
<td></td>
<td>
<div style="position: relative; display: inline-block;">
<button @click="editGroupActivity(groupItem)" :title="$t('diary.edit')"
class="person-btn" style="background: #ffc107; color: #000;">✏️</button>
<button @click="toggleGroupActivityMembers(groupItem)" :title="$t('diary.assignParticipants')"
class="person-btn">👤</button>
<button @click="removeGroupActivity(groupItem.id)" class="trash-btn" :title="$t('diary.delete')">🗑️</button>
@@ -402,6 +404,15 @@
<option v-for="group in groups" :key="group.id" :value="String(group.id)">
{{ group.name }}</option>
</select>
<button
type="button"
class="btn-palette"
@click="showDrawingDialog = true"
:title="$t('diary.createDrawing')"
style="margin: 0; margin-left: 0;"
>
🎨
</button>
<div style="flex: 1; position: relative;">
<input type="text" v-model="newPlanItem.activity" placeholder="Aktivität"
@input="onNewItemInputChange" style="width: 100%;" />
@@ -664,8 +675,12 @@
<!-- Court Drawing Dialog -->
<CourtDrawingDialog
v-model="showDrawingDialog"
:initial-drawing-data="null"
:initial-drawing-data="editingGroupActivity ? drawingDataFor(editingGroupActivity.groupPredefinedActivity) : null"
:initial-code="editingGroupActivity && editingGroupActivity.groupPredefinedActivity ? (editingGroupActivity.groupPredefinedActivity.code || editingGroupActivity.groupPredefinedActivity.name) : null"
:initial-name="editingGroupActivity && editingGroupActivity.groupPredefinedActivity ? editingGroupActivity.groupPredefinedActivity.name : null"
:initial-description="editingGroupActivity && editingGroupActivity.groupPredefinedActivity ? editingGroupActivity.groupPredefinedActivity.description : null"
@ok="handleDrawingDialogOkForDiary"
@close="editingGroupActivity = null"
/>
<!-- Mitglieder-Galerie Dialog -->
@@ -879,6 +894,7 @@ export default {
memberGroupsMap: {}, // key: memberId, value: groupId
groupActivityMembersOpenId: null,
groupActivityMembersMap: {}, // key: groupActivityId, value: Set(participantIds)
editingGroupActivity: null, // Gruppenaktivität, die gerade bearbeitet wird
// Schnell hinzufügen Dialog
showQuickAddDialog: false,
newMember: {
@@ -2460,12 +2476,39 @@ export default {
async handleDrawingDialogOkForDiary(result) {
if (!result || !result.code) {
this.showInfo('Fehler', 'Keine Übungsdaten erhalten', '', 'error');
this.editingGroupActivity = null;
return;
}
try {
const code = result.code.trim();
// Wenn eine Gruppenaktivität bearbeitet wird
if (this.editingGroupActivity && this.editingGroupActivity.groupPredefinedActivity) {
const predefinedActivityId = this.editingGroupActivity.groupPredefinedActivity.id;
// Aktualisiere die PredefinedActivity
const updateData = {
name: result.name || (result.fields && result.fields.name) || this.editingGroupActivity.groupPredefinedActivity.name || '',
code: code,
description: result.description || (result.fields && result.fields.description) || this.editingGroupActivity.groupPredefinedActivity.description || '',
durationText: this.editingGroupActivity.groupPredefinedActivity.durationText || '',
duration: this.editingGroupActivity.groupPredefinedActivity.duration || null,
imageLink: this.editingGroupActivity.groupPredefinedActivity.imageLink || '',
drawingData: result.drawingData || null
};
await apiClient.put(`/predefined-activities/${predefinedActivityId}`, updateData);
// Lade den Trainingsplan neu
if (this.date && this.date.id) {
await this.loadTrainingPlan();
}
this.editingGroupActivity = null;
return;
}
// Suche nach existierender Aktivität mit diesem Code
const searchResults = await this.searchPredefinedActivities(code);
const existing = searchResults.find(a => a.code && a.code.trim().toLowerCase() === code.toLowerCase());
@@ -2522,8 +2565,19 @@ export default {
} catch (error) {
const msg = getSafeErrorMessage(error, 'Fehler beim Erstellen der Aktivität');
this.showInfo('Fehler', msg, '', 'error');
} finally {
this.editingGroupActivity = null;
}
},
editGroupActivity(groupItem) {
if (!groupItem || !groupItem.groupPredefinedActivity) {
this.showInfo('Fehler', 'Keine Aktivität zum Bearbeiten gefunden', '', 'error');
return;
}
this.editingGroupActivity = groupItem;
this.showDrawingDialog = true;
},
async loadTrainingPlan() {
try {