From 6d337d8b6a81a1e14f3e0bf2043a9dd3eb76f0ee Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Sun, 29 Mar 2026 15:39:38 +0200
Subject: [PATCH] fix(ui): fix ArrangementDialog data mapping and close
 behavior

- Transform arrangement data in Edit.vue to flat {id, name, color, slides}
  format expected by ArrangementDialog (was passing raw Eloquent structure
  with nested arrangement_groups[].group instead of flat .groups[])
- Stop arrangement select change from closing the dialog (only close on X)
- Fallback to all available groups when no arrangement selected (Master)
---
 resources/js/Components/ArrangementDialog.vue |  7 +++-
 resources/js/Pages/Services/Edit.vue          | 34 +++++++++++++++----
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/resources/js/Components/ArrangementDialog.vue b/resources/js/Components/ArrangementDialog.vue
index 1936793..6ac6593 100644
--- a/resources/js/Components/ArrangementDialog.vue
+++ b/resources/js/Components/ArrangementDialog.vue
@@ -40,7 +40,12 @@ watch(
     currentArrangementId,
     (id) => {
         const arr = props.arrangements.find((a) => a.id === Number(id))
-        arrangementGroups.value = arr?.groups?.map((g, i) => ({ ...g, _uid: `${g.id}-${i}-${Date.now()}` })) ?? []
+        if (arr?.groups?.length) {
+            arrangementGroups.value = arr.groups.map((g, i) => ({ ...g, _uid: `${g.id}-${i}-${Date.now()}` }))
+        } else {
+            // Fallback: show all available groups in order (Master)
+            arrangementGroups.value = props.availableGroups.map((g, i) => ({ ...g, _uid: `${g.id}-master-${i}-${Date.now()}` }))
+        }
     },
     { immediate: true },
 )
diff --git a/resources/js/Pages/Services/Edit.vue b/resources/js/Pages/Services/Edit.vue
index e80828b..846486b 100644
--- a/resources/js/Pages/Services/Edit.vue
+++ b/resources/js/Pages/Services/Edit.vue
@@ -79,12 +79,35 @@ function openArrangementDialog(item) {
 
 function getArrangements(item) {
     const song = item.service_song?.song ?? item.serviceSong?.song
-    return song?.arrangements ?? []
+    if (!song?.arrangements) return []
+
+    return song.arrangements.map((arr) => ({
+        id: arr.id,
+        name: arr.name,
+        is_default: arr.is_default,
+        groups: (arr.arrangement_groups ?? []).map((ag) => {
+            const group = song.groups?.find((g) => g.id === ag.song_group_id) ?? ag.group ?? {}
+            return {
+                id: ag.song_group_id ?? group.id,
+                name: group.name ?? 'Unbekannt',
+                color: group.color ?? '#6b7280',
+                order: ag.order,
+                slides: group.slides ?? [],
+            }
+        }),
+    }))
 }
 
 function getAvailableGroups(item) {
     const song = item.service_song?.song ?? item.serviceSong?.song
-    return song?.groups ?? []
+    if (!song?.groups) return []
+
+    return song.groups.map((group) => ({
+        id: group.id,
+        name: group.name,
+        color: group.color,
+        slides: group.slides ?? [],
+    }))
 }
 
 function getSelectedArrangementId(item) {
@@ -96,9 +119,9 @@ function isHeaderType(item) {
            (item.service_song_id === null && item.type !== 'Song' && item.type !== 'song' && item.type !== 'Default' && item.type !== 'default')
 }
 
-function onArrangementSelected() {
-    router.reload({ preserveScroll: true })
+function onArrangementDialogClosed() {
     arrangementDialogItem.value = null
+    router.reload({ preserveScroll: true })
 }
 
 /* ── Finalize / Reopen / Download ───────────────────────── */
@@ -405,8 +428,7 @@ async function downloadService() {
             :arrangements="getArrangements(arrangementDialogItem)"
             :available-groups="getAvailableGroups(arrangementDialogItem)"
             :selected-arrangement-id="getSelectedArrangementId(arrangementDialogItem)"
-            @close="arrangementDialogItem = null"
-            @arrangement-selected="onArrangementSelected"
+            @close="onArrangementDialogClosed"
         />
 
         <!-- Sticky bottom action bar -->