feat(settings): restructure Settings.vue into sidebar layout with 4 submenus + AgendaSettings.vue
This commit is contained in:
Thorsten Bus
parent
6ce5b6e018
commit
c1cb9bf820
|
|
@ -1,70 +1,38 @@
|
||||||
<script setup>
|
<script setup>
|
||||||
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
||||||
|
import AgendaSettings from './Settings/AgendaSettings.vue'
|
||||||
import { Head } from '@inertiajs/vue3'
|
import { Head } from '@inertiajs/vue3'
|
||||||
import { ref, reactive } from 'vue'
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
settings: {
|
settings: { type: Object, default: () => ({}) },
|
||||||
type: Object,
|
assignments: { type: Array, default: () => [] },
|
||||||
default: () => ({}),
|
macros: { type: Array, default: () => [] },
|
||||||
},
|
labels: { type: Array, default: () => [] },
|
||||||
|
collections: { type: Array, default: () => [] },
|
||||||
|
last_macros_import: { type: Object, default: () => ({}) },
|
||||||
|
last_labels_import: { type: Object, default: () => ({}) },
|
||||||
})
|
})
|
||||||
|
|
||||||
const fields = [
|
const submenus = [
|
||||||
// Macro configuration fields
|
{ key: 'assignments', label: 'Makro-Zuweisungen' },
|
||||||
{ key: 'macro_name', label: 'Makro-Name', placeholder: 'z.B. Copyright Makro', section: 'macro' },
|
{ key: 'macros', label: 'Makro-Import' },
|
||||||
{ key: 'macro_uuid', label: 'Makro-UUID', placeholder: 'z.B. 11111111-2222-3333-4444-555555555555', section: 'macro' },
|
{ key: 'labels', label: 'Label-Import' },
|
||||||
{ key: 'macro_collection_name', label: 'Collection-Name', defaultValue: '--MAIN--', section: 'macro' },
|
{ key: 'agenda', label: 'Agenda' },
|
||||||
{ 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({})
|
const activeSubmenu = ref('assignments')
|
||||||
for (const field of fields) {
|
|
||||||
form[field.key] = props.settings[field.key] ?? field.defaultValue ?? ''
|
|
||||||
}
|
|
||||||
|
|
||||||
const saving = reactive({})
|
onMounted(() => {
|
||||||
const saved = reactive({})
|
const hash = window.location.hash.replace('#', '')
|
||||||
const errors = reactive({})
|
if (submenus.some((s) => s.key === hash)) {
|
||||||
|
activeSubmenu.value = hash
|
||||||
async function saveField(key) {
|
|
||||||
if (saving[key]) return
|
|
||||||
|
|
||||||
saving[key] = true
|
|
||||||
errors[key] = null
|
|
||||||
saved[key] = false
|
|
||||||
|
|
||||||
try {
|
|
||||||
const response = await fetch(route('settings.update'), {
|
|
||||||
method: 'PATCH',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'X-Requested-With': 'XMLHttpRequest',
|
|
||||||
'X-XSRF-TOKEN': decodeURIComponent(
|
|
||||||
document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? '',
|
|
||||||
),
|
|
||||||
},
|
|
||||||
body: JSON.stringify({ key, value: form[key] || null }),
|
|
||||||
})
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
const data = await response.json()
|
|
||||||
errors[key] = data.message || 'Speichern fehlgeschlagen'
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
saved[key] = true
|
|
||||||
setTimeout(() => { saved[key] = false }, 2000)
|
|
||||||
} catch {
|
|
||||||
errors[key] = 'Netzwerkfehler beim Speichern'
|
|
||||||
} finally {
|
|
||||||
saving[key] = false
|
|
||||||
}
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function switchSubmenu(key) {
|
||||||
|
activeSubmenu.value = key
|
||||||
|
window.location.hash = key
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
@ -79,148 +47,86 @@ async function saveField(key) {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<div class="py-8">
|
<div class="py-8">
|
||||||
<div class="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8">
|
<div class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
|
||||||
<div class="overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm">
|
<div class="overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm">
|
||||||
<div class="border-b border-gray-100 bg-gray-50/50 px-6 py-4">
|
<div class="flex min-h-[400px]">
|
||||||
<h3 class="text-sm font-semibold text-gray-900">
|
<!-- Sidebar (desktop) -->
|
||||||
ProPresenter Makro-Konfiguration
|
<div class="hidden w-48 shrink-0 border-r border-gray-100 sm:block">
|
||||||
</h3>
|
<nav class="flex flex-col gap-1 p-2">
|
||||||
<p class="mt-1 text-xs text-gray-500">
|
<button
|
||||||
Diese Einstellungen werden beim Export auf Copyright-Folien als Makro-Aktion angewendet.
|
v-for="item in submenus"
|
||||||
</p>
|
:key="item.key"
|
||||||
</div>
|
:data-testid="'settings-submenu-' + item.key"
|
||||||
|
@click="switchSubmenu(item.key)"
|
||||||
<div class="divide-y divide-gray-100 px-6">
|
:class="[
|
||||||
<div
|
'w-full rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors',
|
||||||
v-for="field in fields.filter(f => f.section === 'macro')"
|
activeSubmenu === item.key
|
||||||
:key="field.key"
|
? 'border-l-2 border-amber-500 bg-amber-50 text-amber-700'
|
||||||
class="py-5"
|
: 'text-gray-600 hover:bg-gray-50 hover:text-gray-900',
|
||||||
>
|
]"
|
||||||
<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">
|
{{ item.label }}
|
||||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
</button>
|
||||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
</nav>
|
||||||
</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.defaultValue"
|
|
||||||
class="mt-1.5 text-xs text-gray-400"
|
|
||||||
>
|
|
||||||
Standard: {{ field.defaultValue }}
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm mt-6">
|
<!-- Mobile tab bar -->
|
||||||
<div class="border-b border-gray-100 bg-gray-50/50 px-6 py-4">
|
<div class="w-full border-b border-gray-100 sm:hidden">
|
||||||
<h3 class="text-sm font-semibold text-gray-900">Agenda-Konfiguration</h3>
|
<nav class="flex overflow-x-auto">
|
||||||
<p class="mt-1 text-xs text-gray-500">Diese Einstellungen steuern, wie der Gottesdienst-Ablauf angezeigt und exportiert wird.</p>
|
<button
|
||||||
</div>
|
v-for="item in submenus"
|
||||||
<div class="divide-y divide-gray-100 px-6">
|
:key="item.key"
|
||||||
<div v-for="field in fields.filter(f => f.section === 'agenda')" :key="field.key" class="py-5">
|
:data-testid="'settings-submenu-' + item.key"
|
||||||
<label
|
@click="switchSubmenu(item.key)"
|
||||||
:for="'setting-' + field.key"
|
:class="[
|
||||||
class="block text-sm font-medium text-gray-700"
|
'shrink-0 whitespace-nowrap border-b-2 px-4 py-3 text-sm font-medium transition-colors',
|
||||||
>
|
activeSubmenu === item.key
|
||||||
{{ field.label }}
|
? 'border-amber-500 text-amber-700'
|
||||||
</label>
|
: 'border-transparent text-gray-600 hover:text-gray-900',
|
||||||
|
]"
|
||||||
<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">
|
{{ item.label }}
|
||||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4" />
|
</button>
|
||||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
|
</nav>
|
||||||
</svg>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
<!-- Content panel -->
|
||||||
v-else-if="saved[field.key]"
|
<div class="flex-1 p-6" data-testid="settings-active-panel">
|
||||||
class="absolute inset-y-0 right-0 flex items-center pr-3"
|
<!-- Makro-Zuweisungen — filled in by T3.5 -->
|
||||||
>
|
<div v-if="activeSubmenu === 'assignments'">
|
||||||
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
<h3 class="mb-4 text-sm font-semibold text-gray-900">
|
||||||
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
Globale Makro-Zuweisungen
|
||||||
</svg>
|
</h3>
|
||||||
</div>
|
<p class="text-sm text-gray-500">
|
||||||
|
Hier werden die globalen Makro-Zuweisungen konfiguriert.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p
|
<!-- Makro-Import — filled in by T3.4 -->
|
||||||
v-if="errors[field.key]"
|
<div v-if="activeSubmenu === 'macros'">
|
||||||
class="mt-1.5 text-xs text-red-600"
|
<h3 class="mb-4 text-sm font-semibold text-gray-900">
|
||||||
:data-testid="'error-' + field.key"
|
Makro-Import
|
||||||
>
|
</h3>
|
||||||
{{ errors[field.key] }}
|
<p class="text-sm text-gray-500">
|
||||||
</p>
|
Importiere eine ProPresenter Makro-Datei.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p v-if="field.helpText" class="mt-1.5 text-xs text-gray-400">{{ field.helpText }}</p>
|
<!-- Label-Import — filled in by T3.3 -->
|
||||||
|
<div v-if="activeSubmenu === 'labels'">
|
||||||
|
<h3 class="mb-4 text-sm font-semibold text-gray-900">
|
||||||
|
Label-Import
|
||||||
|
</h3>
|
||||||
|
<p class="text-sm text-gray-500">
|
||||||
|
Importiere eine ProPresenter Labels-Datei.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<p
|
<!-- Agenda -->
|
||||||
v-if="field.defaultValue"
|
<AgendaSettings
|
||||||
class="mt-1.5 text-xs text-gray-400"
|
v-if="activeSubmenu === 'agenda'"
|
||||||
>
|
:settings="settings"
|
||||||
Standard: {{ field.defaultValue }}
|
/>
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
139
resources/js/Pages/Settings/AgendaSettings.vue
Normal file
139
resources/js/Pages/Settings/AgendaSettings.vue
Normal file
|
|
@ -0,0 +1,139 @@
|
||||||
|
<script setup>
|
||||||
|
import { reactive } from 'vue'
|
||||||
|
import { route } from 'ziggy-js'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
settings: { type: Object, default: () => ({}) },
|
||||||
|
})
|
||||||
|
|
||||||
|
const fields = [
|
||||||
|
{ key: 'agenda_start_title', label: 'Ablauf-Start', placeholder: 'z.B. Ablauf* oder Beginn*' },
|
||||||
|
{ key: 'agenda_end_title', label: 'Ablauf-Ende', placeholder: 'z.B. Ende* oder Schluss*' },
|
||||||
|
{
|
||||||
|
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.',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
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.',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
const form = reactive({})
|
||||||
|
for (const field of fields) {
|
||||||
|
form[field.key] = props.settings[field.key] ?? ''
|
||||||
|
}
|
||||||
|
|
||||||
|
const saving = reactive({})
|
||||||
|
const saved = reactive({})
|
||||||
|
const errors = reactive({})
|
||||||
|
|
||||||
|
async function saveField(key) {
|
||||||
|
if (saving[key]) return
|
||||||
|
saving[key] = true
|
||||||
|
errors[key] = null
|
||||||
|
saved[key] = false
|
||||||
|
try {
|
||||||
|
const response = await fetch(route('settings.update'), {
|
||||||
|
method: 'PATCH',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'X-Requested-With': 'XMLHttpRequest',
|
||||||
|
'X-XSRF-TOKEN': decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? ''),
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ key, value: form[key] || null }),
|
||||||
|
})
|
||||||
|
if (!response.ok) {
|
||||||
|
const data = await response.json()
|
||||||
|
errors[key] = data.message || 'Speichern fehlgeschlagen'
|
||||||
|
return
|
||||||
|
}
|
||||||
|
saved[key] = true
|
||||||
|
setTimeout(() => { saved[key] = false }, 2000)
|
||||||
|
} catch {
|
||||||
|
errors[key] = 'Netzwerkfehler beim Speichern'
|
||||||
|
} finally {
|
||||||
|
saving[key] = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<h3 class="text-sm font-semibold text-gray-900 mb-1">
|
||||||
|
Agenda-Konfiguration
|
||||||
|
</h3>
|
||||||
|
<p class="text-xs text-gray-500 mb-4">
|
||||||
|
Diese Einstellungen steuern, wie der Gottesdienst-Ablauf angezeigt und exportiert wird.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<div class="divide-y divide-gray-100">
|
||||||
|
<div
|
||||||
|
v-for="field in fields"
|
||||||
|
:key="field.key"
|
||||||
|
class="py-4"
|
||||||
|
>
|
||||||
|
<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 || ''"
|
||||||
|
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>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
Loading…
Reference in a new issue