pp-planer/resources/js/Pages/Settings/MacroImport.vue

<script setup>
import { computed, ref } from 'vue'
import { route } from 'ziggy-js'

const props = defineProps({
    macros: { type: Array, default: () => [] },
    collections: { type: Array, default: () => [] },
    last_macros_import: { type: Object, default: () => ({}) },
})

const emit = defineEmits(['switch-submenu'])

const uploading = ref(false)
const result = ref(null)
const error = ref(null)
const selectedCollection = ref(null)

const filteredMacros = computed(() => {
    if (!selectedCollection.value) return props.macros
    const coll = props.collections.find((c) => c.id === selectedCollection.value)
    if (!coll) return props.macros
    const ids = coll.macros?.map((m) => m.id) ?? []
    return props.macros.filter((m) => ids.includes(m.id))
})

async function handleFileChange(event) {
    const file = event.target.files[0]
    if (!file) return
    uploading.value = true
    error.value = null
    result.value = null

    const form = new FormData()
    form.append('file', file)

    try {
        const res = await fetch(route('settings.macros.import'), {
            method: 'POST',
            headers: {
                'X-Requested-With': 'XMLHttpRequest',
                'X-XSRF-TOKEN': decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? ''),
            },
            body: form,
        })
        if (!res.ok) {
            const data = await res.json()
            error.value = data.message || 'Import fehlgeschlagen'
            return
        }
        result.value = await res.json()
        event.target.value = ''
        window.location.reload()
    } catch {
        error.value = 'Netzwerkfehler beim Upload'
    } finally {
        uploading.value = false
    }
}
</script>

<template>
    <div>
        <h3 class="mb-1 text-sm font-semibold text-gray-900">Makro-Import</h3>

        <p class="mb-1 text-xs text-gray-500">
            Diese Datei findest du im ProPresenter-Ordner unter <strong>Configuration</strong>.
            <span class="group relative inline-block">
                <svg
                    class="ml-1 inline h-3.5 w-3.5 cursor-help text-gray-400"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                    stroke-width="2"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span class="absolute bottom-full left-0 z-10 mb-2 hidden w-72 rounded-lg border border-gray-200 bg-white p-3 text-xs text-gray-600 shadow-lg group-hover:block">
                    <strong>macOS:</strong> ~/Library/Application Support/RenewedVision/ProPresenter/Configuration/Macros<br><br>
                    <strong>Windows:</strong> %APPDATA%\RenewedVision\ProPresenter\Configuration\Macros
                </span>
            </span>
        </p>

        <div v-if="last_macros_import?.at" class="mb-4 text-xs text-gray-400">
            Letzter Import: {{ last_macros_import.at }}
            <span v-if="last_macros_import.filename">({{ last_macros_import.filename }})</span>
        </div>

        <label
            class="mb-4 flex cursor-pointer flex-col items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50 p-6 transition-colors hover:border-amber-300 hover:bg-amber-50"
            data-testid="macros-upload-area"
        >
            <svg class="mb-2 h-8 w-8 text-gray-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
                <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.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
            </svg>
            <span class="text-sm text-gray-500">
                {{ uploading ? 'Wird importiert...' : 'Makro-Datei auswählen oder hierher ziehen' }}
            </span>
            <input
                type="file"
                class="hidden"
                :disabled="uploading"
                data-testid="macros-file-input"
                @change="handleFileChange"
            />
        </label>

        <div
            v-if="error"
            class="mb-4 rounded-lg bg-red-50 p-3 text-sm text-red-700"
            data-testid="macros-import-error"
        >
            {{ error }}
        </div>

        <div
            v-if="result"
            class="mb-4 space-y-1 rounded-lg bg-green-50 p-3 text-sm text-green-700"
            data-testid="macros-import-summary"
        >
            <p><strong>Import abgeschlossen:</strong></p>
            <p>{{ result.stats.new }} neue Makros importiert</p>
            <p>{{ result.stats.updated }} bestehende Makros aktualisiert</p>
            <p>{{ result.stats.disabled }} Makros deaktiviert (nicht mehr in Datei vorhanden)</p>
            <p v-if="result.stats.re_enabled > 0">{{ result.stats.re_enabled }} Makros wieder aktiviert</p>
        </div>

        <div
            v-if="result?.warnings?.length > 0"
            class="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-800"
            data-testid="macros-import-warnings"
        >
            <p class="mb-2 font-semibold">⚠ Achtung: Folgende deaktivierte Makros sind noch zugewiesen:</p>
            <ul class="space-y-1 text-xs">
                <li v-for="w in result.warnings" :key="w.macro_uuid">
                    {{ w.macro_name }} (Bereich: {{ w.part_type }})
                </li>
            </ul>
            <button
                class="mt-2 text-xs text-amber-700 underline"
                @click="emit('switch-submenu', 'assignments')"
            >
                Zu den Makro-Zuweisungen →
            </button>
        </div>

        <div v-if="macros.length > 0">
            <div class="mb-2 flex items-center gap-2">
                <h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
                    Makro-Bibliothek ({{ macros.length }})
                </h4>
                <select
                    v-model="selectedCollection"
                    class="ml-auto rounded border-gray-300 text-xs"
                    data-testid="macros-collection-filter"
                >
                    <option :value="null">Alle Sammlungen</option>
                    <option v-for="c in collections" :key="c.id" :value="c.id">{{ c.name }}</option>
                </select>
            </div>
            <div class="divide-y divide-gray-100 rounded-lg border border-gray-100">
                <div
                    v-for="macro in filteredMacros"
                    :key="macro.id"
                    class="flex items-center gap-3 px-3 py-2 text-sm"
                    :class="macro.hidden_at ? 'opacity-50' : ''"
                >
                    <span
                        class="h-4 w-4 shrink-0 rounded border border-gray-200"
                        :style="macro.color ? { backgroundColor: macro.color } : { backgroundColor: '#e5e7eb' }"
                    />
                    <span class="flex-1 text-gray-700">
                        {{ macro.name }}{{ macro.hidden_at ? ' (deaktiviert)' : '' }}
                    </span>
                    <span class="text-xs text-gray-400">{{ macro.action_count }} Aktionen</span>
                </div>
            </div>
        </div>
        <p v-else class="text-sm text-gray-400">Noch keine Makros importiert.</p>
    </div>
</template>