204 lines
8.1 KiB
Vue
204 lines
8.1 KiB
Vue
<script setup>
|
|
import LabelPicker from '@/Components/LabelPicker.vue'
|
|
import MacroPicker from '@/Components/MacroPicker.vue'
|
|
import { router } from '@inertiajs/vue3'
|
|
import { reactive } from 'vue'
|
|
import { route } from 'ziggy-js'
|
|
|
|
const props = defineProps({
|
|
assignments: { type: Array, default: () => [] },
|
|
macros: { type: Array, default: () => [] },
|
|
labels: { type: Array, default: () => [] },
|
|
collections: { type: Array, default: () => [] },
|
|
})
|
|
|
|
const parts = [
|
|
{ key: 'information', label: 'Informationen' },
|
|
{ key: 'moderation', label: 'Moderation' },
|
|
{ key: 'sermon', label: 'Predigt' },
|
|
{ key: 'song', label: 'Lieder' },
|
|
{ key: 'agenda_item', label: 'Agenda-Items' },
|
|
]
|
|
|
|
const positions = [
|
|
{ key: 'all_slides', label: 'Alle Folien' },
|
|
{ key: 'first_slide', label: 'Erste Folie' },
|
|
{ key: 'last_slide', label: 'Letzte Folie' },
|
|
{ key: 'by_label', label: 'Nach Label' },
|
|
]
|
|
|
|
function assignmentsForPart(partKey) {
|
|
return props.assignments.filter((a) => a.part_type === partKey)
|
|
}
|
|
|
|
function positionsForPart(partKey) {
|
|
if (partKey === 'song') return positions
|
|
return positions.filter((p) => p.key !== 'by_label')
|
|
}
|
|
|
|
const adding = reactive({})
|
|
const newAssignment = reactive({})
|
|
|
|
function startAdd(partKey) {
|
|
adding[partKey] = true
|
|
newAssignment[partKey] = { macro_id: null, position: 'all_slides', label_id: null }
|
|
}
|
|
|
|
function cancelAdd(partKey) {
|
|
adding[partKey] = false
|
|
}
|
|
|
|
async function saveAssignment(partKey) {
|
|
const data = newAssignment[partKey]
|
|
if (!data.macro_id) return
|
|
|
|
await fetch(route('settings.macro-assignments.store'), {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-XSRF-TOKEN': decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? ''),
|
|
},
|
|
body: JSON.stringify({
|
|
part_type: partKey,
|
|
macro_id: data.macro_id,
|
|
position: data.position,
|
|
label_id: data.position === 'by_label' ? data.label_id : null,
|
|
order: assignmentsForPart(partKey).length,
|
|
}),
|
|
})
|
|
adding[partKey] = false
|
|
router.reload({ preserveScroll: true })
|
|
}
|
|
|
|
async function deleteAssignment(id) {
|
|
await fetch(route('settings.macro-assignments.destroy', id), {
|
|
method: 'DELETE',
|
|
headers: {
|
|
'X-Requested-With': 'XMLHttpRequest',
|
|
'X-XSRF-TOKEN': decodeURIComponent(document.cookie.match(/XSRF-TOKEN=([^;]+)/)?.[1] ?? ''),
|
|
},
|
|
})
|
|
router.reload({ preserveScroll: true })
|
|
}
|
|
|
|
function positionLabel(pos) {
|
|
return positions.find((p) => p.key === pos)?.label ?? pos
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h3 class="mb-1 text-sm font-semibold text-gray-900">Globale Makro-Zuweisungen</h3>
|
|
<p class="mb-4 text-xs text-gray-500">
|
|
Diese Zuweisungen gelten für alle Gottesdienste. Pro Gottesdienst können sie überschrieben werden.
|
|
</p>
|
|
|
|
<div class="space-y-6">
|
|
<div v-for="part in parts" :key="part.key">
|
|
<div class="mb-2 flex items-center justify-between">
|
|
<h4 class="text-sm font-medium text-gray-700">{{ part.label }}</h4>
|
|
<span class="text-xs text-gray-400">{{ assignmentsForPart(part.key).length }} Zuweisungen</span>
|
|
</div>
|
|
|
|
<div class="space-y-1">
|
|
<div
|
|
v-for="a in assignmentsForPart(part.key)"
|
|
:key="a.id"
|
|
class="flex items-center gap-2 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 text-sm"
|
|
:data-testid="'assignment-card-' + a.id"
|
|
>
|
|
<span
|
|
v-if="a.macro?.color"
|
|
class="h-3 w-3 shrink-0 rounded"
|
|
:style="{ backgroundColor: a.macro.color }"
|
|
/>
|
|
<span class="flex-1 text-gray-700">{{ a.macro?.name }}</span>
|
|
<span class="text-xs text-gray-400">{{ positionLabel(a.position) }}</span>
|
|
<span
|
|
v-if="a.position === 'by_label' && a.label"
|
|
class="text-xs text-gray-500"
|
|
>
|
|
→ {{ a.label.name }}
|
|
</span>
|
|
<span
|
|
v-if="a.macro?.hidden_at"
|
|
class="rounded bg-amber-100 px-1.5 py-0.5 text-xs text-amber-700"
|
|
data-testid="warning-hidden-macro"
|
|
>
|
|
⚠ Makro deaktiviert
|
|
</span>
|
|
<button
|
|
class="ml-2 text-gray-400 hover:text-red-500"
|
|
:data-testid="'delete-assignment-' + a.id"
|
|
@click="deleteAssignment(a.id)"
|
|
>
|
|
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-if="adding[part.key]"
|
|
class="mt-2 space-y-2 rounded-lg border border-amber-200 bg-amber-50 p-3"
|
|
>
|
|
<MacroPicker
|
|
v-model="newAssignment[part.key].macro_id"
|
|
:macros="macros"
|
|
:collections="collections"
|
|
/>
|
|
<div class="flex flex-wrap gap-3">
|
|
<label
|
|
v-for="pos in positionsForPart(part.key)"
|
|
:key="pos.key"
|
|
class="flex items-center gap-1.5 text-xs text-gray-700"
|
|
>
|
|
<input
|
|
type="radio"
|
|
:value="pos.key"
|
|
v-model="newAssignment[part.key].position"
|
|
class="text-amber-500"
|
|
/>
|
|
{{ pos.label }}
|
|
</label>
|
|
</div>
|
|
<LabelPicker
|
|
v-if="newAssignment[part.key]?.position === 'by_label'"
|
|
v-model="newAssignment[part.key].label_id"
|
|
:labels="labels"
|
|
/>
|
|
<div class="flex gap-2">
|
|
<button
|
|
class="rounded-lg bg-amber-500 px-3 py-1.5 text-xs font-medium text-white hover:bg-amber-600"
|
|
:data-testid="'save-assignment-' + part.key"
|
|
@click="saveAssignment(part.key)"
|
|
>
|
|
Hinzufügen
|
|
</button>
|
|
<button
|
|
class="rounded-lg border border-gray-200 px-3 py-1.5 text-xs font-medium text-gray-600 hover:bg-gray-50"
|
|
@click="cancelAdd(part.key)"
|
|
>
|
|
Abbrechen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button
|
|
v-else
|
|
class="mt-1 flex items-center gap-1 rounded-lg border border-dashed border-gray-200 px-3 py-1.5 text-xs text-gray-500 transition-colors hover:border-amber-300 hover:text-amber-600"
|
|
:data-testid="'add-assignment-' + part.key"
|
|
@click="startAdd(part.key)"
|
|
>
|
|
<svg class="h-3.5 w-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4v16m8-8H4" />
|
|
</svg>
|
|
Zuweisung hinzufügen
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|