feat(ui): keyvisual/background panels
This commit is contained in:
Thorsten Bus
parent
edceebb2f8
commit
f948b5665c
|
|
@ -265,6 +265,10 @@ public function edit(Service $service): Response
|
|||
'finalized_at' => $service->finalized_at?->toJSON(),
|
||||
'last_synced_at' => $service->last_synced_at?->toJSON(),
|
||||
'has_agenda' => $service->has_agenda,
|
||||
'key_visual_filename' => $service->key_visual_filename,
|
||||
'background_filename' => $service->background_filename,
|
||||
'key_visual_url' => $service->key_visual_filename ? '/storage/'.$service->key_visual_filename : null,
|
||||
'background_url' => $service->background_filename ? '/storage/'.$service->background_filename : null,
|
||||
],
|
||||
'serviceSongs' => $service->serviceSongs->map(fn ($ss) => [
|
||||
'id' => $ss->id,
|
||||
|
|
|
|||
142
resources/js/Components/ServiceImagePanel.vue
Normal file
142
resources/js/Components/ServiceImagePanel.vue
Normal file
|
|
@ -0,0 +1,142 @@
|
|||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { router, usePage } from '@inertiajs/vue3'
|
||||
|
||||
const props = defineProps({
|
||||
label: { type: String, required: true },
|
||||
currentUrl: { type: String, default: null },
|
||||
uploadRoute: { type: String, required: true },
|
||||
serviceId: { type: Number, required: true },
|
||||
sourceName: { type: String, default: null },
|
||||
testid: { type: String, default: null },
|
||||
})
|
||||
|
||||
const showScopeDialog = ref(false)
|
||||
const selectedFile = ref(null)
|
||||
const uploading = ref(false)
|
||||
const error = ref(null)
|
||||
const fileInput = ref(null)
|
||||
|
||||
function onFileChange(e) {
|
||||
const file = e.target.files[0]
|
||||
if (!file) return
|
||||
selectedFile.value = file
|
||||
showScopeDialog.value = true
|
||||
}
|
||||
|
||||
function cancelDialog() {
|
||||
showScopeDialog.value = false
|
||||
selectedFile.value = null
|
||||
if (fileInput.value) fileInput.value.value = ''
|
||||
}
|
||||
|
||||
async function uploadWithScope(scope) {
|
||||
if (!selectedFile.value) return
|
||||
uploading.value = true
|
||||
showScopeDialog.value = false
|
||||
error.value = null
|
||||
const formData = new FormData()
|
||||
formData.append('file', selectedFile.value)
|
||||
formData.append('scope', scope)
|
||||
const xsrfCookie = document.cookie.split('; ').find(r => r.startsWith('XSRF-TOKEN='))
|
||||
const xsrfToken = xsrfCookie ? decodeURIComponent(xsrfCookie.split('=')[1]) : ''
|
||||
try {
|
||||
const url = route(props.uploadRoute, { service: props.serviceId })
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
headers: { 'X-XSRF-TOKEN': xsrfToken },
|
||||
body: formData,
|
||||
})
|
||||
if (response.ok || response.status === 302) {
|
||||
router.reload({ preserveScroll: true })
|
||||
} else {
|
||||
const data = await response.json().catch(() => ({}))
|
||||
error.value = data.message || 'Upload fehlgeschlagen.'
|
||||
}
|
||||
} catch {
|
||||
error.value = 'Upload fehlgeschlagen.'
|
||||
} finally {
|
||||
uploading.value = false
|
||||
selectedFile.value = null
|
||||
if (fileInput.value) fileInput.value.value = ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="rounded-lg border border-gray-200 bg-white p-4 shadow-sm" :data-testid="testid">
|
||||
<div class="mb-2 flex items-center justify-between">
|
||||
<h3 class="text-sm font-semibold text-gray-700">{{ label }}</h3>
|
||||
<span v-if="sourceName" class="text-xs text-gray-400">{{ sourceName }}</span>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<img
|
||||
v-if="currentUrl"
|
||||
:src="currentUrl"
|
||||
class="h-24 w-full rounded object-cover"
|
||||
:data-testid="testid ? testid + '-thumb' : undefined"
|
||||
:alt="label"
|
||||
/>
|
||||
<div v-else class="flex h-24 w-full items-center justify-center rounded bg-gray-100 text-gray-400">
|
||||
<span class="text-sm">Kein Bild hinterlegt</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p v-if="error" class="mb-2 text-xs text-red-600">{{ error }}</p>
|
||||
|
||||
<label class="cursor-pointer">
|
||||
<span
|
||||
class="inline-flex items-center rounded bg-blue-600 px-3 py-1.5 text-xs font-medium text-white hover:bg-blue-700"
|
||||
:class="{ 'cursor-not-allowed opacity-50': uploading }"
|
||||
>
|
||||
{{ uploading ? 'Lädt hoch…' : currentUrl ? 'Ersetzen' : 'Hochladen' }}
|
||||
</span>
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
accept="image/png,image/jpeg,image/jpg"
|
||||
class="hidden"
|
||||
:disabled="uploading"
|
||||
:data-testid="testid ? testid + '-upload-input' : undefined"
|
||||
@change="onFileChange"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<!-- Scope dialog -->
|
||||
<div
|
||||
v-if="showScopeDialog"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
|
||||
data-testid="scope-dialog"
|
||||
>
|
||||
<div class="mx-4 w-full max-w-sm rounded-lg bg-white p-6 shadow-xl">
|
||||
<h4 class="mb-3 text-base font-semibold text-gray-900">Geltungsbereich wählen</h4>
|
||||
<p class="mb-4 text-sm text-gray-600">
|
||||
Soll dieses Bild nur für diesen Service gelten oder als Standard für alle zukünftigen Services gesetzt werden?
|
||||
</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<button
|
||||
class="rounded bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700"
|
||||
data-testid="scope-service"
|
||||
@click="uploadWithScope('service')"
|
||||
>
|
||||
Nur für diesen Service
|
||||
</button>
|
||||
<button
|
||||
class="rounded border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50"
|
||||
data-testid="scope-default"
|
||||
@click="uploadWithScope('default')"
|
||||
>
|
||||
Als Standard setzen (gilt bis zum nächsten Upload)
|
||||
</button>
|
||||
<button
|
||||
class="mt-1 text-xs text-gray-400 hover:text-gray-600"
|
||||
@click="cancelDialog"
|
||||
>
|
||||
Abbrechen
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -1,6 +1,8 @@
|
|||
<script setup>
|
||||
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
||||
import { Head, router } from '@inertiajs/vue3'
|
||||
import { Head, router, usePage } from '@inertiajs/vue3'
|
||||
|
||||
const $page = usePage()
|
||||
import { ref, computed } from 'vue'
|
||||
import InformationBlock from '@/Components/Blocks/InformationBlock.vue'
|
||||
import AgendaItemRow from '@/Components/AgendaItemRow.vue'
|
||||
|
|
@ -8,6 +10,7 @@ import SongAgendaItem from '@/Components/SongAgendaItem.vue'
|
|||
import ArrangementDialog from '@/Components/ArrangementDialog.vue'
|
||||
import MacroIcon from '@/Components/MacroIcon.vue'
|
||||
import ServicePartMacroPanel from '@/Components/ServicePartMacroPanel.vue'
|
||||
import ServiceImagePanel from '@/Components/ServiceImagePanel.vue'
|
||||
|
||||
const props = defineProps({
|
||||
service: {
|
||||
|
|
@ -379,6 +382,30 @@ async function downloadService() {
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<!-- Keyvisual & Hintergrundbild -->
|
||||
<div class="py-4">
|
||||
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<ServiceImagePanel
|
||||
label="Keyvisual"
|
||||
:current-url="service.key_visual_url"
|
||||
upload-route="services.key-visual.store"
|
||||
:service-id="service.id"
|
||||
:source-name="service.key_visual_filename ? 'Eigenes Bild' : ($page.props.currentKeyVisual ? 'Standard' : null)"
|
||||
testid="keyvisual-panel"
|
||||
/>
|
||||
<ServiceImagePanel
|
||||
label="Hintergrundbild"
|
||||
:current-url="service.background_url"
|
||||
upload-route="services.background.store"
|
||||
:service-id="service.id"
|
||||
:source-name="service.background_filename ? 'Eigenes Bild' : ($page.props.currentBackground ? 'Standard' : null)"
|
||||
testid="background-panel"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Ablauf (Agenda) -->
|
||||
<div class="py-6">
|
||||
<div class="mx-auto max-w-4xl px-4 sm:px-6 lg:px-8">
|
||||
|
|
|
|||
Loading…
Reference in a new issue