import { Head, router } from '@inertiajs/react'; import { Plus } from 'lucide-react'; import { useState } from 'react'; 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 { 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 { 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 { useServerTable } from '@/hooks/use-server-table'; import { index as materialIndex, destroy, store, update, } from '@/routes/admin/academic-classes/materials'; import type { Material } from '@/types/material'; import { createMaterialColumns } from './columns'; type CourseClassOption = { id: number; class_name: string | null; course: { id: number; code: string; name: string } | null; }; type Props = { materials: { data: Material[]; current_page: number; last_page: number; per_page: number; total: number; }; courseClasses: CourseClassOption[]; highlight?: number; filters: { course_class_id?: string; }; }; function courseClassLabel(courseClass: CourseClassOption): string { const namePart = courseClass.class_name ? `${courseClass.class_name} - ` : ''; return `${namePart}${courseClass.course?.code ?? ''} ${courseClass.course?.name ?? ''}`; } export default function MaterialIndex({ materials, courseClasses, highlight, filters, }: Props) { const [createOpen, setCreateOpen] = useState(false); const [editing, setEditing] = useState(null); const [deleting, setDeleting] = useState(null); const filterFields: FilterField[] = [ { key: 'course_class_id', label: 'Kelas', options: courseClasses.map((courseClass) => ({ value: String(courseClass.id), label: courseClassLabel(courseClass), })), }, ]; const pagination: PaginationState = { current_page: materials.current_page, last_page: materials.last_page, per_page: materials.per_page, total: materials.total, }; const { search, handlePageChange, handlePerPageChange, handleSearchChange, applyFilters, } = useServerTable({ route: () => materialIndex.url(), pagination, filters, }); function handleDelete() { if (!deleting) { return; } router.delete(destroy(deleting.id), { onSuccess: () => setDeleting(null), }); } const columns = createMaterialColumns({ handleEdit: (material) => setEditing(material), handleDeleteClick: (material) => setDeleting(material), }); return ( <>

Menampilkan materi dari notifikasi.

) } actions={ } /> { if (!open) { setEditing(null); } }} editing={editing} courseClasses={courseClasses} /> } /> { if (!open) { setDeleting(null); } }} title="Hapus Materi" description={(material) => `Apakah Anda yakin ingin menghapus materi "${material.title}"? Tindakan ini tidak dapat dibatalkan.` } onConfirm={handleDelete} />

); } function CreateForm({ open, onOpenChange, courseClasses, }: { open: boolean; onOpenChange: (open: boolean) => void; courseClasses: CourseClassOption[]; }) { return ( onOpenChange(false)} > {({ errors }) => (

Kelas *

Judul *

Deskripsi

<InputError message={errors.description} />
                    </div>
                    <div className="grid gap-2">
                        <Label htmlFor="meeting_number">Pertemuan Ke-</Label>
                        <Input
                            id="meeting_number"
                            name="meeting_number"
                            type="number"
                            min={1}
                            placeholder="Contoh: 1"
                        />
                        <InputError message={errors.meeting_number} />
                    </div>
                    <FileUploadField
                        key={open ? 'open' : 'closed'}
                        label="File Materi"
                        error={errors.file}
                    />
                </div>
            )}
        </FormDialog>
    );
}

function EditForm({
    open,
    onOpenChange,
    editing,
    courseClasses,
}: {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    editing: Material | null;
    courseClasses: CourseClassOption[];
}) {
    return (
        <FormDialog
            open={open}
            onOpenChange={onOpenChange}
            title="Edit Materi"
            action={editing ? update(editing.id) : ''}
            resetOnSuccess
            onSuccess={() => onOpenChange(false)}
        >
            {({ errors }) =>
                editing && (
                    <div className="grid gap-4">
                        <div className="grid gap-2">
                            <Label>
                                Kelas{' '}
                                <span className="text-destructive">*</span>
                            </Label>
                            <Select
                                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>
                            <InputError message={errors.course_class_id} />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="edit-title">
                                Judul{' '}
                                <span className="text-destructive">*</span>
                            </Label>
                            <Input
                                id="edit-title"
                                name="title"
                                placeholder="Masukkan judul materi"
                                defaultValue={editing.title}
                            />
                            <InputError message={errors.title} />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="edit-description">Deskripsi</Label>
                            <Textarea
                                id="edit-description"
                                name="description"
                                placeholder="Masukkan deskripsi materi"
                                defaultValue={editing.description ?? ''}
                            />
                            <InputError message={errors.description} />
                        </div>
                        <div className="grid gap-2">
                            <Label htmlFor="edit-meeting_number">
                                Pertemuan Ke-
                            </Label>
                            <Input
                                id="edit-meeting_number"
                                name="meeting_number"
                                type="number"
                                min={1}
                                defaultValue={
                                    editing.meeting_number ?? undefined
                                }
                            />
                            <InputError message={errors.meeting_number} />
                        </div>
                        <FileUploadField
                            label="File Materi"
                            existingFileName={editing.file_name}
                            existingFileUrl={editing.file_url}
                            error={errors.file}
                        />
                    </div>
                )
            }
        </FormDialog>
    );
}