From a33f2d3f4ffb29921861502a0b5405d91af1d7d6 Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Sun, 29 Mar 2026 15:26:32 +0200
Subject: [PATCH] feat(ui): show position, time, duration and responsible on
 agenda items

---
 resources/js/Components/AgendaItemRow.vue  | 23 ++++++++++++++++++++--
 resources/js/Components/SongAgendaItem.vue | 19 +++++++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/resources/js/Components/AgendaItemRow.vue b/resources/js/Components/AgendaItemRow.vue
index ca80950..d497684 100644
--- a/resources/js/Components/AgendaItemRow.vue
+++ b/resources/js/Components/AgendaItemRow.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import SlideUploader from '@/Components/SlideUploader.vue'
 
 const props = defineProps({
@@ -12,6 +12,12 @@ const emit = defineEmits(['slides-updated'])
 
 const showUploader = ref(false)
 
+const responsibleNames = computed(() => {
+    const r = props.agendaItem.responsible
+    if (!r || !Array.isArray(r) || r.length === 0) return ''
+    return r.map((p) => p.name || p.title || p.personName || '').filter(Boolean).join(', ')
+})
+
 function onUploaded() {
     showUploader.value = false
     emit('slides-updated')
@@ -33,12 +39,25 @@ function onUploaded() {
             <div class="flex-1">
                 <!-- Position + Titel -->
                 <div class="flex items-center gap-2">
-                    <span class="text-xs text-gray-400 tabular-nums">{{ agendaItem.sort_order }}.</span>
+                    <span class="text-xs text-gray-400 tabular-nums">{{ agendaItem.position || agendaItem.sort_order }}.</span>
                     <h4 class="font-medium text-gray-900" data-testid="agenda-item-title">
                         {{ agendaItem.title }}
                     </h4>
                 </div>
 
+                <!-- Meta: Zeit, Dauer, Verantwortlich -->
+                <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-400">
+                    <span v-if="agendaItem.start">
+                        🕐 {{ agendaItem.start }}
+                    </span>
+                    <span v-if="agendaItem.duration">
+                        ⏱ {{ agendaItem.duration }}
+                    </span>
+                    <span v-if="responsibleNames">
+                        👤 {{ responsibleNames }}
+                    </span>
+                </div>
+
                 <!-- Notiz (optional) -->
                 <p v-if="agendaItem.note" class="mt-1 text-xs text-gray-500">
                     {{ agendaItem.note }}
diff --git a/resources/js/Components/SongAgendaItem.vue b/resources/js/Components/SongAgendaItem.vue
index e7dbfaf..dc48d3e 100644
--- a/resources/js/Components/SongAgendaItem.vue
+++ b/resources/js/Components/SongAgendaItem.vue
@@ -63,6 +63,12 @@ const arrangementPills = computed(() => {
     return [...groups].sort((a, b) => a.order - b.order)
 })
 
+const responsibleNames = computed(() => {
+    const r = props.agendaItem.responsible
+    if (!r || !Array.isArray(r) || r.length === 0) return ''
+    return r.map((p) => p.name || p.title || p.personName || '').filter(Boolean).join(', ')
+})
+
 function openDropdown() {
     dropdownOpen.value = true
 }
@@ -165,11 +171,22 @@ function formatDateTime(value) {
         <div class="flex flex-wrap items-start justify-between gap-3">
             <div>
                 <div class="flex items-center gap-2">
-                    <span class="text-xs text-gray-400 tabular-nums">{{ agendaItem.sort_order }}.</span>
+                    <span class="text-xs text-gray-400 tabular-nums">{{ agendaItem.position || agendaItem.sort_order }}.</span>
                     <h4 class="text-lg font-semibold text-gray-900" data-testid="song-agenda-title">
                         {{ serviceSong?.cts_song_name || agendaItem.title || '-' }}
                     </h4>
                 </div>
+                <div class="mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-gray-400">
+                    <span v-if="agendaItem.start">
+                        🕐 {{ agendaItem.start }}
+                    </span>
+                    <span v-if="agendaItem.duration">
+                        ⏱ {{ agendaItem.duration }}
+                    </span>
+                    <span v-if="responsibleNames">
+                        👤 {{ responsibleNames }}
+                    </span>
+                </div>
                 <div class="mt-1.5 flex flex-wrap items-center gap-2 text-xs text-gray-600">
                     <span class="rounded-full bg-gray-100 px-2.5 py-1 font-medium">
                         CCLI: {{ serviceSong?.song?.ccli_id || serviceSong?.cts_ccli_id || '-' }}