changes - Event Gallery
This commit is contained in:
parent
7daefa51be
commit
adf67b76c0
@ -1,6 +1,6 @@
|
||||
'use client'
|
||||
import React from 'react';
|
||||
import FullEventGallery from '@/components/gallery/FullEventGallery';
|
||||
import ListOfEventsGallery from '@/components/gallery/ListOfEventGallery';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
const EventGalleryFullPage = () => {
|
||||
@ -9,7 +9,7 @@ const EventGalleryFullPage = () => {
|
||||
|
||||
return (
|
||||
<div className="py-8">
|
||||
<FullEventGallery eventId={eventId} />
|
||||
<ListOfEventsGallery eventId={eventId} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
'use client';
|
||||
import React, { useState, ChangeEvent, FormEvent } from 'react';
|
||||
import React, { useState, ChangeEvent, FormEvent, useEffect } from 'react';
|
||||
import IconTrashLines from '../icon/icon-trash-lines';
|
||||
import axios from 'axios';
|
||||
import { useRouter } from 'next/navigation';
|
||||
@ -18,6 +18,33 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
const [linkInput, setLinkInput] = useState('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [errors, setErrors] = useState<FormErrors>({});
|
||||
const [existingImagesCount, setExistingImagesCount] = useState<number>(0);
|
||||
const [fetchingImages, setFetchingImages] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (eventId) {
|
||||
getEventGallery();
|
||||
} else {
|
||||
setFetchingImages(false);
|
||||
}
|
||||
}, [eventId]);
|
||||
|
||||
const getEventGallery = async () => {
|
||||
try {
|
||||
const token = localStorage.getItem("token");
|
||||
const res = await axios.get(buildApiUrl(`event-images/event/${eventId}`), {
|
||||
headers: { Authorization: `Bearer ${token}` },
|
||||
});
|
||||
const images = res.data?.data || [];
|
||||
setExistingImagesCount(images.length);
|
||||
} catch (error) {
|
||||
console.error('error fetching existing images', error);
|
||||
} finally {
|
||||
setFetchingImages(false);
|
||||
}
|
||||
};
|
||||
|
||||
const remainingSlots = Math.max(0, 20 - existingImagesCount);
|
||||
|
||||
const parsedLinks = React.useMemo(() => {
|
||||
return linkInput.split(/[\n,]+/).map(l => l.trim()).filter(l => l !== '').map(link => {
|
||||
@ -32,9 +59,11 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
}, [linkInput]);
|
||||
|
||||
const handleLinkInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
|
||||
setLinkInput(e.target.value);
|
||||
if (parsedLinks.length > 20) {
|
||||
setErrors({ images: 'You can only add up to 20 images at a time' });
|
||||
const newValue = e.target.value;
|
||||
setLinkInput(newValue);
|
||||
const currentCount = newValue.split(/[\n,]+/).map(l => l.trim()).filter(l => l !== '').length;
|
||||
if (currentCount > remainingSlots) {
|
||||
setErrors({ images: `You can only add up to ${remainingSlots} more images (20 total per event).` });
|
||||
} else {
|
||||
setErrors(prev => ({ ...prev, images: '' }));
|
||||
}
|
||||
@ -51,8 +80,8 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
|
||||
if (parsedLinks.length === 0) {
|
||||
newErrors.images = 'Please provide at least one image link';
|
||||
} else if (parsedLinks.length > 20) {
|
||||
newErrors.images = 'Only 20 images can be added at a time';
|
||||
} else if (parsedLinks.length > remainingSlots) {
|
||||
newErrors.images = `Only ${remainingSlots} more images can be added (20 total per event).`;
|
||||
}
|
||||
|
||||
setErrors(newErrors);
|
||||
@ -109,10 +138,17 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
placeholder="Paste your Google Drive links here, one per line..."
|
||||
value={linkInput}
|
||||
onChange={handleLinkInputChange}
|
||||
className="w-full border rounded px-3 py-2"
|
||||
disabled={remainingSlots === 0}
|
||||
className="w-full border rounded px-3 py-2 disabled:bg-gray-100 disabled:cursor-not-allowed dark:disabled:bg-gray-800"
|
||||
/>
|
||||
{errors.images && <p className="text-red-500 text-sm">{errors.images}</p>}
|
||||
<p className="text-gray-500 text-xs mt-1">You can add up to 20 images.</p>
|
||||
<p className="text-gray-500 text-xs mt-1">
|
||||
{fetchingImages
|
||||
? 'Checking current image count...'
|
||||
: remainingSlots > 0
|
||||
? `You can add up to ${remainingSlots} more images (currently ${existingImagesCount}/20).`
|
||||
: `You have reached the maximum of 20 images for this event.`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Previews */}
|
||||
@ -141,13 +177,20 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
)}
|
||||
|
||||
{/* Submit */}
|
||||
<div className="mt-6">
|
||||
<div className="mt-6 flex items-center gap-4">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className={`bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
disabled={loading || fetchingImages || remainingSlots === 0}
|
||||
className={`bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 ${(loading || fetchingImages || remainingSlots === 0) ? 'opacity-50 cursor-not-allowed' : ''}`}
|
||||
>
|
||||
{loading ? 'Uploading...' : 'Submit'}
|
||||
{loading ? 'Uploading...' : fetchingImages ? 'Checking limits...' : 'Submit'}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="bg-gray-200 text-gray-800 px-6 py-2 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
@ -155,3 +198,4 @@ const CreateEventGalleryForm: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
};
|
||||
|
||||
export default CreateEventGalleryForm;
|
||||
|
||||
|
||||
@ -57,7 +57,7 @@ const ListOfEventsGallery: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
},
|
||||
});
|
||||
const formatted: GalleryImage[] = res.data?.data?.map((img: any) => {
|
||||
console.log("Image URL:", img.imageurl);
|
||||
// console.log("Image URL:", img.imageurl);
|
||||
|
||||
return {
|
||||
id: img.id,
|
||||
@ -82,7 +82,9 @@ const ListOfEventsGallery: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
id: item.id,
|
||||
sort_order: index,
|
||||
}));
|
||||
console.log("Sending reorder payload:", images);
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
await axios.put(buildApiUrl('event-images/reorder'),
|
||||
{ images },
|
||||
{
|
||||
@ -161,13 +163,22 @@ const ListOfEventsGallery: React.FC<EditEventFormProps> = ({ eventId }) => {
|
||||
{/* Header */}
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h5 className="text-lg font-semibold dark:text-white-light">Gallery</h5>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push(`/create-event-gallery?eventid=${eventId}`)}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Upload Images
|
||||
</button>
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.back()}
|
||||
className="bg-gray-200 text-gray-800 px-4 py-2 rounded text-sm font-medium hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 transition-colors"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => router.push(`/create-event-gallery?eventid=${eventId}`)}
|
||||
className="bg-blue-600 text-white px-4 py-2 rounded text-sm font-medium hover:bg-blue-700 transition-colors"
|
||||
>
|
||||
Upload Images
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Gallery Grid */}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user