113 lines
3.8 KiB
TypeScript
113 lines
3.8 KiB
TypeScript
'use client';
|
||
|
||
import React, { useState } from 'react';
|
||
import { createItem, updateItem } from '../actions';
|
||
|
||
interface ItemFormProps {
|
||
categories: any[];
|
||
initialData?: any;
|
||
onClose: () => void;
|
||
}
|
||
|
||
export default function ItemForm({ categories, initialData, onClose }: ItemFormProps) {
|
||
const [loading, setLoading] = useState(false);
|
||
|
||
async function handleSubmit(formData: FormData) {
|
||
setLoading(true);
|
||
if (initialData) {
|
||
await updateItem(initialData.id, formData);
|
||
} else {
|
||
await createItem(formData);
|
||
}
|
||
setLoading(false);
|
||
onClose();
|
||
}
|
||
|
||
return (
|
||
<div className="modal-overlay">
|
||
<div className="modal-content">
|
||
<div className="card-header">
|
||
<h2 className="card-title">{initialData ? 'Ürünü Düzenle' : 'Yeni Ürün Ekle'}</h2>
|
||
<button onClick={onClose} className="action-btn">✕</button>
|
||
</div>
|
||
<form action={handleSubmit} className="admin-form">
|
||
<div className="form-group">
|
||
<label htmlFor="name">Ürün Adı</label>
|
||
<input
|
||
id="name"
|
||
name="name"
|
||
defaultValue={initialData?.name}
|
||
className="admin-input"
|
||
placeholder="Örn: Mojito"
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label htmlFor="categoryId">Kategori</label>
|
||
<select
|
||
id="categoryId"
|
||
name="categoryId"
|
||
defaultValue={initialData?.categoryId || categories[0]?.id}
|
||
className="admin-select"
|
||
required
|
||
>
|
||
{categories.map(cat => (
|
||
<option key={cat.id} value={cat.id}>{cat.title}</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
<div className="form-group">
|
||
<label htmlFor="price">Fiyat (Metin veya JSON)</label>
|
||
<textarea
|
||
id="price"
|
||
name="price"
|
||
defaultValue={typeof initialData?.price === 'object' ? JSON.stringify(initialData.price) : initialData?.price}
|
||
className="admin-textarea"
|
||
placeholder='Örn: 590 tl veya {"single": "370 tl", "double": "560 tl"}'
|
||
required
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label htmlFor="ingredients">İçerik</label>
|
||
<input
|
||
id="ingredients"
|
||
name="ingredients"
|
||
defaultValue={initialData?.ingredients}
|
||
className="admin-input"
|
||
placeholder="Örn: Rom, Nane, Lime"
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label htmlFor="tasteProfile">Tat Profili</label>
|
||
<input
|
||
id="tasteProfile"
|
||
name="tasteProfile"
|
||
defaultValue={initialData?.tasteProfile}
|
||
className="admin-input"
|
||
placeholder="Örn: Tatlı-Ekşi-Ferah"
|
||
/>
|
||
</div>
|
||
<div className="form-group">
|
||
<label htmlFor="grapeVariety">Üzüm Çeşidi (Şaraplar için)</label>
|
||
<input
|
||
id="grapeVariety"
|
||
name="grapeVariety"
|
||
defaultValue={initialData?.grapeVariety}
|
||
className="admin-input"
|
||
placeholder="Örn: Merlot"
|
||
/>
|
||
</div>
|
||
<div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
|
||
<button type="submit" className="admin-btn" disabled={loading}>
|
||
{loading ? 'Kaydediliyor...' : 'Kaydet'}
|
||
</button>
|
||
<button type="button" onClick={onClose} className="admin-btn" style={{ background: 'rgba(255,255,255,0.05)', color: '#fff' }}>
|
||
İptal
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|