116 lines
4.0 KiB
TypeScript
116 lines
4.0 KiB
TypeScript
'use client'
|
||
|
||
import { Service } from "@/types/cms"
|
||
import { Button } from "@/components/ui/button"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Label } from "@/components/ui/label"
|
||
import { Textarea } from "@/components/ui/textarea"
|
||
import { ImageUpload } from "@/components/ui/image-upload"
|
||
import { useState } from "react"
|
||
import { createService, updateService } from "./actions"
|
||
import { toast } from "sonner"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { Loader2 } from "lucide-react"
|
||
|
||
interface ServiceFormProps {
|
||
service?: Service
|
||
afterSave: () => void
|
||
}
|
||
|
||
export function ServiceForm({ service, afterSave }: ServiceFormProps) {
|
||
const [loading, setLoading] = useState(false)
|
||
const [title, setTitle] = useState(service?.title || "")
|
||
const [description, setDescription] = useState(service?.description || "")
|
||
const [imageUrl, setImageUrl] = useState(service?.image_url || "")
|
||
const [order, setOrder] = useState(service?.order.toString() || "0")
|
||
const [isActive, setIsActive] = useState(service?.is_active ?? true)
|
||
|
||
const onSubmit = async (e: React.FormEvent) => {
|
||
e.preventDefault()
|
||
setLoading(true)
|
||
|
||
const formData = new FormData()
|
||
formData.append('title', title)
|
||
formData.append('description', description)
|
||
formData.append('image_url', imageUrl)
|
||
formData.append('order', order)
|
||
formData.append('is_active', String(isActive))
|
||
|
||
try {
|
||
const result = service
|
||
? await updateService(service.id, formData)
|
||
: await createService(formData)
|
||
|
||
if (result.success) {
|
||
toast.success(service ? "Hizmet güncellendi" : "Hizmet oluşturuldu")
|
||
afterSave()
|
||
} else {
|
||
toast.error(result.error)
|
||
}
|
||
} catch {
|
||
toast.error("Bir hata oluştu")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<form onSubmit={onSubmit} className="space-y-4">
|
||
<div className="space-y-2">
|
||
<Label>Hizmet Başlığı</Label>
|
||
<Input
|
||
value={title}
|
||
onChange={(e) => setTitle(e.target.value)}
|
||
placeholder="Örn: Düğün Organizasyonu"
|
||
required
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>Açıklama</Label>
|
||
<Textarea
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
placeholder="Hizmet detayları..."
|
||
/>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label>Görsel</Label>
|
||
<ImageUpload
|
||
value={imageUrl}
|
||
onChange={setImageUrl}
|
||
bucketName="public-site"
|
||
/>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-4">
|
||
<div className="space-y-2 flex-1">
|
||
<Label>Sıralama</Label>
|
||
<Input
|
||
type="number"
|
||
value={order}
|
||
onChange={(e) => setOrder(e.target.value)}
|
||
/>
|
||
</div>
|
||
<div className="space-y-2 flex flex-col pt-6">
|
||
<div className="flex items-center space-x-2">
|
||
<Switch
|
||
checked={isActive}
|
||
onCheckedChange={setIsActive}
|
||
/>
|
||
<Label>Aktif</Label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex justify-end pt-4">
|
||
<Button type="submit" disabled={loading}>
|
||
{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||
{service ? 'Güncelle' : 'Oluştur'}
|
||
</Button>
|
||
</div>
|
||
</form>
|
||
)
|
||
}
|