pp-planer/resources/js/Components/ServicePartMacroPanel.vue

<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>