663 lines
31 KiB
Vue
663 lines
31 KiB
Vue
<script setup>
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
|
import { Head, router } from '@inertiajs/vue3'
|
|
import { ref, computed } from 'vue'
|
|
import InformationBlock from '@/Components/Blocks/InformationBlock.vue'
|
|
import ModerationBlock from '@/Components/Blocks/ModerationBlock.vue'
|
|
import SongsBlock from '@/Components/Blocks/SongsBlock.vue'
|
|
import SermonBlock from '@/Components/Blocks/SermonBlock.vue'
|
|
|
|
const props = defineProps({
|
|
service: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
serviceSongs: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
informationSlides: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
moderationSlides: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
sermonSlides: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
songsCatalog: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
prevService: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
nextService: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
})
|
|
|
|
const formattedDate = computed(() => {
|
|
if (!props.service.date) return ''
|
|
return new Date(props.service.date).toLocaleDateString('de-DE', {
|
|
weekday: 'long',
|
|
day: '2-digit',
|
|
month: 'long',
|
|
year: 'numeric',
|
|
})
|
|
})
|
|
|
|
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,
|
|
moderation: true,
|
|
sermon: true,
|
|
songs: true,
|
|
})
|
|
|
|
function toggleBlock(key) {
|
|
expandedBlocks.value[key] = !expandedBlocks.value[key]
|
|
}
|
|
|
|
function goBack() {
|
|
router.get(route('services.index'))
|
|
}
|
|
|
|
function refreshPage() {
|
|
router.reload({ preserveScroll: true })
|
|
}
|
|
|
|
/* ── Block definitions ───────────────────────────────────── */
|
|
const blocks = [
|
|
{
|
|
key: 'information',
|
|
label: 'Information',
|
|
description: 'Info-Folien fuer alle kommenden Services',
|
|
icon: 'info',
|
|
accentFrom: 'from-sky-400',
|
|
accentTo: 'to-blue-500',
|
|
badgeColor: 'bg-sky-100 text-sky-700',
|
|
},
|
|
{
|
|
key: 'moderation',
|
|
label: 'Moderation',
|
|
description: 'Moderationsfolien fuer diesen Service',
|
|
icon: 'moderation',
|
|
accentFrom: 'from-violet-400',
|
|
accentTo: 'to-purple-500',
|
|
badgeColor: 'bg-violet-100 text-violet-700',
|
|
},
|
|
{
|
|
key: 'sermon',
|
|
label: 'Predigt',
|
|
description: 'Predigtfolien fuer diesen Service',
|
|
icon: 'sermon',
|
|
accentFrom: 'from-amber-400',
|
|
accentTo: 'to-orange-500',
|
|
badgeColor: 'bg-amber-100 text-amber-700',
|
|
},
|
|
{
|
|
key: 'songs',
|
|
label: 'Songs',
|
|
description: 'Songs und Arrangements verwalten',
|
|
icon: 'songs',
|
|
accentFrom: 'from-emerald-400',
|
|
accentTo: 'to-teal-500',
|
|
badgeColor: 'bg-emerald-100 text-emerald-700',
|
|
},
|
|
]
|
|
|
|
function blockSlideCount(key) {
|
|
if (key === 'information') return props.informationSlides.length
|
|
if (key === 'moderation') return props.moderationSlides.length
|
|
if (key === 'sermon') return props.sermonSlides.length
|
|
if (key === 'songs') return props.serviceSongs.length
|
|
return 0
|
|
}
|
|
|
|
function blockBadgeLabel(key) {
|
|
const count = blockSlideCount(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>
|
|
<Head :title="`${service.title} bearbeiten`" />
|
|
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<div class="flex items-center gap-3">
|
|
<!-- Back button -->
|
|
<button
|
|
data-testid="service-edit-back-icon-button"
|
|
type="button"
|
|
class="group flex h-8 w-8 shrink-0 items-center justify-center rounded-lg border border-gray-200 bg-white text-gray-400 shadow-sm transition-all hover:border-amber-300 hover:bg-amber-50 hover:text-amber-600"
|
|
@click="goBack"
|
|
title="Zurueck zur Uebersicht"
|
|
>
|
|
<svg class="h-4 w-4 transition-transform 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="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
|
|
</svg>
|
|
</button>
|
|
|
|
<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>
|
|
<p class="mt-0.5 text-sm text-gray-500">
|
|
{{ formattedDate }}
|
|
<template v-if="service.preacher_name">
|
|
<span class="mx-1.5 text-gray-300">·</span>
|
|
<span>{{ service.preacher_name }}</span>
|
|
</template>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2">
|
|
<button
|
|
v-if="nextService"
|
|
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', nextService.id))"
|
|
:title="nextService.title"
|
|
>
|
|
<div class="text-right">
|
|
<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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="py-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
|
|
v-for="block in blocks"
|
|
:key="block.key"
|
|
class="overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm transition-shadow hover:shadow-md"
|
|
>
|
|
<!-- Block header (clickable) -->
|
|
<button
|
|
data-testid="service-edit-block-toggle"
|
|
type="button"
|
|
class="flex w-full items-center gap-4 px-5 py-4 text-left transition-colors hover:bg-gray-50/60"
|
|
@click="toggleBlock(block.key)"
|
|
>
|
|
<!-- Accent icon -->
|
|
<div
|
|
class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br shadow-sm"
|
|
:class="[block.accentFrom, block.accentTo]"
|
|
>
|
|
<!-- Information icon -->
|
|
<svg v-if="block.icon === 'info'" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<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>
|
|
<!-- Moderation icon -->
|
|
<svg v-else-if="block.icon === 'moderation'" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 18.75a6 6 0 006-6v-1.5m-6 7.5a6 6 0 01-6-6v-1.5m6 7.5v3.75m-3.75 0h7.5M12 15.75a3 3 0 01-3-3V4.5a3 3 0 116 0v8.25a3 3 0 01-3 3z" />
|
|
</svg>
|
|
<!-- Sermon icon -->
|
|
<svg v-else-if="block.icon === 'sermon'" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25" />
|
|
</svg>
|
|
<!-- Songs icon -->
|
|
<svg v-else-if="block.icon === 'songs'" class="h-5 w-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M9 9l10.5-3m0 6.553v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 11-.99-3.467l2.31-.66a2.25 2.25 0 001.632-2.163zm0 0V2.25L9 5.25v10.303m0 0v3.75a2.25 2.25 0 01-1.632 2.163l-1.32.377a1.803 1.803 0 01-.99-3.467l2.31-.66A2.25 2.25 0 009 15.553z" />
|
|
</svg>
|
|
</div>
|
|
|
|
<!-- Label + description -->
|
|
<div class="min-w-0 flex-1">
|
|
<div class="flex items-center gap-2.5">
|
|
<h3 class="text-[15px] font-semibold text-gray-900">
|
|
{{ block.label }}
|
|
</h3>
|
|
<span
|
|
class="inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium"
|
|
:class="block.badgeColor"
|
|
>
|
|
{{ blockBadgeLabel(block.key) }}
|
|
</span>
|
|
</div>
|
|
<p class="mt-0.5 text-xs text-gray-500">
|
|
{{ block.description }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Chevron -->
|
|
<svg
|
|
class="h-5 w-5 shrink-0 text-gray-400 transition-transform duration-200"
|
|
:class="{ 'rotate-180': expandedBlocks[block.key] }"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5" />
|
|
</svg>
|
|
</button>
|
|
|
|
<!-- Block content (collapsible) -->
|
|
<Transition
|
|
enter-active-class="transition-all duration-200 ease-out"
|
|
enter-from-class="max-h-0 opacity-0"
|
|
enter-to-class="max-h-[2000px] opacity-100"
|
|
leave-active-class="transition-all duration-150 ease-in"
|
|
leave-from-class="max-h-[2000px] opacity-100"
|
|
leave-to-class="max-h-0 opacity-0"
|
|
>
|
|
<div v-show="expandedBlocks[block.key]" class="overflow-hidden">
|
|
<div class="border-t border-gray-100 px-5 py-6">
|
|
<InformationBlock
|
|
v-if="block.key === 'information'"
|
|
:service-id="service.id"
|
|
:service-date="service.date"
|
|
:slides="informationSlides"
|
|
@slides-updated="refreshPage"
|
|
/>
|
|
|
|
<ModerationBlock
|
|
v-else-if="block.key === 'moderation'"
|
|
:service-id="service.id"
|
|
:slides="moderationSlides"
|
|
@slides-updated="refreshPage"
|
|
/>
|
|
|
|
<SermonBlock
|
|
v-else-if="block.key === 'sermon'"
|
|
:service-id="service.id"
|
|
:slides="sermonSlides"
|
|
@slides-updated="refreshPage"
|
|
/>
|
|
|
|
<SongsBlock
|
|
v-else-if="block.key === 'songs'"
|
|
:service-songs="serviceSongs"
|
|
:songs-catalog="songsCatalog"
|
|
/>
|
|
|
|
<div
|
|
v-else
|
|
class="flex items-center justify-center rounded-lg border-2 border-dashed border-gray-200 bg-gray-50/50 py-12"
|
|
>
|
|
<div class="text-center">
|
|
<div
|
|
class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gradient-to-br opacity-20"
|
|
:class="[block.accentFrom, block.accentTo]"
|
|
>
|
|
<svg class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
</div>
|
|
<p class="mt-3 text-sm font-medium text-gray-400">
|
|
{{ block.label }}-Block wird hier angezeigt
|
|
</p>
|
|
<p class="mt-1 text-xs text-gray-300">
|
|
Platzhalter — Komponente folgt
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</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 & 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>
|