pp-planer/resources/js/Pages/Services/Index.vue

<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, router } from '@inertiajs/vue3'
import { ref } from 'vue'

const props = defineProps({
    services: {
        type: Array,
        default: () => [],
    },
})

const toastMessage = ref('')
const toastType = ref('info')
const confirmDialog = ref(false)
const confirmWarnings = ref([])
const confirmServiceId = ref(null)
const finalizing = ref(false)

function formatDate(dateStr) {
    if (!dateStr) return '—'
    const d = new Date(dateStr)
    return d.toLocaleDateString('de-DE', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
    })
}

function formatDateTime(dateStr) {
    if (!dateStr) return '—'
    const d = new Date(dateStr)
    return d.toLocaleDateString('de-DE', {
        day: '2-digit',
        month: '2-digit',
        year: 'numeric',
        hour: '2-digit',
        minute: '2-digit',
    })
}

function showToast(message, type = 'info') {
    toastMessage.value = message
    toastType.value = type

    setTimeout(() => {
        toastMessage.value = ''
    }, 3500)
}

function toastClasses() {
    if (toastType.value === 'success') {
        return 'border-emerald-300 bg-emerald-50 text-emerald-700'
    }
    if (toastType.value === 'warning') {
        return 'border-orange-300 bg-orange-50 text-orange-700'
    }
    return 'border-blue-300 bg-blue-50 text-blue-700'
}

async function finalizeService(serviceId) {
    finalizing.value = true
    try {
        const response = await fetch(route('services.finalize', serviceId), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
            },
            body: JSON.stringify({ confirmed: false }),
        })
        const data = await response.json()

        if (data.needs_confirmation) {
            confirmWarnings.value = data.warnings
            confirmServiceId.value = serviceId
            confirmDialog.value = true
            return
        }

        showToast(data.success, 'success')
        router.reload({ preserveScroll: true })
    } finally {
        finalizing.value = false
    }
}

async function confirmFinalize() {
    finalizing.value = true
    confirmDialog.value = false
    try {
        const response = await fetch(route('services.finalize', confirmServiceId.value), {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
            },
            body: JSON.stringify({ confirmed: true }),
        })
        const data = await response.json()

        showToast(data.success, 'success')
        router.reload({ preserveScroll: true })
    } finally {
        finalizing.value = false
        confirmServiceId.value = null
        confirmWarnings.value = []
    }
}

function cancelFinalize() {
    confirmDialog.value = false
    confirmServiceId.value = null
    confirmWarnings.value = []
}

function reopenService(serviceId) {
    router.post(route('services.reopen', serviceId), {}, {
        preserveScroll: true,
        onSuccess: () => showToast('Service wurde wieder geöffnet.', 'success'),
    })
}

async function downloadService(serviceId) {
    try {
        const response = await fetch(route('services.download', serviceId), {
            headers: {
                'Accept': 'application/json',
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
            },
        })
        const data = await response.json()
        showToast(data.message, 'warning')
    } catch {
        showToast('Fehler beim Herunterladen.', 'warning')
    }
}

function mappingStatusClass(service) {
    if (service.songs_total_count === 0) {
        return 'text-red-600'
    }

    if (service.songs_mapped_count === service.songs_total_count) {
        return 'text-emerald-700'
    }

    return 'text-orange-600'
}

function arrangementStatusClass(service) {
    if (service.songs_total_count === 0) {
        return 'text-red-600'
    }

    if (service.songs_arranged_count === service.songs_total_count) {
        return 'text-emerald-700'
    }

    return 'text-orange-600'
}

function stateIconClass(isDone) {
    return isDone ? 'text-emerald-600' : 'text-red-600'
}
</script>

