142 lines
4.0 KiB
TypeScript
142 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogFooter,
|
|
} from "@/components/ui/dialog";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Upload } from "lucide-react";
|
|
import { useState, useRef } from "react";
|
|
import { createGalery } from "@/service/galery";
|
|
|
|
export function GaleriDialog({ open, onClose, onSubmit }: any) {
|
|
const [title, setTitle] = useState("");
|
|
const [desc, setDesc] = useState("");
|
|
const [file, setFile] = useState<File | null>(null);
|
|
|
|
const fileRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleSubmit = async () => {
|
|
if (!file) {
|
|
alert("File wajib diupload!");
|
|
return;
|
|
}
|
|
|
|
const form = new FormData();
|
|
form.append("gallery_id", "1"); // nilai default (bisa dinamis)
|
|
form.append("title", title);
|
|
form.append("desc", desc);
|
|
form.append("file", file);
|
|
|
|
try {
|
|
const res = await createGalery(form);
|
|
|
|
console.log("Upload Success:", res?.data);
|
|
|
|
onSubmit(); // tutup dialog
|
|
} catch (error: any) {
|
|
console.error("Upload failed:", error);
|
|
alert("Gagal mengupload file");
|
|
}
|
|
};
|
|
|
|
const handleFileChange = (e: any) => {
|
|
const selected = e.target.files[0];
|
|
if (selected) setFile(selected);
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-2xl rounded-2xl p-0 overflow-hidden">
|
|
{/* Header */}
|
|
<div className="bg-[#1F6779] text-white px-6 py-4 flex justify-between items-center">
|
|
<DialogTitle className="text-white">Tambah Galeri</DialogTitle>
|
|
</div>
|
|
|
|
<div className="px-6 py-6 space-y-6">
|
|
{/* Judul */}
|
|
<div>
|
|
<label className="font-medium text-sm">
|
|
Judul Galeri <span className="text-red-500">*</span>
|
|
</label>
|
|
<Input
|
|
placeholder="Masukkan judul galeri"
|
|
className="mt-1 h-12"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Deskripsi */}
|
|
<div>
|
|
<label className="font-medium text-sm">
|
|
Deskripsi Galeri <span className="text-red-500">*</span>
|
|
</label>
|
|
<Input
|
|
placeholder="Masukkan deskripsi galeri"
|
|
className="mt-1 h-12"
|
|
value={desc}
|
|
onChange={(e) => setDesc(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
{/* Upload */}
|
|
<div>
|
|
<label className="font-medium text-sm">
|
|
Upload File <span className="text-red-500">*</span>
|
|
</label>
|
|
|
|
<div
|
|
className="border-2 border-dashed rounded-xl flex flex-col items-center justify-center py-10 cursor-pointer"
|
|
onClick={() => fileRef.current?.click()}
|
|
>
|
|
<Upload className="w-10 h-10 text-[#1F6779]" />
|
|
|
|
<p className="text-sm text-gray-600 mt-2">
|
|
Klik untuk upload atau drag & drop
|
|
</p>
|
|
<p className="text-xs text-gray-400">PNG, JPG (max 2MB)</p>
|
|
|
|
<input
|
|
ref={fileRef}
|
|
type="file"
|
|
className="hidden"
|
|
onChange={handleFileChange}
|
|
accept="image/*"
|
|
/>
|
|
</div>
|
|
|
|
{file && (
|
|
<p className="text-xs mt-2 text-green-700">
|
|
File dipilih: {file.name}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<DialogFooter className="flex justify-between px-6 pb-6 gap-4">
|
|
<Button
|
|
variant="ghost"
|
|
onClick={onClose}
|
|
className="bg-slate-200 text-slate-700 w-full h-12"
|
|
>
|
|
Batal
|
|
</Button>
|
|
|
|
<Button
|
|
onClick={handleSubmit}
|
|
className="bg-[#1F6779] hover:bg-[#165766] text-white w-full h-12"
|
|
>
|
|
Submit
|
|
</Button>
|
|
</DialogFooter>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|