feat: enhance assignment management with user role-based filtering and attachment preview
This commit is contained in:
Yoga Pangestu
parent
2b7b4e2ab0
commit
be0897ad6e
@ -23,10 +23,11 @@ public function index(PaginatedRequest $request): Response
|
||||
{
|
||||
return Inertia::render('admin/academic-classes/assignments/index', [
|
||||
'assignments' => $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']),
|
||||
]);
|
||||
}
|
||||
|
||||
@ -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'],
|
||||
'deadline' => ['required', 'date'],
|
||||
|
||||
@ -2,13 +2,15 @@
|
||||
|
||||
namespace App\Services\Admin\AcademicClasses;
|
||||
|
||||
use App\Enums\RegistrationStatus;
|
||||
use App\Models\Assignment;
|
||||
use App\Models\User;
|
||||
use Illuminate\Contracts\Pagination\LengthAwarePaginator;
|
||||
use Illuminate\Http\UploadedFile;
|
||||
|
||||
class AssignmentService
|
||||
{
|
||||
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 Assignment::query()
|
||||
->select(['id', 'course_class_id', 'title', 'description', 'deadline'])
|
||||
@ -16,6 +18,13 @@ public function paginated(int $perPage = 25, string $search = '', ?int $courseCl
|
||||
->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);
|
||||
}
|
||||
|
||||
@ -48,6 +48,7 @@ public function run(): void
|
||||
'delete-letter-requests',
|
||||
'view-schedules',
|
||||
'view-materials',
|
||||
'view-assignments',
|
||||
...$feedbackSelfService,
|
||||
],
|
||||
'dosen' => [
|
||||
@ -63,7 +64,10 @@ public function run(): void
|
||||
'create-materials',
|
||||
'update-materials',
|
||||
'delete-materials',
|
||||
...$feedbackSelfService,
|
||||
'view-assignments',
|
||||
'create-assignments',
|
||||
'update-assignments',
|
||||
'delete-assignments',
|
||||
...$feedbackSelfService,
|
||||
],
|
||||
'staff-admin' => [
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { format } from 'date-fns';
|
||||
import { ClipboardList, Paperclip, Pencil, Trash2 } from 'lucide-react';
|
||||
import { ClipboardList, Pencil, Trash2 } from 'lucide-react';
|
||||
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
|
||||
import { RowActions } from '@/components/row-actions';
|
||||
import { index as submissionsIndex } from '@/routes/admin/academic-classes/assignments/submissions';
|
||||
import type { Assignment } from '@/types/assignment';
|
||||
@ -64,20 +65,15 @@ export function createAssignmentColumns(
|
||||
cell: ({ row }) => {
|
||||
const assignment = row.original;
|
||||
|
||||
if (!assignment.attachment_url) {
|
||||
if (!assignment.attachment_url || !assignment.attachment_name) {
|
||||
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>
|
||||
<AttachmentPreviewDialog
|
||||
fileUrl={assignment.attachment_url}
|
||||
fileName={assignment.attachment_name}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
|
||||
@ -6,21 +6,25 @@ import { DataTable } from '@/components/data-table';
|
||||
import { DateTimeField } from '@/components/datetime-field';
|
||||
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';
|
||||
@ -35,9 +39,17 @@ import { createAssignmentColumns } 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 = {
|
||||
assignments: {
|
||||
data: Assignment[];
|
||||
@ -54,7 +66,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 courseClassFilterGroups(
|
||||
courseClasses: CourseClassOption[],
|
||||
): FilterOptionGroup[] {
|
||||
return groupCourseClassesByDepartment(courseClasses).map((group) => ({
|
||||
label: group.value,
|
||||
options: group.items.map((option) => ({
|
||||
value: String(option.id),
|
||||
label: courseClassLabel(option),
|
||||
})),
|
||||
}));
|
||||
}
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AssignmentIndex({
|
||||
@ -72,14 +157,12 @@ export default function AssignmentIndex({
|
||||
const canDelete = hasPermission('delete-assignments');
|
||||
const canViewSubmissions = hasPermission('view-assignment-submissions');
|
||||
|
||||
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),
|
||||
},
|
||||
];
|
||||
|
||||
@ -227,6 +310,10 @@ function CreateForm({
|
||||
onOpenChange: (open: boolean) => void;
|
||||
courseClasses: CourseClassOption[];
|
||||
}) {
|
||||
const [courseClass, setCourseClass] = useState<CourseClassOption | null>(
|
||||
null,
|
||||
);
|
||||
|
||||
return (
|
||||
<FormDialog
|
||||
open={open}
|
||||
@ -234,7 +321,10 @@ function CreateForm({
|
||||
title="Tambah Tugas"
|
||||
action={store()}
|
||||
resetOnSuccess
|
||||
onSuccess={() => onOpenChange(false)}
|
||||
onSuccess={() => {
|
||||
onOpenChange(false);
|
||||
setCourseClass(null);
|
||||
}}
|
||||
>
|
||||
{({ errors }) => (
|
||||
<div className="grid gap-4">
|
||||
@ -242,22 +332,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: Assignment | 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">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user