public/pp-planer
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

fix(ui): add drag highlight to slide grid

Browse source
This commit is contained in:
Thorsten Bus 2026-03-02 21:22:19 +01:00
parent 6e48779259
commit 655991c471
1 changed files with 158 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
resources/js/Components/SlideGrid.vue
View file

@ -1,7 +1,8 @@
<script setup>
import { ref, computed } from 'vue'
import { ref, computed, watch } from 'vue'
import { router } from '@inertiajs/vue3'
import axios from 'axios'
import { VueDraggable } from 'vue-draggable-plus'
import ConfirmDialog from '@/Components/ConfirmDialog.vue'
import LoadingSpinner from '@/Components/LoadingSpinner.vue'
@ -36,11 +37,29 @@ const deleting = ref(false)
const editingExpireId = ref(null)
const editingExpireValue = ref('')
// Sort slides: newest first
// Preview popup state (#7)
const previewSlide = ref(null)
// Draggable local slides (#9)
const localSlides = ref([])
watch(() => props.slides, (newSlides) => {
localSlides.value = [...newSlides].sort((a, b) => {
const orderA = a.sort_order ?? 0
const orderB = b.sort_order ?? 0
if (orderA !== orderB) return orderA - orderB
return new Date(a.uploaded_at) - new Date(b.uploaded_at)
})
}, { immediate: true, deep: true })
// Sort slides by sort_order ascending (#5) — kept for non-draggable contexts
const sortedSlides = computed(() => {
return [...props.slides].sort(
(a, b) => new Date(b.uploaded_at) - new Date(a.uploaded_at),
)
return [...props.slides].sort((a, b) => {
const orderA = a.sort_order ?? 0
const orderB = b.sort_order ?? 0
if (orderA !== orderB) return orderA - orderB
return new Date(a.uploaded_at) - new Date(b.uploaded_at)
})
})
function thumbnailUrl(slide) {
@ -54,7 +73,7 @@ function fullImageUrl(slide) {
}
function formatDate(dateStr) {
if (!dateStr) return '—'
if (!dateStr) return '\u2014'
const d = new Date(dateStr)
return d.toLocaleDateString('de-DE', {
day: '2-digit',
@ -64,7 +83,7 @@ function formatDate(dateStr) {
}
function formatDateTime(dateStr) {
if (!dateStr) return '—'
if (!dateStr) return '\u2014'
const d = new Date(dateStr)
return d.toLocaleDateString('de-DE', {
day: '2-digit',
@ -141,13 +160,41 @@ function isExpired(expireDate) {
if (!expireDate) return false
return new Date(expireDate) < new Date()
}
// Preview popup (#7)
function openPreview(slide) {
previewSlide.value = slide
}
function closePreview() {
previewSlide.value = null
}
function deleteFromPreview() {
if (previewSlide.value) {
promptDelete(previewSlide.value)
closePreview()
}
}
// Drag reorder (#9)
function onDragEnd() {
const reordered = localSlides.value.map((slide, index) => ({
id: slide.id,
sort_order: index + 1,
}))
axios.post(route('slides.reorder'), { slides: reordered })
.then(() => emit('updated'))
.catch(console.error)
}
</script>
<template>
<div data-testid="slide-grid" class="slide-grid">
<!-- Empty state (only when no slides AND no uploader) -->
<div
v-if="sortedSlides.length === 0 && !showUploader"
v-if="localSlides.length === 0 && !showUploader"
class="flex flex-col items-center justify-center rounded-xl border-2 border-dashed border-gray-200 bg-gray-50/50 py-10"
>
<svg class="h-10 w-10 text-gray-300 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
@ -156,15 +203,23 @@ function isExpired(expireDate) {
<p class="text-sm text-gray-400">Noch keine Folien vorhanden</p>
</div>
<!-- Grid of thumbnails -->
<div
v-if="sortedSlides.length > 0 || showUploader"
<!-- Grid of thumbnails with drag'n'drop (#9) -->
<VueDraggable
v-if="localSlides.length > 0 || showUploader"
v-model="localSlides"
class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"
@end="onDragEnd"
item-key="id"
filter=".no-drag"
:prevent-on-filter="false"
ghost-class="slide-drag-ghost"
chosen-class="slide-drag-chosen"
drag-class="slide-drag-active"
>
<div
v-for="slide in sortedSlides"
v-for="slide in localSlides"
:key="slide.id"
class="slide-card group relative overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm transition-all duration-300 hover:shadow-lg hover:border-gray-300 hover:-translate-y-0.5"
class="slide-card group relative overflow-hidden rounded-xl border border-gray-200/80 bg-white shadow-sm transition-all duration-300 hover:shadow-lg hover:border-gray-300 hover:-translate-y-0.5 cursor-grab active:cursor-grabbing"
>
<!-- PPT processing indicator -->
<div
@ -172,7 +227,7 @@ function isExpired(expireDate) {
class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/90 backdrop-blur-sm"
>
<LoadingSpinner size="md" />
<span class="mt-2 text-xs font-medium text-gray-500">Verarbeitung läuft...</span>
<span class="mt-2 text-xs font-medium text-gray-500">Verarbeitung l&auml;uft...</span>
</div>
<!-- Thumbnail -->
@ -198,26 +253,26 @@ function isExpired(expireDate) {
data-testid="slide-grid-delete-button"
@click.stop="promptDelete(slide)"
class="absolute left-2.5 top-2.5 flex h-8 w-8 items-center justify-center rounded-lg bg-black/60 text-white shadow-sm backdrop-blur-sm transition-all duration-200 hover:bg-red-600 hover:scale-110"
title="Löschen"
title="L&ouml;schen"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</button>
<!-- Fullscreen button — RIGHT side, always visible -->
<a
data-testid="slide-grid-fullimage-link"
<!-- Preview button — RIGHT side (#7) -->
<button
v-if="fullImageUrl(slide)"
:href="fullImageUrl(slide)"
target="_blank"
data-testid="slide-grid-preview-button"
@click.stop="openPreview(slide)"
class="absolute right-2.5 top-2.5 flex h-8 w-8 items-center justify-center rounded-lg bg-black/60 text-white shadow-sm backdrop-blur-sm transition-all duration-200 hover:bg-white/90 hover:text-gray-800 hover:scale-110"
title="Vollbild öffnen"
title="Vorschau"
>
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 6H5.25A2.25 2.25 0 003 8.25v10.5A2.25 2.25 0 005.25 21h10.5A2.25 2.25 0 0018 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25" />
<path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 010-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</a>
</button>
</div>
<!-- Metadata -->
@ -249,7 +304,7 @@ function isExpired(expireDate) {
v-if="editingExpireId !== slide.id"
class="flex items-center gap-1.5 cursor-pointer rounded-lg px-2 py-1 -mx-1 transition-colors hover:bg-gray-50"
@click="startEditExpire(slide)"
:title="'Ablaufdatum ändern'"
:title="'Ablaufdatum &auml;ndern'"
>
<svg
class="h-3.5 w-3.5 shrink-0"
@ -321,39 +376,80 @@ function isExpired(expireDate) {
</div>
</div>
</div>
<!-- Inline upload card (last grid item) -->
<div
v-if="showUploader"
class="slide-upload-card relative overflow-hidden rounded-xl border-2 border-dashed border-gray-300 bg-gradient-to-br from-gray-50/80 to-amber-50/40 transition-all duration-300 hover:border-amber-400 hover:shadow-md hover:from-amber-50/60 hover:to-orange-50/40"
class="no-drag slide-upload-card relative overflow-hidden rounded-xl border-2 border-dashed border-gray-300 bg-gradient-to-br from-gray-50/80 to-amber-50/40 transition-all duration-300 hover:border-amber-400 hover:shadow-md hover:from-amber-50/60 hover:to-orange-50/40"
>
<div class="aspect-video flex items-center justify-center">
<div class="flex h-full items-center justify-center">
<slot name="upload-card">
<!-- Fallback if no slot content -->
<div class="flex flex-col items-center gap-2 text-gray-400">
<svg class="h-10 w-10" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
<span class="text-sm font-medium">Folien hinzufügen</span>
<span class="text-sm font-medium">Folien hinzuf&uuml;gen</span>
</div>
</slot>
</div>
</div>
</div>
</VueDraggable>
<!-- Delete confirmation dialog -->
<!-- Slide preview popup (#7) -->
<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
v-if="previewSlide"
class="fixed inset-0 z-[60] flex items-center justify-center bg-black/70 backdrop-blur-sm"
@click.self="closePreview"
>
<div class="relative max-h-[90vh] max-w-[90vw]">
<img
:src="fullImageUrl(previewSlide)"
:alt="previewSlide.original_filename"
class="max-h-[85vh] max-w-[85vw] rounded-lg object-contain shadow-2xl"
/>
<div class="absolute -top-3 -right-3 flex gap-2">
<button
@click="deleteFromPreview"
class="flex h-10 w-10 items-center justify-center rounded-full bg-red-600 text-white shadow-lg transition hover:bg-red-700"
title="L&ouml;schen"
>
<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</button>
<button
@click="closePreview"
class="flex h-10 w-10 items-center justify-center rounded-full bg-gray-800 text-white shadow-lg transition hover:bg-gray-700"
title="Schliessen"
>
<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>
</div>
</div>
</Transition>
</Teleport>
<!-- Delete confirmation dialog (#3: removed Teleport wrapper — dialog uses showModal() top layer) -->
<ConfirmDialog
:show="confirmingDelete"
title="Folie löschen?"
:message="`Möchtest du die Folie '${slideToDelete?.original_filename || ''}' wirklich löschen?`"
confirm-label="Löschen"
title="Folie l&ouml;schen?"
:message="`M&ouml;chtest du die Folie '${slideToDelete?.original_filename || ''}' wirklich l&ouml;schen?`"
confirm-label="L&ouml;schen"
cancel-label="Abbrechen"
variant="danger"
@confirm="confirmDelete"
@cancel="cancelDelete"
/>
</Teleport>
</div>
</template>
@ -369,4 +465,22 @@ function isExpired(expireDate) {
.slide-upload-card {
min-height: 0;
}
/* Drag highlight styles */
.slide-drag-ghost {
opacity: 0.4;
border: 2px dashed rgb(99, 102, 241);
}
.slide-drag-chosen {
ring: 2px;
ring-color: rgb(99, 102, 241);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
transform: scale(1.05);
}
.slide-drag-active {
opacity: 0.8;
transform: rotate(2deg);
}
</style>