pp-planer/resources/js/Components/ServiceImagePanel.vue

<script setup>
import { ref } from 'vue'
import { router } 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>