feat(ui): redesign ArrangementDialog with lyric preview
This commit is contained in:
Thorsten Bus
parent
de431d29cc
commit
2d90621cca
492
resources/js/Components/ArrangementDialog.vue
Normal file
492
resources/js/Components/ArrangementDialog.vue
Normal file
|
|
@ -0,0 +1,492 @@
|
||||||
|
<script setup>
|
||||||
|
import { computed, nextTick, ref, watch, onMounted, onUnmounted } from 'vue'
|
||||||
|
import { router } from '@inertiajs/vue3'
|
||||||
|
import { VueDraggable } from 'vue-draggable-plus'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
songId: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
arrangements: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
availableGroups: {
|
||||||
|
type: Array,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
selectedArrangementId: {
|
||||||
|
type: Number,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['close', 'arrangement-selected'])
|
||||||
|
|
||||||
|
/* ── State ── */
|
||||||
|
|
||||||
|
const currentArrangementId = ref(
|
||||||
|
props.selectedArrangementId ?? props.arrangements.find((a) => a.is_default)?.id ?? props.arrangements[0]?.id ?? null,
|
||||||
|
)
|
||||||
|
|
||||||
|
const currentArrangement = computed(() =>
|
||||||
|
props.arrangements.find((a) => a.id === Number(currentArrangementId.value)) ?? null,
|
||||||
|
)
|
||||||
|
|
||||||
|
const arrangementGroups = ref([])
|
||||||
|
|
||||||
|
watch(
|
||||||
|
currentArrangementId,
|
||||||
|
(id) => {
|
||||||
|
const arr = props.arrangements.find((a) => a.id === Number(id))
|
||||||
|
arrangementGroups.value = arr?.groups?.map((g, i) => ({ ...g, _uid: `${g.id}-${i}-${Date.now()}` })) ?? []
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
)
|
||||||
|
|
||||||
|
const pendingAutoSelect = ref(false)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.arrangements.length,
|
||||||
|
(newLen, oldLen) => {
|
||||||
|
if (pendingAutoSelect.value && newLen > oldLen) {
|
||||||
|
const newest = props.arrangements.reduce((a, b) => (a.id > b.id ? a : b))
|
||||||
|
currentArrangementId.value = newest.id
|
||||||
|
pendingAutoSelect.value = false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
/* ── Scroll sync ── */
|
||||||
|
|
||||||
|
const leftCol = ref(null)
|
||||||
|
const rightCol = ref(null)
|
||||||
|
let syncing = false
|
||||||
|
|
||||||
|
function syncScroll(from) {
|
||||||
|
if (syncing) return
|
||||||
|
syncing = true
|
||||||
|
if (from === 'left' && rightCol.value) {
|
||||||
|
rightCol.value.scrollTop = leftCol.value.scrollTop
|
||||||
|
} else if (from === 'right' && leftCol.value) {
|
||||||
|
leftCol.value.scrollTop = rightCol.value.scrollTop
|
||||||
|
}
|
||||||
|
nextTick(() => {
|
||||||
|
syncing = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Group picker ── */
|
||||||
|
|
||||||
|
const groupPickerOpen = ref(null)
|
||||||
|
|
||||||
|
function toggleGroupPicker(index) {
|
||||||
|
groupPickerOpen.value = groupPickerOpen.value === index ? null : index
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Close on outside click for group picker ── */
|
||||||
|
|
||||||
|
function onBodyClick(e) {
|
||||||
|
if (groupPickerOpen.value !== null && !e.target.closest('[data-group-picker]')) {
|
||||||
|
groupPickerOpen.value = null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Keyboard: Escape ── */
|
||||||
|
|
||||||
|
function closeOnEscape(e) {
|
||||||
|
if (e.key === 'Escape') {
|
||||||
|
if (groupPickerOpen.value !== null) {
|
||||||
|
groupPickerOpen.value = null
|
||||||
|
} else {
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener('keydown', closeOnEscape)
|
||||||
|
document.addEventListener('click', onBodyClick)
|
||||||
|
})
|
||||||
|
|
||||||
|
onUnmounted(() => {
|
||||||
|
document.removeEventListener('keydown', closeOnEscape)
|
||||||
|
document.removeEventListener('click', onBodyClick)
|
||||||
|
})
|
||||||
|
|
||||||
|
/* ── Arrangement CRUD (Inertia router, matching ArrangementConfigurator patterns) ── */
|
||||||
|
|
||||||
|
function createArrangement() {
|
||||||
|
const name = window.prompt('Name für das neue Arrangement:')
|
||||||
|
if (!name?.trim()) return
|
||||||
|
pendingAutoSelect.value = true
|
||||||
|
router.post(`/songs/${props.songId}/arrangements`, { name: name.trim() }, { preserveScroll: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
function cloneArrangement() {
|
||||||
|
if (!currentArrangementId.value) return
|
||||||
|
const name = window.prompt('Name für das geklonte Arrangement:', `${currentArrangement.value?.name ?? ''} Kopie`)
|
||||||
|
if (!name?.trim()) return
|
||||||
|
pendingAutoSelect.value = true
|
||||||
|
router.post(`/arrangements/${currentArrangementId.value}/clone`, { name: name.trim() }, { preserveScroll: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
function deleteArrangement() {
|
||||||
|
if (!currentArrangementId.value) return
|
||||||
|
if (props.arrangements.length <= 1) {
|
||||||
|
alert('Das letzte Arrangement kann nicht gelöscht werden.')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (!confirm('Arrangement wirklich löschen?')) return
|
||||||
|
router.delete(`/arrangements/${currentArrangementId.value}`, { preserveScroll: true })
|
||||||
|
}
|
||||||
|
|
||||||
|
function saveArrangement() {
|
||||||
|
if (!currentArrangement.value) return
|
||||||
|
router.put(
|
||||||
|
`/arrangements/${currentArrangement.value.id}`,
|
||||||
|
{
|
||||||
|
groups: arrangementGroups.value.map((group, index) => ({
|
||||||
|
song_group_id: group.id,
|
||||||
|
order: index + 1,
|
||||||
|
})),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
preserveScroll: true,
|
||||||
|
preserveState: true,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Group operations ── */
|
||||||
|
|
||||||
|
function duplicateGroup(index) {
|
||||||
|
const item = arrangementGroups.value[index]
|
||||||
|
const newItem = { ...item, _uid: `${item.id}-dup-${Date.now()}` }
|
||||||
|
arrangementGroups.value.splice(index + 1, 0, newItem)
|
||||||
|
saveArrangement()
|
||||||
|
}
|
||||||
|
|
||||||
|
function addGroupAt(index, group) {
|
||||||
|
const newItem = {
|
||||||
|
id: group.id,
|
||||||
|
name: group.name,
|
||||||
|
color: group.color,
|
||||||
|
slides: group.slides ?? [],
|
||||||
|
_uid: `${group.id}-add-${Date.now()}`,
|
||||||
|
}
|
||||||
|
arrangementGroups.value.splice(index + 1, 0, newItem)
|
||||||
|
groupPickerOpen.value = null
|
||||||
|
saveArrangement()
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeGroupAt(index) {
|
||||||
|
arrangementGroups.value.splice(index, 1)
|
||||||
|
saveArrangement()
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Selection emit ── */
|
||||||
|
|
||||||
|
watch(currentArrangementId, (id) => {
|
||||||
|
emit('arrangement-selected', Number(id))
|
||||||
|
})
|
||||||
|
|
||||||
|
/* ── Close on backdrop ── */
|
||||||
|
|
||||||
|
function closeOnBackdrop(e) {
|
||||||
|
if (e.target === e.currentTarget) {
|
||||||
|
emit('close')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Teleport to="body">
|
||||||
|
<Transition
|
||||||
|
enter-active-class="transition duration-200 ease-out"
|
||||||
|
enter-from-class="opacity-0"
|
||||||
|
enter-to-class="opacity-100"
|
||||||
|
leave-active-class="transition duration-150 ease-in"
|
||||||
|
leave-from-class="opacity-100"
|
||||||
|
leave-to-class="opacity-0"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
|
||||||
|
@click="closeOnBackdrop"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
data-testid="arrangement-dialog"
|
||||||
|
class="flex h-[80vh] w-full max-w-5xl flex-col rounded-xl bg-white shadow-2xl"
|
||||||
|
>
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="flex items-center gap-3 border-b border-gray-200 px-6 py-4">
|
||||||
|
<div class="min-w-48 flex-1">
|
||||||
|
<select
|
||||||
|
v-model="currentArrangementId"
|
||||||
|
data-testid="arrangement-select"
|
||||||
|
class="block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500"
|
||||||
|
>
|
||||||
|
<option
|
||||||
|
v-for="arr in arrangements"
|
||||||
|
:key="arr.id"
|
||||||
|
:value="arr.id"
|
||||||
|
>
|
||||||
|
{{ arr.name }}{{ arr.is_default ? ' (Standard)' : '' }}
|
||||||
|
</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button
|
||||||
|
data-testid="arrangement-new-btn"
|
||||||
|
type="button"
|
||||||
|
class="rounded-md bg-blue-600 px-3 py-2 text-sm font-semibold text-white shadow hover:bg-blue-700"
|
||||||
|
@click="createArrangement"
|
||||||
|
>
|
||||||
|
Neu
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
data-testid="arrangement-clone-btn"
|
||||||
|
type="button"
|
||||||
|
class="rounded-md bg-slate-700 px-3 py-2 text-sm font-semibold text-white shadow hover:bg-slate-800"
|
||||||
|
@click="cloneArrangement"
|
||||||
|
>
|
||||||
|
Duplizieren
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
data-testid="arrangement-delete-btn"
|
||||||
|
type="button"
|
||||||
|
class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow hover:bg-red-700"
|
||||||
|
@click="deleteArrangement"
|
||||||
|
>
|
||||||
|
Löschen
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button
|
||||||
|
data-testid="arrangement-dialog-close-btn"
|
||||||
|
type="button"
|
||||||
|
class="ml-auto rounded-lg p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-600"
|
||||||
|
@click="emit('close')"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="h-5 w-5"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
d="M6 18L18 6M6 6l12 12"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Two-column body -->
|
||||||
|
<div class="flex flex-1 overflow-hidden">
|
||||||
|
<!-- Left: Pill list with DnD -->
|
||||||
|
<div
|
||||||
|
ref="leftCol"
|
||||||
|
data-testid="arrangement-pill-list"
|
||||||
|
class="flex w-1/2 flex-col gap-2 overflow-y-auto border-r border-gray-200 p-4"
|
||||||
|
@scroll="syncScroll('left')"
|
||||||
|
>
|
||||||
|
<h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
|
||||||
|
Gruppenfolge
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<VueDraggable
|
||||||
|
v-model="arrangementGroups"
|
||||||
|
ghost-class="drag-ghost"
|
||||||
|
chosen-class="drag-chosen"
|
||||||
|
drag-class="drag-active"
|
||||||
|
handle=".drag-handle"
|
||||||
|
class="flex flex-col gap-2"
|
||||||
|
@end="saveArrangement"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-for="(element, index) in arrangementGroups"
|
||||||
|
:key="element._uid"
|
||||||
|
data-testid="arrangement-pill"
|
||||||
|
class="flex items-center gap-2 rounded-lg border-2 px-3 py-2"
|
||||||
|
:style="{
|
||||||
|
borderColor: element.color ?? '#6b7280',
|
||||||
|
backgroundColor: (element.color ?? '#6b7280') + '20',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- Drag handle -->
|
||||||
|
<span class="drag-handle cursor-grab text-gray-400 hover:text-gray-600">
|
||||||
|
<svg
|
||||||
|
class="h-4 w-4"
|
||||||
|
fill="currentColor"
|
||||||
|
viewBox="0 0 20 20"
|
||||||
|
>
|
||||||
|
<path d="M7 2a2 2 0 10.001 4.001A2 2 0 007 2zm0 6a2 2 0 10.001 4.001A2 2 0 007 8zm0 6a2 2 0 10.001 4.001A2 2 0 007 14zm6-8a2 2 0 10-.001-4.001A2 2 0 0013 6zm0 2a2 2 0 10.001 4.001A2 2 0 0013 8zm0 6a2 2 0 10.001 4.001A2 2 0 0013 14z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Group name -->
|
||||||
|
<span class="flex-1 text-sm font-medium">
|
||||||
|
{{ element.name }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Duplicate button (2×) -->
|
||||||
|
<button
|
||||||
|
data-testid="arrangement-duplicate-btn"
|
||||||
|
type="button"
|
||||||
|
class="rounded bg-gray-100 px-2 py-0.5 text-xs hover:bg-gray-200"
|
||||||
|
@click="duplicateGroup(index)"
|
||||||
|
>
|
||||||
|
2×
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Add group button (+) -->
|
||||||
|
<div
|
||||||
|
class="relative"
|
||||||
|
data-group-picker
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
data-testid="arrangement-add-group-btn"
|
||||||
|
type="button"
|
||||||
|
class="rounded bg-blue-100 px-2 py-0.5 text-xs text-blue-700 hover:bg-blue-200"
|
||||||
|
@click.stop="toggleGroupPicker(index)"
|
||||||
|
>
|
||||||
|
+
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<!-- Quick select dropdown -->
|
||||||
|
<div
|
||||||
|
v-if="groupPickerOpen === index"
|
||||||
|
class="absolute right-0 top-8 z-10 min-w-36 rounded-lg border border-gray-200 bg-white shadow-lg"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
v-for="g in availableGroups"
|
||||||
|
:key="g.id"
|
||||||
|
type="button"
|
||||||
|
class="block w-full px-3 py-1.5 text-left text-sm hover:bg-gray-50"
|
||||||
|
@click="addGroupAt(index, g)"
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
class="mr-1.5 inline-block h-2.5 w-2.5 rounded-full"
|
||||||
|
:style="{ backgroundColor: g.color }"
|
||||||
|
/>
|
||||||
|
{{ g.name }}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Remove button -->
|
||||||
|
<button
|
||||||
|
data-testid="arrangement-remove-btn"
|
||||||
|
type="button"
|
||||||
|
class="rounded px-1.5 py-0.5 text-xs text-red-400 hover:bg-red-50 hover:text-red-600"
|
||||||
|
@click="removeGroupAt(index)"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</VueDraggable>
|
||||||
|
|
||||||
|
<!-- Empty state -->
|
||||||
|
<div
|
||||||
|
v-if="arrangementGroups.length === 0"
|
||||||
|
class="flex flex-1 items-center justify-center rounded-lg border-2 border-dashed border-gray-300 p-8 text-center text-sm text-gray-400"
|
||||||
|
>
|
||||||
|
Noch keine Gruppen zugeordnet.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Right: Lyric preview (scroll-synced) -->
|
||||||
|
<div
|
||||||
|
ref="rightCol"
|
||||||
|
data-testid="arrangement-lyric-preview"
|
||||||
|
class="flex w-1/2 flex-col gap-2 overflow-y-auto bg-gray-50 p-4"
|
||||||
|
@scroll="syncScroll('right')"
|
||||||
|
>
|
||||||
|
<h4 class="text-xs font-semibold uppercase tracking-wide text-gray-500">
|
||||||
|
Textvorschau
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
<div
|
||||||
|
v-for="element in arrangementGroups"
|
||||||
|
:key="element._uid"
|
||||||
|
class="rounded-r-lg border-l-4 bg-white p-3 shadow-sm"
|
||||||
|
:style="{ borderColor: element.color ?? '#6b7280' }"
|
||||||
|
>
|
||||||
|
<!-- Group name pill -->
|
||||||
|
<span
|
||||||
|
class="mb-2 inline-block rounded-full px-2 py-0.5 text-xs font-semibold text-white"
|
||||||
|
:style="{ backgroundColor: element.color ?? '#6b7280' }"
|
||||||
|
>
|
||||||
|
{{ element.name }}
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<!-- Slides -->
|
||||||
|
<template v-if="element.slides?.length > 0">
|
||||||
|
<div
|
||||||
|
v-for="(slide, si) in element.slides"
|
||||||
|
:key="slide.id ?? si"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="si > 0"
|
||||||
|
class="my-1.5 border-t border-gray-200"
|
||||||
|
/>
|
||||||
|
<p class="whitespace-pre-wrap text-sm">
|
||||||
|
{{ slide.text_content }}
|
||||||
|
</p>
|
||||||
|
<p
|
||||||
|
v-if="slide.text_content_translated"
|
||||||
|
class="mt-0.5 whitespace-pre-wrap text-xs italic text-gray-400"
|
||||||
|
>
|
||||||
|
{{ slide.text_content_translated }}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<!-- No slides -->
|
||||||
|
<p
|
||||||
|
v-else
|
||||||
|
class="text-xs italic text-gray-300"
|
||||||
|
>
|
||||||
|
Kein Text vorhanden
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Empty state -->
|
||||||
|
<div
|
||||||
|
v-if="arrangementGroups.length === 0"
|
||||||
|
class="flex flex-1 items-center justify-center text-sm text-gray-400"
|
||||||
|
>
|
||||||
|
Wähle ein Arrangement aus, um die Vorschau zu sehen.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</Teleport>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
:deep(.drag-ghost) {
|
||||||
|
opacity: 0.4;
|
||||||
|
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8), 0 0 0 4px rgba(99, 102, 241, 0.6);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.drag-chosen) {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.drag-active) {
|
||||||
|
opacity: 1 !important;
|
||||||
|
transform: scale(1.02);
|
||||||
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 2px rgba(255, 255, 255, 0.8);
|
||||||
|
border-radius: 0.5rem;
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in a new issue