changes - Event Gallery

app/(defaults)/event-gallery-full/page.tsx

@@ -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>
     );
 };

components/gallery/CreateEventGalleryForm.tsx

@@ -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);
+        const newValue = e.target.value;
-        if (parsedLinks.length > 20) {
+        setLinkInput(newValue);
-            setErrors({ images: 'You can only add up to 20 images at a time' });
+        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) {
+        } else if (parsedLinks.length > remainingSlots) {
-            newErrors.images = 'Only 20 images can be added at a time';
+            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}
+                    disabled={loading || fetchingImages || remainingSlots === 0}
-                    className={`bg-blue-600 text-white px-6 py-2 rounded hover:bg-blue-700 ${loading ? 'opacity-50 cursor-not-allowed' : ''}`}
+                    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;
+

components/gallery/ListOfEventGallery.tsx

@@ -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,6 +163,14 @@ 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>
+                <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}`)}
@@ -169,6 +179,7 @@ const ListOfEventsGallery: React.FC<EditEventFormProps> = ({ eventId }) => {
                         Upload Images
                     </button>
                 </div>
+            </div>
 
             {/* Gallery Grid */}
             {eventImages.length === 0 ? (