itm/itmpwk.ac.id
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance MaterialService and MaterialCard; add lecturer information and improve material display with created date

Browse Source
This commit is contained in:
Yoga Pangestu 2026-09-04 13:42:33 +07:00
parent 139875ce31
commit 33f354ad94
4 changed files with 115 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Services/Admin/AcademicClasses/MaterialService.php
View File

@ -20,8 +20,10 @@ public function __construct(
public function paginated(User $user, int $perPage = 25, string $search = '', ?int $courseClassId = null): LengthAwarePaginator public function paginated(User $user, int $perPage = 25, string $search = '', ?int $courseClassId = null): LengthAwarePaginator
{ {
return Material::query() return Material::query()
->select(['id', 'course_class_id', 'title', 'description', 'meeting_number']) ->with([
->with('courseClass.course:id,code,name') 'courseClass.course:id,code,name',
'courseClass.lecturer.user.profile',
])
->when($search, fn ($q) => $q->where('title', 'like', "%{$search}%")) ->when($search, fn ($q) => $q->where('title', 'like', "%{$search}%"))
->when($courseClassId, fn ($q) => $q->where('course_class_id', $courseClassId)) ->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))) ->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() ->latest()
->paginate($perPage); ->paginate($perPage, ['id', 'course_class_id', 'title', 'description', 'meeting_number', 'created_at']);
} }
public function create(array $data, ?UploadedFile $file): Material public function create(array $data, ?UploadedFile $file): Material

145
resources/js/pages/admin/academic-classes/materials/card.tsx
View File

@ -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 { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
import { RowActions } from '@/components/row-actions'; import { RowActions } from '@/components/row-actions';
import {
Attachment,
AttachmentActions,
AttachmentContent,
AttachmentDescription,
AttachmentMedia,
AttachmentTitle,
} from '@/components/ui/attachment';
import { Badge } from '@/components/ui/badge'; import { Badge } from '@/components/ui/badge';
import type { Material } from '@/types/material'; import type { Material } from '@/types/material';
@ -16,60 +33,100 @@ export function createMaterialCard(params: CreateCardParams) {
return function MaterialCard(material: Material) { return function MaterialCard(material: Material) {
const courseClass = material.course_class; const courseClass = material.course_class;
const lecturerName =
courseClass?.lecturer?.user?.profile?.full_name ?? null;
return ( 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 items-start justify-between gap-2">
<div className="flex flex-wrap items-center gap-2"> <div className="flex items-start gap-3">
{material.meeting_number && ( <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
<Badge variant="secondary"> <BookOpen className="h-5 w-5" />
Pertemuan {material.meeting_number} </div>
</Badge> <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>
<div className="flex items-center"> <RowActions
{material.file_url && material.file_name && ( 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 <AttachmentPreviewDialog
fileUrl={material.file_url} fileUrl={material.file_url}
fileName={material.file_name} fileName={material.file_name}
variant="icon" variant="icon"
/> />
)} </AttachmentActions>
<RowActions </Attachment>
actions={[ ) : (
{ <div className="flex items-center gap-2 rounded-xl border border-dashed px-2.5 py-2 text-xs text-muted-foreground">
label: 'Edit', <FileX className="h-4 w-4 shrink-0" />
icon: <Pencil className="h-4 w-4" />, Tidak ada file dilampirkan
show: canUpdate, </div>
onClick: () => handleEdit(material), )}
},
{ <div className="flex flex-wrap items-center justify-between gap-2 border-t pt-3">
label: 'Hapus', {material.meeting_number ? (
icon: ( <Badge variant="secondary">
<Trash2 className="h-4 w-4 text-destructive" /> Pertemuan {material.meeting_number}
), </Badge>
show: canDelete, ) : (
onClick: () => handleDeleteClick(material), <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> </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> </div>
); );
}; };

2
resources/js/pages/admin/academic-classes/materials/columns.tsx
View File

@ -61,7 +61,7 @@ export function createMaterialColumns(
return '-'; return '-';
} }
return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`; return `${courseClass.course?.code ?? ''} · ${courseClass.course?.name ?? ''}`;
}, },
}, },
]; ];

8
resources/js/types/material.ts
View File

@ -4,10 +4,18 @@ export type Material = {
course_class: { course_class: {
id: number; id: number;
course: { id: number; code: string; name: string } | null; course: { id: number; code: string; name: string } | null;
lecturer: {
id: number;
user: {
id: number;
profile: { full_name: string } | null;
} | null;
} | null;
} | null; } | null;
title: string; title: string;
description: string | null; description: string | null;
meeting_number: number | null; meeting_number: number | null;
file_url: string | null; file_url: string | null;
file_name: string | null; file_name: string | null;
created_at: string;
}; };