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, 'has_translation' => $song->has_translation,
'groups' => $groups, 'groups' => $groups,
], ],
'prefilledTranslation' => session()->pull('ccli_prefilled'),
]); ]);
} }

View file

@ -1,21 +1,34 @@
<script setup> <script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue' import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
import { Head, router } from '@inertiajs/vue3' import { Head, router } from '@inertiajs/vue3'
import { computed, ref } from 'vue' import { computed, onMounted, ref } from 'vue'
const props = defineProps({ const props = defineProps({
song: { song: {
type: Object, type: Object,
required: true, required: true,
}, },
prefilledTranslation: {
type: String,
default: null,
},
}) })
const sourceUrl = ref('') const sourceUrl = ref('')
const sourceText = ref('') const sourceText = ref(props.prefilledTranslation ?? '')
const isFetching = ref(false) const isFetching = ref(false)
const isSaving = ref(false) const isSaving = ref(false)
const infoMessage = ref('') const infoMessage = ref('')
const errorMessage = 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( const groups = ref(
(props.song.groups ?? []).map((group) => ({ (props.song.groups ?? []).map((group) => ({
@ -173,6 +186,24 @@ function rowsForSlide(slide) {
<div class="py-8"> <div class="py-8">
<div class="mx-auto max-w-6xl space-y-6 px-4 sm:px-6 lg:px-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"> <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> <h3 class="text-base font-semibold text-gray-900">Uebersetzungstext laden</h3>
<p class="mt-1 text-sm text-gray-500"> <p class="mt-1 text-sm text-gray-500">