first commit
This commit is contained in:
Beyhan Oğur
59
frontend/app/admin/heroes/_components/columns.tsx
Normal file
59
frontend/app/admin/heroes/_components/columns.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
"use client"
|
||||
|
||||
import { ColumnDef } from "@tanstack/react-table"
|
||||
import { Hero } from "@/types/hero"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { HeroRowActions } from "./hero-row-actions"
|
||||
|
||||
export const getColumns = (onSuccess: () => void): ColumnDef<Hero>[] => [
|
||||
{
|
||||
accessorKey: "image",
|
||||
header: "Görsel",
|
||||
cell: ({ row }) => {
|
||||
const imagePath = row.getValue("image") as string
|
||||
if (!imagePath) return <div className="w-16 h-9 bg-gray-100 rounded" />
|
||||
|
||||
return (
|
||||
<div className="w-24 h-14 relative rounded overflow-hidden border">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
src={`${process.env.NEXT_PUBLIC_API_URL}${imagePath}`}
|
||||
alt={row.original.title}
|
||||
className="object-cover w-full h-full"
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "title",
|
||||
header: "Başlık",
|
||||
},
|
||||
{
|
||||
accessorKey: "is_active",
|
||||
header: "Durum",
|
||||
cell: ({ row }) => {
|
||||
const isActive = row.getValue("is_active") as boolean
|
||||
return (
|
||||
<Badge variant={isActive ? "default" : "secondary"}>
|
||||
{isActive ? "Aktif" : "Pasif"}
|
||||
</Badge>
|
||||
)
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "DeletedAt",
|
||||
header: "Silinme Durumu",
|
||||
cell: ({ row }) => {
|
||||
const deletedAt = row.getValue("DeletedAt")
|
||||
if (deletedAt) {
|
||||
return <Badge variant="destructive">Silinmiş</Badge>
|
||||
}
|
||||
return null
|
||||
}
|
||||
},
|
||||
{
|
||||
id: "actions",
|
||||
cell: ({ row }) => <HeroRowActions row={row} onSuccess={onSuccess} />,
|
||||
},
|
||||
]
|
||||
82
frontend/app/admin/heroes/_components/data-table.tsx
Normal file
82
frontend/app/admin/heroes/_components/data-table.tsx
Normal file
@@ -0,0 +1,82 @@
|
||||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import {
|
||||
ColumnDef,
|
||||
flexRender,
|
||||
getCoreRowModel,
|
||||
useReactTable,
|
||||
} from "@tanstack/react-table"
|
||||
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table"
|
||||
|
||||
interface DataTableProps<TData, TValue> {
|
||||
columns: ColumnDef<TData, TValue>[]
|
||||
data: TData[]
|
||||
}
|
||||
|
||||
export function DataTable<TData, TValue>({
|
||||
columns,
|
||||
data,
|
||||
}: DataTableProps<TData, TValue>) {
|
||||
// eslint-disable-next-line react-hooks/incompatible-library
|
||||
const table = useReactTable({
|
||||
data,
|
||||
columns,
|
||||
getCoreRowModel: getCoreRowModel(),
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="rounded-md border">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
{table.getHeaderGroups().map((headerGroup) => (
|
||||
<TableRow key={headerGroup.id}>
|
||||
{headerGroup.headers.map((header) => {
|
||||
return (
|
||||
<TableHead key={header.id}>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(
|
||||
header.column.columnDef.header,
|
||||
header.getContext()
|
||||
)}
|
||||
</TableHead>
|
||||
)
|
||||
})}
|
||||
</TableRow>
|
||||
))}
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{table.getRowModel().rows?.length ? (
|
||||
table.getRowModel().rows.map((row) => (
|
||||
<TableRow
|
||||
key={row.id}
|
||||
data-state={row.getIsSelected() && "selected"}
|
||||
>
|
||||
{row.getVisibleCells().map((cell) => (
|
||||
<TableCell key={cell.id}>
|
||||
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||
</TableCell>
|
||||
))}
|
||||
</TableRow>
|
||||
))
|
||||
) : (
|
||||
<TableRow>
|
||||
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||
Sonuç bulunamadı.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
384
frontend/app/admin/heroes/_components/hero-dialog.tsx
Normal file
384
frontend/app/admin/heroes/_components/hero-dialog.tsx
Normal file
@@ -0,0 +1,384 @@
|
||||
"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>
|
||||
)
|
||||
}
|
||||
122
frontend/app/admin/heroes/_components/hero-row-actions.tsx
Normal file
122
frontend/app/admin/heroes/_components/hero-row-actions.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { Row } from "@tanstack/react-table"
|
||||
import { MoreHorizontal, Pencil, Trash, Undo } from "lucide-react"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuLabel,
|
||||
DropdownMenuSeparator,
|
||||
DropdownMenuTrigger,
|
||||
} from "@/components/ui/dropdown-menu"
|
||||
import { Hero } from "@/types/hero"
|
||||
import { heroService } from "@/services/heroService"
|
||||
import { toast } from "sonner"
|
||||
import { HeroDialog } from "./hero-dialog"
|
||||
import Swal from "sweetalert2"
|
||||
|
||||
interface DataTableRowActionsProps<TData> {
|
||||
row: Row<TData>
|
||||
onSuccess: () => void
|
||||
}
|
||||
|
||||
export function HeroRowActions<TData extends Hero>({
|
||||
row,
|
||||
onSuccess,
|
||||
}: DataTableRowActionsProps<TData>) {
|
||||
const hero = row.original
|
||||
const [showEditDialog, setShowEditDialog] = useState(false)
|
||||
|
||||
const handleDelete = async () => {
|
||||
const result = await Swal.fire({
|
||||
title: "Emin misiniz?",
|
||||
text: "Bu hero silinecek! (Geri alabilirsiniz)",
|
||||
icon: "warning",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Evet, sil",
|
||||
cancelButtonText: "İptal",
|
||||
})
|
||||
|
||||
if (result.isConfirmed) {
|
||||
try {
|
||||
await heroService.deleteHero(hero.ID)
|
||||
toast.success("Hero başarıyla silindi")
|
||||
onSuccess()
|
||||
} catch {
|
||||
toast.error("Silme işlemi başarısız")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleRestore = async () => {
|
||||
const result = await Swal.fire({
|
||||
title: "Geri yüklemek istiyor musunuz?",
|
||||
text: "Bu hero tekrar aktif listeye alınacak.",
|
||||
icon: "question",
|
||||
showCancelButton: true,
|
||||
confirmButtonText: "Evet, geri yükle",
|
||||
cancelButtonText: "İptal",
|
||||
})
|
||||
|
||||
if (result.isConfirmed) {
|
||||
try {
|
||||
await heroService.restoreHero(hero.ID)
|
||||
toast.success("Hero başarıyla geri yüklendi")
|
||||
onSuccess()
|
||||
} catch {
|
||||
toast.error("Geri yükleme işlemi başarısız")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const isDeleted = !!hero.DeletedAt
|
||||
|
||||
return (
|
||||
<>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button variant="ghost" className="h-8 w-8 p-0">
|
||||
<span className="sr-only">Menüyü aç</span>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuLabel>İşlemler</DropdownMenuLabel>
|
||||
<DropdownMenuItem
|
||||
onClick={() => navigator.clipboard.writeText(hero.ID.toString())}
|
||||
>
|
||||
Hero ID Kopyala
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuSeparator />
|
||||
|
||||
{!isDeleted && (
|
||||
<>
|
||||
<DropdownMenuItem onClick={() => setShowEditDialog(true)}>
|
||||
<Pencil className="mr-2 h-3.5 w-3.5" /> Düzenle
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem onClick={handleDelete} className="text-red-600">
|
||||
<Trash className="mr-2 h-3.5 w-3.5" /> Sil
|
||||
</DropdownMenuItem>
|
||||
</>
|
||||
)}
|
||||
|
||||
{isDeleted && (
|
||||
<DropdownMenuItem onClick={handleRestore} className="text-green-600">
|
||||
<Undo className="mr-2 h-3.5 w-3.5" /> Geri Yükle
|
||||
</DropdownMenuItem>
|
||||
)}
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
|
||||
<HeroDialog
|
||||
open={showEditDialog}
|
||||
onOpenChange={setShowEditDialog}
|
||||
hero={hero}
|
||||
onSuccess={onSuccess}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user