itm/siakad-itm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: enhance material management with user-specific filtering and attachment preview

Browse Source
This commit is contained in:
Yoga Pangestu 2026-09-02 22:51:09 +07:00
parent 753e7735a7
commit 2b7b4e2ab0
9 changed files with 414 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app/Http/Controllers/Admin/AcademicClasses/MaterialController.php
View File

@ -23,10 +23,11 @@ public function index(PaginatedRequest $request): Response
{
return Inertia::render('admin/academic-classes/materials/index', [
'materials' => $this->service->paginated(
$request->user(),
...$request->validatedWithDefaults(),
courseClassId: $request->validated('course_class_id'),
),
'courseClasses' => $this->courseClassService->getAllForSelect(),
'courseClasses' => $this->courseClassService->getAllForSelect($request->user()),
'filters' => $request->only(['course_class_id']),
]);
}

10
app/Http/Requests/Admin/AcademicClasses/MaterialRequest.php
View File

@ -14,8 +14,16 @@ public function authorize(): bool
public function rules(): array
{
$user = $this->user();
$courseClassRule = Rule::exists('course_classes', 'id');
if ($user->hasRole('dosen')) {
$courseClassRule->where('lecturer_id', $user->lecturer?->id);
}
return [
'course_class_id' => ['required', 'integer', Rule::exists('course_classes', 'id')],
'course_class_id' => ['required', 'integer', $courseClassRule],
'title' => ['required', 'string', 'max:150'],
'description' => ['nullable', 'string'],
'meeting_number' => ['nullable', 'integer', 'min:1'],

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

@ -2,19 +2,28 @@
namespace App\Services\Admin\AcademicClasses;
use App\Enums\RegistrationStatus;
use App\Models\Material;
use App\Models\User;
use Illuminate\Contracts\Pagination\LengthAwarePaginator;
use Illuminate\Http\UploadedFile;
class MaterialService
{
public function paginated(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()
->select(['id', 'course_class_id', 'title', 'description', 'meeting_number'])
->with('courseClass.course:id,code,name')
->when($search, fn ($q) => $q->where('title', 'like', "%{$search}%"))
->when($courseClassId, fn ($q) => $q->where('course_class_id', $courseClassId))
->when($user->hasRole('dosen'), fn ($q) => $q->whereHas('courseClass', fn ($q) => $q->where('lecturer_id', $user->lecturer?->id)))
->when($user->hasRole('mahasiswa'), fn ($q) => $q->whereHas('courseClass', function ($q) use ($user) {
$q->whereHas('registrations', function ($q) use ($user) {
$q->where('student_id', $user->student?->id)
->whereHas('submission', fn ($q) => $q->where('status', RegistrationStatus::Approved));
});
}))
->latest()
->paginate($perPage);
}

22
app/Services/Admin/Manage/CourseClassService.php
View File

@ -3,16 +3,32 @@
namespace App\Services\Admin\Manage;
use App\Models\CourseClass;
use App\Models\User;
use Illuminate\Contracts\Pagination\LengthAwarePaginator;
use Illuminate\Database\Eloquent\Collection;
use Illuminate\Support\Facades\DB;
class CourseClassService
{
public function getAllForSelect(): Collection
/**
* When $user is a dosen, only their own assigned classes are returned.
* When $user is a mahasiswa, only classes from their own department are returned.
*/
public function getAllForSelect(?User $user = null): Collection
{
return CourseClass::select(['id', 'course_id', 'academic_term_id'])
->with('course:id,code,name,semester_number,department_id')
return CourseClass::query()
->select(['course_classes.id', 'course_classes.course_id', 'course_classes.lecturer_id', 'course_classes.academic_term_id'])
->join('courses', 'courses.id', '=', 'course_classes.course_id')
->join('departments', 'departments.id', '=', 'courses.department_id')
->with([
'course:id,code,name,semester_number,department_id',
'course.department:id,name',
])
->when($user?->hasRole('dosen'), fn ($q) => $q->where('course_classes.lecturer_id', $user->lecturer?->id))
->when($user?->hasRole('mahasiswa'), fn ($q) => $q->where('courses.department_id', $user->student?->department_id))
->orderBy('departments.name')
->orderBy('courses.semester_number')
->orderBy('courses.name')
->get();
}

6
database/seeders/RolePermissionSeeder.php
View File

@ -47,6 +47,7 @@ public function run(): void
'update-letter-requests',
'delete-letter-requests',
'view-schedules',
'view-materials',
...$feedbackSelfService,
],
'dosen' => [
@ -58,6 +59,11 @@ public function run(): void
'approve-course-registrations',
'reject-course-registrations',
'view-schedules',
'view-materials',
'create-materials',
'update-materials',
'delete-materials',
...$feedbackSelfService,
...$feedbackSelfService,
],
'staff-admin' => [

105
resources/js/components/attachment-preview-dialog.tsx Normal file
View File

@ -0,0 +1,105 @@
import { Paperclip } from 'lucide-react';
import { useState } from 'react';
import {
Dialog,
DialogContent,
DialogHeader,
DialogTitle,
} from '@/components/ui/dialog';
import { cn } from '@/lib/utils';
const IMAGE_EXTENSIONS = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
const VIDEO_EXTENSIONS = ['mp4', 'webm'];
function fileExtension(fileName: string): string {
return fileName.split('.').pop()?.toLowerCase() ?? '';
}
type AttachmentPreviewDialogProps = {
fileUrl: string;
fileName: string;
className?: string;
};
export function AttachmentPreviewDialog({
fileUrl,
fileName,
className,
}: AttachmentPreviewDialogProps) {
const [open, setOpen] = useState(false);
const extension = fileExtension(fileName);
const isImage = IMAGE_EXTENSIONS.includes(extension);
const isVideo = VIDEO_EXTENSIONS.includes(extension);
const isPdf = extension === 'pdf';
return (
<>
<button
type="button"
onClick={() => setOpen(true)}
className={cn(
'inline-flex items-center gap-1 text-primary underline underline-offset-4 hover:text-primary/80',
className,
)}
>
<Paperclip className="h-3.5 w-3.5 shrink-0" />
<span className="truncate">{fileName}</span>
</button>
<Dialog open={open} onOpenChange={setOpen}>
<DialogContent
className={cn(
'flex flex-col overflow-hidden',
isPdf
? 'h-[90vh] max-h-[90vh] w-[95vw] max-w-6xl sm:max-w-6xl'
: 'max-h-[85vh] sm:max-w-lg',
)}
>
<DialogHeader>
<DialogTitle className="truncate pr-6">
{fileName}
</DialogTitle>
</DialogHeader>
<div className="flex min-h-0 flex-1 items-center justify-center overflow-auto rounded-md bg-muted/30">
{isImage && (
<img
src={fileUrl}
alt={fileName}
className="max-h-[70vh] max-w-full object-contain"
/>
)}
{isVideo && (
<video
src={fileUrl}
controls
className="max-h-[70vh] w-full"
/>
)}
{isPdf && (
<iframe
src={fileUrl}
title={fileName}
className="h-full w-full border-0"
/>
)}
{!isImage && !isVideo && !isPdf && (
<div className="flex flex-col items-center gap-3 py-16 text-center text-sm text-muted-foreground">
<Paperclip className="h-8 w-8" />
<p>Pratinjau tidak tersedia untuk file ini.</p>
<a
href={fileUrl}
target="_blank"
rel="noreferrer"
className="text-primary underline underline-offset-4 hover:text-primary/80"
>
Buka / unduh file
</a>
</div>
)}
</div>
</DialogContent>
</Dialog>
</>
);
}

153
resources/js/components/filter-dialog.tsx
View File

@ -1,6 +1,17 @@
import { Filter, X } from 'lucide-react';
import { useState } from 'react';
import { Button } from '@/components/ui/button';
import {
Combobox,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
} from '@/components/ui/combobox';
import {
Dialog,
DialogContent,
@ -22,19 +33,88 @@ export type FilterOption = {
label: string;
};
export type FilterField = {
key: string;
export type FilterOptionGroup = {
label: string;
placeholder?: string;
options: FilterOption[];
};
export type FilterField =
| {
key: string;
label: string;
placeholder?: string;
type?: 'select';
options: FilterOption[];
}
| {
key: string;
label: string;
placeholder?: string;
type: 'combobox';
groups: FilterOptionGroup[];
};
type FilterDialogProps = {
fields: FilterField[];
activeFilters: Record<string, string | undefined>;
onApply: (filters: Record<string, string>) => void;
};
function ComboboxFilterField({
field,
value,
onChange,
}: {
field: Extract<FilterField, { type: 'combobox' }>;
value: string;
onChange: (value: string) => void;
}) {
const selected =
field.groups
.flatMap((group) => group.options)
.find((option) => option.value === value) ?? null;
return (
<Combobox
items={field.groups}
value={selected}
onValueChange={(option: FilterOption | null) =>
onChange(option ? option.value : 'all')
}
itemToStringLabel={(option: FilterOption) => option.label}
isItemEqualToValue={(a: FilterOption, b: FilterOption) =>
a.value === b.value
}
>
<ComboboxInput
placeholder={field.placeholder ?? 'Semua'}
showClear
className="w-full"
/>
<ComboboxContent>
<ComboboxEmpty>Tidak ditemukan.</ComboboxEmpty>
<ComboboxList>
{(group: FilterOptionGroup) => (
<ComboboxGroup key={group.label} items={group.options}>
<ComboboxLabel>{group.label}</ComboboxLabel>
<ComboboxCollection>
{(option: FilterOption) => (
<ComboboxItem
key={option.value}
value={option}
>
{option.label}
</ComboboxItem>
)}
</ComboboxCollection>
</ComboboxGroup>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
);
}
export function FilterDialog({
fields,
activeFilters,
@ -92,33 +172,48 @@ export function FilterDialog({
{fields.map((field) => (
<div className="grid gap-2" key={field.key}>
<Label>{field.label}</Label>
<Select
value={activeFilters[field.key] ?? 'all'}
onValueChange={(value) =>
handleChange(field.key, value)
}
>
<SelectTrigger className="w-full">
<SelectValue
placeholder={
field.placeholder ?? 'Semua'
}
/>
</SelectTrigger>
<SelectContent>
<SelectItem value="all">
Semua
</SelectItem>
{field.options.map((option) => (
<SelectItem
key={option.value}
value={option.value}
>
{option.label}
{field.type === 'combobox' ? (
<ComboboxFilterField
field={field}
value={
activeFilters[field.key] ?? 'all'
}
onChange={(value) =>
handleChange(field.key, value)
}
/>
) : (
<Select
value={
activeFilters[field.key] ?? 'all'
}
onValueChange={(value) =>
handleChange(field.key, value)
}
>
<SelectTrigger className="w-full">
<SelectValue
placeholder={
field.placeholder ??
'Semua'
}
/>
</SelectTrigger>
<SelectContent>
<SelectItem value="all">
Semua
</SelectItem>
))}
</SelectContent>
</Select>
{field.options.map((option) => (
<SelectItem
key={option.value}
value={option.value}
>
{option.label}
</SelectItem>
))}
</SelectContent>
</Select>
)}
</div>
))}
</div>

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

@ -1,5 +1,6 @@
import type { ColumnDef } from '@tanstack/react-table';
import { Paperclip, Pencil, Trash2 } from 'lucide-react';
import { Pencil, Trash2 } from 'lucide-react';
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
import { RowActions } from '@/components/row-actions';
import { Badge } from '@/components/ui/badge';
import type { Material } from '@/types/material';
@ -69,20 +70,15 @@ export function createMaterialColumns(
cell: ({ row }) => {
const material = row.original;
if (!material.file_url) {
if (!material.file_url || !material.file_name) {
return <span className="text-muted-foreground">-</span>;
}
return (
<a
href={material.file_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" />
{material.file_name}
</a>
<AttachmentPreviewDialog
fileUrl={material.file_url}
fileName={material.file_name}
/>
);
},
},

181
resources/js/pages/admin/academic-classes/materials/index.tsx
View File

@ -5,21 +5,25 @@ import type { PaginationState } from '@/components/data-table';
import { DataTable } from '@/components/data-table';
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
import { FileUploadField } from '@/components/file-upload-field';
import type { FilterField } from '@/components/filter-dialog';
import type { FilterOptionGroup } from '@/components/filter-dialog';
import { FilterDialog } from '@/components/filter-dialog';
import { FormDialog } from '@/components/form-dialog';
import InputError from '@/components/input-error';
import { PageHeader } from '@/components/page-header';
import { Button } from '@/components/ui/button';
import {
Combobox,
ComboboxCollection,
ComboboxContent,
ComboboxEmpty,
ComboboxGroup,
ComboboxInput,
ComboboxItem,
ComboboxLabel,
ComboboxList,
} from '@/components/ui/combobox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from '@/components/ui/select';
import { Textarea } from '@/components/ui/textarea';
import { usePermissions } from '@/hooks/use-permissions';
import { useServerTable } from '@/hooks/use-server-table';
@ -34,9 +38,17 @@ import { createMaterialColumns } from './columns';
type CourseClassOption = {
id: number;
course: { id: number; code: string; name: string } | null;
course: {
id: number;
code: string;
name: string;
semester_number: number | null;
department: { id: number; name: string } | null;
} | null;
};
type CourseClassGroup = { value: string; items: CourseClassOption[] };
type Props = {
materials: {
data: Material[];
@ -53,7 +65,80 @@ type Props = {
};
function courseClassLabel(courseClass: CourseClassOption): string {
return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
return `${courseClass.course?.code ?? ''} - ${courseClass.course?.name ?? ''}`;
}
function groupCourseClassesByDepartment(
options: CourseClassOption[],
): CourseClassGroup[] {
const groups: CourseClassGroup[] = [];
let currentKey: string | null = null;
for (const option of options) {
const key = `${option.course?.department?.name ?? 'Tanpa Jurusan'} — Semester ${option.course?.semester_number ?? 'Tidak ditentukan'}`;
if (key !== currentKey) {
currentKey = key;
groups.push({ value: key, items: [] });
}
groups[groups.length - 1].items.push(option);
}
return groups;
}
function CourseClassField({
courseClasses,
value,
onChange,
}: {
courseClasses: CourseClassOption[];
value: CourseClassOption | null;
onChange: (value: CourseClassOption | null) => void;
}) {
const groups = groupCourseClassesByDepartment(courseClasses);
return (
<Combobox
items={groups}
value={value}
onValueChange={onChange}
itemToStringLabel={courseClassLabel}
isItemEqualToValue={(a, b) => a.id === b.id}
>
<ComboboxInput placeholder="Pilih kelas" className="w-full" />
<ComboboxContent>
<ComboboxEmpty>Kelas tidak ditemukan.</ComboboxEmpty>
<ComboboxList>
{(group: CourseClassGroup) => (
<ComboboxGroup key={group.value} items={group.items}>
<ComboboxLabel>{group.value}</ComboboxLabel>
<ComboboxCollection>
{(option: CourseClassOption) => (
<ComboboxItem key={option.id} value={option}>
{courseClassLabel(option)}
</ComboboxItem>
)}
</ComboboxCollection>
</ComboboxGroup>
)}
</ComboboxList>
</ComboboxContent>
</Combobox>
);
}
function courseClassFilterGroups(
courseClasses: CourseClassOption[],
): FilterOptionGroup[] {
return groupCourseClassesByDepartment(courseClasses).map((group) => ({
label: group.value,
options: group.items.map((option) => ({
value: String(option.id),
label: courseClassLabel(option),
})),
}));
}
export default function MaterialIndex({
@ -70,14 +155,12 @@ export default function MaterialIndex({
const canUpdate = hasPermission('update-materials');
const canDelete = hasPermission('delete-materials');
const filterFields: FilterField[] = [
const filterFields = [
{
key: 'course_class_id',
label: 'Kelas',
options: courseClasses.map((courseClass) => ({
value: String(courseClass.id),
label: courseClassLabel(courseClass),
})),
type: 'combobox' as const,
groups: courseClassFilterGroups(courseClasses),
},
];
@ -224,6 +307,10 @@ function CreateForm({
onOpenChange: (open: boolean) => void;
courseClasses: CourseClassOption[];
}) {
const [courseClass, setCourseClass] = useState<CourseClassOption | null>(
null,
);
return (
<FormDialog
open={open}
@ -231,7 +318,10 @@ function CreateForm({
title="Tambah Materi"
action={store()}
resetOnSuccess
onSuccess={() => onOpenChange(false)}
onSuccess={() => {
onOpenChange(false);
setCourseClass(null);
}}
>
{({ errors }) => (
<div className="grid gap-4">
@ -239,22 +329,16 @@ function CreateForm({
<Label>
Kelas <span className="text-destructive">*</span>
</Label>
<input type="hidden" name="course_class_id" />
<Select name="course_class_id">
<SelectTrigger className="w-full">
<SelectValue placeholder="Pilih kelas" />
</SelectTrigger>
<SelectContent>
{courseClasses.map((courseClass) => (
<SelectItem
key={courseClass.id}
value={String(courseClass.id)}
>
{courseClassLabel(courseClass)}
</SelectItem>
))}
</SelectContent>
</Select>
<input
type="hidden"
name="course_class_id"
value={courseClass?.id ?? ''}
/>
<CourseClassField
courseClasses={courseClasses}
value={courseClass}
onChange={setCourseClass}
/>
<InputError message={errors.course_class_id} />
</div>
<div className="grid gap-2">
@ -310,6 +394,13 @@ function EditForm({
editing: Material | null;
courseClasses: CourseClassOption[];
}) {
const [courseClass, setCourseClass] = useState<CourseClassOption | null>(
editing
? (courseClasses.find((c) => c.id === editing.course_class_id) ??
null)
: null,
);
return (
<FormDialog
open={open}
@ -327,24 +418,16 @@ function EditForm({
Kelas{' '}
<span className="text-destructive">*</span>
</Label>
<Select
<input
type="hidden"
name="course_class_id"
defaultValue={String(editing.course_class_id)}
>
<SelectTrigger className="w-full">
<SelectValue placeholder="Pilih kelas" />
</SelectTrigger>
<SelectContent>
{courseClasses.map((courseClass) => (
<SelectItem
key={courseClass.id}
value={String(courseClass.id)}
>
{courseClassLabel(courseClass)}
</SelectItem>
))}
</SelectContent>
</Select>
value={courseClass?.id ?? ''}
/>
<CourseClassField
courseClasses={courseClasses}
value={courseClass}
onChange={setCourseClass}
/>
<InputError message={errors.course_class_id} />
</div>
<div className="grid gap-2">