GoMFT/components/file_metadata/utils/file_metadata_js.templ

package utils

// fileMetadataJS provides common JavaScript functions for file metadata components
templ fileMetadataJS() {
	<script>
		// Show a modal by ID
		function showModal(modalId) {
			const modal = document.getElementById(modalId);
			if (modal) {
				modal.classList.remove('hidden');
				modal.classList.add('flex');
			}
		}

		// Close a modal by ID
		function closeModal(modalId) {
			const modal = document.getElementById(modalId);
			if (modal) {
				modal.classList.add('hidden');
				modal.classList.remove('flex');
			}
		}

		// Show a toast notification
		function showToast(message, type = 'info') {
			const container = document.getElementById('toast-container');
			if (!container) return;

			const toast = document.createElement('div');
			toast.className = `p-4 rounded-lg shadow-lg ${
				type === 'success' ? 'bg-green-500' :
				type === 'error' ? 'bg-red-500' :
				type === 'warning' ? 'bg-yellow-500' :
				'bg-blue-500'
			} text-white`;
			toast.textContent = message;

			container.appendChild(toast);

			// Remove the toast after 5 seconds
			setTimeout(() => {
				toast.remove();
			}, 5000);
		}

		// Close modal when clicking outside
		document.addEventListener('click', function(event) {
			if (event.target.classList.contains('fixed')) {
				event.target.classList.add('hidden');
				event.target.classList.remove('flex');
			}
		});

		// Handle delete confirmation
		document.addEventListener('click', function(event) {
			if (event.target.id === 'confirm-delete') {
				const fileId = event.target.dataset.fileId;
				if (!fileId) return;

				fetch(`/files/${fileId}`, {
					method: 'DELETE',
					headers: {
						'Content-Type': 'application/json',
					},
				})
				.then(response => {
					if (response.ok) {
						showToast('File deleted successfully', 'success');
						// Reload the page after a short delay
						setTimeout(() => {
							window.location.reload();
						}, 1000);
					} else {
						throw new Error('Failed to delete file');
					}
				})
				.catch(error => {
					showToast(error.message, 'error');
				})
				.finally(() => {
					closeModal('delete-dialog');
				});
			}
		});

		// Handle HTMX request errors
		document.body.addEventListener('htmx:responseError', function(evt) {
			showToast('An error occurred while processing your request', 'error');
		});
	</script>
}