siakad-itm/resources/js/pages/admin/academic-classes/assignments/columns.tsx
Yoga Pangestu 5710a57992
Some checks failed
tests / ci (pull_request) Has been cancelled
refactor: remove class_name from CourseClass and related components
2026-08-30 13:14:53 +07:00

127 lines
4.4 KiB
TypeScript

import type { ColumnDef } from '@tanstack/react-table';
import { format } from 'date-fns';
import { ClipboardList, Paperclip, Pencil, Trash2 } from 'lucide-react';
import { RowActions } from '@/components/row-actions';
import { index as submissionsIndex } from '@/routes/admin/academic-classes/assignments/submissions';
import type { Assignment } from '@/types/assignment';
export type { Assignment } from '@/types/assignment';
type CreateColumnsParams = {
handleEdit: (assignment: Assignment) => void;
handleDeleteClick: (assignment: Assignment) => void;
};
export function createAssignmentColumns(
params: CreateColumnsParams,
): ColumnDef<Assignment>[] {
const { handleEdit, handleDeleteClick } = params;
return [
{
accessorKey: 'title',
header: () => <span>Judul</span>,
cell: ({ row }) => (
<span className="font-medium">
{row.getValue('title') as string}
</span>
),
},
{
accessorKey: 'course_class.course.name',
header: () => <span>Kelas</span>,
cell: ({ row }) => {
const courseClass = row.original.course_class;
if (!courseClass) {
return '-';
}
return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
},
},
{
accessorKey: 'deadline',
header: () => <span>Batas Waktu</span>,
cell: ({ row }) => {
const deadline = row.getValue('deadline') as string;
return format(new Date(deadline), 'd MMM yyyy, HH:mm');
},
},
{
accessorKey: 'attachment_name',
header: () => <span>Lampiran</span>,
cell: ({ row }) => {
const assignment = row.original;
if (!assignment.attachment_url) {
return <span className="text-muted-foreground">-</span>;
}
return (
<a
href={assignment.attachment_url}
target="_blank"
rel="noreferrer"
className="inline-flex items-center gap-1 text-primary underline underline-offset-4 hover:text-primary/80"
>
<Paperclip className="h-3.5 w-3.5" />
{assignment.attachment_name}
</a>
);
},
},
{
accessorKey: 'submissions_count',
header: () => (
<span className="block text-center">Pengumpulan</span>
),
meta: {
className: 'w-[120px] text-center',
headerClassName: 'w-[120px] text-center',
},
cell: ({ row }) => (
<div className="text-center">
{row.original.submissions_count}
</div>
),
},
{
id: 'actions',
header: () => <span className="block text-center">Aksi</span>,
meta: {
className: 'w-[130px] text-center',
headerClassName: 'w-[130px] text-center',
},
cell: ({ row }) => {
const assignment = row.original;
return (
<RowActions
actions={[
{
label: 'Pengumpulan',
icon: <ClipboardList className="h-4 w-4" />,
href: submissionsIndex.url(assignment.id),
},
{
label: 'Edit',
icon: <Pencil className="h-4 w-4" />,
onClick: () => handleEdit(assignment),
},
{
label: 'Hapus',
icon: (
<Trash2 className="h-4 w-4 text-destructive" />
),
onClick: () => handleDeleteClick(assignment),
},
]}
/>
);
},
},
];
}