b2d230e991
T14: Service Edit Page Layout + Routing
- ServiceController::edit() with eager-loaded relationships
- Services/Edit.vue with 4 collapsible accordion blocks
- Route: GET /services/{service}/edit
- Information slides query: global + service-specific with expire_date filtering
- Tests: 2 new (edit page render + auth guard)
T15: Information Block (Slides + Expire Dates)
- InformationBlock.vue with dynamic expire_date filtering
- Shows slides where type='information' AND expire_date >= service.date
- Global visibility across services (not service-specific)
- SlideUploader with showExpireDate=true
- SlideGrid with prominent expire date + inline editing
- Badge showing slide count + 'expiring soon' warning (within 3 days)
- Tests: 7 new (105 assertions)
T16: Moderation Block (Service-Specific)
- ModerationBlock.vue (service-specific slides)
- Filters: type='moderation' AND service_id = current_service
- No expire date field (unlike Information block)
- Service isolation (slides from Service A don't appear in Service B)
- Tests: 5 new (14 assertions)
T17: Sermon Block (Service-Specific)
- SermonBlock.vue (identical to Moderation but type='sermon')
- Service-specific slides, no expire date
- Tests: 5 new (14 assertions)
T18: Songs Block (Matching + Arrangement + Translation)
- SongsBlock.vue with conditional UI (unmatched vs matched states)
- Unmatched: 'Erstellung anfragen' button + searchable select for manual assign
- Matched: ArrangementConfigurator + translation checkbox + preview/download buttons
- ServiceSongController::update() for use_translation and song_arrangement_id
- ArrangementConfigurator emits 'arrangement-selected' for auto-save
- ServiceController::edit() provides songsCatalog for matching search
- Tests: 2 new (45 assertions)
T19: Song PDF (INCOMPLETE - timeout)
- SongPdfController.php created (partial)
- resources/views/pdf/song.blade.php created (partial)
- SongPreviewModal.vue MISSING
- Tests MISSING
- Will be completed in next commit
All tests passing: 124/124 (703 assertions)
Build: ✓ Vite production build successful
German UI: All user-facing text in German with 'Du' form
Dependencies: barryvdh/laravel-dompdf added for PDF generation
234 lines
11 KiB
Vue
234 lines
11 KiB
Vue
<script setup>
|
|
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue'
|
|
import { Head, router } from '@inertiajs/vue3'
|
|
import { ref } from 'vue'
|
|
|
|
const props = defineProps({
|
|
services: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
})
|
|
|
|
const toastMessage = ref('')
|
|
|
|
function formatDate(value) {
|
|
if (!value) {
|
|
return '-'
|
|
}
|
|
|
|
return new Date(value).toLocaleDateString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
})
|
|
}
|
|
|
|
function formatDateTime(value) {
|
|
if (!value) {
|
|
return '-'
|
|
}
|
|
|
|
return new Date(value).toLocaleString('de-DE', {
|
|
day: '2-digit',
|
|
month: '2-digit',
|
|
year: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
})
|
|
}
|
|
|
|
function showComingSoon() {
|
|
toastMessage.value = 'Demnaechst verfuegbar'
|
|
|
|
setTimeout(() => {
|
|
toastMessage.value = ''
|
|
}, 2500)
|
|
}
|
|
|
|
function finalizeService(serviceId) {
|
|
router.post(route('services.finalize', serviceId), {}, { preserveScroll: true })
|
|
}
|
|
|
|
function reopenService(serviceId) {
|
|
router.post(route('services.reopen', serviceId), {}, { preserveScroll: true })
|
|
}
|
|
|
|
function mappingStatusClass(service) {
|
|
if (service.songs_total_count === 0) {
|
|
return 'text-red-600'
|
|
}
|
|
|
|
if (service.songs_mapped_count === service.songs_total_count) {
|
|
return 'text-emerald-700'
|
|
}
|
|
|
|
return 'text-orange-600'
|
|
}
|
|
|
|
function arrangementStatusClass(service) {
|
|
if (service.songs_total_count === 0) {
|
|
return 'text-red-600'
|
|
}
|
|
|
|
if (service.songs_arranged_count === service.songs_total_count) {
|
|
return 'text-emerald-700'
|
|
}
|
|
|
|
return 'text-orange-600'
|
|
}
|
|
|
|
function stateIconClass(isDone) {
|
|
return isDone ? 'text-emerald-600' : 'text-red-600'
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Head title="Services" />
|
|
|
|
<AuthenticatedLayout>
|
|
<template #header>
|
|
<div class="flex flex-wrap items-center justify-between gap-3">
|
|
<h2 class="text-xl font-semibold leading-tight text-gray-800">Services</h2>
|
|
<p class="text-sm text-gray-500">Hier siehst du alle heutigen und kommenden Services.</p>
|
|
</div>
|
|
</template>
|
|
|
|
<div class="py-8">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<Transition
|
|
enter-active-class="transition duration-200 ease-out"
|
|
enter-from-class="translate-y-1 opacity-0"
|
|
enter-to-class="translate-y-0 opacity-100"
|
|
leave-active-class="transition duration-150 ease-in"
|
|
leave-from-class="opacity-100"
|
|
leave-to-class="opacity-0"
|
|
>
|
|
<div
|
|
v-if="toastMessage"
|
|
class="mb-4 rounded-lg border border-orange-300 bg-orange-50 px-4 py-3 text-sm font-medium text-orange-700"
|
|
role="status"
|
|
>
|
|
{{ toastMessage }}
|
|
</div>
|
|
</Transition>
|
|
|
|
<div class="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
|
|
<div v-if="services.length === 0" class="p-8 text-center text-sm text-gray-500">
|
|
Aktuell gibt es keine heutigen oder kommenden Services.
|
|
</div>
|
|
|
|
<div v-else class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
<thead class="bg-gray-50">
|
|
<tr>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Titel</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Prediger</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Beamer-Techniker</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Anzahl Songs</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Letzte Änderung</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Status</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold uppercase tracking-wider text-gray-500">Aktionen</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="divide-y divide-gray-100 bg-white">
|
|
<tr v-for="service in services" :key="service.id" class="align-top hover:bg-gray-50/60">
|
|
<td class="px-4 py-4">
|
|
<div class="font-medium text-gray-900">{{ service.title }}</div>
|
|
<div class="mt-1 text-xs text-gray-500">{{ formatDate(service.date) }}</div>
|
|
</td>
|
|
|
|
<td class="px-4 py-4 text-sm text-gray-700">
|
|
{{ service.preacher_name || '-' }}
|
|
</td>
|
|
|
|
<td class="px-4 py-4 text-sm text-gray-700">
|
|
{{ service.beamer_tech_name || '-' }}
|
|
</td>
|
|
|
|
<td class="px-4 py-4 text-sm text-gray-700">
|
|
{{ service.songs_total_count }}
|
|
</td>
|
|
|
|
<td class="px-4 py-4 text-sm text-gray-700">
|
|
{{ formatDateTime(service.updated_at) }}
|
|
</td>
|
|
|
|
<td class="px-4 py-4">
|
|
<div class="space-y-1.5 text-xs font-medium">
|
|
<div :class="mappingStatusClass(service)">
|
|
{{ service.songs_mapped_count }}/{{ service.songs_total_count }} Songs zugeordnet
|
|
</div>
|
|
|
|
<div :class="arrangementStatusClass(service)">
|
|
{{ service.songs_arranged_count }}/{{ service.songs_total_count }} Arrangements geprueft
|
|
</div>
|
|
|
|
<div :class="stateIconClass(service.has_sermon_slides)" class="flex items-center gap-1.5">
|
|
<span aria-hidden="true">{{ service.has_sermon_slides ? '✓' : '•' }}</span>
|
|
<span>Predigtfolien</span>
|
|
</div>
|
|
|
|
<div :class="stateIconClass(service.info_slides_count > 0)" class="flex items-center gap-1.5">
|
|
<span aria-hidden="true">{{ service.info_slides_count > 0 ? '✓' : '•' }}</span>
|
|
<span>{{ service.info_slides_count }} Infofolien</span>
|
|
</div>
|
|
|
|
<div :class="stateIconClass(Boolean(service.finalized_at))" class="flex items-center gap-1.5">
|
|
<span aria-hidden="true">{{ service.finalized_at ? '✓' : '•' }}</span>
|
|
<span>
|
|
Abgeschlossen am
|
|
{{ service.finalized_at ? formatDateTime(service.finalized_at) : '-' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
|
|
<td class="px-4 py-4">
|
|
<div class="flex flex-col gap-2">
|
|
<template v-if="service.finalized_at">
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center rounded-md border border-amber-300 bg-amber-50 px-3 py-1.5 text-xs font-semibold text-amber-800 transition hover:bg-amber-100"
|
|
@click="reopenService(service.id)"
|
|
>
|
|
Wieder öffnen
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:bg-gray-50"
|
|
@click="showComingSoon"
|
|
>
|
|
Herunterladen
|
|
</button>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center rounded-md border border-gray-300 bg-white px-3 py-1.5 text-xs font-semibold text-gray-700 transition hover:bg-gray-50"
|
|
@click="router.get(route('services.edit', service.id))"
|
|
>
|
|
Bearbeiten
|
|
</button>
|
|
<button
|
|
type="button"
|
|
class="inline-flex items-center justify-center rounded-md border border-emerald-300 bg-emerald-50 px-3 py-1.5 text-xs font-semibold text-emerald-800 transition hover:bg-emerald-100"
|
|
@click="finalizeService(service.id)"
|
|
>
|
|
Abschließen
|
|
</button>
|
|
</template>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AuthenticatedLayout>
|
|
</template>
|