84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import SlideUploader from '@/Components/SlideUploader.vue'
|
|
import SlideGrid from '@/Components/SlideGrid.vue'
|
|
|
|
const props = defineProps({
|
|
serviceId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
slides: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['slides-updated'])
|
|
|
|
// Filter slides to only show moderation slides for this service
|
|
const moderationSlides = computed(() => {
|
|
return props.slides.filter(
|
|
(slide) => slide.type === 'moderation' && slide.service_id === props.serviceId
|
|
)
|
|
})
|
|
|
|
function handleSlideUploaded() {
|
|
emit('slides-updated')
|
|
}
|
|
|
|
function handleSlideDeleted() {
|
|
emit('slides-updated')
|
|
}
|
|
|
|
function handleSlideUpdated() {
|
|
emit('slides-updated')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div data-testid="moderation-block" class="moderation-block space-y-6">
|
|
<!-- Block header -->
|
|
<div class="border-b border-gray-200 pb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
Moderationsfolien
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Folien für diesen Gottesdienst
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Side-by-side: grid left (~70%), uploader right (~30%) -->
|
|
<div class="flex flex-col lg:flex-row-reverse gap-6">
|
|
<!-- Slide uploader -->
|
|
<div class="lg:w-1/3">
|
|
<SlideUploader
|
|
data-testid="moderation-block-uploader"
|
|
type="moderation"
|
|
:service-id="serviceId"
|
|
:show-expire-date="false"
|
|
@uploaded="handleSlideUploaded"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Slide grid -->
|
|
<div class="flex-1 lg:w-2/3">
|
|
<SlideGrid
|
|
data-testid="moderation-block-grid"
|
|
:slides="moderationSlides"
|
|
type="moderation"
|
|
:show-expire-date="false"
|
|
@deleted="handleSlideDeleted"
|
|
@updated="handleSlideUpdated"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.moderation-block {
|
|
/* Component-specific styles if needed */
|
|
}
|
|
</style>
|