149 lines
5.0 KiB
TypeScript
149 lines
5.0 KiB
TypeScript
import DeleteModal from '@/components/inertia/delete-modal';
|
|
import { Button } from '@/components/ui/button';
|
|
import { useAuth } from '@/hooks/use-auth';
|
|
import { systemCurrency } from '@/lib/utils';
|
|
import { SharedData } from '@/types/global';
|
|
import { Link, router, usePage } from '@inertiajs/react';
|
|
import { ColumnDef } from '@tanstack/react-table';
|
|
import { ArrowUpDown, Pencil, Trash2 } from 'lucide-react';
|
|
import CourseStatusFilter from './course-status-filter';
|
|
|
|
const TableColumn = (): ColumnDef<Course>[] => {
|
|
const { isAdmin } = useAuth();
|
|
const { system, translate } = usePage<SharedData>().props;
|
|
const { table, common } = translate;
|
|
const currency = systemCurrency(system.fields['selling_currency']);
|
|
|
|
return [
|
|
{
|
|
accessorKey: 'name',
|
|
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.name}
|
|
<ArrowUpDown />
|
|
</Button>
|
|
</div>
|
|
);
|
|
},
|
|
cell: ({ row }) => (
|
|
<div className="pl-4">
|
|
<p className="mb-0.5 text-base font-medium">{row.original.instructor.user.name}</p>
|
|
<p className="text-muted-foreground text-xs">{row.original.instructor.user.email}</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'title',
|
|
header: table.course_title,
|
|
cell: ({ row }) => (
|
|
<div className="py-1 capitalize">
|
|
<Link
|
|
href={route('courses.edit', {
|
|
course: row.original.id,
|
|
})}
|
|
>
|
|
{row.getValue('title')}
|
|
</Link>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'status',
|
|
header: ({ column }) => (
|
|
<div className="flex justify-center">
|
|
<CourseStatusFilter />
|
|
</div>
|
|
),
|
|
cell: ({ row }) => <div className="py-1 text-center capitalize">{row.getValue('status')}</div>,
|
|
},
|
|
{
|
|
accessorKey: 'category',
|
|
header: ({ column }) => {
|
|
return (
|
|
<div className="flex items-center justify-center">
|
|
<p>Category</p>
|
|
</div>
|
|
);
|
|
},
|
|
cell: ({ row }) => (
|
|
<div className="py-1 text-center capitalize">
|
|
<p>{row.original.course_category.title}</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'category_child',
|
|
header: ({ column }) => {
|
|
return (
|
|
<div className="flex items-center justify-center">
|
|
<p>{table.category_child}</p>
|
|
</div>
|
|
);
|
|
},
|
|
cell: ({ row }) => (
|
|
<div className="py-1 text-center capitalize">
|
|
<p>{row.original.course_category_child?.title || '--'}</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
accessorKey: 'price',
|
|
header: ({ column }) => (
|
|
<div className="flex items-center justify-center">
|
|
<Button variant="ghost" onClick={() => column.toggleSorting(column.getIsSorted() === 'asc')}>
|
|
{common.price}
|
|
<ArrowUpDown />
|
|
</Button>
|
|
</div>
|
|
),
|
|
cell: ({ row }) => (
|
|
<div className="py-1 text-center capitalize">
|
|
<p>{row.original.price ? `${currency?.symbol}${row.original.price}` : common.free}</p>
|
|
</div>
|
|
),
|
|
},
|
|
{
|
|
id: 'actions',
|
|
header: () => <div className="pr-4 text-end">{table.action}</div>,
|
|
cell: ({ row }) => {
|
|
const course = row.original;
|
|
|
|
return (
|
|
<div className="flex justify-end gap-2 py-1 pr-4">
|
|
<Button
|
|
size="icon"
|
|
variant="secondary"
|
|
className="h-8 w-8"
|
|
onClick={() =>
|
|
router.get(
|
|
route('courses.edit', {
|
|
course: course.id,
|
|
}),
|
|
)
|
|
}
|
|
>
|
|
<Pencil />
|
|
</Button>
|
|
|
|
{isAdmin && (
|
|
<DeleteModal
|
|
routePath={route('courses.destroy', course.id)}
|
|
message={table.delete_course_warning}
|
|
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;
|