From 6d83b5f38c274247b87f41da3af893b3b0153dae Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Mon, 4 May 2026 00:37:05 +0200
Subject: [PATCH] feat(service-edit): macro icon + Anpassen/Standard flow on
 service edit page

---
 app/Http/Controllers/ServiceController.php    |  31 ++++
 .../js/Components/ServicePartMacroPanel.vue   | 145 ++++++++++++++++++
 resources/js/Pages/Services/Edit.vue          |  70 ++++++++-
 3 files changed, 244 insertions(+), 2 deletions(-)
 create mode 100644 resources/js/Components/ServicePartMacroPanel.vue

diff --git a/app/Http/Controllers/ServiceController.php b/app/Http/Controllers/ServiceController.php
index c99af6c..24951c7 100644
--- a/app/Http/Controllers/ServiceController.php
+++ b/app/Http/Controllers/ServiceController.php
@@ -4,10 +4,12 @@
 
 use App\Models\Service;
 use App\Models\ServiceAgendaItem;
+use App\Models\ServiceMacroOverride;
 use App\Models\Setting;
 use App\Models\Slide;
 use App\Models\Song;
 use App\Services\AgendaMatcherService;
+use App\Services\MacroResolutionService;
 use App\Services\ProBundleExportService;
 use Illuminate\Http\JsonResponse;
 use Illuminate\Http\RedirectResponse;
@@ -225,6 +227,34 @@ public function edit(Service $service): Response
             return $arr;
         }, $filteredItems);
 
+        // Macro resolution per part type (for icons + Anpassen/Standard panel)
+        $resolver = app(MacroResolutionService::class);
+        $macros_per_part = [];
+        foreach (['information', 'moderation', 'sermon', 'song', 'agenda_item'] as $partType) {
+            $assignments = $resolver->resolveAssignmentsForPart($service, $partType);
+            $isOverridden = ServiceMacroOverride::where('service_id', $service->id)
+                ->where('part_type', $partType)
+                ->exists();
+            $hasWarning = $assignments->contains(
+                fn ($a) => $a->macro?->isHidden() || ($a->position === 'by_label' && $a->label?->isHidden())
+            );
+            $macros_per_part[$partType] = [
+                'count' => $assignments->count(),
+                'is_overridden' => $isOverridden,
+                'has_warning' => $hasWarning,
+                'assignments' => $assignments->map(fn ($a) => [
+                    'id' => $a->id,
+                    'macro_id' => $a->macro_id,
+                    'macro_name' => $a->macro?->name,
+                    'macro_color' => $a->macro?->color,
+                    'macro_hidden' => $a->macro?->isHidden(),
+                    'position' => $a->position,
+                    'label_id' => $a->label_id,
+                    'label_name' => $a->label?->name,
+                ])->values()->all(),
+            ];
+        }
+
         return Inertia::render('Services/Edit', [
             'service' => [
                 'id' => $service->id,
@@ -292,6 +322,7 @@ public function edit(Service $service): Response
                 'title' => $nextService->title,
                 'date' => $nextService->date?->toDateString(),
             ] : null,
+            'macros_per_part' => $macros_per_part,
         ]);
     }
 