<template>
    <Head title="Services" />

    <AuthenticatedLayout>
        <template #header>
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="text-xl font-semibold leading-tight text-gray-800">Services</h2>
                <p class="text-sm text-gray-500">Hier siehst du alle heutigen und kommenden Services.</p>
            </div>
        </template>

        <div class="py-8">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <Transition
                    enter-active-class="transition duration-200 ease-out"
                    enter-from-class="translate-y-1 opacity-0"
                    enter-to-class="translate-y-0 opacity-100"
                    leave-active-class="transition duration-150 ease-in"
                    leave-from-class="opacity-100"
                    leave-to-class="opacity-0"
                >
                    <div
                        v-if="toastMessage"
                        :class="toastClasses()"
                        role="status"
                    >
                        {{ toastMessage }}
                    </div>
                </Transition>

                <div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
                    <div v-if="services.length === 0" data-testid="service-list-empty" class="p-8 text-center text-sm text-gray-500">
                        Aktuell gibt es keine heutigen oder kommenden Services.
                    </div>

                    <div v-else class="overflow-x-auto">
                        <table data-testid="service-list-table" class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Titel</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Prediger</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Beamer-Techniker</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Anzahl Songs</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Letzte Änderung</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Status</th>
                                    <th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Aktionen</th>
                                </tr>
                            </thead>

                            <tbody class="divide-y divide-gray-100 bg-white">
                                <tr v-for="service in services" :key="service.id" :data-testid="`service-list-row-${service.id}`" class="align-top hover:bg-gray-50/60">
                                    <td class="px-4 py-4">
                                        <div class="font-medium text-gray-900">{{ service.title }}</div>
                                        <div class="mt-1 text-xs text-gray-500">{{ formatDate(service.date) }}</div>
                                    </td>

                                    <td class="px-4 py-4 text-sm text-gray-700">
                                        {{ service.preacher_name || '-' }}
                                    </td>

                                    <td class="px-4 py-4 text-sm text-gray-700">
                                        {{ service.beamer_tech_name || '-' }}
                                    </td>

                                    <td class="px-4 py-4 text-sm text-gray-700">
                                        {{ service.songs_total_count }}
                                    </td>

                                    <td class="px-4 py-4 text-sm text-gray-700">
                                        {{ formatDateTime(service.updated_at) }}
                                    </td>

                                    <td class="px-4 py-4">
                                        <div class="space-y-1.5 text-xs font-medium">
                                            <div :class="mappingStatusClass(service)">
                                                {{ service.songs_mapped_count }}/{{ service.songs_total_count }} Songs zugeordnet
                                            </div>

                                            <div :class="arrangementStatusClass(service)">
                                                {{ service.songs_arranged_count }}/{{ service.songs_total_count }} Arrangements geprueft
                                            </div>

                                            <div :class="stateIconClass(service.has_sermon_slides)" class="flex items-center gap-1.5">
                                                <span aria-hidden="true">{{ service.has_sermon_slides ? '✓' : '•' }}</span>
                                                <span>Predigtfolien</span>
                                            </div>

                                            <div :class="stateIconClass(service.info_slides_count > 0)" class="flex items-center gap-1.5">
                                                <span aria-hidden="true">{{ service.info_slides_count > 0 ? '✓' : '•' }}</span>
                                                <span>{{ service.info_slides_count }} Infofolien</span>
                                            </div>

                                            <div :class="stateIconClass(Boolean(service.finalized_at))" class="flex items-center gap-1.5">
                                                <span aria-hidden="true">{{ service.finalized_at ? '✓' : '•' }}</span>
                                                <span>
                                                    Abgeschlossen am
                                                    {{ service.finalized_at ? formatDateTime(service.finalized_at) : '-' }}
                                                </span>
                                            </div>
                                        </div>
                                    </td>

                                    <td class="px-4 py-4">
                                        <div class="flex flex-col gap-2">
                                            <template v-if="service.finalized_at">
                                                <button
                                                    data-testid="service-list-reopen-button"
                                                    type="button"
                                                    class="inline-flex items-center justify-center rounded-md border border-amber-300 bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-800 transition hover:bg-amber-100"
                                                    @click="reopenService(service.id)"
                                                >
                                                    Wieder öffnen
                                                </button>
                                                <button
                                                    data-testid="service-list-download-button"
                                                    type="button"
                                                    class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:bg-gray-50"
                                                    @click="downloadService(service.id)"
                                                >
                                                    Herunterladen
                                                </button>
                                            </template>

                                            <template v-else>
                                                <button
                                                    data-testid="service-list-edit-button"
                                                    type="button"
                                                    class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:bg-gray-50"
                                                    @click="router.get(route('services.edit', service.id))"
                                                >
                                                    Bearbeiten
                                                </button>
                                                <button
                                                    data-testid="service-list-finalize-button"
                                                    type="button"
                                                    class="inline-flex items-center justify-center rounded-md border border-emerald-300 bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-800 transition hover:bg-emerald-100"
                                                    :disabled="finalizing"
                                                    @click="finalizeService(service.id)"
                                                >
                                                    Abschließen
                                                </button>
                                            </template>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- Confirmation Dialog -->
        <Teleport to="body">
            <Transition
                enter-active-class="transition duration-200 ease-out"
                enter-from-class="opacity-0"
                enter-to-class="opacity-100"
                leave-active-class="transition duration-150 ease-in"
                leave-from-class="opacity-100"
                leave-to-class="opacity-0"
            >
                <div
                    v-if="confirmDialog"
                    class="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
                    @click.self="cancelFinalize"
                >
                    <div class="w-full max-w-md rounded-xl bg-white p-6 shadow-xl">
                        <h3 class="text-lg font-semibold text-gray-900">Service abschließen?</h3>
                        <p class="mt-2 text-sm text-gray-600">
                            Es gibt noch offene Punkte. Möchtest du trotzdem abschließen?
                        </p>

                        <ul class="mt-3 space-y-1.5">
                            <li
                                v-for="(warning, idx) in confirmWarnings"
                                :key="idx"
                                class="flex items-start gap-2 text-sm text-amber-700"
                            >
                                <span class="mt-0.5 shrink-0" aria-hidden="true">⚠</span>
                                <span>{{ warning }}</span>
                            </li>
                        </ul>

                        <div class="mt-5 flex justify-end gap-3">
                            <button
                                data-testid="service-list-confirm-cancel-button"
                                type="button"
                                class="rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
                                @click="cancelFinalize"
                            >
                                Abbrechen
                            </button>
                            <button
                                data-testid="service-list-confirm-submit-button"
                                type="button"
                                class="rounded-md border border-emerald-300 bg-emerald-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-emerald-700"
                                @click="confirmFinalize"
                            >
                                Trotzdem abschließen
                            </button>
                        </div>
                    </div>
                </div>
            </Transition>
        </Teleport>
    </AuthenticatedLayout>
</template>