From f78d20fc593582634c9c182974cdcc177c8fe8ac Mon Sep 17 00:00:00 2001 From: Thorsten Bus Date: Sun, 29 Mar 2026 12:11:58 +0200 Subject: [PATCH] feat(ui): restructure Edit.vue with agenda view --- resources/js/Pages/Services/Edit.vue | 318 ++++++++++----------------- 1 file changed, 114 insertions(+), 204 deletions(-) diff --git a/resources/js/Pages/Services/Edit.vue b/resources/js/Pages/Services/Edit.vue index 74fc7ce..e80828b 100644 --- a/resources/js/Pages/Services/Edit.vue +++ b/resources/js/Pages/Services/Edit.vue @@ -3,9 +3,9 @@ import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue' import { Head, router } from '@inertiajs/vue3' import { ref, computed } from 'vue' import InformationBlock from '@/Components/Blocks/InformationBlock.vue' -import ModerationBlock from '@/Components/Blocks/ModerationBlock.vue' -import SongsBlock from '@/Components/Blocks/SongsBlock.vue' -import SermonBlock from '@/Components/Blocks/SermonBlock.vue' +import AgendaItemRow from '@/Components/AgendaItemRow.vue' +import SongAgendaItem from '@/Components/SongAgendaItem.vue' +import ArrangementDialog from '@/Components/ArrangementDialog.vue' const props = defineProps({ service: { @@ -20,14 +20,6 @@ const props = defineProps({ type: Array, default: () => [], }, - moderationSlides: { - type: Array, - default: () => [], - }, - sermonSlides: { - type: Array, - default: () => [], - }, songsCatalog: { type: Array, default: () => [], @@ -40,6 +32,14 @@ const props = defineProps({ type: Object, default: null, }, + agendaItems: { + type: Array, + default: () => [], + }, + agendaSettings: { + type: Object, + default: () => ({}), + }, }) const formattedDate = computed(() => { @@ -61,18 +61,6 @@ function formatShortDate(dateStr) { }) } -/* ── Collapsible block state ─────────────────────────────── */ -const expandedBlocks = ref({ - information: true, - moderation: true, - sermon: true, - songs: true, -}) - -function toggleBlock(key) { - expandedBlocks.value[key] = !expandedBlocks.value[key] -} - function goBack() { router.get(route('services.index')) } @@ -81,58 +69,36 @@ function refreshPage() { router.reload({ preserveScroll: true }) } -/* ── Block definitions ───────────────────────────────────── */ -const blocks = [ - { - key: 'information', - label: 'Information', - description: 'Info-Folien fuer alle kommenden Services', - icon: 'info', - accentFrom: 'from-sky-400', - accentTo: 'to-blue-500', - badgeColor: 'bg-sky-100 text-sky-700', - }, - { - key: 'moderation', - label: 'Moderation', - description: 'Moderationsfolien fuer diesen Service', - icon: 'moderation', - accentFrom: 'from-violet-400', - accentTo: 'to-purple-500', - badgeColor: 'bg-violet-100 text-violet-700', - }, - { - key: 'sermon', - label: 'Predigt', - description: 'Predigtfolien fuer diesen Service', - icon: 'sermon', - accentFrom: 'from-amber-400', - accentTo: 'to-orange-500', - badgeColor: 'bg-amber-100 text-amber-700', - }, - { - key: 'songs', - label: 'Songs', - description: 'Songs und Arrangements verwalten', - icon: 'songs', - accentFrom: 'from-emerald-400', - accentTo: 'to-teal-500', - badgeColor: 'bg-emerald-100 text-emerald-700', - }, -] +/* ── Agenda helpers ──────────────────────────────────────── */ -function blockSlideCount(key) { - if (key === 'information') return props.informationSlides.length - if (key === 'moderation') return props.moderationSlides.length - if (key === 'sermon') return props.sermonSlides.length - if (key === 'songs') return props.serviceSongs.length - return 0 +const arrangementDialogItem = ref(null) + +function openArrangementDialog(item) { + arrangementDialogItem.value = item } -function blockBadgeLabel(key) { - const count = blockSlideCount(key) - if (key === 'songs') return `${count} Song${count !== 1 ? 's' : ''}` - return `${count} Folie${count !== 1 ? 'n' : ''}` +function getArrangements(item) { + const song = item.service_song?.song ?? item.serviceSong?.song + return song?.arrangements ?? [] +} + +function getAvailableGroups(item) { + const song = item.service_song?.song ?? item.serviceSong?.song + return song?.groups ?? [] +} + +function getSelectedArrangementId(item) { + return item.service_song?.song_arrangement_id ?? item.serviceSong?.song_arrangement_id ?? null +} + +function isHeaderType(item) { + return item.type?.toLowerCase() === 'header' || + (item.service_song_id === null && item.type !== 'Song' && item.type !== 'song' && item.type !== 'Default' && item.type !== 'default') +} + +function onArrangementSelected() { + router.reload({ preserveScroll: true }) + arrangementDialogItem.value = null } /* ── Finalize / Reopen / Download ───────────────────────── */ @@ -361,144 +327,88 @@ async function downloadService() { -
-
- -
-
- - - - - -
-
- - - - - - - - -
-
-
- - - -
-

- {{ block.label }}-Block wird hier angezeigt -

-

- Platzhalter — Komponente folgt -

-
-
-
-
- +
+
+

Information

+

Info-Folien fuer alle kommenden Services

+
+
+ +
+
+

Ablauf

+ + +
+ Keine Ablauf-Elemente vorhanden. Bitte synchronisiere die Daten zuerst. +
+ + +
+ +
+
+
+ + + +