diff --git a/resources/js/Components/ServicePartMacroPanel.vue b/resources/js/Components/ServicePartMacroPanel.vue
new file mode 100644
index 0000000..003a462
--- /dev/null
+++ b/resources/js/Components/ServicePartMacroPanel.vue
@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from 'vue'
+import { router } from '@inertiajs/vue3'
+
+const props = defineProps({
+    serviceId: { type: Number, required: true },
+    partType: { type: String, required: true },
+    partLabel: { type: String, required: true },
+    isOverridden: { type: Boolean, default: false },
+    assignments: { type: Array, default: () => [] },
+    hasWarning: { type: Boolean, default: false },
+})
+
+const emit = defineEmits(['close'])
+const busy = ref(false)
+
+const positionLabels = {
+    all_slides: 'Alle Folien',
+    first_slide: 'Erste Folie',
+    last_slide: 'Letzte Folie',
+    by_label: 'Nach Label',
+}
+
+function csrfToken() {
+    return decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? '')
+}
+
+async function anpassen() {
+    busy.value = true
+    try {
+        await fetch(route('services.macro-overrides.store', props.serviceId), {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-XSRF-TOKEN': csrfToken(),
+            },
+            body: JSON.stringify({ part_type: props.partType }),
+        })
+        router.reload({ preserveScroll: true })
+        emit('close')
+    } finally {
+        busy.value = false
+    }
+}
+
+async function revertToGlobal() {
+    if (!confirm('Soll die Anpassung aufgehoben werden? Die globalen Zuweisungen werden wiederhergestellt.')) return
+    busy.value = true
+    try {
+        await fetch(route('services.macro-overrides.destroy', props.serviceId), {
+            method: 'DELETE',
+            headers: {
+                'Content-Type': 'application/json',
+                'X-Requested-With': 'XMLHttpRequest',
+                'X-XSRF-TOKEN': csrfToken(),
+            },
+            body: JSON.stringify({ part_type: props.partType }),
+        })
+        router.reload({ preserveScroll: true })
+        emit('close')
+    } finally {
+        busy.value = false
+    }
+}
+</script>
+
+<template>
+    <div
+        class="absolute right-0 top-8 z-50 w-80 rounded-xl border border-gray-200 bg-white shadow-lg"
+        :data-testid="'macro-panel-' + partType"
+    >
+        <div class="flex items-center justify-between border-b border-gray-100 px-4 py-3">
+            <h4 class="text-sm font-semibold text-gray-900">Makros für {{ partLabel }}</h4>
+            <button
+                class="text-gray-400 hover:text-gray-600"
+                :data-testid="'btn-close-macro-panel-' + partType"
+                @click="emit('close')"
+            >
+                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
+        </div>
+
+        <div class="p-4">
+            <!-- Override status badge -->
+            <div
+                v-if="isOverridden"
+                class="mb-3 flex items-center gap-1.5 rounded-lg bg-amber-50 px-3 py-1.5 text-xs font-medium text-amber-700"
+            >
+                <svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
+                </svg>
+                Anpassung aktiv für diesen Gottesdienst
+            </div>
+            <div v-else class="mb-3 text-xs text-gray-400">
+                Globale Zuweisungen werden verwendet
+            </div>
+
+            <!-- Assignments list -->
+            <div v-if="assignments.length > 0" class="mb-3 space-y-1">
+                <div
+                    v-for="a in assignments"
+                    :key="a.id"
+                    class="flex items-center gap-2 rounded-lg bg-gray-50 px-2 py-1.5 text-xs"
+                    :data-testid="'macro-panel-assignment-' + a.id"
+                >
+                    <span
+                        v-if="a.macro_color"
+                        class="h-3 w-3 shrink-0 rounded"
+                        :style="{ backgroundColor: a.macro_color }"
+                    />
+                    <span class="flex-1 truncate text-gray-700">{{ a.macro_name }}</span>
+                    <span class="text-gray-400">{{ positionLabels[a.position] }}</span>
+                    <span v-if="a.macro_hidden" class="rounded bg-amber-100 px-1 py-0.5 text-amber-700">⚠</span>
+                </div>
+            </div>
+            <p v-else class="mb-3 text-xs text-gray-400">Keine Makros zugewiesen.</p>
+
+            <!-- Action buttons -->
+            <div class="flex gap-2">
+                <button
+                    v-if="!isOverridden"
+                    class="flex-1 rounded-lg bg-amber-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-amber-600 disabled:opacity-50"
+                    :disabled="busy"
+                    title="Erstellt eine Kopie der aktuellen globalen Zuweisungen für diesen Gottesdienst. Spätere Änderungen an den globalen Zuweisungen wirken sich auf diesen Gottesdienst NICHT mehr aus."
+                    :data-testid="'btn-anpassen-' + partType"
+                    @click="anpassen"
+                >
+                    Anpassen
+                </button>
+                <button
+                    v-else
+                    class="flex-1 rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50 disabled:opacity-50"
+                    :disabled="busy"
+                    :data-testid="'btn-standard-' + partType"
+                    @click="revertToGlobal"
+                >
+                    Auf Standard zurücksetzen
+                </button>
+            </div>
+        </div>
+    </div>
+</template>
diff --git a/resources/js/Pages/Services/Edit.vue b/resources/js/Pages/Services/Edit.vue
index 82e046c..c489535 100644
--- a/resources/js/Pages/Services/Edit.vue
+++ b/resources/js/Pages/Services/Edit.vue
@@ -6,6 +6,8 @@ import InformationBlock from '@/Components/Blocks/InformationBlock.vue'
 import AgendaItemRow from '@/Components/AgendaItemRow.vue'
 import SongAgendaItem from '@/Components/SongAgendaItem.vue'
 import ArrangementDialog from '@/Components/ArrangementDialog.vue'
