From 2b16cdff538cb916d63a253ec80fbd92644c36ee Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 8 May 2026 13:50:45 +0200
Subject: [PATCH] refactor(DiaryView): simplify grouped plan table structure
 and improve rendering logic

- Removed the "Gemeinsam" header from the grouped plan table for a cleaner layout.
- Adjusted the rendering logic to conditionally display shared items and group items more efficiently, enhancing clarity in the activity display.
- Updated colspan attributes to ensure proper alignment and presentation of table data.
---
 frontend/src/views/DiaryView.vue | 42 ++++++++++++++++----------------
 1 file changed, 21 insertions(+), 21 deletions(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index 530adf9d..e6a3e5f4 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -414,7 +414,6 @@
                             <thead>
                                 <tr v-if="showGroupedPlanTable">
                                     <th>{{ $t('diary.startTime') }}</th>
-                                    <th>Gemeinsam</th>
                                     <th v-for="group in groups" :key="`group-col-${group.id}`">{{ group.name }}</th>
                                 </tr>
                                 <tr v-else>
@@ -429,8 +428,8 @@
                             <tbody v-if="showGroupedPlanTable">
                                 <tr v-for="row in groupedPlanRows" :key="row.key">
                                     <td>{{ formatDisplayTime(row.startTime) }}</td>
-                                    <td>
-                                        <div v-if="row.sharedItems.length" class="plan-cell-stack">
+                                    <td v-if="row.sharedItems.length" :colspan="groups.length">
+                                        <div class="plan-cell-stack">
                                             <div v-for="item in row.sharedItems" :key="`shared-${item.id}`" class="plan-cell-item">
                                                 <div class="plan-activity-main">
                                                     <span @click="startActivityEdit(item)" class="clickable activity-label">{{ getPlanItemDisplayLabel(item) }}</span>
@@ -445,30 +444,31 @@
                                                 </div>
                                             </div>
                                         </div>
-                                        <span v-else class="plan-row-muted">-</span>
                                     </td>
-                                    <td v-for="group in groups" :key="`row-${row.key}-group-${group.id}`">
-                                        <div v-if="(row.groupItems[group.id] || []).length" class="plan-cell-stack">
-                                            <div v-for="item in (row.groupItems[group.id] || [])" :key="`group-item-${item.id}`" class="plan-cell-item">
-                                                <div class="plan-activity-main">
-                                                    <span @click="startActivityEdit(item)" class="clickable activity-label">{{ getPlanItemDisplayLabel(item) }}</span>
-                                                    <span v-if="!isStructuralPlanItem(item)" class="plan-status-badge" :class="`plan-status-badge-${getPlanItemStatus(item).tone}`">
-                                                        {{ getPlanItemStatus(item).label }}
-                                                    </span>
-                                                </div>
-                                                <div class="plan-row-actions">
-                                                    <button @click="startActivityEdit(item)" class="plan-row-action-button">{{ $t('common.edit') }}</button>
-                                                    <button v-if="!isStructuralPlanItem(item)" @click="toggleActivityMembers(item)" class="plan-row-action-button">{{ $t('diary.assignShort') }}</button>
-                                                    <button @click="removePlanItem(item.id)" class="plan-row-action-button plan-row-action-button-danger">{{ $t('common.delete') }}</button>
+                                    <template v-else>
+                                        <td v-for="group in groups" :key="`row-${row.key}-group-${group.id}`">
+                                            <div v-if="(row.groupItems[group.id] || []).length" class="plan-cell-stack">
+                                                <div v-for="item in (row.groupItems[group.id] || [])" :key="`group-item-${item.id}`" class="plan-cell-item">
+                                                    <div class="plan-activity-main">
+                                                        <span @click="startActivityEdit(item)" class="clickable activity-label">{{ getPlanItemDisplayLabel(item) }}</span>
+                                                        <span v-if="!isStructuralPlanItem(item)" class="plan-status-badge" :class="`plan-status-badge-${getPlanItemStatus(item).tone}`">
+                                                            {{ getPlanItemStatus(item).label }}
+                                                        </span>
+                                                    </div>
+                                                    <div class="plan-row-actions">
+                                                        <button @click="startActivityEdit(item)" class="plan-row-action-button">{{ $t('common.edit') }}</button>
+                                                        <button v-if="!isStructuralPlanItem(item)" @click="toggleActivityMembers(item)" class="plan-row-action-button">{{ $t('diary.assignShort') }}</button>
+                                                        <button @click="removePlanItem(item.id)" class="plan-row-action-button plan-row-action-button-danger">{{ $t('common.delete') }}</button>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <span v-else class="plan-row-muted">-</span>
-                                    </td>
+                                            <span v-else class="plan-row-muted">-</span>
+                                        </td>
+                                    </template>
                                 </tr>
                                 <tr>
                                     <td>{{ calculateNextTime }}</td>
-                                    <td :colspan="groups.length + 1">
+                                    <td :colspan="groups.length">
                                         <span class="plan-add-hint">{{ $t('diary.planAddHint') }}</span>
                                     </td>
                                 </tr>