104 lines
4.1 KiB
Vue
104 lines
4.1 KiB
Vue
<script setup>
|
||
import { ref } from 'vue'
|
||
import SlideUploader from '@/Components/SlideUploader.vue'
|
||
|
||
const props = defineProps({
|
||
agendaItem: { type: Object, required: true },
|
||
serviceId: { type: Number, required: true },
|
||
serviceDate: { type: String, default: null },
|
||
})
|
||
|
||
const emit = defineEmits(['slides-updated'])
|
||
|
||
const showUploader = ref(false)
|
||
|
||
function onUploaded() {
|
||
showUploader.value = false
|
||
emit('slides-updated')
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div
|
||
class="rounded-lg border bg-white p-4"
|
||
:class="{
|
||
'border-l-4 border-emerald-500': agendaItem.slides?.length > 0,
|
||
'border-l-4 border-blue-400': agendaItem.is_announcement_position,
|
||
'border-l-4 border-purple-400': agendaItem.is_sermon && !agendaItem.is_announcement_position,
|
||
'border-gray-200': !agendaItem.slides?.length && !agendaItem.is_announcement_position && !agendaItem.is_sermon,
|
||
}"
|
||
data-testid="agenda-item-row"
|
||
>
|
||
<div class="flex items-start justify-between gap-4">
|
||
<div class="flex-1">
|
||
<!-- Position + Titel -->
|
||
<div class="flex items-center gap-2">
|
||
<span class="text-xs text-gray-400 tabular-nums">{{ agendaItem.sort_order }}.</span>
|
||
<h4 class="font-medium text-gray-900" data-testid="agenda-item-title">
|
||
{{ agendaItem.title }}
|
||
</h4>
|
||
</div>
|
||
|
||
<!-- Notiz (optional) -->
|
||
<p v-if="agendaItem.note" class="mt-1 text-xs text-gray-500">
|
||
{{ agendaItem.note }}
|
||
</p>
|
||
|
||
<!-- Badges -->
|
||
<div class="mt-1.5 flex gap-2">
|
||
<span
|
||
v-if="agendaItem.is_announcement_position"
|
||
class="inline-flex items-center gap-1 rounded-full bg-blue-100 px-2 py-0.5 text-xs font-medium text-blue-700"
|
||
>
|
||
📢 Ankündigungen hier
|
||
</span>
|
||
<span
|
||
v-if="agendaItem.is_sermon"
|
||
class="inline-flex items-center gap-1 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-700"
|
||
>
|
||
📖 Predigt
|
||
</span>
|
||
</div>
|
||
|
||
<!-- Folien-Thumbnails (kompakt) -->
|
||
<div v-if="agendaItem.slides?.length" class="mt-2 flex gap-1">
|
||
<img
|
||
v-for="slide in agendaItem.slides.slice(0, 4)"
|
||
:key="slide.id"
|
||
:src="`/storage/slides/${slide.thumbnail_filename}`"
|
||
class="h-10 w-16 rounded border border-gray-200 object-cover"
|
||
:alt="slide.original_filename"
|
||
/>
|
||
<span
|
||
v-if="agendaItem.slides.length > 4"
|
||
class="flex h-10 w-16 items-center justify-center rounded border border-gray-200 text-xs text-gray-500"
|
||
>
|
||
+{{ agendaItem.slides.length - 4 }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- + Button -->
|
||
<button
|
||
class="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-lg border border-dashed border-gray-300 text-gray-400 transition-colors hover:border-blue-400 hover:text-blue-500"
|
||
data-testid="agenda-item-add-slides"
|
||
:title="showUploader ? 'Schließen' : 'Folien hinzufügen'"
|
||
@click="showUploader = !showUploader"
|
||
>
|
||
{{ showUploader ? '×' : '+' }}
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Folien-Upload (umschaltbar) -->
|
||
<div v-if="showUploader" class="mt-3 border-t pt-3">
|
||
<SlideUploader
|
||
type="sermon"
|
||
:service-id="serviceId"
|
||
:show-expire-date="false"
|
||
:inline="true"
|
||
@uploaded="onUploaded"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|