+import MacroIcon from '@/Components/MacroIcon.vue'
+import ServicePartMacroPanel from '@/Components/ServicePartMacroPanel.vue'
 
 const props = defineProps({
     service: {
@@ -40,8 +42,30 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    macros_per_part: {
+        type: Object,
+        default: () => ({}),
+    },
 })
 
+const openMacroPanel = ref(null)
+
+const macroPartLabels = {
+    information: 'Informationen',
+    moderation: 'Moderation',
+    sermon: 'Predigt',
+    song: 'Lieder',
+    agenda_item: 'Ablaufpunkte',
+}
+
+function toggleMacroPanel(partType) {
+    openMacroPanel.value = openMacroPanel.value === partType ? null : partType
+}
+
+function macroPartData(partType) {
+    return props.macros_per_part?.[partType] ?? { count: 0, is_overridden: false, has_warning: false, assignments: [] }
+}
+
 const formattedDate = computed(() => {
     if (!props.service.date) return ''
     return new Date(props.service.date).toLocaleDateString('de-DE', {
@@ -358,7 +382,31 @@ async function downloadService() {
         <!-- Ablauf (Agenda) -->
         <div class="py-6">
             <div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
-                <h3 class="mb-4 text-base font-semibold text-gray-900">Ablauf</h3>
+                <div class="mb-4 flex items-center justify-between gap-3">
+                    <h3 class="text-base font-semibold text-gray-900">Ablauf</h3>
+                    <div class="flex items-center gap-1.5">
+                        <template v-for="partType in ['agenda_item', 'moderation', 'sermon', 'song']" :key="partType">
+                            <div class="relative">
+                                <MacroIcon
+                                    :count="macroPartData(partType).count"
+                                    :has-warning="macroPartData(partType).has_warning"
+                                    :data-testid="'macro-icon-' + partType"
+                                    @click="toggleMacroPanel(partType)"
+                                />
+                                <ServicePartMacroPanel
+                                    v-if="openMacroPanel === partType"
+                                    :service-id="service.id"
+                                    :part-type="partType"
+                                    :part-label="macroPartLabels[partType]"
+                                    :is-overridden="macroPartData(partType).is_overridden"
+                                    :assignments="macroPartData(partType).assignments"
+                                    :has-warning="macroPartData(partType).has_warning"
+                                    @close="openMacroPanel = null"
+                                />
+                            </div>
+                        </template>
+                    </div>
+                </div>
 
                 <!-- Empty state -->
                 <div v-if="!agendaItems || agendaItems.length === 0"
@@ -426,10 +474,28 @@ async function downloadService() {
                                 <path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
                             </svg>
                         </div>
-                        <div>
+                        <div class="flex-1">
                             <h3 class="text-[15px] font-semibold text-gray-900">Information</h3>
                             <p class="text-xs text-gray-500">Info-Folien für alle kommenden Services</p>
                         </div>
+                        <div class="relative">
+                            <MacroIcon
+                                :count="macroPartData('information').count"
+                                :has-warning="macroPartData('information').has_warning"
+                                :data-testid="'macro-icon-information'"
+                                @click="toggleMacroPanel('information')"
+                            />
+                            <ServicePartMacroPanel
+                                v-if="openMacroPanel === 'information'"
+                                :service-id="service.id"
+                                :part-type="'information'"
+                                :part-label="macroPartLabels.information"
+                                :is-overridden="macroPartData('information').is_overridden"
+                                :assignments="macroPartData('information').assignments"
+                                :has-warning="macroPartData('information').has_warning"
+                                @close="openMacroPanel = null"
+                            />
+                        </div>
                     </div>
                     <InformationBlock
                         :service-id="service.id"