public/pp-planer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ui): add agenda settings to Settings page

Browse source
This commit is contained in:
Thorsten Bus 2026-03-29 12:10:46 +02:00
parent e9901a6f9b
commit d2eef5abe2
1 changed files with 80 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
resources/js/Pages/Settings.vue
View file

@ -11,10 +11,16 @@ const props = defineProps({
})
const fields = [
{ key: 'macro_name', label: 'Makro-Name', placeholder: 'z.B. Copyright Makro' },
{ key: 'macro_uuid', label: 'Makro-UUID', placeholder: 'z.B. 11111111-2222-3333-4444-555555555555' },
{ key: 'macro_collection_name', label: 'Collection-Name', defaultValue: '--MAIN--' },
{ key: 'macro_collection_uuid', label: 'Collection-UUID', defaultValue: '8D02FC57-83F8-4042-9B90-81C229728426' },
// Macro configuration fields
{ key: 'macro_name', label: 'Makro-Name', placeholder: 'z.B. Copyright Makro', section: 'macro' },
{ key: 'macro_uuid', label: 'Makro-UUID', placeholder: 'z.B. 11111111-2222-3333-4444-555555555555', section: 'macro' },
{ key: 'macro_collection_name', label: 'Collection-Name', defaultValue: '--MAIN--', section: 'macro' },
{ key: 'macro_collection_uuid', label: 'Collection-UUID', defaultValue: '8D02FC57-83F8-4042-9B90-81C229728426', section: 'macro' },
// Agenda configuration fields
{ key: 'agenda_start_title', label: 'Ablauf-Start', placeholder: 'z.B. Ablauf* oder Beginn*', section: 'agenda' },
{ key: 'agenda_end_title', label: 'Ablauf-Ende', placeholder: 'z.B. Ende* oder Schluss*', section: 'agenda' },
{ key: 'agenda_announcement_position', label: 'Ankündigungen-Position', placeholder: 'z.B. Informationen*,Hinweise*', helpText: 'Komma-getrennte Liste. Das erste passende Element im Ablauf bestimmt, wo die Ankündigungsfolien eingefügt werden. * als Platzhalter.', section: 'agenda' },
{ key: 'agenda_sermon_matching', label: 'Predigt-Erkennung', placeholder: 'z.B. Predigt*,Sermon*', helpText: 'Komma-getrennte Liste. Erkannte Elemente bekommen einen Predigt-Upload-Bereich. * als Platzhalter.', section: 'agenda' },
]
const form = reactive({})
@ -86,7 +92,7 @@ async function saveField(key) {
<div class="divide-y divide-gray-100 px-6">
<div
v-for="field in fields"
v-for="field in fields.filter(f => f.section === 'macro')"
:key="field.key"
class="py-5"
>
@ -149,6 +155,75 @@ async function saveField(key) {
</div>
</div>
</div>
<div class="overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm mt-6">
<div class="border-b border-gray-100 bg-gray-50/50 px-6 py-4">
<h3 class="text-sm font-semibold text-gray-900">Agenda-Konfiguration</h3>
<p class="mt-1 text-xs text-gray-500">Diese Einstellungen steuern, wie der Gottesdienst-Ablauf angezeigt und exportiert wird.</p>
</div>
<div class="divide-y divide-gray-100 px-6">
<div v-for="field in fields.filter(f => f.section === 'agenda')" :key="field.key" class="py-5">
<label
:for="'setting-' + field.key"
class="block text-sm font-medium text-gray-700"
>
{{ field.label }}
</label>
<div class="relative mt-1.5">
<input
:id="'setting-' + field.key"
:data-testid="'setting-' + field.key"
v-model="form[field.key]"
type="text"
:placeholder="field.placeholder || field.defaultValue || ''"
class="block w-full rounded-lg border-gray-300 text-sm shadow-sm transition-colors focus:border-amber-400 focus:ring-amber-400/40"
:class="{
'border-red-300 focus:border-red-400 focus:ring-red-400/40': errors[field.key],
'border-emerald-300': saved[field.key],
}"
@blur="saveField(field.key)"
/>
<div
v-if="saving[field.key]"
class="absolute inset-y-0 right-0 flex items-center pr-3"
>
<svg class="h-4 w-4 animate-spin text-gray-400" fill="none" viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
</svg>
</div>
<div
v-else-if="saved[field.key]"
class="absolute inset-y-0 right-0 flex items-center pr-3"
>
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</div>
</div>
<p
v-if="errors[field.key]"
class="mt-1.5 text-xs text-red-600"
:data-testid="'error-' + field.key"
>
{{ errors[field.key] }}
</p>
<p v-if="field.helpText" class="mt-1.5 text-xs text-gray-400">{{ field.helpText }}</p>
<p
v-if="field.defaultValue"
class="mt-1.5 text-xs text-gray-400"
>
Standard: {{ field.defaultValue }}
</p>
</div>
</div>
</div>
</div>
</div>
</AuthenticatedLayout>