Refactor age display logic in DashboardWidget: Simplify age representation to always show years, removing the conditional check for days. This change streamlines the age display functionality.

frontend/src/components/DashboardWidget.vue

@@ -127,11 +127,7 @@ export default {
       const numAge = Number(ageValue);
       // Backend gibt Tage zurück (calcAge verwendet differenceInDays)
       // Wenn < 365 Tage: Tage anzeigen, sonst Jahre
-      if (numAge < 365) {
+      return `${numAge} ${this.$t('falukant.overview.metadata.years')}`;
-        return `${numAge} ${this.$t('falukant.overview.metadata.days')}`;
-      } else {
-        return `${numAge} ${this.$t('falukant.overview.metadata.years')}`;
-      }
     },
     dataList() {
       if (!Array.isArray(this.data) || this.data.length === 0) return [];

frontend/src/views/home/LoggedInView.vue

@@ -58,29 +58,30 @@
     </div>
     <div
       v-else
+      ref="dashboardGridRef"
       class="dashboard-grid"
       @dragover.prevent
-      @drop.prevent="onGridDrop"
+      @drop.prevent="onAnyDrop($event)"
     >
       <template v-for="(w, index) in widgets" :key="w.id">
-        <!-- Platzhalter vor dem Widget: Drop hier = Einfügen an index -->
+        <!-- Platzhalter vor dem Widget: Einfügen an index -->
         <div
           v-if="dragOverIndex === index && draggedIndex !== null && draggedIndex !== index"
           class="dashboard-grid-cell dashboard-drop-indicator"
+          :data-drop-index="index"
           @dragover.prevent="setDropTarget(index)"
-          @drop.prevent.stop="onDrop(index, $event)"
         >
           <div class="drop-indicator-line"></div>
         </div>
         <div
           class="dashboard-grid-cell"
+          :data-drop-index="index"
           :class="{
             'drop-target': dragOverIndex === index && draggedIndex !== index,
             'drag-source': draggedIndex === index
           }"
           @dragover.prevent="() => setDropTarget(index)"
           @dragleave="clearDropTarget"
-          @drop="onDrop(index, $event)"
         >
           <DashboardWidget
             v-if="!editMode"
@@ -110,12 +111,12 @@
             </button>
           </div>
         </div>
-        <!-- Am Ende: sichtbare Drop-Zone beim Ziehen, Drop = ans Ende -->
+        <!-- Am Ende: sichtbare Drop-Zone beim Ziehen -->
         <div
           v-if="draggedIndex !== null"
           class="dashboard-grid-cell dashboard-drop-indicator"
+          :data-drop-index="widgets.length"
           @dragover.prevent="() => setDropTarget(widgets.length)"
-          @drop.prevent.stop="onGridDrop"
         >
           <div class="drop-indicator-line"></div>
         </div>
@@ -275,40 +276,40 @@ export default {
         this.dragOverIndex = this.widgets.length;
       }
     },
-    async onGridDrop(e) {
+    /** Ein zentraler Drop-Handler: Ziel-Index wird aus der Mausposition ermittelt (nicht aus Event-Target). */
-      console.log('[Dashboard Drag] onGridDrop — target:', e?.target?.className, 'dragOverIndex:', this.dragOverIndex, 'draggedIndex:', this.draggedIndex);
+    async onAnyDrop(e) {
-      if (this.draggedIndex == null) return;
+      if (this.draggedIndex == null) {
+        this.dragOverIndex = null;
+        return;
+      }
+      const gridEl = this.$refs.dashboardGridRef;
+      const x = e.clientX;
+      const y = e.clientY;
+      let to = null;
+      if (gridEl) {
+        let el = document.elementFromPoint(x, y);
+        while (el && el !== document.body) {
+          if (el === gridEl) break;
+          const idx = el.getAttribute?.('data-drop-index');
+          if (idx != null && idx !== '') {
+            to = parseInt(idx, 10);
+            if (!Number.isNaN(to)) break;
+          }
+          el = el.parentElement;
+        }
+      }
+      if (to == null) to = this.dragOverIndex != null ? this.dragOverIndex : this.widgets.length;
       const from = this.draggedIndex;
-      const to = this.dragOverIndex != null ? this.dragOverIndex : this.widgets.length;
+      console.log('[Dashboard Drag] onAnyDrop — Maus:', x, y, '→ to:', to, 'from:', from, 'event.target:', e?.target?.className);
-      console.log('[Dashboard Drag] onGridDrop → from:', from, 'to:', to, 'widgets.length:', this.widgets.length);
       if (from === to || to < 0 || to > this.widgets.length) {
-        console.log('[Dashboard Drag] onGridDrop — abgebrochen (ungültig)');
+        console.log('[Dashboard Drag] onAnyDrop — abgebrochen');
         this.draggedIndex = null;
         this.dragOverIndex = null;
         return;
       }
       const item = this.widgets.splice(from, 1)[0];
       this.widgets.splice(to, 0, item);
-      console.log('[Dashboard Drag] onGridDrop — erledigt. Neue Reihenfolge (titles):', this.widgets.map(w => w.title));
+      console.log('[Dashboard Drag] onAnyDrop — erledigt. Neue Reihenfolge:', this.widgets.map(w => w.title));
-      this.draggedIndex = null;
-      this.dragOverIndex = null;
-      await this.saveConfig();
-    },
-    async onDrop(toIndex, e) {
-      console.log('[Dashboard Drag] onDrop — target:', e?.target?.className, 'toIndex:', toIndex, 'draggedIndex:', this.draggedIndex);
-      if (this.draggedIndex == null) return;
-      const from = this.draggedIndex;
-      const to = toIndex;
-      console.log('[Dashboard Drag] onDrop → from:', from, 'to:', to);
-      if (from === to) {
-        console.log('[Dashboard Drag] onDrop — abgebrochen (from === to)');
-        this.draggedIndex = null;
-        this.dragOverIndex = null;
-        return;
-      }
-      const item = this.widgets.splice(from, 1)[0];
-      this.widgets.splice(to, 0, item);
-      console.log('[Dashboard Drag] onDrop — erledigt. Neue Reihenfolge (titles):', this.widgets.map(w => w.title));
       this.draggedIndex = null;
       this.dragOverIndex = null;
       await this.saveConfig();