diff --git a/src/components/upload/EntityPhotoGallery.tsx b/src/components/upload/EntityPhotoGallery.tsx index 28b9e470..ac260998 100644 --- a/src/components/upload/EntityPhotoGallery.tsx +++ b/src/components/upload/EntityPhotoGallery.tsx @@ -2,6 +2,13 @@ import { useState, useEffect } from 'react'; import { Camera, Upload, LogIn, Settings } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { Card, CardContent } from '@/components/ui/card'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; import { useAuth } from '@/hooks/useAuth'; import { useNavigate } from 'react-router-dom'; import { UppyPhotoSubmissionUpload } from '@/components/upload/UppyPhotoSubmissionUpload'; @@ -35,10 +42,11 @@ export function EntityPhotoGallery({ const [loading, setLoading] = useState(true); const [selectedPhotoIndex, setSelectedPhotoIndex] = useState(null); const [isModalOpen, setIsModalOpen] = useState(false); + const [sortBy, setSortBy] = useState<'newest' | 'oldest'>('newest'); useEffect(() => { fetchPhotos(); - }, [entityId, entityType]); + }, [entityId, entityType, sortBy]); const fetchPhotos = async () => { try { @@ -50,8 +58,7 @@ export function EntityPhotoGallery({ .select('id, cloudflare_image_url, title, caption, submitted_by, created_at, order_index') .eq('entity_type', entityType) .eq('entity_id', entityId) - .order('order_index', { ascending: true }) - .order('created_at', { ascending: false }); + .order('created_at', { ascending: sortBy === 'oldest' }); console.log('📷 [FETCH PHOTOS] Query result:', { photoData, error, count: photoData?.length }); @@ -132,34 +139,52 @@ export function EntityPhotoGallery({ return (
{/* Header with Upload and Management Buttons */} -
-
-

Photo Gallery

-

- Share your photos of {entityName} -

-
-
- {isModerator && photos.length > 0 && ( - - )} - )} - + +
+ + {/* Sort Dropdown */} + {photos.length > 0 && ( +
+ Sort by: + +
+ )}
{/* Photo Management Dialog */} @@ -183,16 +208,11 @@ export function EntityPhotoGallery({ className="w-full h-48 sm:h-56 md:h-48 object-cover transition-transform cursor-pointer touch-manipulation active:opacity-80 sm:hover:scale-105" onClick={() => handlePhotoClick(index)} /> - {(photo.title || photo.caption) && ( + {photo.caption && (
- {photo.title && ( -

{photo.title}

- )} - {photo.caption && ( -

- {photo.caption} -

- )} +

+ {photo.caption} +

)} diff --git a/src/components/upload/PhotoManagementDialog.tsx b/src/components/upload/PhotoManagementDialog.tsx index 61eb9637..ee90b0dd 100644 --- a/src/components/upload/PhotoManagementDialog.tsx +++ b/src/components/upload/PhotoManagementDialog.tsx @@ -13,7 +13,7 @@ import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Textarea } from '@/components/ui/textarea'; import { useToast } from '@/hooks/use-toast'; -import { ArrowUp, ArrowDown, Trash2, Pencil } from 'lucide-react'; +import { Trash2, Pencil } from 'lucide-react'; import { Card, CardContent } from '@/components/ui/card'; interface Photo { @@ -75,53 +75,6 @@ export function PhotoManagementDialog({ } }; - const movePhoto = async (photoId: string, direction: 'up' | 'down') => { - const currentIndex = photos.findIndex((p) => p.id === photoId); - if ( - (direction === 'up' && currentIndex === 0) || - (direction === 'down' && currentIndex === photos.length - 1) - ) { - return; - } - - const newPhotos = [...photos]; - const targetIndex = direction === 'up' ? currentIndex - 1 : currentIndex + 1; - [newPhotos[currentIndex], newPhotos[targetIndex]] = [ - newPhotos[targetIndex], - newPhotos[currentIndex], - ]; - - // Update order_index for both photos - const updates = [ - { id: newPhotos[currentIndex].id, order_index: currentIndex }, - { id: newPhotos[targetIndex].id, order_index: targetIndex }, - ]; - - try { - for (const update of updates) { - const { error } = await supabase - .from('photos') - .update({ order_index: update.order_index }) - .eq('id', update.id); - - if (error) throw error; - } - - setPhotos(newPhotos); - toast({ - title: 'Success', - description: 'Photo order updated', - }); - onUpdate?.(); - } catch (error) { - console.error('Error updating photo order:', error); - toast({ - title: 'Error', - description: 'Failed to update photo order', - variant: 'destructive', - }); - } - }; const deletePhoto = async (photoId: string) => { @@ -227,7 +180,7 @@ export function PhotoManagementDialog({ Manage Photos - Reorder, edit, or delete photos for this entity + Edit or delete photos for this entity @@ -262,45 +215,24 @@ export function PhotoManagementDialog({

-
- - +