"use client"; import { ChangeEvent, FormEvent, useEffect, useState, } from "react"; import Link from "next/link"; import { useParams, useRouter } from "next/navigation"; type GalleryImage = { id: number; image: string; galleryId: number; createdAt: string; }; type Gallery = { id: number; title: string; description: string | null; image: string | null; category: string | null; images?: GalleryImage[]; galleryimage?: GalleryImage[]; }; type UploadedImage = { url: string; fileName: string; }; type SelectedImage = { file: File; preview: string; }; export default function EditGalleryPage() { const router = useRouter(); const params = useParams(); const id = params.id as string; const [title, setTitle] = useState(""); const [description, setDescription] = useState(""); const [category, setCategory] = useState(""); const [existingImages, setExistingImages] = useState< GalleryImage[] >([]); const [selectedFiles, setSelectedFiles] = useState< SelectedImage[] >([]); const [loading, setLoading] = useState(true); const [uploading, setUploading] = useState(false); const [saving, setSaving] = useState(false); const [sidebarOpen, setSidebarOpen] = useState(false); // ===================================================== // GET GALLERY DETAIL // ===================================================== const getGallery = async () => { if (!id) return; try { setLoading(true); const response = await fetch(`/api/gallery/${id}`, { method: "GET", cache: "no-store", }); const result = await response.json(); console.log("GET GALLERY DETAIL:", result); if (!response.ok || !result.success) { alert( result.message || "Gagal mengambil data Gallery." ); router.push("/secure-panel/gallery"); return; } const gallery: Gallery = result.data; setTitle(gallery.title || ""); setDescription( gallery.description || "" ); setCategory( gallery.category || "" ); let galleryImages: GalleryImage[] = []; if ( Array.isArray(gallery.galleryimage) && gallery.galleryimage.length > 0 ) { galleryImages = gallery.galleryimage; } else if ( Array.isArray(gallery.images) && gallery.images.length > 0 ) { galleryImages = gallery.images; } else if (gallery.image) { galleryImages = [ { id: 0, image: gallery.image, galleryId: gallery.id, createdAt: "", }, ]; } setExistingImages(galleryImages); } catch (error) { console.error( "GET GALLERY DETAIL ERROR:", error ); alert( "Terjadi kesalahan saat mengambil data Gallery." ); router.push("/secure-panel/gallery"); } finally { setLoading(false); } }; // ===================================================== // LOAD DATA // ===================================================== useEffect(() => { if (id) { getGallery(); } }, [id]); // ===================================================== // CLEANUP PREVIEW // ===================================================== useEffect(() => { return () => { selectedFiles.forEach((item) => { URL.revokeObjectURL(item.preview); }); }; }, [selectedFiles]); // ===================================================== // PILIH GAMBAR BARU // ===================================================== const handleFileChange = ( event: ChangeEvent ) => { const files = Array.from( event.target.files || [] ); if (files.length === 0) { return; } const allowedTypes = [ "image/jpeg", "image/jpg", "image/png", "image/webp", "image/gif", ]; const maxSize = 5 * 1024 * 1024; for (const file of files) { if ( !allowedTypes.includes(file.type) ) { alert( `Format file ${file.name} tidak didukung.` ); event.target.value = ""; return; } if (file.size > maxSize) { alert( `Ukuran ${file.name} terlalu besar. Maksimal 5 MB.` ); event.target.value = ""; return; } } const newImages: SelectedImage[] = files.map((file) => ({ file, preview: URL.createObjectURL(file), })); setSelectedFiles( (previous) => [ ...previous, ...newImages, ] ); event.target.value = ""; }; // ===================================================== // HAPUS GAMBAR LAMA // ===================================================== const removeExistingImage = ( imageId: number ) => { setExistingImages( (previous) => previous.filter( (image) => image.id !== imageId ) ); }; // ===================================================== // HAPUS GAMBAR BARU // ===================================================== const removeSelectedImage = ( index: number ) => { setSelectedFiles( (previous) => { const image = previous[index]; if (image) { URL.revokeObjectURL( image.preview ); } return previous.filter( (_, currentIndex) => currentIndex !== index ); } ); }; // ===================================================== // UPLOAD GAMBAR BARU // ===================================================== const uploadNewImages = async (): Promise< UploadedImage[] | null > => { if ( selectedFiles.length === 0 ) { return []; } setUploading(true); try { const formData = new FormData(); selectedFiles.forEach( (item) => { formData.append( "files", item.file ); } ); const response = await fetch( "/api/gallery/upload", { method: "POST", body: formData, } ); const result = await response.json(); console.log( "UPLOAD GALLERY:", result ); if ( !response.ok || !result.success ) { alert( result.message || "Gagal mengupload gambar." ); return null; } return Array.isArray( result.data ) ? result.data : []; } catch (error) { console.error( "UPLOAD GALLERY IMAGES ERROR:", error ); alert( "Terjadi kesalahan saat mengupload gambar." ); return null; } finally { setUploading(false); } }; // ===================================================== // SIMPAN PERUBAHAN // ===================================================== const handleSubmit = async ( event: FormEvent ) => { event.preventDefault(); if (!title.trim()) { alert( "Title wajib diisi." ); return; } if ( existingImages.length === 0 && selectedFiles.length === 0 ) { alert( "Minimal satu gambar harus tersedia." ); return; } setSaving(true); try { let uploadedImages: UploadedImage[] = []; if ( selectedFiles.length > 0 ) { const uploaded = await uploadNewImages(); if (uploaded === null) { return; } uploadedImages = uploaded; } const allImages = [ ...existingImages.map( (image) => image.image ), ...uploadedImages.map( (image) => image.url ), ]; if ( allImages.length === 0 ) { alert( "Minimal satu gambar harus tersedia." ); return; } console.log( "UPDATE GALLERY IMAGES:", allImages ); const response = await fetch( `/api/gallery/${id}`, { method: "PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ title: title.trim(), description: description.trim() || null, category: category.trim() || null, images: allImages, }), } ); const result = await response.json(); console.log( "UPDATE GALLERY:", result ); if ( !response.ok || !result.success ) { alert( result.message || "Gagal memperbarui Gallery." ); return; } selectedFiles.forEach( (item) => { URL.revokeObjectURL( item.preview ); } ); setSelectedFiles([]); alert( "Gallery berhasil diperbarui." ); router.push( "/secure-panel/gallery" ); router.refresh(); } catch (error) { console.error( "UPDATE GALLERY ERROR:", error ); alert( "Terjadi kesalahan saat menyimpan Gallery." ); } finally { setSaving(false); } }; // ===================================================== // LOADING PAGE // ===================================================== if (loading) { return ( <>
Memuat Gallery

Sedang mengambil data Gallery...

); } // ===================================================== // PAGE // ===================================================== return ( <>
{/* ================================================= MOBILE OVERLAY ================================================= */}
setSidebarOpen(false) } /> {/* ================================================= SIDEBAR ================================================= */} {/* ================================================= MAIN ================================================= */}
{/* ================================================= TOPBAR ================================================= */}
ADMIN PANEL
Gallery Management
Website Logout
{/* ================================================= CONTENT ================================================= */}
{/* ================================================= PAGE HEADER ================================================= */}
Kembali ke Gallery
WEBSITE CONTENT

Edit Gallery

Perbarui informasi Gallery, kategori, gambar yang sudah tersedia, atau tambahkan dokumentasi baru untuk ditampilkan pada website portfolio GloVaTech.

Gallery Collection
{/* ================================================= FORM CARD ================================================= */}
GALLERY MANAGEMENT

Informasi Gallery

Periksa dan perbarui informasi utama Gallery sebelum menyimpan perubahan.

#{id}
{/* ================================================= TITLE & CATEGORY ================================================= */}
setTitle( event.target.value ) } placeholder="Contoh: Engineering Workshop" disabled={ saving || uploading } />
Gunakan judul yang singkat, jelas, dan menggambarkan isi dokumentasi Gallery.
setCategory( event.target.value ) } placeholder="Contoh: Electrical Maintenance" disabled={ saving || uploading } />
Masukkan kategori secara manual untuk mengelompokkan dokumentasi Gallery.
{/* ================================================= DESCRIPTION ================================================= */}