Refactor assignment management system
- Updated the PermissionCatalog to remove unnecessary permissions for assignment submissions. - Modified RolePermissionSeeder to align with the updated permissions. - Enhanced useServerTable hook to support resetKeys for Inertia's reset visit option. - Removed obsolete columns.tsx file related to assignment columns. - Revamped assignment index page to utilize InfiniteScroll and improved UI components. - Introduced new assignment status management with enums and updated database schema. - Created GradeSubmissionRequest for validation of submission grading. - Implemented score editing functionality in submission index with real-time updates. - Added accordion component for better UI organization in assignment descriptions.
This commit is contained in:
parent
a809307272
commit
4980ad95b3
21
app/Enums/AssignmentStatus.php
Normal file
21
app/Enums/AssignmentStatus.php
Normal file
@ -0,0 +1,21 @@
|
||||
<?php
|
||||
|
||||
namespace App\Enums;
|
||||
|
||||
use App\Enums\Concerns\HasValues;
|
||||
|
||||
enum AssignmentStatus: string
|
||||
{
|
||||
use HasValues;
|
||||
|
||||
case Open = 'open';
|
||||
case Closed = 'closed';
|
||||
|
||||
public function label(): string
|
||||
{
|
||||
return match ($this) {
|
||||
self::Open => 'Dibuka',
|
||||
self::Closed => 'Ditutup',
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -8,6 +8,7 @@
|
||||
use App\Models\Assignment;
|
||||
use App\Services\Admin\AcademicClasses\AssignmentService;
|
||||
use App\Services\Admin\Manage\CourseClassService;
|
||||
use App\Services\Admin\Master\AcademicTermService;
|
||||
use Illuminate\Http\RedirectResponse;
|
||||
use Inertia\Inertia;
|
||||
use Inertia\Response;
|
||||
@ -17,18 +18,28 @@ class AssignmentController extends Controller
|
||||
public function __construct(
|
||||
private readonly AssignmentService $service,
|
||||
private readonly CourseClassService $courseClassService,
|
||||
private readonly AcademicTermService $academicTermService,
|
||||
) {}
|
||||
|
||||
public function index(PaginatedRequest $request): Response
|
||||
{
|
||||
$academicTermId = $request->has('academic_term_id')
|
||||
? $request->validated('academic_term_id')
|
||||
: $this->academicTermService->getActive()?->id;
|
||||
|
||||
return Inertia::render('admin/academic-classes/assignments/index', [
|
||||
'assignments' => $this->service->paginated(
|
||||
'assignments' => Inertia::scroll(fn () => $this->service->paginated(
|
||||
$request->user(),
|
||||
...$request->validatedWithDefaults(),
|
||||
courseClassId: $request->validated('course_class_id'),
|
||||
),
|
||||
academicTermId: $academicTermId,
|
||||
)),
|
||||
'courseClasses' => $this->courseClassService->getAllForSelect($request->user()),
|
||||
'filters' => $request->only(['course_class_id']),
|
||||
'academicTerms' => $this->academicTermService->getAllForSelect(),
|
||||
'filters' => [
|
||||
'course_class_id' => $request->validated('course_class_id'),
|
||||
'academic_term_id' => $academicTermId ? (string) $academicTermId : null,
|
||||
],
|
||||
]);
|
||||
}
|
||||
|
||||
|
||||
@ -3,7 +3,7 @@
|
||||
namespace App\Http\Controllers\Admin\AcademicClasses;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use App\Http\Requests\Admin\AcademicClasses\SubmissionRequest;
|
||||
use App\Http\Requests\Admin\AcademicClasses\GradeSubmissionRequest;
|
||||
use App\Http\Requests\Admin\AcademicClasses\SubmitAssignmentRequest;
|
||||
use App\Models\Assignment;
|
||||
use App\Models\Submission;
|
||||
@ -20,34 +20,21 @@ public function __construct(
|
||||
|
||||
public function index(Assignment $assignment): Response
|
||||
{
|
||||
$this->abortUnlessLecturerOwnsAssignment($assignment);
|
||||
|
||||
$assignment->load(['courseClass.course', 'courseClass.lecturer.user.profile', 'courseClass.academicTerm']);
|
||||
|
||||
return Inertia::render('admin/academic-classes/assignments/submissions', [
|
||||
'assignment' => $assignment,
|
||||
'submissions' => $this->service->forAssignment($assignment),
|
||||
'availableStudents' => $this->service->availableStudents($assignment),
|
||||
]);
|
||||
}
|
||||
|
||||
public function store(SubmissionRequest $request, Assignment $assignment): RedirectResponse
|
||||
public function grade(GradeSubmissionRequest $request, Assignment $assignment, Submission $submission): RedirectResponse
|
||||
{
|
||||
$this->service->create($assignment, $request->validated(), $request->file('file'));
|
||||
$this->service->grade($submission, $request->validated('score'));
|
||||
|
||||
return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pengumpulan berhasil ditambahkan.'])->back();
|
||||
}
|
||||
|
||||
public function update(SubmissionRequest $request, Assignment $assignment, Submission $submission): RedirectResponse
|
||||
{
|
||||
$this->service->update($submission, $request->validated(), $request->file('file'));
|
||||
|
||||
return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pengumpulan berhasil diperbarui.'])->back();
|
||||
}
|
||||
|
||||
public function destroy(Assignment $assignment, Submission $submission): RedirectResponse
|
||||
{
|
||||
$this->service->delete($submission);
|
||||
|
||||
return Inertia::flash('toast', ['type' => 'success', 'message' => 'Pengumpulan berhasil dihapus.'])->back();
|
||||
return Inertia::flash('toast', ['type' => 'success', 'message' => 'Nilai berhasil disimpan.'])->back();
|
||||
}
|
||||
|
||||
public function submit(SubmitAssignmentRequest $request, Assignment $assignment): RedirectResponse
|
||||
@ -58,4 +45,17 @@ public function submit(SubmitAssignmentRequest $request, Assignment $assignment)
|
||||
|
||||
return to_route('admin.academic-classes.assignments.index');
|
||||
}
|
||||
|
||||
/**
|
||||
* A dosen may only manage submissions for classes they lecture.
|
||||
*/
|
||||
private function abortUnlessLecturerOwnsAssignment(Assignment $assignment): void
|
||||
{
|
||||
$user = request()->user();
|
||||
|
||||
abort_if(
|
||||
$user->hasRole('dosen') && $assignment->courseClass?->lecturer_id !== $user->lecturer?->id,
|
||||
403,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Http\Requests\Admin\AcademicClasses;
|
||||
|
||||
use App\Enums\AssignmentStatus;
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
use Illuminate\Validation\Rule;
|
||||
|
||||
@ -27,6 +28,7 @@ public function rules(): array
|
||||
'title' => ['required', 'string', 'max:150'],
|
||||
'description' => ['nullable', 'string'],
|
||||
'deadline' => ['required', 'date'],
|
||||
'status' => ['nullable', Rule::enum(AssignmentStatus::class)],
|
||||
'attachment' => ['nullable', 'file', 'max:10240', 'mimes:pdf,doc,docx,ppt,pptx,xls,xlsx,jpg,jpeg,png,mp4,zip'],
|
||||
];
|
||||
}
|
||||
|
||||
@ -0,0 +1,31 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Requests\Admin\AcademicClasses;
|
||||
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
|
||||
class GradeSubmissionRequest extends FormRequest
|
||||
{
|
||||
public function authorize(): bool
|
||||
{
|
||||
if (! $this->user()->can('update-assignment-submissions')) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$user = $this->user();
|
||||
$assignment = $this->route('assignment');
|
||||
|
||||
if ($user->hasRole('dosen') && $assignment?->courseClass?->lecturer_id !== $user->lecturer?->id) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
public function rules(): array
|
||||
{
|
||||
return [
|
||||
'score' => ['nullable', 'numeric', 'min:0', 'max:100'],
|
||||
];
|
||||
}
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Requests\Admin\AcademicClasses;
|
||||
|
||||
use App\Enums\SubmissionStatus;
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
use Illuminate\Validation\Rule;
|
||||
|
||||
class SubmissionRequest extends FormRequest
|
||||
{
|
||||
public function authorize(): bool
|
||||
{
|
||||
return $this->user()->can($this->isMethod('post') ? 'create-assignment-submissions' : 'update-assignment-submissions');
|
||||
}
|
||||
|
||||
public function rules(): array
|
||||
{
|
||||
$assignment = $this->route('assignment');
|
||||
$submission = $this->route('submission');
|
||||
|
||||
$rules = [
|
||||
'notes' => ['nullable', 'string'],
|
||||
'status' => ['required', Rule::enum(SubmissionStatus::class)],
|
||||
'submitted_at' => ['nullable', 'date'],
|
||||
'score' => ['nullable', 'numeric', 'min:0', 'max:100'],
|
||||
'lecturer_feedback' => ['nullable', 'string'],
|
||||
'file' => ['nullable', 'file', 'max:10240', 'mimes:pdf,doc,docx,ppt,pptx,xls,xlsx,jpg,jpeg,png,mp4,zip'],
|
||||
];
|
||||
|
||||
if (! $submission) {
|
||||
$rules['student_id'] = [
|
||||
'required',
|
||||
'integer',
|
||||
Rule::exists('class_enrollments', 'student_id')->where('course_class_id', $assignment->course_class_id),
|
||||
Rule::unique('submissions', 'student_id')->where('assignment_id', $assignment->id),
|
||||
];
|
||||
}
|
||||
|
||||
return $rules;
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Http\Requests\Admin\AcademicClasses;
|
||||
|
||||
use App\Enums\AssignmentStatus;
|
||||
use App\Enums\RegistrationStatus;
|
||||
use App\Models\Submission;
|
||||
use Illuminate\Foundation\Http\FormRequest;
|
||||
@ -21,6 +22,12 @@ public function authorize(): bool
|
||||
return false;
|
||||
}
|
||||
|
||||
// Whether the assignment still accepts submissions is governed by its
|
||||
// status, not the deadline — a lecturer closes it explicitly.
|
||||
if ($assignment->status !== AssignmentStatus::Open) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return $assignment->courseClass()
|
||||
->whereHas('registrations', function ($q) use ($student) {
|
||||
$q->where('student_id', $student->id)
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Models;
|
||||
|
||||
use App\Enums\AssignmentStatus;
|
||||
use Illuminate\Database\Eloquent\Attributes\Appends;
|
||||
use Illuminate\Database\Eloquent\Attributes\Guarded;
|
||||
use Illuminate\Database\Eloquent\Casts\Attribute;
|
||||
@ -23,6 +24,7 @@ protected function casts(): array
|
||||
{
|
||||
return [
|
||||
'deadline' => 'datetime',
|
||||
'status' => AssignmentStatus::class,
|
||||
];
|
||||
}
|
||||
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
|
||||
namespace App\Services\Admin\AcademicClasses;
|
||||
|
||||
use App\Enums\AssignmentStatus;
|
||||
use App\Enums\RegistrationStatus;
|
||||
use App\Models\Assignment;
|
||||
use App\Models\User;
|
||||
@ -10,18 +11,23 @@
|
||||
|
||||
class AssignmentService
|
||||
{
|
||||
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, ?int $academicTermId = null): LengthAwarePaginator
|
||||
{
|
||||
return Assignment::query()
|
||||
->select(['id', 'course_class_id', 'title', 'description', 'deadline'])
|
||||
->withCount('submissions')
|
||||
->with('courseClass.course:id,code,name')
|
||||
->select(['id', 'course_class_id', 'title', 'description', 'deadline', 'status'])
|
||||
->withCount([
|
||||
'submissions',
|
||||
'submissions as graded_submissions_count' => fn ($q) => $q->whereNotNull('score'),
|
||||
])
|
||||
->with(['courseClass' => fn ($q) => $q->withCount('enrollments')
|
||||
->with(['course:id,code,name', 'academicTerm:id,academic_year,semester,start_date,end_date'])])
|
||||
->when($user->hasRole('mahasiswa'), fn ($q) => $q->with(['submissions' => function ($q) use ($user) {
|
||||
$q->select(['id', 'assignment_id', 'student_id', 'notes', 'status', 'submitted_at'])
|
||||
->where('student_id', $user->student?->id);
|
||||
}]))
|
||||
->when($search, fn ($q) => $q->where('title', 'like', "%{$search}%"))
|
||||
->when($courseClassId, fn ($q) => $q->where('course_class_id', $courseClassId))
|
||||
->when($academicTermId, fn ($q) => $q->whereHas('courseClass', fn ($q) => $q->where('academic_term_id', $academicTermId)))
|
||||
->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) {
|
||||
@ -40,6 +46,7 @@ public function create(array $data, ?UploadedFile $file): Assignment
|
||||
'title' => $data['title'],
|
||||
'description' => $data['description'] ?? null,
|
||||
'deadline' => $data['deadline'],
|
||||
'status' => $data['status'] ?? AssignmentStatus::Open,
|
||||
]);
|
||||
|
||||
if ($file) {
|
||||
@ -55,6 +62,7 @@ public function update(Assignment $assignment, array $data, ?UploadedFile $file)
|
||||
$assignment->title = $data['title'];
|
||||
$assignment->description = $data['description'] ?? null;
|
||||
$assignment->deadline = $data['deadline'];
|
||||
$assignment->status = $data['status'] ?? $assignment->status;
|
||||
$assignment->update();
|
||||
|
||||
if ($file) {
|
||||
|
||||
@ -42,51 +42,11 @@ public function forAssignment(Assignment $assignment): Collection
|
||||
->get();
|
||||
}
|
||||
|
||||
public function availableStudents(Assignment $assignment): Collection
|
||||
public function grade(Submission $submission, ?float $score): Submission
|
||||
{
|
||||
return Student::query()
|
||||
->whereHas('enrollments', fn ($q) => $q->where('course_class_id', $assignment->course_class_id))
|
||||
->whereDoesntHave('submissions', fn ($q) => $q->where('assignment_id', $assignment->id))
|
||||
->with(['user.profile', 'department'])
|
||||
->get();
|
||||
}
|
||||
|
||||
public function create(Assignment $assignment, array $data, ?UploadedFile $file): Submission
|
||||
{
|
||||
$submission = $assignment->submissions()->create([
|
||||
'student_id' => $data['student_id'],
|
||||
'notes' => $data['notes'] ?? null,
|
||||
'status' => $data['status'],
|
||||
'submitted_at' => $data['submitted_at'] ?? null,
|
||||
'score' => $data['score'] ?? null,
|
||||
'lecturer_feedback' => $data['lecturer_feedback'] ?? null,
|
||||
]);
|
||||
|
||||
if ($file) {
|
||||
$submission->addMedia($file)->toMediaCollection('submission_file');
|
||||
}
|
||||
|
||||
return $submission;
|
||||
}
|
||||
|
||||
public function update(Submission $submission, array $data, ?UploadedFile $file): Submission
|
||||
{
|
||||
$submission->notes = $data['notes'] ?? null;
|
||||
$submission->status = $data['status'];
|
||||
$submission->submitted_at = $data['submitted_at'] ?? null;
|
||||
$submission->score = $data['score'] ?? null;
|
||||
$submission->lecturer_feedback = $data['lecturer_feedback'] ?? null;
|
||||
$submission->score = $score;
|
||||
$submission->update();
|
||||
|
||||
if ($file) {
|
||||
$submission->addMedia($file)->toMediaCollection('submission_file');
|
||||
}
|
||||
|
||||
return $submission;
|
||||
}
|
||||
|
||||
public function delete(Submission $submission): bool
|
||||
{
|
||||
return $submission->delete();
|
||||
}
|
||||
}
|
||||
|
||||
@ -15,7 +15,7 @@ class PermissionCatalog
|
||||
public const ACADEMIC_CLASSES = [
|
||||
'view-materials', 'create-materials', 'update-materials', 'delete-materials',
|
||||
'view-assignments', 'create-assignments', 'update-assignments', 'delete-assignments',
|
||||
'view-assignment-submissions', 'create-assignment-submissions', 'update-assignment-submissions', 'delete-assignment-submissions',
|
||||
'view-assignment-submissions', 'update-assignment-submissions',
|
||||
'submit-assignments',
|
||||
'view-schedules', 'create-schedules', 'update-schedules', 'delete-schedules',
|
||||
'view-attendances', 'create-attendances', 'delete-attendances',
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
<?php
|
||||
|
||||
use App\Enums\AssignmentStatus;
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
return new class extends Migration
|
||||
{
|
||||
public function up(): void
|
||||
{
|
||||
Schema::table('assignments', function (Blueprint $table) {
|
||||
$table->enum('status', AssignmentStatus::values())
|
||||
->default(AssignmentStatus::Open->value)
|
||||
->after('deadline');
|
||||
});
|
||||
}
|
||||
|
||||
public function down(): void
|
||||
{
|
||||
Schema::table('assignments', function (Blueprint $table) {
|
||||
$table->dropColumn('status');
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -69,6 +69,8 @@ public function run(): void
|
||||
'create-assignments',
|
||||
'update-assignments',
|
||||
'delete-assignments',
|
||||
'view-assignment-submissions',
|
||||
'update-assignment-submissions',
|
||||
...$feedbackSelfService,
|
||||
],
|
||||
'staff-admin' => [
|
||||
|
||||
63
resources/js/components/ui/accordion.tsx
Normal file
63
resources/js/components/ui/accordion.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
import { ChevronDownIcon } from "lucide-react"
|
||||
import { Accordion as AccordionPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Accordion({
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||
return <AccordionPrimitive.Root data-slot="accordion" {...props} />
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn("border-b last:border-b-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
"flex flex-1 items-start justify-between gap-4 rounded-md py-3 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon className="pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||
return (
|
||||
<AccordionPrimitive.Content
|
||||
data-slot="accordion-content"
|
||||
className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
|
||||
{...props}
|
||||
>
|
||||
<div className={cn("pt-0 pb-3", className)}>{children}</div>
|
||||
</AccordionPrimitive.Content>
|
||||
)
|
||||
}
|
||||
|
||||
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
|
||||
@ -7,6 +7,12 @@ type UseServerTableOptions = {
|
||||
pagination: PaginationState;
|
||||
filters?: Record<string, string | undefined>;
|
||||
filterWithParams?: boolean;
|
||||
/**
|
||||
* Prop keys to pass as Inertia's `reset` visit option whenever search or
|
||||
* filters change, so mergeable props (e.g. `Inertia::scroll()` used for
|
||||
* infinite scroll) are replaced instead of appended to.
|
||||
*/
|
||||
resetKeys?: string[];
|
||||
};
|
||||
|
||||
export function useServerTable({
|
||||
@ -14,6 +20,7 @@ export function useServerTable({
|
||||
pagination,
|
||||
filters,
|
||||
filterWithParams = true,
|
||||
resetKeys,
|
||||
}: UseServerTableOptions) {
|
||||
const [search, setSearch] = useState(
|
||||
() => new URLSearchParams(window.location.search).get('search') ?? '',
|
||||
@ -63,10 +70,14 @@ export function useServerTable({
|
||||
per_page: pagination.per_page,
|
||||
search: value,
|
||||
},
|
||||
{ preserveState: true, replace: true },
|
||||
{
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
...(resetKeys ? { reset: resetKeys } : {}),
|
||||
},
|
||||
);
|
||||
},
|
||||
[route, filters, pagination.per_page],
|
||||
[route, filters, pagination.per_page, resetKeys],
|
||||
);
|
||||
|
||||
function applyFilter(key: string, value: string) {
|
||||
@ -88,7 +99,11 @@ export function useServerTable({
|
||||
search,
|
||||
}
|
||||
: newFilters,
|
||||
{ preserveState: true, replace: true },
|
||||
{
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
...(resetKeys ? { reset: resetKeys } : {}),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@ -103,7 +118,11 @@ export function useServerTable({
|
||||
search,
|
||||
}
|
||||
: newFilters,
|
||||
{ preserveState: true, replace: true },
|
||||
{
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
...(resetKeys ? { reset: resetKeys } : {}),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@ -117,7 +136,11 @@ export function useServerTable({
|
||||
search,
|
||||
}
|
||||
: {},
|
||||
{ preserveState: true, replace: true },
|
||||
{
|
||||
preserveState: true,
|
||||
replace: true,
|
||||
...(resetKeys ? { reset: resetKeys } : {}),
|
||||
},
|
||||
);
|
||||
setFilterOpen(false);
|
||||
}
|
||||
|
||||
@ -1,184 +0,0 @@
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { format } from 'date-fns';
|
||||
import { ClipboardList, Pencil, Trash2, Upload } from 'lucide-react';
|
||||
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
|
||||
import { RowActions } from '@/components/row-actions';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { index as submissionsIndex } from '@/routes/admin/academic-classes/assignments/submissions';
|
||||
import type { Assignment } from '@/types/assignment';
|
||||
|
||||
export type { Assignment } from '@/types/assignment';
|
||||
|
||||
type CreateColumnsParams = {
|
||||
handleEdit: (assignment: Assignment) => void;
|
||||
handleDeleteClick: (assignment: Assignment) => void;
|
||||
handleSubmit: (assignment: Assignment) => void;
|
||||
canUpdate: boolean;
|
||||
canDelete: boolean;
|
||||
canViewSubmissions: boolean;
|
||||
canSubmit: boolean;
|
||||
};
|
||||
|
||||
export function createAssignmentColumns(
|
||||
params: CreateColumnsParams,
|
||||
): ColumnDef<Assignment>[] {
|
||||
const {
|
||||
handleEdit,
|
||||
handleDeleteClick,
|
||||
handleSubmit,
|
||||
canUpdate,
|
||||
canDelete,
|
||||
canViewSubmissions,
|
||||
canSubmit,
|
||||
} = params;
|
||||
|
||||
const columns: ColumnDef<Assignment>[] = [
|
||||
{
|
||||
accessorKey: 'title',
|
||||
header: () => <span>Judul</span>,
|
||||
cell: ({ row }) => (
|
||||
<span className="font-medium">
|
||||
{row.getValue('title') as string}
|
||||
</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: 'course_class.course.name',
|
||||
header: () => <span>Kelas</span>,
|
||||
cell: ({ row }) => {
|
||||
const courseClass = row.original.course_class;
|
||||
|
||||
if (!courseClass) {
|
||||
return '-';
|
||||
}
|
||||
|
||||
return `${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`;
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'deadline',
|
||||
header: () => <span>Batas Waktu</span>,
|
||||
cell: ({ row }) => {
|
||||
const deadline = row.getValue('deadline') as string;
|
||||
|
||||
return format(new Date(deadline), 'd MMM yyyy, HH:mm');
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: 'attachment_name',
|
||||
header: () => <span>Lampiran</span>,
|
||||
cell: ({ row }) => {
|
||||
const assignment = row.original;
|
||||
|
||||
if (!assignment.attachment_url || !assignment.attachment_name) {
|
||||
return <span className="text-muted-foreground">-</span>;
|
||||
}
|
||||
|
||||
return (
|
||||
<AttachmentPreviewDialog
|
||||
fileUrl={assignment.attachment_url}
|
||||
fileName={assignment.attachment_name}
|
||||
/>
|
||||
);
|
||||
},
|
||||
},
|
||||
canSubmit
|
||||
? {
|
||||
id: 'my_submission_status',
|
||||
header: () => (
|
||||
<span className="block text-center">Status Saya</span>
|
||||
),
|
||||
meta: {
|
||||
className: 'w-[160px] text-center',
|
||||
headerClassName: 'w-[160px] text-center',
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const mySubmission = row.original.submissions?.[0];
|
||||
|
||||
return (
|
||||
<div className="flex justify-center">
|
||||
<Badge
|
||||
variant={
|
||||
mySubmission?.status === 'submitted'
|
||||
? 'default'
|
||||
: 'secondary'
|
||||
}
|
||||
>
|
||||
{mySubmission?.status === 'submitted'
|
||||
? 'Sudah Mengumpulkan'
|
||||
: 'Belum Mengumpulkan'}
|
||||
</Badge>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
}
|
||||
: {
|
||||
accessorKey: 'submissions_count',
|
||||
header: () => (
|
||||
<span className="block text-center">Pengumpulan</span>
|
||||
),
|
||||
meta: {
|
||||
className: 'w-[120px] text-center',
|
||||
headerClassName: 'w-[120px] text-center',
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<div className="text-center">
|
||||
{row.original.submissions_count}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (canViewSubmissions || canUpdate || canDelete || canSubmit) {
|
||||
columns.push({
|
||||
id: 'actions',
|
||||
header: () => <span className="block text-center">Aksi</span>,
|
||||
meta: {
|
||||
className: 'w-[150px] text-center',
|
||||
headerClassName: 'w-[150px] text-center',
|
||||
},
|
||||
cell: ({ row }) => {
|
||||
const assignment = row.original;
|
||||
const mySubmission = assignment.submissions?.[0];
|
||||
|
||||
return (
|
||||
<RowActions
|
||||
actions={[
|
||||
{
|
||||
label:
|
||||
mySubmission?.status === 'submitted'
|
||||
? 'Kumpulkan Ulang'
|
||||
: 'Kumpulkan Tugas',
|
||||
icon: <Upload className="h-4 w-4" />,
|
||||
show: canSubmit,
|
||||
onClick: () => handleSubmit(assignment),
|
||||
},
|
||||
{
|
||||
label: 'Pengumpulan',
|
||||
icon: <ClipboardList className="h-4 w-4" />,
|
||||
show: canViewSubmissions,
|
||||
href: submissionsIndex.url(assignment.id),
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: <Pencil className="h-4 w-4" />,
|
||||
show: canUpdate,
|
||||
onClick: () => handleEdit(assignment),
|
||||
},
|
||||
{
|
||||
label: 'Hapus',
|
||||
icon: (
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
),
|
||||
show: canDelete,
|
||||
onClick: () => handleDeleteClick(assignment),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
return columns;
|
||||
}
|
||||
@ -1,17 +1,37 @@
|
||||
import { Head, router } from '@inertiajs/react';
|
||||
import { Plus } from 'lucide-react';
|
||||
import { Head, InfiniteScroll, router } from '@inertiajs/react';
|
||||
import { format } from 'date-fns';
|
||||
import {
|
||||
Clock,
|
||||
ClipboardList,
|
||||
Paperclip,
|
||||
Pencil,
|
||||
Plus,
|
||||
Trash2,
|
||||
Upload,
|
||||
} from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import type { PaginationState } from '@/components/data-table';
|
||||
import { DataTable } from '@/components/data-table';
|
||||
import { AttachmentPreviewDialog } from '@/components/attachment-preview-dialog';
|
||||
import { DateTimeField } from '@/components/datetime-field';
|
||||
import { DeleteConfirmDialog } from '@/components/delete-confirm-dialog';
|
||||
import { FileUploadField } from '@/components/file-upload-field';
|
||||
import type { FilterOptionGroup } from '@/components/filter-dialog';
|
||||
import type {
|
||||
FilterField,
|
||||
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 { RowActions } from '@/components/row-actions';
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from '@/components/ui/accordion';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxCollection,
|
||||
@ -25,6 +45,13 @@ import {
|
||||
} 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,8 +62,10 @@ import {
|
||||
submit,
|
||||
update,
|
||||
} from '@/routes/admin/academic-classes/assignments';
|
||||
import { index as submissionsIndex } from '@/routes/admin/academic-classes/assignments/submissions';
|
||||
import { formatAcademicTermLabel } from '@/types/academic-term';
|
||||
import type { Assignment } from '@/types/assignment';
|
||||
import { createAssignmentColumns } from './columns';
|
||||
import { AssignmentStatusLabels, AssignmentStatuses } from '@/types/assignment';
|
||||
|
||||
type CourseClassOption = {
|
||||
id: number;
|
||||
@ -51,6 +80,12 @@ type CourseClassOption = {
|
||||
|
||||
type CourseClassGroup = { value: string; items: CourseClassOption[] };
|
||||
|
||||
type AcademicTermOption = {
|
||||
id: number;
|
||||
academic_year: string;
|
||||
semester: string;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
assignments: {
|
||||
data: Assignment[];
|
||||
@ -60,9 +95,11 @@ type Props = {
|
||||
total: number;
|
||||
};
|
||||
courseClasses: CourseClassOption[];
|
||||
academicTerms: AcademicTermOption[];
|
||||
highlight?: number;
|
||||
filters: {
|
||||
course_class_id?: string;
|
||||
academic_term_id?: string;
|
||||
};
|
||||
};
|
||||
|
||||
@ -70,6 +107,29 @@ function courseClassLabel(courseClass: CourseClassOption): string {
|
||||
return `${courseClass.course?.code ?? ''} - ${courseClass.course?.name ?? ''}`;
|
||||
}
|
||||
|
||||
function percentageOf(part: number, total: number): number {
|
||||
return total > 0 ? Math.round((part / total) * 100) : 0;
|
||||
}
|
||||
|
||||
/** Turns red as the deadline passes, amber once it's within 3 days. */
|
||||
function deadlineTextClass(deadline: string): string {
|
||||
const hoursLeft = (new Date(deadline).getTime() - Date.now()) / 3_600_000;
|
||||
|
||||
if (hoursLeft <= 0) {
|
||||
return 'font-medium text-destructive';
|
||||
}
|
||||
|
||||
if (hoursLeft <= 24) {
|
||||
return 'text-destructive';
|
||||
}
|
||||
|
||||
if (hoursLeft <= 72) {
|
||||
return 'text-amber-600 dark:text-amber-500';
|
||||
}
|
||||
|
||||
return 'text-muted-foreground';
|
||||
}
|
||||
|
||||
function groupCourseClassesByDepartment(
|
||||
options: CourseClassOption[],
|
||||
): CourseClassGroup[] {
|
||||
@ -130,7 +190,10 @@ function CourseClassField({
|
||||
<ComboboxLabel>{group.value}</ComboboxLabel>
|
||||
<ComboboxCollection>
|
||||
{(option: CourseClassOption) => (
|
||||
<ComboboxItem key={option.id} value={option}>
|
||||
<ComboboxItem
|
||||
key={option.id}
|
||||
value={option}
|
||||
>
|
||||
{courseClassLabel(option)}
|
||||
</ComboboxItem>
|
||||
)}
|
||||
@ -146,6 +209,7 @@ function CourseClassField({
|
||||
export default function AssignmentIndex({
|
||||
assignments,
|
||||
courseClasses,
|
||||
academicTerms,
|
||||
highlight,
|
||||
filters,
|
||||
}: Props) {
|
||||
@ -160,7 +224,15 @@ export default function AssignmentIndex({
|
||||
const canViewSubmissions = hasPermission('view-assignment-submissions');
|
||||
const canSubmit = hasPermission('submit-assignments');
|
||||
|
||||
const filterFields = [
|
||||
const filterFields: FilterField[] = [
|
||||
{
|
||||
key: 'academic_term_id',
|
||||
label: 'Periode Akademik',
|
||||
options: academicTerms.map((term) => ({
|
||||
value: String(term.id),
|
||||
label: formatAcademicTermLabel(term),
|
||||
})),
|
||||
},
|
||||
{
|
||||
key: 'course_class_id',
|
||||
label: 'Kelas',
|
||||
@ -169,25 +241,33 @@ export default function AssignmentIndex({
|
||||
},
|
||||
];
|
||||
|
||||
const pagination: PaginationState = {
|
||||
const pagination = {
|
||||
current_page: assignments.current_page,
|
||||
last_page: assignments.last_page,
|
||||
per_page: assignments.per_page,
|
||||
total: assignments.total,
|
||||
};
|
||||
|
||||
const {
|
||||
search,
|
||||
handlePageChange,
|
||||
handlePerPageChange,
|
||||
handleSearchChange,
|
||||
applyFilters,
|
||||
} = useServerTable({
|
||||
const { search, handleSearchChange, applyFilters } = useServerTable({
|
||||
route: () => assignmentIndex.url(),
|
||||
pagination,
|
||||
filters,
|
||||
resetKeys: ['assignments'],
|
||||
});
|
||||
|
||||
function handleApplyFilters(newFilters: Record<string, string>) {
|
||||
// Tanpa `academic_term_id` eksplisit, backend akan kembali ke
|
||||
// periode aktif, jadi menghapus filter ini perlu dikirim eksplisit
|
||||
// alih-alih hanya menghilangkan key-nya.
|
||||
const clearedAcademicTerm =
|
||||
Boolean(filters.academic_term_id) && !newFilters.academic_term_id;
|
||||
|
||||
applyFilters({
|
||||
...newFilters,
|
||||
...(clearedAcademicTerm ? { academic_term_id: '' } : {}),
|
||||
});
|
||||
}
|
||||
|
||||
function handleDelete() {
|
||||
if (!deleting) {
|
||||
return;
|
||||
@ -198,16 +278,6 @@ export default function AssignmentIndex({
|
||||
});
|
||||
}
|
||||
|
||||
const columns = createAssignmentColumns({
|
||||
handleEdit: (assignment) => setEditing(assignment),
|
||||
handleDeleteClick: (assignment) => setDeleting(assignment),
|
||||
handleSubmit: (assignment) => setSubmitting(assignment),
|
||||
canUpdate,
|
||||
canDelete,
|
||||
canViewSubmissions,
|
||||
canSubmit,
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Tugas" />
|
||||
@ -281,23 +351,257 @@ export default function AssignmentIndex({
|
||||
assignment={submitting}
|
||||
/>
|
||||
|
||||
<DataTable
|
||||
columns={columns}
|
||||
data={assignments.data}
|
||||
searchKey="title"
|
||||
pagination={pagination}
|
||||
onPageChange={handlePageChange}
|
||||
onPerPageChange={handlePerPageChange}
|
||||
onSearchChange={handleSearchChange}
|
||||
searchValue={search}
|
||||
toolbar={
|
||||
<FilterDialog
|
||||
fields={filterFields}
|
||||
activeFilters={filters}
|
||||
onApply={applyFilters}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
placeholder="Cari judul tugas..."
|
||||
value={search}
|
||||
onChange={(event) =>
|
||||
handleSearchChange(event.target.value)
|
||||
}
|
||||
className="max-w-sm"
|
||||
/>
|
||||
<FilterDialog
|
||||
fields={filterFields}
|
||||
activeFilters={filters}
|
||||
onApply={handleApplyFilters}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{assignments.data.length === 0 ? (
|
||||
<p className="rounded-md border border-dashed p-6 text-center text-sm text-muted-foreground">
|
||||
Belum ada tugas.
|
||||
</p>
|
||||
) : (
|
||||
<InfiniteScroll
|
||||
data="assignments"
|
||||
as="div"
|
||||
buffer={300}
|
||||
className="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-3"
|
||||
loading={() => (
|
||||
<p className="col-span-full py-4 text-center text-sm text-muted-foreground">
|
||||
Memuat tugas...
|
||||
</p>
|
||||
)}
|
||||
>
|
||||
{assignments.data.map((assignment) => {
|
||||
const mySubmission = assignment.submissions?.[0];
|
||||
|
||||
return (
|
||||
<Card
|
||||
key={assignment.id}
|
||||
className={
|
||||
highlight === assignment.id
|
||||
? 'ring-2 ring-primary'
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-2">
|
||||
<div className="flex flex-col gap-1">
|
||||
<CardTitle className="text-base leading-tight">
|
||||
{assignment.title}
|
||||
</CardTitle>
|
||||
{assignment.course_class && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{assignment.course_class
|
||||
.course?.code ??
|
||||
''}{' '}
|
||||
{assignment.course_class
|
||||
.course?.name ?? ''}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<RowActions
|
||||
wrapperClassName="-mt-1 -mr-2 flex items-center gap-1"
|
||||
actions={[
|
||||
{
|
||||
label:
|
||||
mySubmission?.status ===
|
||||
'submitted'
|
||||
? 'Kumpulkan Ulang'
|
||||
: 'Kumpulkan Tugas',
|
||||
icon: (
|
||||
<Upload className="h-3.5 w-3.5" />
|
||||
),
|
||||
show:
|
||||
canSubmit &&
|
||||
assignment.status ===
|
||||
'open',
|
||||
onClick: () =>
|
||||
setSubmitting(
|
||||
assignment,
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Pengumpulan',
|
||||
icon: (
|
||||
<ClipboardList className="h-3.5 w-3.5" />
|
||||
),
|
||||
show: canViewSubmissions,
|
||||
href: submissionsIndex.url(
|
||||
assignment.id,
|
||||
),
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: (
|
||||
<Pencil className="h-3.5 w-3.5" />
|
||||
),
|
||||
show: canUpdate,
|
||||
onClick: () =>
|
||||
setEditing(assignment),
|
||||
},
|
||||
{
|
||||
label: 'Hapus',
|
||||
icon: (
|
||||
<Trash2 className="h-3.5 w-3.5 text-destructive" />
|
||||
),
|
||||
show: canDelete,
|
||||
onClick: () =>
|
||||
setDeleting(assignment),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-2 text-xs text-muted-foreground">
|
||||
<div className="flex flex-wrap items-center gap-1.5">
|
||||
<Badge
|
||||
variant={
|
||||
assignment.status === 'open'
|
||||
? 'secondary'
|
||||
: 'destructive'
|
||||
}
|
||||
className="w-fit text-[10px] font-normal"
|
||||
>
|
||||
{
|
||||
AssignmentStatusLabels[
|
||||
assignment.status
|
||||
]
|
||||
}
|
||||
</Badge>
|
||||
{assignment.course_class
|
||||
?.academic_term && (
|
||||
<Badge
|
||||
variant="outline"
|
||||
className="w-fit text-[10px] font-normal"
|
||||
>
|
||||
{formatAcademicTermLabel(
|
||||
assignment.course_class
|
||||
.academic_term,
|
||||
)}
|
||||
</Badge>
|
||||
)}
|
||||
</div>
|
||||
<span
|
||||
className={`inline-flex items-center gap-1.5 ${deadlineTextClass(assignment.deadline)}`}
|
||||
>
|
||||
<Clock className="h-3.5 w-3.5 shrink-0" />
|
||||
{format(
|
||||
new Date(assignment.deadline),
|
||||
'd MMM yyyy, HH:mm',
|
||||
)}
|
||||
</span>
|
||||
{assignment.attachment_url &&
|
||||
assignment.attachment_name ? (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<Paperclip className="h-3.5 w-3.5 shrink-0" />
|
||||
<AttachmentPreviewDialog
|
||||
fileUrl={
|
||||
assignment.attachment_url
|
||||
}
|
||||
fileName={
|
||||
assignment.attachment_name
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
<div className="flex flex-wrap items-center gap-1.5 pt-1">
|
||||
{canSubmit ? (
|
||||
<Badge
|
||||
variant={
|
||||
mySubmission?.status ===
|
||||
'submitted'
|
||||
? 'default'
|
||||
: 'secondary'
|
||||
}
|
||||
>
|
||||
{mySubmission?.status ===
|
||||
'submitted'
|
||||
? 'Sudah Mengumpulkan'
|
||||
: 'Belum Mengumpulkan'}
|
||||
</Badge>
|
||||
) : (
|
||||
<>
|
||||
<Badge variant="secondary">
|
||||
{assignment.submissions_count.toLocaleString(
|
||||
'id-ID',
|
||||
)}{' '}
|
||||
/{' '}
|
||||
{(
|
||||
assignment
|
||||
.course_class
|
||||
?.enrollments_count ??
|
||||
0
|
||||
).toLocaleString(
|
||||
'id-ID',
|
||||
)}{' '}
|
||||
Pengumpulan (
|
||||
{percentageOf(
|
||||
assignment.submissions_count,
|
||||
assignment
|
||||
.course_class
|
||||
?.enrollments_count ??
|
||||
0,
|
||||
)}
|
||||
%)
|
||||
</Badge>
|
||||
<Badge variant="outline">
|
||||
{assignment.graded_submissions_count.toLocaleString(
|
||||
'id-ID',
|
||||
)}{' '}
|
||||
/{' '}
|
||||
{assignment.submissions_count.toLocaleString(
|
||||
'id-ID',
|
||||
)}{' '}
|
||||
Dinilai (
|
||||
{percentageOf(
|
||||
assignment.graded_submissions_count,
|
||||
assignment.submissions_count,
|
||||
)}
|
||||
%)
|
||||
</Badge>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{assignment.description && (
|
||||
<Accordion
|
||||
type="single"
|
||||
collapsible
|
||||
className="-mx-6 -mb-6 border-t"
|
||||
>
|
||||
<AccordionItem
|
||||
value="description"
|
||||
className="border-b-0"
|
||||
>
|
||||
<AccordionTrigger className="px-6 text-xs font-medium text-foreground hover:no-underline">
|
||||
Deskripsi
|
||||
</AccordionTrigger>
|
||||
<AccordionContent className="px-6">
|
||||
<p className="text-sm whitespace-pre-line text-foreground">
|
||||
{
|
||||
assignment.description
|
||||
}
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
})}
|
||||
</InfiniteScroll>
|
||||
)}
|
||||
|
||||
<DeleteConfirmDialog
|
||||
target={deleting}
|
||||
@ -477,6 +781,30 @@ function EditForm({
|
||||
placeholder="Pilih tanggal batas waktu"
|
||||
error={errors.deadline}
|
||||
/>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Status{' '}
|
||||
<span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<input type="hidden" name="status" />
|
||||
<Select name="status" defaultValue={editing.status}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{AssignmentStatuses.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{AssignmentStatusLabels[status]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Menutup tugas akan mencegah mahasiswa
|
||||
mengumpulkan, terlepas dari batas waktu.
|
||||
</p>
|
||||
<InputError message={errors.status} />
|
||||
</div>
|
||||
<FileUploadField
|
||||
name="attachment"
|
||||
label="Lampiran"
|
||||
|
||||
@ -1,69 +1,97 @@
|
||||
import { Head, Link, router } from '@inertiajs/react';
|
||||
import type { ColumnDef } from '@tanstack/react-table';
|
||||
import { format } from 'date-fns';
|
||||
import { ArrowLeft, Pencil, Plus, Trash2 } from 'lucide-react';
|
||||
import { ArrowLeft, Save } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
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 { FormDialog } from '@/components/form-dialog';
|
||||
import InputError from '@/components/input-error';
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { RowActions } from '@/components/row-actions';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
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 { index as assignmentIndex } from '@/routes/admin/academic-classes/assignments';
|
||||
import {
|
||||
destroy,
|
||||
store,
|
||||
update,
|
||||
} from '@/routes/admin/academic-classes/assignments/submissions';
|
||||
import { grade } from '@/routes/admin/academic-classes/assignments/submissions';
|
||||
import { AssignmentStatusLabels } from '@/types/assignment';
|
||||
import type { Assignment } from '@/types/assignment';
|
||||
import type { Submission, SubmissionStudent } from '@/types/submission';
|
||||
import { SubmissionStatusLabels, SubmissionStatuses } from '@/types/submission';
|
||||
import type { Submission } from '@/types/submission';
|
||||
import { SubmissionStatusLabels } from '@/types/submission';
|
||||
|
||||
type Props = {
|
||||
assignment: Assignment;
|
||||
submissions: Submission[];
|
||||
availableStudents: SubmissionStudent[];
|
||||
};
|
||||
|
||||
export default function SubmissionIndex({
|
||||
assignment,
|
||||
submissions,
|
||||
availableStudents,
|
||||
}: Props) {
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<Submission | null>(null);
|
||||
const [deleting, setDeleting] = useState<Submission | null>(null);
|
||||
const { hasPermission } = usePermissions();
|
||||
const canCreate = hasPermission('create-assignment-submissions');
|
||||
const canUpdate = hasPermission('update-assignment-submissions');
|
||||
const canDelete = hasPermission('delete-assignment-submissions');
|
||||
function ScoreCell({
|
||||
assignmentId,
|
||||
submission,
|
||||
canUpdate,
|
||||
}: {
|
||||
assignmentId: number;
|
||||
submission: Submission;
|
||||
canUpdate: boolean;
|
||||
}) {
|
||||
const normalizedScore = submission.score ?? '';
|
||||
const [value, setValue] = useState(normalizedScore);
|
||||
const [savedScore, setSavedScore] = useState(normalizedScore);
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
function handleDelete() {
|
||||
if (!deleting) {
|
||||
return;
|
||||
}
|
||||
|
||||
router.delete(destroy([assignment.id, deleting.id]), {
|
||||
onSuccess: () => setDeleting(null),
|
||||
});
|
||||
// Sync local state when the score changes externally (e.g. after save).
|
||||
if (normalizedScore !== savedScore) {
|
||||
setSavedScore(normalizedScore);
|
||||
setValue(normalizedScore);
|
||||
}
|
||||
|
||||
if (!canUpdate) {
|
||||
return <div className="text-center">{submission.score ?? '-'}</div>;
|
||||
}
|
||||
|
||||
const dirty = value !== normalizedScore;
|
||||
|
||||
function handleSave() {
|
||||
setSaving(true);
|
||||
router.patch(
|
||||
grade.url([assignmentId, submission.id]),
|
||||
{ score: value === '' ? null : value },
|
||||
{
|
||||
preserveScroll: true,
|
||||
preserveState: true,
|
||||
onFinish: () => setSaving(false),
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex items-center justify-center gap-1">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
max={100}
|
||||
step="0.01"
|
||||
value={value}
|
||||
onChange={(event) => setValue(event.target.value)}
|
||||
className="h-8 w-20 text-center"
|
||||
/>
|
||||
{dirty && (
|
||||
<Button
|
||||
type="button"
|
||||
size="icon"
|
||||
variant="ghost"
|
||||
className="h-8 w-8 shrink-0"
|
||||
disabled={saving}
|
||||
onClick={handleSave}
|
||||
>
|
||||
<Save className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function SubmissionIndex({ assignment, submissions }: Props) {
|
||||
const { hasPermission } = usePermissions();
|
||||
const canUpdate = hasPermission('update-assignment-submissions');
|
||||
|
||||
const columns: ColumnDef<Submission>[] = [
|
||||
{
|
||||
accessorKey: 'student.student_number',
|
||||
@ -122,46 +150,19 @@ export default function SubmissionIndex({
|
||||
accessorKey: 'score',
|
||||
header: () => <span className="block text-center">Nilai</span>,
|
||||
meta: {
|
||||
className: 'w-[90px] text-center',
|
||||
headerClassName: 'w-[90px] text-center',
|
||||
className: 'w-[140px] text-center',
|
||||
headerClassName: 'w-[140px] text-center',
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<div className="text-center">{row.original.score ?? '-'}</div>
|
||||
<ScoreCell
|
||||
assignmentId={assignment.id}
|
||||
submission={row.original}
|
||||
canUpdate={canUpdate}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
if (canUpdate || canDelete) {
|
||||
columns.push({
|
||||
id: 'actions',
|
||||
header: () => <span className="block text-center">Aksi</span>,
|
||||
meta: {
|
||||
className: 'w-[100px] text-center',
|
||||
headerClassName: 'w-[100px] text-center',
|
||||
},
|
||||
cell: ({ row }) => (
|
||||
<RowActions
|
||||
actions={[
|
||||
{
|
||||
label: 'Edit',
|
||||
icon: <Pencil className="h-4 w-4" />,
|
||||
show: canUpdate,
|
||||
onClick: () => setEditing(row.original),
|
||||
},
|
||||
{
|
||||
label: 'Hapus',
|
||||
icon: (
|
||||
<Trash2 className="h-4 w-4 text-destructive" />
|
||||
),
|
||||
show: canDelete,
|
||||
onClick: () => setDeleting(row.original),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head title="Pengumpulan Tugas" />
|
||||
@ -180,8 +181,17 @@ export default function SubmissionIndex({
|
||||
/>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardHeader className="flex flex-row items-start justify-between gap-2">
|
||||
<CardTitle>{assignment.title}</CardTitle>
|
||||
<Badge
|
||||
variant={
|
||||
assignment.status === 'open'
|
||||
? 'secondary'
|
||||
: 'destructive'
|
||||
}
|
||||
>
|
||||
{AssignmentStatusLabels[assignment.status]}
|
||||
</Badge>
|
||||
</CardHeader>
|
||||
<CardContent className="grid gap-1 text-sm text-muted-foreground">
|
||||
<p>
|
||||
@ -199,237 +209,10 @@ export default function SubmissionIndex({
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">
|
||||
Daftar Pengumpulan
|
||||
</h2>
|
||||
{canCreate && (
|
||||
<Button
|
||||
onClick={() => setCreateOpen(true)}
|
||||
disabled={availableStudents.length === 0}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
Tambah Pengumpulan
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<h2 className="text-lg font-semibold">Daftar Pengumpulan</h2>
|
||||
|
||||
<DataTable columns={columns} data={submissions} />
|
||||
|
||||
<CreateForm
|
||||
open={createOpen}
|
||||
onOpenChange={setCreateOpen}
|
||||
assignmentId={assignment.id}
|
||||
availableStudents={availableStudents}
|
||||
/>
|
||||
|
||||
<EditForm
|
||||
key={editing?.id}
|
||||
open={editing !== null}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setEditing(null);
|
||||
}
|
||||
}}
|
||||
assignmentId={assignment.id}
|
||||
editing={editing}
|
||||
/>
|
||||
|
||||
<DeleteConfirmDialog
|
||||
target={deleting}
|
||||
onOpenChange={(open) => {
|
||||
if (!open) {
|
||||
setDeleting(null);
|
||||
}
|
||||
}}
|
||||
title="Hapus Pengumpulan"
|
||||
description={(submission) =>
|
||||
`Apakah Anda yakin ingin menghapus pengumpulan "${submission.student?.user?.profile?.full_name ?? 'mahasiswa ini'}"? Tindakan ini tidak dapat dibatalkan.`
|
||||
}
|
||||
onConfirm={handleDelete}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
function CreateForm({
|
||||
open,
|
||||
onOpenChange,
|
||||
assignmentId,
|
||||
availableStudents,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
assignmentId: number;
|
||||
availableStudents: SubmissionStudent[];
|
||||
}) {
|
||||
return (
|
||||
<FormDialog
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title="Tambah Pengumpulan"
|
||||
action={store(assignmentId)}
|
||||
resetOnSuccess
|
||||
onSuccess={() => onOpenChange(false)}
|
||||
>
|
||||
{({ errors }) => (
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Mahasiswa{' '}
|
||||
<span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<input type="hidden" name="student_id" />
|
||||
<Select name="student_id">
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih mahasiswa" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableStudents.map((student) => (
|
||||
<SelectItem
|
||||
key={student.id}
|
||||
value={String(student.id)}
|
||||
>
|
||||
{student.user?.profile?.full_name ??
|
||||
'N/A'}{' '}
|
||||
- {student.student_number}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={errors.student_id} />
|
||||
</div>
|
||||
<SubmissionFields
|
||||
errors={errors}
|
||||
resetKey={open ? 'open' : 'closed'}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</FormDialog>
|
||||
);
|
||||
}
|
||||
|
||||
function EditForm({
|
||||
open,
|
||||
onOpenChange,
|
||||
assignmentId,
|
||||
editing,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
assignmentId: number;
|
||||
editing: Submission | null;
|
||||
}) {
|
||||
return (
|
||||
<FormDialog
|
||||
open={open}
|
||||
onOpenChange={onOpenChange}
|
||||
title="Edit Pengumpulan"
|
||||
action={editing ? update([assignmentId, editing.id]) : ''}
|
||||
resetOnSuccess
|
||||
onSuccess={() => onOpenChange(false)}
|
||||
>
|
||||
{({ errors }) =>
|
||||
editing && (
|
||||
<div className="grid gap-4">
|
||||
<div className="grid gap-2">
|
||||
<Label>Mahasiswa</Label>
|
||||
<p className="text-sm font-medium">
|
||||
{editing.student?.user?.profile?.full_name ??
|
||||
'N/A'}{' '}
|
||||
- {editing.student?.student_number}
|
||||
</p>
|
||||
</div>
|
||||
<SubmissionFields errors={errors} editing={editing} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</FormDialog>
|
||||
);
|
||||
}
|
||||
|
||||
function SubmissionFields({
|
||||
errors,
|
||||
editing,
|
||||
resetKey,
|
||||
}: {
|
||||
errors: Record<string, string>;
|
||||
editing?: Submission;
|
||||
resetKey?: string;
|
||||
}) {
|
||||
return (
|
||||
<>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="notes">Catatan</Label>
|
||||
<Textarea
|
||||
id="notes"
|
||||
name="notes"
|
||||
placeholder="Catatan dari mahasiswa"
|
||||
defaultValue={editing?.notes ?? ''}
|
||||
/>
|
||||
<InputError message={errors.notes} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Status <span className="text-destructive">*</span>
|
||||
</Label>
|
||||
<input type="hidden" name="status" />
|
||||
<Select
|
||||
name="status"
|
||||
defaultValue={editing?.status ?? 'not_submitted'}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih status" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{SubmissionStatuses.map((status) => (
|
||||
<SelectItem key={status} value={status}>
|
||||
{SubmissionStatusLabels[status]}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={errors.status} />
|
||||
</div>
|
||||
<DateTimeField
|
||||
label="Waktu Kumpul"
|
||||
name="submitted_at"
|
||||
defaultValue={editing?.submitted_at}
|
||||
placeholder="Pilih waktu kumpul"
|
||||
error={errors.submitted_at}
|
||||
/>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="score">Nilai</Label>
|
||||
<Input
|
||||
id="score"
|
||||
name="score"
|
||||
type="number"
|
||||
min={0}
|
||||
max={100}
|
||||
step="0.01"
|
||||
placeholder="0 - 100"
|
||||
defaultValue={editing?.score ?? undefined}
|
||||
/>
|
||||
<InputError message={errors.score} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="lecturer_feedback">Feedback Dosen</Label>
|
||||
<Textarea
|
||||
id="lecturer_feedback"
|
||||
name="lecturer_feedback"
|
||||
placeholder="Masukkan feedback untuk mahasiswa"
|
||||
defaultValue={editing?.lecturer_feedback ?? ''}
|
||||
/>
|
||||
<InputError message={errors.lecturer_feedback} />
|
||||
</div>
|
||||
<FileUploadField
|
||||
key={resetKey}
|
||||
label="File Pengumpulan"
|
||||
existingFileName={editing?.file_name}
|
||||
existingFileUrl={editing?.file_url}
|
||||
error={errors.file}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,3 +1,12 @@
|
||||
export const AssignmentStatuses = ['open', 'closed'] as const;
|
||||
|
||||
export type AssignmentStatus = (typeof AssignmentStatuses)[number];
|
||||
|
||||
export const AssignmentStatusLabels: Record<AssignmentStatus, string> = {
|
||||
open: 'Dibuka',
|
||||
closed: 'Ditutup',
|
||||
};
|
||||
|
||||
export type MySubmission = {
|
||||
id: number;
|
||||
notes: string | null;
|
||||
@ -13,13 +22,24 @@ export type Assignment = {
|
||||
course_class: {
|
||||
id: number;
|
||||
course: { id: number; code: string; name: string } | null;
|
||||
academic_term: {
|
||||
id: number;
|
||||
academic_year: string;
|
||||
semester: string;
|
||||
} | null;
|
||||
/** Total students enrolled (approved) in this class. */
|
||||
enrollments_count: number;
|
||||
} | null;
|
||||
title: string;
|
||||
description: string | null;
|
||||
deadline: string;
|
||||
/** Governs whether students can still submit — independent of the deadline. */
|
||||
status: AssignmentStatus;
|
||||
attachment_url: string | null;
|
||||
attachment_name: string | null;
|
||||
submissions_count: number;
|
||||
/** How many of the submissions received already have a score. */
|
||||
graded_submissions_count: number;
|
||||
/** Only present for the logged-in mahasiswa: their own submission, if any. */
|
||||
submissions?: MySubmission[];
|
||||
created_at: string;
|
||||
|
||||
@ -68,9 +68,7 @@
|
||||
|
||||
Route::prefix('assignments/{assignment}/submissions')->name('assignments.submissions.')->group(function () {
|
||||
Route::get('/', [SubmissionController::class, 'index'])->name('index')->middleware('permission:view-assignment-submissions');
|
||||
Route::post('/', [SubmissionController::class, 'store'])->name('store')->middleware('permission:create-assignment-submissions');
|
||||
Route::put('{submission}', [SubmissionController::class, 'update'])->name('update')->middleware('permission:update-assignment-submissions');
|
||||
Route::delete('{submission}', [SubmissionController::class, 'destroy'])->name('destroy')->middleware('permission:delete-assignment-submissions');
|
||||
Route::patch('{submission}/grade', [SubmissionController::class, 'grade'])->name('grade')->middleware('permission:update-assignment-submissions');
|
||||
});
|
||||
|
||||
Route::post('assignments/{assignment}/submit', [SubmissionController::class, 'submit'])
|
||||
|
||||
Loading…
Reference in New Issue
Block a user