feat(translate): accept prefilled translation from CCLI pairing

This commit is contained in:
Thorsten Bus 2026-05-11 10:29:52 +02:00
parent b0320fbef5
commit d77eb6ad1e
2 changed files with 34 additions and 2 deletions

View file

@ -57,6 +57,7 @@ public function page(Song $song): Response
'has_translation' => $song->has_translation,
'groups' => $groups,
],
'prefilledTranslation' => session()->pull('ccli_prefilled'),
]);
}

View file

@ -1,21 +1,34 @@
<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, router } from '@inertiajs/vue3'
import { computed, ref } from 'vue'
import { computed, onMounted, ref } from 'vue'
const props = defineProps({
song: {
type: Object,
required: true,
},
prefilledTranslation: {
type: String,
default: null,
},
})
const sourceUrl = ref('')
const sourceText = ref('')
const sourceText = ref(props.prefilledTranslation ?? '')
const isFetching = ref(false)
const isSaving = ref(false)
const infoMessage = ref('')
const errorMessage = ref('')
const showPrefillBanner = ref(props.prefilledTranslation !== null)
// Auto-distribute prefilled translation on mount
onMounted(() => {
if (props.prefilledTranslation) {
distributeTextToSlides(props.prefilledTranslation)
infoMessage.value = 'Vorausgefüllt aus CCLI — bitte überprüfen und speichern.'
}
})
const groups = ref(
(props.song.groups ?? []).map((group) => ({
@ -173,6 +186,24 @@ function rowsForSlide(slide) {
<div class="py-8">
<div class="mx-auto max-w-6xl space-y-6 px-4 sm:px-6 lg:px-8">
<!-- CCLI Prefill Banner -->
<div
v-if="showPrefillBanner"
data-testid="ccli-prefill-banner"
class="flex items-center justify-between rounded-lg border border-blue-200 bg-blue-50 px-4 py-3 text-sm text-blue-800"
>
<span>Vorausgefüllt aus CCLI bitte überprüfen und speichern.</span>
<button
data-testid="ccli-prefill-discard-button"
type="button"
@click="showPrefillBanner = false; sourceText = ''; groups.forEach(g => g.slides.forEach(s => s.translated_text = ''))"
class="ml-4 text-blue-600 underline hover:text-blue-800"
>
Verwerfen
</button>
</div>
<section class="rounded-xl border border-gray-200 bg-white p-5 shadow-sm">
<h3 class="text-base font-semibold text-gray-900">Uebersetzungstext laden</h3>
<p class="mt-1 text-sm text-gray-500">