From 98ee9f37102a47e6efec8beef4695256b8aca6db Mon Sep 17 00:00:00 2001 From: chark1es Date: Sat, 1 Feb 2025 00:19:34 -0800 Subject: [PATCH] fix file viewer buttons --- src/components/auth/EventAuth.ts | 189 +++++++----------- .../profile/DefaultProfileView.astro | 23 ++- 2 files changed, 86 insertions(+), 126 deletions(-) diff --git a/src/components/auth/EventAuth.ts b/src/components/auth/EventAuth.ts index f7bc1ee..7cb8cef 100644 --- a/src/components/auth/EventAuth.ts +++ b/src/components/auth/EventAuth.ts @@ -1202,6 +1202,7 @@ export class EventAuth { const fileUrl = this.pb.files.getURL(event, file); const fileName = this.getFileNameFromUrl(file); const fileExt = fileName.split('.').pop()?.toLowerCase() || ''; + const nameWithoutExt = fileName.substring(0, fileName.lastIndexOf('.')); const fileItem = document.createElement("div"); fileItem.className = "bg-base-200 rounded-lg overflow-hidden"; @@ -1214,12 +1215,6 @@ export class EventAuth { ${fileName} `; - } else if (fileExt === 'pdf') { - previewHtml = ` -
- -
- `; } else { // For other file types, show an icon based on type const iconHtml = fileExt === 'txt' || fileExt === 'md' @@ -1239,23 +1234,26 @@ export class EventAuth { fileItem.innerHTML = ` ${previewHtml} -
-
- ${fileName} -
-
- - - - - - - -
+
+

+ ${nameWithoutExt} + ${fileExt} +

+
+
+ + + + + + Open + +
`; @@ -1263,7 +1261,7 @@ export class EventAuth { const deleteButton = fileItem.querySelector('.text-error'); if (deleteButton) { deleteButton.addEventListener('click', async (e) => { - e.preventDefault(); // Prevent any form submission + e.preventDefault(); if (confirm('Are you sure you want to remove this file?')) { try { const fileToRemove = deleteButton.getAttribute('data-file'); @@ -1307,14 +1305,14 @@ export class EventAuth { } } - private async handleViewFiles(eventId: string) { + private async handleViewFiles(eventId: string): Promise { try { - const event = await this.pb.collection("events").getOne(eventId); + const event = await this.pb.collection("events").getOne(eventId); // Create and show modal const modal = document.createElement("dialog"); modal.className = "modal"; - modal.innerHTML = ` + const modalContent = `

Files for ${event.event_name}

@@ -1330,7 +1328,7 @@ export class EventAuth {
${event.files && Array.isArray(event.files) && event.files.length > 0 - ? event.files.map(file => { + ? event.files.map((file: string) => { const fileUrl = this.pb.files.getURL(event, file); const fileName = this.getFileNameFromUrl(file); const fileExt = fileName.split('.').pop()?.toLowerCase() || ''; @@ -1351,31 +1349,36 @@ export class EventAuth { : ` `; - + previewHtml = ` -
+
${iconHtml}
`; } return ` - +
+ + + + + + Open in New Tab + +
+
`; }).join("") - : '
No files available
' + : `
No files available
` }
@@ -1387,90 +1390,44 @@ export class EventAuth {
- `; + `; + modal.innerHTML = modalContent; document.body.appendChild(modal); modal.showModal(); - // Add preview functionality - const previewButtons = modal.querySelectorAll('.preview-file'); - previewButtons.forEach(button => { - button.addEventListener('click', () => { - const url = (button as HTMLButtonElement).dataset.url; - const fileName = (button as HTMLButtonElement).dataset.filename; - const ext = (button as HTMLButtonElement).dataset.ext; - if (url && fileName) { - if (ext === 'pdf') { - window.open(url, '_blank'); - } else { - document.dispatchEvent(new CustomEvent('showFilePreview', { - detail: { url, fileName } - })); - } - } - }); - }); - - // Add download functionality - const downloadButton = modal.querySelector('.download-all'); - if (downloadButton && event.files && Array.isArray(event.files)) { - downloadButton.addEventListener('click', async () => { + // Add download all functionality + const downloadAllButton = modal.querySelector('.download-all') as HTMLButtonElement; + if (downloadAllButton) { + downloadAllButton.addEventListener('click', async () => { try { - if (event.files.length === 1) { - // For single file, download directly - const fileUrl = this.pb.files.getURL(event, event.files[0]); - const fileName = this.getFileNameFromUrl(event.files[0]); + // Create a new JSZip instance + const zip = new JSZip(); + + // Add each file to the zip + for (const file of event.files) { + const fileUrl = this.pb.files.getURL(event, file); + const fileName = this.getFileNameFromUrl(file); const response = await fetch(fileUrl); const blob = await response.blob(); - const url = window.URL.createObjectURL(blob); - const a = document.createElement('a'); - a.href = url; - a.download = fileName; - document.body.appendChild(a); - a.click(); - window.URL.revokeObjectURL(url); - document.body.removeChild(a); - } else { - // For multiple files, create a zip - const zip = new JSZip(); - - // Show loading state - downloadButton.classList.add('loading'); - downloadButton.setAttribute('disabled', 'true'); - - // Download all files and add to zip - await Promise.all(event.files.map(async (file: string) => { - const fileUrl = this.pb.files.getURL(event, file); - const fileName = this.getFileNameFromUrl(file); - const response = await fetch(fileUrl); - const blob = await response.blob(); - zip.file(fileName, blob); - })); - - // Generate and download zip file - const zipBlob = await zip.generateAsync({ type: 'blob' }); - const url = window.URL.createObjectURL(zipBlob); - const a = document.createElement('a'); - a.href = url; - a.download = `${event.event_name || 'event'}_files.zip`; - document.body.appendChild(a); - a.click(); - window.URL.revokeObjectURL(url); - document.body.removeChild(a); - - // Reset button state - downloadButton.classList.remove('loading'); - downloadButton.removeAttribute('disabled'); + zip.file(fileName, blob); } + + // Generate the zip file + const content = await zip.generateAsync({ type: "blob" }); + + // Create a download link and trigger it + const downloadUrl = URL.createObjectURL(content); + const link = document.createElement('a'); + link.href = downloadUrl; + link.download = `${event.event_name} Files.zip`; + document.body.appendChild(link); + link.click(); + document.body.removeChild(link); + URL.revokeObjectURL(downloadUrl); } catch (err) { console.error('Failed to download files:', err); alert('Failed to download files. Please try again.'); - - // Reset button state on error - if (downloadButton) { - downloadButton.classList.remove('loading'); - downloadButton.removeAttribute('disabled'); - } } }); } @@ -1483,4 +1440,4 @@ export class EventAuth { console.error("Failed to view files:", err); } } -} \ No newline at end of file +} \ No newline at end of file diff --git a/src/components/profile/DefaultProfileView.astro b/src/components/profile/DefaultProfileView.astro index 0af1d02..22b0528 100644 --- a/src/components/profile/DefaultProfileView.astro +++ b/src/components/profile/DefaultProfileView.astro @@ -568,16 +568,19 @@
${preview}
-

${fileName}

-
- - - - - - Open - -
+

+ ${fileName.substring(0, fileName.lastIndexOf("."))} + ${fileExt} +

+
+
+ + + + + + Open in New Tab +
`;