32e9577d4d
- Slide grid now 1-2-3 columns (4x larger thumbnails) - Delete button left, fullscreen right, always visible (no hover) - Upload area appears inline as last grid item (no side-by-side layout) - SlideUploader supports inline mode for grid integration - Add recursive collapsible JsonTreeViewer component (no external deps) - Replace raw JSON pre tags in API logs with tree viewer
80 lines
2 KiB
Vue
80 lines
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 sermon slides for this service
|
|
const sermonSlides = computed(() => {
|
|
return props.slides.filter(
|
|
(slide) => slide.type === 'sermon' && 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="sermon-block" class="sermon-block space-y-6">
|
|
<!-- Block header -->
|
|
<div class="border-b border-gray-200 pb-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
Predigtfolien
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-500">
|
|
Folien für diesen Gottesdienst
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Slide grid with inline upload card -->
|
|
<SlideGrid
|
|
data-testid="sermon-block-grid"
|
|
:slides="sermonSlides"
|
|
type="sermon"
|
|
:show-expire-date="false"
|
|
:show-uploader="true"
|
|
@deleted="handleSlideDeleted"
|
|
@updated="handleSlideUpdated"
|
|
>
|
|
<template #upload-card>
|
|
<SlideUploader
|
|
data-testid="sermon-block-uploader"
|
|
type="sermon"
|
|
:service-id="serviceId"
|
|
:show-expire-date="false"
|
|
:inline="true"
|
|
@uploaded="handleSlideUploaded"
|
|
/>
|
|
</template>
|
|
</SlideGrid>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.sermon-block {
|
|
/* Component-specific styles if needed */
|
|
}
|
|
</style>
|