100 lines
3.4 KiB
TypeScript
100 lines
3.4 KiB
TypeScript
import DeleteModal from '@/components/inertia/delete-modal';
|
|
import { Button } from '@/components/ui/button';
|
|
import { Link, router } from '@inertiajs/react';
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
import { ArrowUpDown, Eye, Pencil, Trash2 } from 'lucide-react';
|
|
|
|
const TableColumn = (translate: LanguageTranslations): ColumnDef<Blog>[] => {
|
|
const { table } = translate;
|
|
|
|
return [
|
|
{
|
|
accessorKey: 'creator',
|
|
header: ({ column }) => {
|
|
return (
|
|
<div className="flex items-center pl-4">
|
|
<Button variant="ghost" className="p-0 hover:bg-transparent" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
|
|
{table.creator}
|
|
<ArrowUpDown />
|
|
</Button>
|
|
</div>
|
|
);
|
|
},
|
|
cell: ({ row }) => (
|
|
<div className="pl-4">
|
|
<p className="mb-0.5 text-base font-medium">{row.original.user.name}</p>
|
|
<p className="text-muted-foreground text-xs">{row.original.user.email}</p>
|
|
</div>
|
|
),
|
|
sortingFn: (a, b) => a.original.user.name.localeCompare(b.original.user.name),
|
|
},
|
|
{
|
|
accessorKey: 'title',
|
|
header: table.title,
|
|
cell: ({ row }) => (
|
|
<div className="py-1 capitalize">
|
|
<Link href={route('blogs.edit', { blog: row.original.id })}>{row.getValue('title')}</Link>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'category',
|
|
header: () => (
|
|
<div className="flex items-center justify-center">
|
|
<p>{table.category}</p>
|
|
</div>
|
|
),
|
|
cell: ({ row }) => (
|
|
<div className="py-1 text-center capitalize">
|
|
<p>{row.original.category?.name ?? '--'}</p>
|
|
</div>
|
|
),
|
|
sortingFn: (a, b) => (a.original.category?.name || '').localeCompare(b.original.category?.name || ''),
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: ({ column }) => (
|
|
<div className="flex items-center justify-center">
|
|
<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
|
|
{table.status}
|
|
<ArrowUpDown />
|
|
</Button>
|
|
</div>
|
|
),
|
|
cell: ({ row }) => <div className="py-1 text-center capitalize">{row.getValue('status')}</div>,
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: () => <div className="pr-4 text-end">{table.action}</div>,
|
|
cell: ({ row }) => {
|
|
const blog = row.original;
|
|
|
|
return (
|
|
<div className="flex justify-end gap-2 py-1 pr-4">
|
|
<Button asChild size="icon" variant="secondary" className="h-8 w-8">
|
|
<a target="_blank" href={route('blogs.preview', blog.id)}>
|
|
<Eye />
|
|
</a>
|
|
</Button>
|
|
|
|
<Button size="icon" variant="secondary" className="h-8 w-8" onClick={() => router.get(route('blogs.edit', blog.id))}>
|
|
<Pencil />
|
|
</Button>
|
|
|
|
<DeleteModal
|
|
routePath={route('blogs.destroy', blog.id)}
|
|
actionComponent={
|
|
<Button size="icon" variant="ghost" className="bg-destructive/8 hover:bg-destructive/6 h-8 w-8 p-0">
|
|
<Trash2 className="text-destructive text-sm" />
|
|
</Button>
|
|
}
|
|
/>
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
];
|
|
};
|
|
|
|
export default TableColumn;
|