feat: enhance MaterialService and MaterialCard; add lecturer information and improve material display with created date
This commit is contained in:
Yoga Pangestu
parent
139875ce31
commit
33f354ad94
@ -20,8 +20,10 @@ public function __construct(
|
||||
public function paginated(User $user, int $perPage = 25, string $search = '', ?int $courseClassId = null): LengthAwarePaginator
|
||||
{
|
||||
return Material::query()
|
||||
->select(['id', 'course_class_id', 'title', 'description', 'meeting_number'])
|
||||
->with('courseClass.course:id,code,name')
|
||||
->with([
|
||||
'courseClass.course:id,code,name',
|
||||
'courseClass.lecturer.user.profile',
|
||||
])
|
||||
->when($search, fn ($q) => $q->where('title', 'like', "%{$search}%"))
|
||||
->when($courseClassId, fn ($q) => $q->where('course_class_id', $courseClassId))
|
||||
->when($user->hasRole(UserRole::Dosen->value), fn ($q) => $q->whereHas('courseClass', fn ($q) => $q->where('lecturer_id', $user->lecturer?->id)))
|
||||
@ -32,7 +34,7 @@ public function paginated(User $user, int $perPage = 25, string $search = '', ?i
|
||||
});
|
||||
}))
|
||||
->latest()
|
||||
->paginate($perPage);
|
||||
->paginate($perPage, ['id', 'course_class_id', 'title', 'description', 'meeting_number', 'created_at']);
|
||||
}
|
||||
|
||||
public function create(array $data, ?UploadedFile $file): Material
|
||||
|
||||
@ -1,6 +1,23 @@
|
||||
import { Pencil, Trash2 } from 'lucide-react';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
BookOpen,
|
||||
CalendarDays,
|
||||
FileIcon,
|
||||
FileX,
|
||||
Pencil,
|
||||
Trash2,
|
||||
User,
|
||||
} from 'lucide-react';
|
||||
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
|
||||
import { RowActions } from '@/components/row-actions';
|
||||
import {
|
||||
Attachment,
|
||||
AttachmentActions,
|
||||
AttachmentContent,
|
||||
AttachmentDescription,
|
||||
AttachmentMedia,
|
||||
AttachmentTitle,
|
||||
} from '@/components/ui/attachment';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import type { Material } from '@/types/material';
|
||||
|
||||
@ -16,60 +33,100 @@ export function createMaterialCard(params: CreateCardParams) {
|
||||
|
||||
return function MaterialCard(material: Material) {
|
||||
const courseClass = material.course_class;
|
||||
const lecturerName =
|
||||
courseClass?.lecturer?.user?.profile?.full_name ?? null;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3">
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
{material.meeting_number && (
|
||||
<Badge variant="secondary">
|
||||
Pertemuan {material.meeting_number}
|
||||
</Badge>
|
||||
)}
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
|
||||
<BookOpen className="h-5 w-5" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<p className="font-medium break-words">
|
||||
{material.title}
|
||||
</p>
|
||||
<p className="mt-0.5 truncate text-xs text-muted-foreground">
|
||||
{courseClass
|
||||
? `${courseClass.course?.code ?? ''} · ${courseClass.course?.name ?? ''}`
|
||||
: '-'}
|
||||
</p>
|
||||
{lecturerName && (
|
||||
<p className="mt-1 flex items-center gap-1 truncate text-xs text-muted-foreground">
|
||||
<User className="h-3 w-3 shrink-0" />
|
||||
{lecturerName}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{material.file_url && material.file_name && (
|
||||
<RowActions
|
||||
actions={[
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: <Pencil className="h-4 w-4" />,
|
||||
show: canUpdate,
|
||||
onClick: () => handleEdit(material),
|
||||
},
|
||||
{
|
||||
label: 'Hapus',
|
||||
icon: (
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
),
|
||||
show: canDelete,
|
||||
onClick: () => handleDeleteClick(material),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{material.description && (
|
||||
<p className="line-clamp-2 text-sm text-muted-foreground">
|
||||
{material.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{material.file_url && material.file_name ? (
|
||||
<Attachment size="sm" className="w-full">
|
||||
<AttachmentMedia>
|
||||
<FileIcon />
|
||||
</AttachmentMedia>
|
||||
<AttachmentContent>
|
||||
<AttachmentTitle>
|
||||
{material.file_name}
|
||||
</AttachmentTitle>
|
||||
<AttachmentDescription>
|
||||
Lampiran materi
|
||||
</AttachmentDescription>
|
||||
</AttachmentContent>
|
||||
<AttachmentActions>
|
||||
<AttachmentPreviewDialog
|
||||
fileUrl={material.file_url}
|
||||
fileName={material.file_name}
|
||||
variant="icon"
|
||||
/>
|
||||
)}
|
||||
<RowActions
|
||||
actions={[
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: <Pencil className="h-4 w-4" />,
|
||||
show: canUpdate,
|
||||
onClick: () => handleEdit(material),
|
||||
},
|
||||
{
|
||||
label: 'Hapus',
|
||||
icon: (
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
),
|
||||
show: canDelete,
|
||||
onClick: () => handleDeleteClick(material),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</AttachmentActions>
|
||||
</Attachment>
|
||||
) : (
|
||||
<div className="flex items-center gap-2 rounded-xl border border-dashed px-2.5 py-2 text-xs text-muted-foreground">
|
||||
<FileX className="h-4 w-4 shrink-0" />
|
||||
Tidak ada file dilampirkan
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex flex-wrap items-center justify-between gap-2 border-t pt-3">
|
||||
{material.meeting_number ? (
|
||||
<Badge variant="secondary">
|
||||
Pertemuan {material.meeting_number}
|
||||
</Badge>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
<div className="flex items-center gap-1 text-xs text-muted-foreground">
|
||||
<CalendarDays className="h-3.5 w-3.5" />
|
||||
{format(new Date(material.created_at), 'd MMM yyyy')}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p className="font-medium">{material.title}</p>
|
||||
{material.description && (
|
||||
<p className="mt-1 line-clamp-2 text-sm text-muted-foreground">
|
||||
{material.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{courseClass
|
||||
? `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`
|
||||
: '-'}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
@ -61,7 +61,7 @@ export function createMaterialColumns(
|
||||
return '-';
|
||||
}
|
||||
|
||||
return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
|
||||
return `${courseClass.course?.code ?? ''} · ${courseClass.course?.name ?? ''}`;
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@ -4,10 +4,18 @@ export type Material = {
|
||||
course_class: {
|
||||
id: number;
|
||||
course: { id: number; code: string; name: string } | null;
|
||||
lecturer: {
|
||||
id: number;
|
||||
user: {
|
||||
id: number;
|
||||
profile: { full_name: string } | null;
|
||||
} | null;
|
||||
} | null;
|
||||
} | null;
|
||||
title: string;
|
||||
description: string | null;
|
||||
meeting_number: number | null;
|
||||
file_url: string | null;
|
||||
file_name: string | null;
|
||||
created_at: string;
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user