From b7bbb92f8618dbc3023cc899cb14efb36c80eb1c Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Sun, 16 Nov 2025 22:25:34 +0100
Subject: [PATCH] Add initial fields to CourtDrawingDialog and enhance
 DiaryView for editing group activities

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.
---
 .../src/components/CourtDrawingDialog.vue     | 23 ++++++++
 frontend/src/views/DiaryView.vue              | 56 ++++++++++++++++++-
 2 files changed, 78 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/CourtDrawingDialog.vue b/frontend/src/components/CourtDrawingDialog.vue
index 02468fe..057cb99 100644
--- a/frontend/src/components/CourtDrawingDialog.vue
+++ b/frontend/src/components/CourtDrawingDialog.vue
@@ -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;
       }
     }
   },
diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 1d4bc55..337d7eb 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -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 {