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

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

@ -1,7 +1,8 @@
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref, computed, watch } from 'vue'
import { router } from '@inertiajs/vue3' import { router } from '@inertiajs/vue3'
import axios from 'axios' import axios from 'axios'
import { VueDraggable } from 'vue-draggable-plus'
import ConfirmDialog from '@/Components/ConfirmDialog.vue' import ConfirmDialog from '@/Components/ConfirmDialog.vue'
import LoadingSpinner from '@/Components/LoadingSpinner.vue' import LoadingSpinner from '@/Components/LoadingSpinner.vue'
@ -36,11 +37,29 @@ const deleting = ref(false)
const editingExpireId = ref(null) const editingExpireId = ref(null)
const editingExpireValue = ref('') 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(() => { const sortedSlides = computed(() => {
return [...props.slides].sort( return [...props.slides].sort((a, b) => {
(a, b) => new Date(b.uploaded_at) - new Date(a.uploaded_at), 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) { function thumbnailUrl(slide) {
@ -54,7 +73,7 @@ function fullImageUrl(slide) {
} }
function formatDate(dateStr) { function formatDate(dateStr) {
if (!dateStr) return '—' if (!dateStr) return '\u2014'
const d = new Date(dateStr) const d = new Date(dateStr)
return d.toLocaleDateString('de-DE', { return d.toLocaleDateString('de-DE', {
day: '2-digit', day: '2-digit',
@ -64,7 +83,7 @@ function formatDate(dateStr) {
} }
function formatDateTime(dateStr) { function formatDateTime(dateStr) {
if (!dateStr) return '—' if (!dateStr) return '\u2014'
const d = new Date(dateStr) const d = new Date(dateStr)
return d.toLocaleDateString('de-DE', { return d.toLocaleDateString('de-DE', {
day: '2-digit', day: '2-digit',
@ -141,13 +160,41 @@ function isExpired(expireDate) {
if (!expireDate) return false if (!expireDate) return false
return new Date(expireDate) < new Date() 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> </script>
<template> <template>
<div data-testid="slide-grid" class="slide-grid"> <div data-testid="slide-grid" class="slide-grid">
<!-- Empty state (only when no slides AND no uploader) --> <!-- Empty state (only when no slides AND no uploader) -->
<div <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" 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"> <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> <p class="text-sm text-gray-400">Noch keine Folien vorhanden</p>
</div> </div>
<!-- Grid of thumbnails --> <!-- Grid of thumbnails with drag'n'drop (#9) -->
<div <VueDraggable
v-if="sortedSlides.length > 0 || showUploader" v-if="localSlides.length > 0 || showUploader"
class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3" 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 <div
v-for="slide in sortedSlides" v-for="slide in localSlides"
:key="slide.id" :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 --> <!-- PPT processing indicator -->
<div <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" class="absolute inset-0 z-10 flex flex-col items-center justify-center bg-white/90 backdrop-blur-sm"
> >
<LoadingSpinner size="md" /> <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> </div>
<!-- Thumbnail --> <!-- Thumbnail -->
@ -198,26 +253,26 @@ function isExpired(expireDate) {
data-testid="slide-grid-delete-button" data-testid="slide-grid-delete-button"
@click.stop="promptDelete(slide)" @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" 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"> <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" /> <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> </svg>
</button> </button>
<!-- Fullscreen button — RIGHT side, always visible --> <!-- Preview button — RIGHT side (#7) -->
<a <button
data-testid="slide-grid-fullimage-link"
v-if="fullImageUrl(slide)" v-if="fullImageUrl(slide)"
:href="fullImageUrl(slide)" data-testid="slide-grid-preview-button"
target="_blank" @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" 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"> <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> </svg>
</a> </button>
</div> </div>
<!-- Metadata --> <!-- Metadata -->
@ -249,7 +304,7 @@ function isExpired(expireDate) {
v-if="editingExpireId !== slide.id" 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" 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)" @click="startEditExpire(slide)"
:title="'Ablaufdatum ändern'" :title="'Ablaufdatum &auml;ndern'"
> >
<svg <svg
class="h-3.5 w-3.5 shrink-0" class="h-3.5 w-3.5 shrink-0"
@ -321,39 +376,80 @@ function isExpired(expireDate) {
</div> </div>
</div> </div>
</div> </div>
<!-- Inline upload card (last grid item) -->
<div <div
v-if="showUploader" 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"> <slot name="upload-card">
<!-- Fallback if no slot content -->
<div class="flex flex-col items-center gap-2 text-gray-400"> <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"> <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" /> <path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg> </svg>
<span class="text-sm font-medium">Folien hinzufügen</span> <span class="text-sm font-medium">Folien hinzuf&uuml;gen</span>
</div> </div>
</slot> </slot>
</div> </div>
</div> </div>
</div> </VueDraggable>
<!-- Delete confirmation dialog --> <!-- Slide preview popup (#7) -->
<Teleport to="body"> <Teleport to="body">
<ConfirmDialog <Transition
:show="confirmingDelete" enter-active-class="transition duration-200 ease-out"
title="Folie löschen?" enter-from-class="opacity-0"
:message="`Möchtest du die Folie '${slideToDelete?.original_filename || ''}' wirklich löschen?`" enter-to-class="opacity-100"
confirm-label="Löschen" leave-active-class="transition duration-150 ease-in"
cancel-label="Abbrechen" leave-from-class="opacity-100"
variant="danger" leave-to-class="opacity-0"
@confirm="confirmDelete" >
@cancel="cancelDelete" <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> </Teleport>
<!-- Delete confirmation dialog (#3: removed Teleport wrapper — dialog uses showModal() top layer) -->
<ConfirmDialog
:show="confirmingDelete"
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"
/>
</div> </div>
</template> </template>
@ -369,4 +465,22 @@ function isExpired(expireDate) {
.slide-upload-card { .slide-upload-card {
min-height: 0; 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> </style>