From b4c238de1fb47edf0ae1c95f13c3df79b13ca509 Mon Sep 17 00:00:00 2001
From: chark1es <charles15851@gmail.com>
Date: Sat, 15 Feb 2025 03:05:54 -0800
Subject: [PATCH] Update Officer_EventManagement.astro

---
 .../dashboard/Officer_EventManagement.astro   | 38 +++++++++----------
 1 file changed, 17 insertions(+), 21 deletions(-)

diff --git a/src/components/dashboard/Officer_EventManagement.astro b/src/components/dashboard/Officer_EventManagement.astro
index c9d23c0..d58b5ba 100644
--- a/src/components/dashboard/Officer_EventManagement.astro
+++ b/src/components/dashboard/Officer_EventManagement.astro
@@ -699,7 +699,7 @@ const currentPage = eventResponse.page;
                 <span class="loading loading-spinner loading-lg"></span>
             </div>
             <div id="previewContent" class="w-full">
-                <FilePreview client:load url="" filename="" id="universalFilePreview" />
+                <FilePreview client:only url="" filename="" id="universalFilePreview" />
             </div>
         </div>
     </div>
@@ -1832,19 +1832,26 @@ const currentPage = eventResponse.page;
         const modal = document.getElementById("filePreviewModal") as HTMLDialogElement;
         const filePreview = document.getElementById("universalFilePreview") as any;
         const previewFileName = document.getElementById("previewFileName");
+        const loadingSpinner = document.getElementById("previewLoadingSpinner");
         
-        if (filePreview && modal && previewFileName) {
-            // Update the preview component
-            const event = new CustomEvent("updateFilePreview", {
-                detail: { url, filename },
-            });
-            filePreview.dispatchEvent(event);
+        if (filePreview && modal && previewFileName && loadingSpinner) {
+            // Show loading spinner
+            loadingSpinner.classList.remove("hidden");
             
             // Update the filename display
             previewFileName.textContent = filename;
             
             // Show the modal
             modal.showModal();
+
+            // Update the preview component
+            filePreview.setAttribute("url", url);
+            filePreview.setAttribute("filename", filename);
+            
+            // Hide loading spinner after a short delay
+            setTimeout(() => {
+                loadingSpinner.classList.add("hidden");
+            }, 500);
         }
     };
 
@@ -1898,26 +1905,15 @@ const currentPage = eventResponse.page;
                     return `
                         <div class="flex items-center justify-between p-2 bg-base-200 rounded-lg${filesToDelete.has(filename) ? " opacity-50" : ""}" data-filename="${filename}">
                             <div class="flex items-center gap-2 flex-1 min-w-0">
+                                <span class="truncate">${filename}</span>
+                            </div>
+                            <div class="flex gap-2 flex-shrink-0">
                                 <button type="button" class="btn btn-ghost btn-xs" onclick="window.previewFile('${fileUrl}', '${filename}')">
                                     <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                         <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
                                         <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
                                     </svg>
                                 </button>
-                                <span class="truncate">${filename}</span>
-                            </div>
-                            <div class="flex gap-2 flex-shrink-0">
-                                <a
-                                    href="${fileUrl}"
-                                    download
-                                    class="btn btn-ghost btn-xs"
-                                    target="_blank"
-                                    rel="noopener noreferrer"
-                                >
-                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
-                                        <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd"/>
-                                    </svg>
-                                </a>
                                 <div class="text-error">
                                     ${
                                         filesToDelete.has(filename)