public/pp-planer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Thorsten Bus 2026-03-02 21:28:32 +01:00
parent 6543133713
commit 44d0daf246
1 changed files with 384 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

375
resources/js/Pages/Services/Edit.vue
View file

@ -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"
@click="goBack"
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"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 15L3 9m0 0l6-6M3 9h12a6 6 0 010 12h-3" />
<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>
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>