From 1c1f05400ff8555d18786615266b25c5fa32305e Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Tue, 17 Mar 2026 14:47:57 +0100
Subject: [PATCH] feat(DiaryView): enhance drag-and-drop functionality for
 training plan items

- Added a new class for sortable rows in the training plan table, improving the drag-and-drop experience.
- Updated the sortable initialization to target the new class, ensuring proper item handling during reordering.
- Implemented a check in the drag end event to prevent errors when no item is moved, enhancing stability.
---
 frontend/src/views/DiaryView.vue | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/DiaryView.vue b/frontend/src/views/DiaryView.vue
index dd1be42f..6e8ba38a 100644
--- a/frontend/src/views/DiaryView.vue
+++ b/frontend/src/views/DiaryView.vue
@@ -483,7 +483,7 @@
                             </thead>
                             <tbody ref="sortableList">
                                 <template v-for="(item, index) in trainingPlan" :key="item.id">
-                                    <tr :class="{ 'plan-timeblock-row': item.isTimeblock }">
+                                    <tr :class="{ 'plan-timeblock-row': item.isTimeblock }" class="plan-sortable-row" :data-plan-id="item.id">
                                         <td class="drag-handle" style="cursor: move;">☰</td> <!-- Drag-Handle -->
                                         <td>{{ formatDisplayTime(item.startTime) }}</td>
                                         <td>
@@ -1478,6 +1478,7 @@ export default {
         initializeSortable() {
             const el = this.$refs.sortableList;
             Sortable.create(el, {
+                draggable: '.plan-sortable-row',
                 handle: ".drag-handle",
                 onEnd: this.onDragEnd,
             });
@@ -2242,6 +2243,9 @@ export default {
         },
         async onDragEnd(evt) {
             const movedItem = this.trainingPlan[evt.oldIndex];
+            if (!movedItem) {
+                return;
+            }
             try {
                 await apiClient.put(`/diary-date-activities/${this.currentClub}/${movedItem.id}/order`, {
                     orderId: evt.newIndex