Fixed group activities and added collapsing for general settings

backend/controllers/groupController.js

@@ -26,4 +26,17 @@ const getGroups = async(req, res) => {
     }
 }
 
-export { addGroup, getGroups };
+const changeGroup = async(req, res) => {
+    try {
+        const { authcode: userToken } = req.headers;
+        const { groupId } = req.params;
+        const { clubid: clubId, dateid: dateId, name, lead } = req.body;
+        const result = await groupService.changeGroup(userToken, groupId, clubId, dateId, name, lead);
+        res.status(200).json(result);
+    } catch (error) {
+        console.error('[changeGroup] - Error:', error);
+        res.status(error.statusCode || 500).json({ error: error.message });
+    }
+}
+
+export { addGroup, getGroups, changeGroup};

backend/routes/groupRoutes.js

@@ -1,10 +1,13 @@
 import express from 'express';
 import { authenticate } from '../middleware/authMiddleware.js';
-import { addGroup, getGroups } from '../controllers/groupController.js';
+import { addGroup, getGroups, changeGroup } from '../controllers/groupController.js';
 
 const router = express.Router();
 
-router.post('/', authenticate, addGroup);
-router.get('/:clubId/:dateId', authenticate, getGroups);
+router.use(authenticate);
+
+router.post('/', addGroup);
+router.get('/:clubId/:dateId', getGroups);
+router.put('/:groupId', changeGroup);
 
 export default router;

backend/services/diaryDateActivityService.js

@@ -144,7 +144,7 @@ class DiaryDateActivityService {
                 diaryDateId,
                 isTimeblock: true,
             },
-            order: [['order_id', 'ASC']],
+            order: [['order_id', 'DESC']],
             limit: 1
         });
         if (!diaryDateActivity) {

backend/services/diaryService.js

@@ -22,7 +22,7 @@ class DiaryService {
                 { model: DiaryNote, as: 'diaryNotes' },  // Der Alias für DiaryNote ist korrekt
                 { model: DiaryTag, as: 'diaryTags' },    // Hier muss der Alias auf 'diaryTags' geändert werden
             ],
-            order: [['date', 'ASC'], ['trainingStart', 'ASC']]
+            order: [['date', 'DESC'], ['trainingStart', 'ASC']]
         });
         return dates;
     }

backend/services/groupService.js

@@ -38,6 +38,25 @@ class GroupService {
         });
         return groups;
     }
+
+    async changeGroup(userToken, groupId, clubId, dateId, name, lead) {
+        console.log("changeGroup: ", groupId, clubId, dateId, name, lead);
+        await checkAccess(userToken, clubId);
+        await this.checkDiaryDateToClub(clubId, dateId);
+        const group = await Group.findOne({
+            where: {
+                id: groupId,
+                diaryDateId: dateId
+            }
+        });
+        if (!group) {
+            throw new HttpError('Gruppe nicht gefunden oder passt nicht zum angegebenen Datum und Verein', 404);
+        }
+        group.name = name;
+        group.lead = lead;
+        await group.save();
+        return group;
+    }
 }
 
 export default new GroupService();

frontend/src/views/DiaryView.vue

@@ -5,7 +5,8 @@
             <label>Datum:
                 <select v-model="date" @change="handleDateChange">
                     <option value="new">Neu anlegen</option>
-                    <option v-for="entry in dates" :key="entry.id" :value="entry">{{ entry.date }} </option>
+                    <option v-for="entry in dates" :key="entry.id" :value="entry">{{ getFormattedDate(entry.date) }}
+                    </option>
                 </select>
             </label>
         </div>
@@ -28,9 +29,11 @@
                 <button type="submit">Datum anlegen</button>
             </form>
         </div>
+
         <div v-if="!showForm && date !== null && date !== 'new'">
-            <h3>Trainingszeiten bearbeiten</h3>
-            <form @submit.prevent="updateTrainingTimes">
+            <h3>Trainingszeiten bearbeiten <span @click="toggleShowGeneralData" class="clickable">{{ showGeneralData ?
+                    '-' : '+' }}</span></h3>
+            <form @submit.prevent="updateTrainingTimes" v-if="showGeneralData">
                 <div>
                     <label for="editTrainingStart">Trainingsbeginn:</label>
                     <input type="time" step="300" id="editTrainingStart" v-model="trainingStart" />
@@ -45,16 +48,25 @@
         <div v-if="date !== 'new' && date !== null" style="overflow:hidden">
             <div class="columns">
                 <div class="column">
