From 655991c4718379b4d179b11b0dd736cbc12481b2 Mon Sep 17 00:00:00 2001
From: Thorsten Bus <thorsten@buss-labs.de>
Date: Mon, 2 Mar 2026 21:22:19 +0100
Subject: [PATCH] fix(ui): add drag highlight to slide grid

---
 resources/js/Components/SlideGrid.vue | 202 ++++++++++++++++++++------
 1 file changed, 158 insertions(+), 44 deletions(-)

diff --git a/resources/js/Components/SlideGrid.vue b/resources/js/Components/SlideGrid.vue
index 10c7cbf..62be224 100644
--- a/resources/js/Components/SlideGrid.vue
+++ b/resources/js/Components/SlideGrid.vue
@@ -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"
-            class="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-3"
-        >
+        <!-- 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">
-            <ConfirmDialog
-                :show="confirmingDelete"
-                title="Folie löschen?"
-                :message="`Möchtest du die Folie '${slideToDelete?.original_filename || ''}' wirklich löschen?`"
-                confirm-label="Löschen"
-                cancel-label="Abbrechen"
-                variant="danger"
-                @confirm="confirmDelete"
-                @cancel="cancelDelete"
-            />
+            <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&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>
 </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>