137 lines
5.7 KiB
Vue
137 lines
5.7 KiB
Vue
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import { router } from '@inertiajs/vue3'
|
|
import SlideUploader from '@/Components/SlideUploader.vue'
|
|
import SlideGrid from '@/Components/SlideGrid.vue'
|
|
|
|
const props = defineProps({
|
|
serviceId: {
|
|
type: Number,
|
|
required: true,
|
|
},
|
|
serviceDate: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
slides: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const emit = defineEmits(['slides-updated'])
|
|
|
|
// Information slides are already filtered server-side (expire_date >= service.date)
|
|
// but we keep a computed for any additional client-side needs
|
|
const informationSlides = computed(() => {
|
|
return props.slides.filter((slide) => slide.type === 'information')
|
|
})
|
|
|
|
// Count slides expiring within 3 days of service date for the warning badge
|
|
const expiringSoonCount = computed(() => {
|
|
const serviceDate = new Date(props.serviceDate)
|
|
const threeDaysAfter = new Date(serviceDate)
|
|
threeDaysAfter.setDate(threeDaysAfter.getDate() + 3)
|
|
|
|
return informationSlides.value.filter((slide) => {
|
|
if (!slide.expire_date) return false
|
|
const expDate = new Date(slide.expire_date)
|
|
return expDate >= serviceDate && expDate <= threeDaysAfter
|
|
}).length
|
|
})
|
|
|
|
function handleSlideUploaded() {
|
|
emit('slides-updated')
|
|
}
|
|
|
|
function handleSlideDeleted() {
|
|
emit('slides-updated')
|
|
}
|
|
|
|
function handleSlideUpdated() {
|
|
emit('slides-updated')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div data-testid="information-block" class="information-block space-y-6">
|
|
<!-- Block header -->
|
|
<div class="border-b border-amber-200/60 pb-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<!-- Info icon with warm glow -->
|
|
<div class="flex h-9 w-9 items-center justify-center rounded-xl bg-gradient-to-br from-amber-50 to-orange-50 ring-1 ring-amber-200/60">
|
|
<svg class="h-5 w-5 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M11.25 11.25l.041-.02a.75.75 0 011.063.852l-.708 2.836a.75.75 0 001.063.853l.041-.021M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-9-3.75h.008v.008H12V8.25z" />
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-semibold text-gray-900">
|
|
Informationsfolien
|
|
</h3>
|
|
<p class="mt-0.5 text-sm text-gray-500">
|
|
Globale Folien — sichtbar in allen Gottesdiensten bis zum Ablaufdatum
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slide count badges -->
|
|
<div class="flex items-center gap-2">
|
|
<span
|
|
v-if="informationSlides.length > 0"
|
|
class="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2.5 py-1 text-xs font-semibold text-amber-700 ring-1 ring-amber-200/80"
|
|
>
|
|
<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="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5a2.25 2.25 0 002.25-2.25V5.25a2.25 2.25 0 00-2.25-2.25H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
|
|
</svg>
|
|
{{ informationSlides.length }} {{ informationSlides.length === 1 ? 'Folie' : 'Folien' }}
|
|
</span>
|
|
|
|
<span
|
|
v-if="expiringSoonCount > 0"
|
|
class="inline-flex items-center gap-1 rounded-full bg-orange-50 px-2.5 py-1 text-xs font-semibold text-orange-700 ring-1 ring-orange-300/80"
|
|
:title="`${expiringSoonCount} Folie(n) laufen bald ab`"
|
|
>
|
|
<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 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
|
|
</svg>
|
|
{{ expiringSoonCount }} läuft bald ab
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Side-by-side: grid left (~70%), uploader right (~30%) -->
|
|
<div class="flex flex-col lg:flex-row-reverse gap-6">
|
|
<!-- Slide uploader — information slides are GLOBAL (service_id = null) -->
|
|
<div class="lg:w-1/3">
|
|
<SlideUploader
|
|
data-testid="information-block-uploader"
|
|
type="information"
|
|
:service-id="null"
|
|
:show-expire-date="true"
|
|
@uploaded="handleSlideUploaded"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Slide grid with prominent expire dates -->
|
|
<div class="flex-1 lg:w-2/3">
|
|
<SlideGrid
|
|
data-testid="information-block-grid"
|
|
:slides="informationSlides"
|
|
type="information"
|
|
:show-expire-date="true"
|
|
@deleted="handleSlideDeleted"
|
|
@updated="handleSlideUpdated"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.information-block {
|
|
/* Subtle warm background hint for visual distinction */
|
|
}
|
|
</style>
|