-                    <h3>Gruppenverwaltung</h3>
-                    <div>
+                    <h3 v-if="showGeneralData">Gruppenverwaltung</h3>
+                    <div v-if="showGeneralData">
                         <h4>Vorhandene Gruppen</h4>
                         <ul>
                             <li v-for="group in groups" :key="group.id">
-                                {{ group.name }} (Leiter: {{ group.lead }})
+                                <span v-if="editingGroupId !== group.id" @click="editGroup(group.id)">{{ group.name
+                                    }}</span>
+                                <input v-else type="text" v-model="group.name" @blur="saveGroup(group)"
+                                    @keyup.enter="saveGroup(group)" @keyup.esc="cancelEditGroup"
+                                    style="display: inline;width:10em" />
+                                <span v-if="editingGroupId !== group.id" @click="editGroup(group.id)"> (Leiter: {{
+                                    group.lead }}) </span>
+                                <input v-else type="text" v-model="group.lead" @blur="saveGroup(group)"
+                                    @keyup.enter="saveGroup(group)" @keyup.esc="cancelEditGroup"
+                                    style="display: inline;width:10em" />
                             </li>
                         </ul>
                     </div>
-                    <div>
+                    <div v-if="showGeneralData">
                         <h4>Neue Gruppe erstellen</h4>
                         <div class="groups">
                             <div>
@@ -93,7 +105,8 @@
                                                 item.activity }}</span>
                                         </td>
                                         <td>{{ item.groupActivity ? item.groupActivity.name : '' }}</td>
-                                        <td><span v-if="item.durationText">{{ item.durationText }} / </span>{{ item.duration }}</td>
+                                        <td><span v-if="item.durationText">{{ item.durationText }} / </span>{{
+                                            item.duration }}</td>
                                         <td><button @click="removePlanItem(item.id)">Entfernen</button></td>
                                     </tr>
                                     <template v-for="groupItem in item.groupActivities">
@@ -153,6 +166,7 @@
                             <span @click="openNotesModal(member)" class="clickable">{{ member.firstName }} {{
                                 member.lastName }}</span>
                             <span @click="showPic(member)" class="img-icon" v-if="member.hasImage">&#x1F5BC;</span>
+                            <span>&#x2139;</span>
                         </li>
                     </ul>
                     <h3>Aktivitäten</h3>
@@ -225,6 +239,8 @@ export default {
             addNewItem: false,
             addNewGroupActivity: false,
             addNewTimeblock: false,
+            showGeneralData: false,
+            editingGroupId: null,
         };
     },
     watch: {
@@ -287,6 +303,7 @@ export default {
 
                 this.initializeSortable();
                 await this.loadGroups();
+                this.showGeneralData = false;
             } else {
                 this.newDate = '';
                 this.trainingStart = '';
@@ -597,7 +614,7 @@ export default {
                         durationText: this.newPlanItem.durationText,
                         orderId: this.trainingPlan.length
                     });
-                } else if (this.addNewGroupActivity) {//clubId, diaryDateActivityId, groupId, activity
+                } else if (this.addNewGroupActivity) {
                     await apiClient.post(`/diary-date-activities/group`, {
                         clubId: this.currentClub,
                         diaryDateId: this.date.id,
@@ -607,6 +624,7 @@ export default {
                 }
                 this.addNewTimeblock = false;
                 this.addNewItem = false;
+                this.addNewGroupActivity = false;
                 this.newPlanItem = { activity: '', duration: '', durationText: '', groupId: '' };
                 this.trainingPlan = await apiClient.get(`/diary-date-activities/${this.currentClub}/${this.date.id}`).then(response => response.data);
             } catch (error) {
@@ -816,6 +834,33 @@ export default {
             this.addNewItem = false;
             this.addNewTimeblock = false;
         },
+        toggleShowGeneralData() {
+            this.showGeneralData = !this.showGeneralData;
+        },
+        getFormattedDate(date) {
+            console.log(date, typeof date);
+            return (new Date(date)).toLocaleDateString('de-DE', { year: 'numeric', month: '2-digit', day: '2-digit'});
+        },
+        editGroup(groupId) {
+            this.editingGroupId = groupId;
+        },
+        async saveGroup(group) {
+            try {
+                await apiClient.put(`/group/${group.id}`, {
+                    name: group.name,
+                    lead: group.lead,
+                    clubid: this.currentClub,
+                    dateid: this.date.id,
+                });
+                this.editingGroupId = null; 
+            } catch (error) {
+                console.error('Fehler beim Speichern der Gruppendaten:', error);
+                alert('Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.');
+            }
+        },
+        cancelEditGroup() {
+            this.editingGroupId = null; 
+        },
     },
     async mounted() {
         await this.init();