first commit
This commit is contained in:
Michaël
305
frontend/src/app/admin/gallery/page.tsx
Normal file
305
frontend/src/app/admin/gallery/page.tsx
Normal file
@@ -0,0 +1,305 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import { useLanguage } from '@/context/LanguageContext';
|
||||
import { mediaApi, Media } from '@/lib/api';
|
||||
import Card from '@/components/ui/Card';
|
||||
import Button from '@/components/ui/Button';
|
||||
import {
|
||||
PhotoIcon,
|
||||
TrashIcon,
|
||||
ArrowUpTrayIcon,
|
||||
XMarkIcon,
|
||||
MagnifyingGlassIcon,
|
||||
LinkIcon,
|
||||
CheckIcon,
|
||||
} from '@heroicons/react/24/outline';
|
||||
import toast from 'react-hot-toast';
|
||||
|
||||
export default function AdminGalleryPage() {
|
||||
const { locale } = useLanguage();
|
||||
const [media, setMedia] = useState<Media[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
const [selectedImage, setSelectedImage] = useState<Media | null>(null);
|
||||
const [filter, setFilter] = useState<string>('');
|
||||
const [copiedId, setCopiedId] = useState<string | null>(null);
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
loadMedia();
|
||||
}, [filter]);
|
||||
|
||||
const loadMedia = async () => {
|
||||
try {
|
||||
// We need to call the media API - let's add it if it doesn't exist
|
||||
const res = await fetch('/api/media', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('spanglish-token')}`,
|
||||
},
|
||||
});
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setMedia(data.media || []);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to load media');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const files = e.target.files;
|
||||
if (!files || files.length === 0) return;
|
||||
|
||||
setUploading(true);
|
||||
let successCount = 0;
|
||||
let failCount = 0;
|
||||
|
||||
for (const file of Array.from(files)) {
|
||||
try {
|
||||
await mediaApi.upload(file, undefined, 'gallery');
|
||||
successCount++;
|
||||
} catch (error) {
|
||||
failCount++;
|
||||
}
|
||||
}
|
||||
|
||||
if (successCount > 0) {
|
||||
toast.success(`${successCount} image(s) uploaded successfully`);
|
||||
}
|
||||
if (failCount > 0) {
|
||||
toast.error(`${failCount} image(s) failed to upload`);
|
||||
}
|
||||
|
||||
loadMedia();
|
||||
setUploading(false);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Are you sure you want to delete this image?')) return;
|
||||
|
||||
try {
|
||||
await mediaApi.delete(id);
|
||||
toast.success('Image deleted');
|
||||
loadMedia();
|
||||
if (selectedImage?.id === id) {
|
||||
setSelectedImage(null);
|
||||
}
|
||||
} catch (error) {
|
||||
toast.error('Failed to delete image');
|
||||
}
|
||||
};
|
||||
|
||||
const copyUrl = async (url: string, id: string) => {
|
||||
const fullUrl = window.location.origin + url;
|
||||
try {
|
||||
await navigator.clipboard.writeText(fullUrl);
|
||||
setCopiedId(id);
|
||||
toast.success('URL copied');
|
||||
setTimeout(() => setCopiedId(null), 2000);
|
||||
} catch (error) {
|
||||
toast.error('Failed to copy URL');
|
||||
}
|
||||
};
|
||||
|
||||
const formatDate = (dateStr: string) => {
|
||||
return new Date(dateStr).toLocaleDateString(locale === 'es' ? 'es-ES' : 'en-US', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
});
|
||||
};
|
||||
|
||||
const filteredMedia = media.filter(m => {
|
||||
if (!filter) return true;
|
||||
if (filter === 'gallery') return m.relatedType === 'gallery' || !m.relatedType;
|
||||
if (filter === 'event') return m.relatedType === 'event';
|
||||
return true;
|
||||
});
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<div className="animate-spin w-8 h-8 border-4 border-primary-yellow border-t-transparent rounded-full" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<h1 className="text-2xl font-bold text-primary-dark">Gallery Management</h1>
|
||||
<Button onClick={() => fileInputRef.current?.click()} isLoading={uploading}>
|
||||
<ArrowUpTrayIcon className="w-5 h-5 mr-2" />
|
||||
Upload Images
|
||||
</Button>
|
||||
<input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept="image/jpeg,image/png,image/gif,image/webp,image/avif"
|
||||
multiple
|
||||
onChange={handleUpload}
|
||||
className="hidden"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Stats */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
|
||||
<Card className="p-4 text-center">
|
||||
<p className="text-3xl font-bold text-primary-dark">{media.length}</p>
|
||||
<p className="text-sm text-gray-500">Total Images</p>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<p className="text-3xl font-bold text-blue-600">
|
||||
{media.filter(m => m.relatedType === 'event').length}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">Event Images</p>
|
||||
</Card>
|
||||
<Card className="p-4 text-center">
|
||||
<p className="text-3xl font-bold text-green-600">
|
||||
{media.filter(m => m.relatedType === 'gallery' || !m.relatedType).length}
|
||||
</p>
|
||||
<p className="text-sm text-gray-500">Gallery Images</p>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
{/* Filter */}
|
||||
<Card className="p-4 mb-6">
|
||||
<div className="flex items-center gap-4">
|
||||
<label className="text-sm font-medium">Filter:</label>
|
||||
<select
|
||||
value={filter}
|
||||
onChange={(e) => setFilter(e.target.value)}
|
||||
className="px-4 py-2 rounded-btn border border-secondary-light-gray"
|
||||
>
|
||||
<option value="">All Images</option>
|
||||
<option value="gallery">Gallery Only</option>
|
||||
<option value="event">Event Banners</option>
|
||||
</select>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Gallery Grid */}
|
||||
{filteredMedia.length === 0 ? (
|
||||
<Card className="p-12 text-center">
|
||||
<PhotoIcon className="w-16 h-16 mx-auto text-gray-300 mb-4" />
|
||||
<h3 className="text-lg font-semibold text-gray-600 mb-2">No images yet</h3>
|
||||
<p className="text-gray-500 mb-4">Upload images to build your gallery</p>
|
||||
<Button onClick={() => fileInputRef.current?.click()}>
|
||||
<ArrowUpTrayIcon className="w-5 h-5 mr-2" />
|
||||
Upload First Image
|
||||
</Button>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
|
||||
{filteredMedia.map((item) => (
|
||||
<Card key={item.id} className="group relative overflow-hidden aspect-square">
|
||||
<img
|
||||
src={item.fileUrl}
|
||||
alt=""
|
||||
className="w-full h-full object-cover cursor-pointer hover:scale-105 transition-transform"
|
||||
onClick={() => setSelectedImage(item)}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
||||
<button
|
||||
onClick={() => setSelectedImage(item)}
|
||||
className="p-2 bg-white rounded-full hover:bg-gray-100"
|
||||
title="View"
|
||||
>
|
||||
<MagnifyingGlassIcon className="w-5 h-5" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => copyUrl(item.fileUrl, item.id)}
|
||||
className="p-2 bg-white rounded-full hover:bg-gray-100"
|
||||
title="Copy URL"
|
||||
>
|
||||
{copiedId === item.id ? (
|
||||
<CheckIcon className="w-5 h-5 text-green-600" />
|
||||
) : (
|
||||
<LinkIcon className="w-5 h-5" />
|
||||
)}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(item.id)}
|
||||
className="p-2 bg-white rounded-full hover:bg-red-100 text-red-600"
|
||||
title="Delete"
|
||||
>
|
||||
<TrashIcon className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
{item.relatedType && (
|
||||
<div className="absolute top-2 left-2">
|
||||
<span className={`text-xs px-2 py-1 rounded ${
|
||||
item.relatedType === 'event' ? 'bg-blue-500 text-white' : 'bg-green-500 text-white'
|
||||
}`}>
|
||||
{item.relatedType === 'event' ? 'Event' : 'Gallery'}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Image Preview Modal */}
|
||||
{selectedImage && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<button
|
||||
className="absolute top-4 right-4 text-white hover:text-gray-300"
|
||||
onClick={() => setSelectedImage(null)}
|
||||
>
|
||||
<XMarkIcon className="w-8 h-8" />
|
||||
</button>
|
||||
|
||||
<div
|
||||
className="max-w-4xl max-h-[80vh] flex flex-col items-center"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<img
|
||||
src={selectedImage.fileUrl}
|
||||
alt=""
|
||||
className="max-w-full max-h-[70vh] object-contain rounded-lg"
|
||||
/>
|
||||
<div className="mt-4 bg-white rounded-lg p-4 w-full max-w-md">
|
||||
<p className="text-sm text-gray-500 mb-2">
|
||||
Uploaded: {formatDate(selectedImage.createdAt)}
|
||||
</p>
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
type="text"
|
||||
value={window.location.origin + selectedImage.fileUrl}
|
||||
readOnly
|
||||
className="flex-1 px-3 py-2 text-sm border rounded-btn bg-gray-50"
|
||||
/>
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => copyUrl(selectedImage.fileUrl, selectedImage.id)}
|
||||
>
|
||||
{copiedId === selectedImage.id ? 'Copied!' : 'Copy'}
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex gap-2 mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="flex-1"
|
||||
onClick={() => handleDelete(selectedImage.id)}
|
||||
>
|
||||
<TrashIcon className="w-4 h-4 mr-2" />
|
||||
Delete
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user