feat(ui): add finalize/reopen buttons to service edit page

resources/js/Pages/Services/Edit.vue

@@ -32,6 +32,14 @@ const props = defineProps({
         type: Array,
         default: () => [],
     },
+    prevService: {
+        type: Object,
+        default: null,
+    },
+    nextService: {
+        type: Object,
+        default: null,
+    },
 })
 
 const formattedDate = computed(() => {
@@ -44,6 +52,15 @@ const formattedDate = computed(() => {
     })
 })
 
+function formatShortDate(dateStr) {
+    if (!dateStr) return ''
+    return new Date(dateStr).toLocaleDateString('de-DE', {
+        day: '2-digit',
+        month: '2-digit',
+        year: 'numeric',
+    })
+}
+
 /* ── Collapsible block state ─────────────────────────────── */
 const expandedBlocks = ref({
     information: true,
@@ -117,6 +134,160 @@ function blockBadgeLabel(key) {
     if (key === 'songs') return `${count} Song${count !== 1 ? 's' : ''}`
     return `${count} Folie${count !== 1 ? 'n' : ''}`
 }
+
+/* ── Finalize / Reopen / Download ───────────────────────── */
+const toastMessage = ref('')
+const toastType = ref('info')
+const confirmDialog = ref(false)
+const confirmWarnings = ref([])
+const finalizing = ref(false)
+const downloadAfterFinalize = ref(false)
+
+const isFinalized = computed(() => !!props.service.finalized_at)
+
+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(andDownload = false) {
+    if (andDownload) downloadAfterFinalize.value = true
+    finalizing.value = true
+    try {
+        const response = await fetch(route('services.finalize', props.service.id), {
+            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
+            confirmDialog.value = true
+            return
+        }
+
+        props.service.finalized_at = new Date().toISOString()
+        showToast(data.success, 'success')
+
+        if (downloadAfterFinalize.value) {
+            downloadAfterFinalize.value = false
+            await downloadService()
+        }
+    } finally {
+        finalizing.value = false
+    }
+}
+
+async function confirmFinalize() {
+    finalizing.value = true
+    confirmDialog.value = false
+    try {
+        const response = await fetch(route('services.finalize', props.service.id), {
+            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()
+
+        props.service.finalized_at = new Date().toISOString()
+        showToast(data.success, 'success')
+
+        if (downloadAfterFinalize.value) {
+            downloadAfterFinalize.value = false
+            await downloadService()
+        }
+    } finally {
+        finalizing.value = false
+        confirmWarnings.value = []
+    }
+}
+
+function cancelFinalize() {
+    confirmDialog.value = false
+    confirmWarnings.value = []
+    downloadAfterFinalize.value = false
+}
+
+async function reopenService() {
+    try {
+        const response = await fetch(route('services.reopen', props.service.id), {
+            method: 'POST',
+            headers: {
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
+            },
+        })
+        if (response.ok) {
+            props.service.finalized_at = null
+            showToast('Service wurde wieder geöffnet.', 'success')
+        } else {
+            showToast('Fehler beim Öffnen.', 'warning')
+        }
+    } catch {
+        showToast('Fehler beim Öffnen.', 'warning')
+    }
+}
+
+async function downloadService() {
+    try {
+        const response = await fetch(route('services.download', props.service.id), {
+            headers: {
+                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content ?? '',
+            },
+        })
+
+        if (!response.ok) {
+            const data = await response.json().catch(() => ({}))
+            showToast(data.message || 'Fehler beim Herunterladen.', 'warning')
+            return
+        }
+
+        const disposition = response.headers.get('content-disposition')
+        const filenameMatch = disposition?.match(/filename="?([^"]+)"?/)
+        const filename = filenameMatch?.[1] || 'playlist.proplaylist'
+
+        const blob = await response.blob()
+        const url = URL.createObjectURL(blob)
+        const a = document.createElement('a')
+        a.href = url
+        a.download = filename
+        a.click()
+        URL.revokeObjectURL(url)
+
+        showToast('Playlist wurde heruntergeladen.', 'success')
+    } catch {
+        showToast('Fehler beim Herunterladen.', 'warning')
+    }
+}
 </script>
 
 <template>
@@ -124,9 +295,8 @@ function blockBadgeLabel(key) {
 
     <AuthenticatedLayout>
         <template #header>
-            <div class="flex flex-wrap items-center justify-between gap-4">
-                <div class="min-w-0">
             <div class="flex items-center gap-3">
+                <!-- Back button -->
                 <button
                     data-testid="service-edit-back-icon-button"
                     type="button"
@@ -139,7 +309,26 @@ function blockBadgeLabel(key) {
                     </svg>
                 </button>
 
-                        <div class="min-w-0">
+                <div class="flex items-center gap-2">
+                    <button
+                        v-if="prevService"
+                        type="button"
+                        class="group flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs text-gray-600 shadow-sm transition hover:border-amber-300 hover:bg-amber-50"
+                        @click="router.get(route('services.edit', prevService.id))"
+                        :title="prevService.title"
+                    >
+                        <svg class="h-3.5 w-3.5 text-gray-400 transition group-hover:text-amber-500 group-hover:-translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
+                        </svg>
+                        <div class="text-left">
+                            <span class="block max-w-32 truncate leading-tight">{{ prevService.title }}</span>
+                            <span class="block text-[10px] text-gray-400 leading-tight">{{ formatShortDate(prevService.date) }}</span>
+                        </div>
+                    </button>
+                </div>
+
+                <!-- Service title -->
+                <div class="min-w-0 flex-1">
                     <h2 class="truncate text-xl font-semibold leading-tight text-gray-900">
                         {{ service.title }}
                     </h2>
@@ -151,27 +340,29 @@ function blockBadgeLabel(key) {
                         </template>
                     </p>
                 </div>
-                    </div>
-                </div>
 
                 <div class="flex items-center gap-2">
                     <button
-                        data-testid="service-edit-back-button"
+                        v-if="nextService"
                         type="button"
-                        class="inline-flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3.5 py-2 text-sm font-medium text-gray-600 shadow-sm transition-all hover:border-gray-300 hover:bg-gray-50"
+                        class="group flex items-center gap-1.5 rounded-lg border border-gray-200 bg-white px-3 py-1.5 text-xs text-gray-600 shadow-sm transition hover:border-amber-300 hover:bg-amber-50"
-                        @click="goBack"
+                        @click="router.get(route('services.edit', nextService.id))"
+                        :title="nextService.title"
                     >
-                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+                        <div class="text-right">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
+                            <span class="block max-w-32 truncate leading-tight">{{ nextService.title }}</span>
+                            <span class="block text-[10px] text-gray-400 leading-tight">{{ formatShortDate(nextService.date) }}</span>
+                        </div>
+                        <svg class="h-3.5 w-3.5 text-gray-400 transition group-hover:text-amber-500 group-hover:translate-x-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
                         </svg>
-                        Zurueck zur Uebersicht
                     </button>
                 </div>
             </div>
         </template>
 
         <div class="py-8">
-            <div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
+            <div class="mx-auto max-w-5xl px-4 pb-24 sm:px-6 lg:px-8">
                 <!-- Block accordion sections -->
                 <div class="space-y-4">
                     <div
@@ -307,5 +498,165 @@ function blockBadgeLabel(key) {
                 </div>
             </div>
         </div>
+
+        <!-- Sticky bottom action bar -->
+        <div data-testid="service-edit-action-bar" class="fixed bottom-0 left-0 right-0 z-30">
+            <div class="border-t border-gray-200 bg-white/90 backdrop-blur-xl shadow-[0_-2px_12px_rgba(0,0,0,0.08)]">
+                <div class="mx-auto flex max-w-5xl items-center justify-between gap-4 px-4 py-3.5 sm:px-6 lg:px-8">
+                    <!-- Status indicator -->
+                    <div class="flex items-center gap-2.5 text-sm">
+                        <template v-if="isFinalized">
+                            <span class="relative flex h-2.5 w-2.5">
+                                <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-40"></span>
+                                <span class="relative inline-flex h-2.5 w-2.5 rounded-full bg-emerald-500"></span>
+                            </span>
+                            <span class="font-semibold text-emerald-700">Abgeschlossen</span>
+                            <span class="text-xs text-gray-400">{{ formatDateTime(service.finalized_at) }}</span>
+                        </template>
+                        <template v-else>
+                            <span class="inline-flex h-2.5 w-2.5 rounded-full bg-amber-400"></span>
+                            <span class="font-semibold text-amber-700">In Bearbeitung</span>
+                        </template>
+                    </div>
+
+                    <!-- Action buttons -->
+                    <div class="flex items-center gap-2.5">
+                        <template v-if="isFinalized">
+                            <button
+                                data-testid="service-edit-reopen-button"
+                                type="button"
+                                class="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:border-amber-300 hover:bg-amber-50 hover:text-amber-700"
+                                @click="reopenService"
+                            >
+                                <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="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0l3.181 3.183a8.25 8.25 0 0013.803-3.7M4.031 9.865a8.25 8.25 0 0113.803-3.7l3.181 3.182" />
+                                </svg>
+                                Wieder öffnen
+                            </button>
+                            <button
+                                data-testid="service-edit-download-button"
+                                type="button"
+                                class="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700"
+                                @click="downloadService"
+                            >
+                                <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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                                </svg>
+                                Herunterladen
+                            </button>
+                        </template>
+                        <template v-else>
+                            <button
+                                data-testid="service-edit-finalize-button"
+                                type="button"
+                                class="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
+                                :disabled="finalizing"
+                                @click="finalizeService(false)"
+                            >
+                                <svg v-if="finalizing" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                                </svg>
+                                <svg v-else 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="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                                </svg>
+                                Abschließen
+                            </button>
+                            <button
+                                data-testid="service-edit-finalize-download-button"
+                                type="button"
+                                class="inline-flex items-center gap-1.5 rounded-lg border border-emerald-200 bg-emerald-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition hover:bg-emerald-700 disabled:cursor-not-allowed disabled:opacity-50"
+                                :disabled="finalizing"
+                                @click="finalizeService(true)"
+                            >
+                                <svg v-if="finalizing" class="h-4 w-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                                </svg>
+                                <svg v-else 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="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                                </svg>
+                                Abschließen &amp; Herunterladen
+                            </button>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Toast notification -->
+        <Teleport to="body">
+            <Transition
+                enter-active-class="transition duration-300 ease-out"
+                enter-from-class="translate-y-2 opacity-0"
+                enter-to-class="translate-y-0 opacity-100"
+                leave-active-class="transition duration-200 ease-in"
+                leave-from-class="translate-y-0 opacity-100"
+                leave-to-class="translate-y-2 opacity-0"
+            >
+                <div
+                    v-if="toastMessage"
+                    class="fixed bottom-20 left-1/2 z-50 -translate-x-1/2 rounded-lg border px-5 py-3 text-sm font-medium shadow-lg"
+                    :class="toastClasses()"
+                >
+                    {{ toastMessage }}
+                </div>
+            </Transition>
+        </Teleport>
+
+        <!-- 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-edit-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-edit-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>