385 lines
16 KiB
TypeScript
385 lines
16 KiB
TypeScript
"use client"
|
||
|
||
import { useState, useEffect } from "react"
|
||
import { useForm } from "react-hook-form"
|
||
import { zodResolver } from "@hookform/resolvers/zod"
|
||
import * as z from "zod"
|
||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog"
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
Select,
|
||
SelectContent,
|
||
SelectItem,
|
||
SelectTrigger,
|
||
SelectValue,
|
||
} from "@/components/ui/select"
|
||
import {
|
||
Form,
|
||
FormControl,
|
||
FormField,
|
||
FormItem,
|
||
FormLabel,
|
||
FormMessage,
|
||
FormDescription,
|
||
} from "@/components/ui/form"
|
||
import { Input } from "@/components/ui/input"
|
||
import { Switch } from "@/components/ui/switch"
|
||
import { Hero } from "@/types/hero"
|
||
import { heroService } from "@/services/heroService"
|
||
import { toast } from "sonner"
|
||
|
||
// Zod Schema
|
||
const formSchema = z.object({
|
||
title: z.string().min(2, "Başlık en az 2 karakter olmalıdır"),
|
||
text1: z.string().optional(),
|
||
text2: z.string().optional(),
|
||
text4: z.string().optional(),
|
||
text5: z.string().optional(),
|
||
color: z.string().optional(),
|
||
is_active: z.boolean(),
|
||
width: z.coerce.number().min(1, "Genişlik 0'dan büyük olmalıdır"),
|
||
height: z.coerce.number().min(1, "Yükseklik 0'dan büyük olmalıdır"),
|
||
quality: z.coerce.number().min(1).max(100).default(85),
|
||
format: z.string().optional().default("avif"),
|
||
image: z.any().optional(),
|
||
})
|
||
|
||
interface HeroDialogProps {
|
||
open: boolean
|
||
onOpenChange: (open: boolean) => void
|
||
hero?: Hero | null
|
||
onSuccess?: () => void
|
||
}
|
||
|
||
export function HeroDialog({ open, onOpenChange, hero, onSuccess }: HeroDialogProps) {
|
||
const [loading, setLoading] = useState(false)
|
||
const [preview, setPreview] = useState<string | null>(null)
|
||
|
||
const form = useForm<z.infer<typeof formSchema>>({
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
resolver: zodResolver(formSchema) as any,
|
||
defaultValues: {
|
||
title: "",
|
||
text1: "",
|
||
text2: "",
|
||
text4: "",
|
||
text5: "",
|
||
color: "#000000",
|
||
is_active: true,
|
||
width: 0,
|
||
height: 0,
|
||
quality: 85,
|
||
format: "webp",
|
||
},
|
||
})
|
||
|
||
useEffect(() => {
|
||
if (hero) {
|
||
form.reset({
|
||
title: hero.title,
|
||
text1: hero.text1 || "",
|
||
text2: hero.text2 || "",
|
||
text4: hero.text4 || "",
|
||
text5: hero.text5 || "",
|
||
color: hero.color || "#000000",
|
||
is_active: !!hero.is_active,
|
||
width: hero.width || 0,
|
||
height: hero.height || 0,
|
||
quality: hero.quality || 85,
|
||
format: hero.format || "avif",
|
||
})
|
||
// Existing image preview
|
||
// Backend returns relative path usually, ensure full URL if needed or use as is
|
||
// Assuming backend/frontend serve static files correctly
|
||
setPreview(hero.image ? `${process.env.NEXT_PUBLIC_API_URL}${hero.image}` : null)
|
||
} else {
|
||
form.reset({
|
||
title: "",
|
||
text1: "",
|
||
text2: "",
|
||
text4: "",
|
||
text5: "",
|
||
color: "#000000",
|
||
is_active: true,
|
||
width: 0,
|
||
height: 0,
|
||
quality: 85,
|
||
format: "avif",
|
||
})
|
||
setPreview(null)
|
||
}
|
||
}, [hero, form, open])
|
||
|
||
const handleImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0]
|
||
if (file) {
|
||
form.setValue("image", file)
|
||
const reader = new FileReader()
|
||
reader.onloadend = () => {
|
||
setPreview(reader.result as string)
|
||
}
|
||
reader.readAsDataURL(file)
|
||
}
|
||
}
|
||
|
||
const onSubmit = async (values: z.infer<typeof formSchema>) => {
|
||
setLoading(true)
|
||
const formData = new FormData()
|
||
formData.append("title", values.title)
|
||
if (values.text1) formData.append("text1", values.text1)
|
||
if (values.text2) formData.append("text2", values.text2)
|
||
if (values.text4) formData.append("text4", values.text4)
|
||
if (values.text5) formData.append("text5", values.text5)
|
||
if (values.color) formData.append("color", values.color)
|
||
formData.append("is_active", String(values.is_active))
|
||
|
||
// New fields
|
||
formData.append("width", String(values.width))
|
||
formData.append("height", String(values.height))
|
||
formData.append("quality", String(values.quality))
|
||
if (values.format) formData.append("format", values.format)
|
||
|
||
if (values.image instanceof File) {
|
||
formData.append("image", values.image)
|
||
}
|
||
|
||
try {
|
||
if (hero) {
|
||
await heroService.updateHero(hero.ID, formData)
|
||
toast.success("Hero başarıyla güncellendi")
|
||
} else {
|
||
await heroService.createHero(formData)
|
||
toast.success("Hero başarıyla oluşturuldu")
|
||
}
|
||
onOpenChange(false)
|
||
if (onSuccess) onSuccess()
|
||
} catch (error: unknown) {
|
||
console.error("Hero save error:", error)
|
||
toast.error((error as Error).message || "Bir hata oluştu")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
return (
|
||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||
<DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
|
||
<DialogHeader>
|
||
<DialogTitle>{hero ? "Hero Düzenle" : "Yeni Hero Ekle"}</DialogTitle>
|
||
</DialogHeader>
|
||
<Form {...form}>
|
||
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="title"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Başlık</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Başlık" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="text1"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Text 1</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Text 1" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="text2"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Text 2</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Text 2" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="text4"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Text 4</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Text 4" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="text5"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Text 5</FormLabel>
|
||
<FormControl>
|
||
<Input placeholder="Text 5" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="width"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Genişlik (px)</FormLabel>
|
||
<FormControl>
|
||
<Input type="number" placeholder="0" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="height"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Yükseklik (px)</FormLabel>
|
||
<FormControl>
|
||
<Input type="number" placeholder="0" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<FormField
|
||
control={form.control}
|
||
name="quality"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Kalite (1-100)</FormLabel>
|
||
<FormControl>
|
||
<Input type="number" min="1" max="100" placeholder="80" {...field} />
|
||
</FormControl>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
<FormField
|
||
control={form.control}
|
||
name="format"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Format</FormLabel>
|
||
<Select onValueChange={field.onChange} defaultValue={field.value}>
|
||
<FormControl>
|
||
<SelectTrigger>
|
||
<SelectValue placeholder="Format Seçin" />
|
||
</SelectTrigger>
|
||
</FormControl>
|
||
<SelectContent>
|
||
<SelectItem value="avif">AVIF (Önerilen)</SelectItem>
|
||
<SelectItem value="webp">WebP</SelectItem>
|
||
<SelectItem value="jpeg">JPEG</SelectItem>
|
||
<SelectItem value="png">PNG</SelectItem>
|
||
</SelectContent>
|
||
</Select>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
</div>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="color"
|
||
render={({ field }) => (
|
||
<FormItem>
|
||
<FormLabel>Renk (Hex)</FormLabel>
|
||
<div className="flex gap-2">
|
||
<FormControl>
|
||
<Input type="color" className="w-12 h-10 p-1" {...field} />
|
||
</FormControl>
|
||
<FormControl>
|
||
<Input placeholder="#000000" {...field} />
|
||
</FormControl>
|
||
</div>
|
||
<FormMessage />
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormField
|
||
control={form.control}
|
||
name="is_active"
|
||
render={({ field }) => (
|
||
<FormItem className="flex flex-row items-center justify-between rounded-lg border p-3 shadow-sm">
|
||
<div className="space-y-0.5">
|
||
<FormLabel>Aktif</FormLabel>
|
||
<FormDescription>
|
||
Bu hero banner sitede görüntülensin mi?
|
||
</FormDescription>
|
||
</div>
|
||
<FormControl>
|
||
<Switch
|
||
checked={field.value}
|
||
onCheckedChange={field.onChange}
|
||
/>
|
||
</FormControl>
|
||
</FormItem>
|
||
)}
|
||
/>
|
||
|
||
<FormItem>
|
||
<FormLabel>Görsel</FormLabel>
|
||
<FormControl>
|
||
<Input
|
||
type="file"
|
||
accept="image/*"
|
||
onChange={handleImageChange}
|
||
/>
|
||
</FormControl>
|
||
{preview && (
|
||
<div className="mt-2 relative w-full h-40 border rounded-md overflow-hidden">
|
||
{/* Note: Using standard img for now to avoid Next.js Image Config issues with localhost */}
|
||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||
<img
|
||
src={preview}
|
||
alt="Preview"
|
||
className="object-cover w-full h-full"
|
||
/>
|
||
</div>
|
||
)}
|
||
</FormItem>
|
||
|
||
<DialogFooter>
|
||
<Button type="submit" disabled={loading}>
|
||
{loading ? "Kaydediliyor..." : "Kaydet"}
|
||
</Button>
|
||
</DialogFooter>
|
||
</form>
|
||
</Form>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|