d915f8cfc2
T8: Service List Page - ServiceController with index, finalize, reopen actions - Services/Index.vue with status indicators (songs mapped/arranged, slides uploaded) - German UI with finalize/reopen toggle buttons - Status aggregation via SQL subqueries for efficiency - Tests: 3 passing (46 assertions) T9: Song CRUD Backend - SongController with full REST API (index, store, show, update, destroy) - SongService for default groups/arrangements creation - SongRequest validation (title required, ccli_id unique) - Search by title and CCLI ID - last_used_in_service accessor via service_songs join - Tests: 20 passing (85 assertions) T10: Slide Upload Component - SlideController with store, destroy, updateExpireDate - SlideUploader.vue with vue3-dropzone drag-and-drop - SlideGrid.vue with thumbnail grid and inline expire date editing - Multi-format support: images (sync), PPT (async job), ZIP (extract) - Type validation: information (global), moderation/sermon (service-specific) - Tests: 15 passing (37 assertions) T11: Arrangement Configurator - ArrangementController with store, clone, update, destroy - ArrangementConfigurator.vue with vue-draggable-plus - Drag-and-drop arrangement editor with colored group pills - Clone from default or existing arrangement - Color picker for group customization - Prevent deletion of last arrangement - Tests: 4 passing (17 assertions) T12: Song Matching Service - SongMatchingService with autoMatch, manualAssign, requestCreation, unassign - ServiceSongController API endpoints for song assignment - Auto-match by CCLI ID during CTS sync - Manual assignment with searchable song select - Email request for missing songs (MissingSongRequest mailable) - Tests: 14 passing (33 assertions) T13: Translation Service - TranslationService with fetchFromUrl, importTranslation, removeTranslation - TranslationController API endpoints - URL scraping (best-effort HTTP fetch with strip_tags) - Line-count distribution algorithm (match original slide line counts) - Mark song as translated, remove translation - Tests: 18 passing (18 assertions) All tests passing: 103/103 (488 assertions) Build: ✓ Vite production build successful German UI: All user-facing text in German with 'Du' form
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="showComingSoon"
|
|
>
|
|
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>
|