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

107
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,25 +33,33 @@ 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 className="flex items-center"> </div>
{material.file_url && material.file_name && (
<AttachmentPreviewDialog
fileUrl={material.file_url}
fileName={material.file_name}
variant="icon"
/>
)}
<RowActions <RowActions
actions={[ actions={[
{ {
@ -54,22 +79,54 @@ export function createMaterialCard(params: CreateCardParams) {
]} ]}
/> />
</div> </div>
</div>
<div>
<p className="font-medium">{material.title}</p>
{material.description && ( {material.description && (
<p className="mt-1 line-clamp-2 text-sm text-muted-foreground"> <p className="line-clamp-2 text-sm text-muted-foreground">
{material.description} {material.description}
</p> </p>
)} )}
</div>
<p className="text-sm text-muted-foreground"> {material.file_url && material.file_name ? (
{courseClass <Attachment size="sm" className="w-full">
? `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}` <AttachmentMedia>
: '-'} <FileIcon />
</p> </AttachmentMedia>
<AttachmentContent>
<AttachmentTitle>
{material.file_name}
</AttachmentTitle>
<AttachmentDescription>
Lampiran materi
</AttachmentDescription>
</AttachmentContent>
<AttachmentActions>
<AttachmentPreviewDialog
fileUrl={material.file_url}
fileName={material.file_name}
variant="icon"
/>
</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> </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;
}; };