add filter category
This commit is contained in:
parent
9c01e6f467
commit
df8de78666
|
|
@ -13,12 +13,22 @@ import { Upload, X } from "lucide-react";
|
||||||
import { useState, useRef, useEffect } from "react";
|
import { useState, useRef, useEffect } from "react";
|
||||||
import { createGalery, uploadGaleryFile } from "@/service/galery";
|
import { createGalery, uploadGaleryFile } from "@/service/galery";
|
||||||
|
|
||||||
|
const CATEGORY_OPTIONS = [
|
||||||
|
"Grand Opening",
|
||||||
|
"IIMS",
|
||||||
|
"GIIAS",
|
||||||
|
"GJAW",
|
||||||
|
"Exhibitions",
|
||||||
|
"Test Drive",
|
||||||
|
];
|
||||||
|
|
||||||
export function GaleriDialog({ open, onClose, onSubmit }: any) {
|
export function GaleriDialog({ open, onClose, onSubmit }: any) {
|
||||||
const [title, setTitle] = useState("");
|
const [title, setTitle] = useState("");
|
||||||
const [description, setDescription] = useState("");
|
const [description, setDescription] = useState("");
|
||||||
const [files, setFiles] = useState<File[]>([]);
|
const [files, setFiles] = useState<File[]>([]);
|
||||||
const [previews, setPreviews] = useState<string[]>([]);
|
const [previews, setPreviews] = useState<string[]>([]);
|
||||||
const fileRef = useRef<HTMLInputElement>(null);
|
const fileRef = useRef<HTMLInputElement>(null);
|
||||||
|
const [category, setCategory] = useState("");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!files || files.length === 0) {
|
if (!files || files.length === 0) {
|
||||||
|
|
@ -47,10 +57,11 @@ export function GaleriDialog({ open, onClose, onSubmit }: any) {
|
||||||
const handleSubmit = async () => {
|
const handleSubmit = async () => {
|
||||||
try {
|
try {
|
||||||
if (!title) return alert("Judul wajib diisi!");
|
if (!title) return alert("Judul wajib diisi!");
|
||||||
|
if (!category) return alert("Category wajib diisi!");
|
||||||
const formData = new FormData();
|
const formData = new FormData();
|
||||||
formData.append("title", title);
|
formData.append("title", title);
|
||||||
formData.append("description", description);
|
formData.append("description", description);
|
||||||
|
formData.append("category", category);
|
||||||
|
|
||||||
const res = await createGalery(formData);
|
const res = await createGalery(formData);
|
||||||
|
|
||||||
|
|
@ -73,7 +84,7 @@ export function GaleriDialog({ open, onClose, onSubmit }: any) {
|
||||||
}
|
}
|
||||||
|
|
||||||
onSubmit();
|
onSubmit();
|
||||||
|
setCategory("");
|
||||||
setTitle("");
|
setTitle("");
|
||||||
setDescription("");
|
setDescription("");
|
||||||
setFiles([]);
|
setFiles([]);
|
||||||
|
|
@ -106,6 +117,26 @@ export function GaleriDialog({ open, onClose, onSubmit }: any) {
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Category */}
|
||||||
|
<div>
|
||||||
|
<label className="font-medium text-sm">
|
||||||
|
Category <span className="text-red-500">*</span>
|
||||||
|
</label>
|
||||||
|
|
||||||
|
<select
|
||||||
|
value={category}
|
||||||
|
onChange={(e) => setCategory(e.target.value)}
|
||||||
|
className="mt-1 h-12 w-full rounded-md border border-gray-300 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-[#1F6779]"
|
||||||
|
>
|
||||||
|
<option value="">Pilih category</option>
|
||||||
|
{CATEGORY_OPTIONS.map((cat) => (
|
||||||
|
<option key={cat} value={cat}>
|
||||||
|
{cat}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Deskripsi */}
|
{/* Deskripsi */}
|
||||||
<div>
|
<div>
|
||||||
<label className="font-medium text-sm">
|
<label className="font-medium text-sm">
|
||||||
|
|
|
||||||
|
|
@ -67,8 +67,7 @@ export default function GallerySection() {
|
||||||
|
|
||||||
const filteredData = data.filter((item) => {
|
const filteredData = data.filter((item) => {
|
||||||
if (activeTab === "All") return true;
|
if (activeTab === "All") return true;
|
||||||
if (activeTab === "Grand Opening") return true; // sementara
|
return item.category === activeTab;
|
||||||
return false; // tab lain belum ada konten
|
|
||||||
});
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue