feat: enhance student creation and editing forms with combobox for academic advisor selection
Some checks failed
tests / ci (pull_request) Has been cancelled
Some checks failed
tests / ci (pull_request) Has been cancelled
This commit is contained in:
Yoga Pangestu
parent
1faa6ae588
commit
f32c844e65
@ -7,16 +7,34 @@ import InputError from '@/components/input-error';
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxContent,
|
||||
ComboboxEmpty,
|
||||
ComboboxInput,
|
||||
ComboboxItem,
|
||||
ComboboxList,
|
||||
} from '@/components/ui/combobox';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { PhoneInput } from '@/components/ui/phone-input';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { index, store } from '@/routes/admin/users/students';
|
||||
|
||||
type Department = { id: number; name: string };
|
||||
type Lecturer = { id: number; lecturer_number: string; user: { profile: { full_name: string } | null } | null };
|
||||
type Lecturer = {
|
||||
id: number;
|
||||
lecturer_number: string;
|
||||
user: { profile: { full_name: string } | null } | null;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
departments: Department[];
|
||||
@ -26,6 +44,7 @@ type Props = {
|
||||
export default function StudentCreate({ departments, lecturers }: Props) {
|
||||
const [gender, setGender] = useState('');
|
||||
const [birthDate, setBirthDate] = useState<Date | undefined>();
|
||||
const [advisor, setAdvisor] = useState<Lecturer | null>(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -54,16 +73,31 @@ export default function StudentCreate({ departments, lecturers }: Props) {
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="username">
|
||||
Username <span className="text-red-500">*</span>
|
||||
Username{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="username" name="username" placeholder="Masukkan username" />
|
||||
<Input
|
||||
id="username"
|
||||
name="username"
|
||||
placeholder="Masukkan username"
|
||||
/>
|
||||
<InputError message={errors.username} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">
|
||||
Email <span className="text-red-500">*</span>
|
||||
Email{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="email" name="email" type="email" placeholder="Masukkan email" />
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
placeholder="Masukkan email"
|
||||
/>
|
||||
<InputError message={errors.email} />
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -76,57 +110,138 @@ export default function StudentCreate({ departments, lecturers }: Props) {
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="full_name">
|
||||
Nama Lengkap <span className="text-red-500">*</span>
|
||||
Nama Lengkap{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="full_name" name="full_name" placeholder="Masukkan nama lengkap" />
|
||||
<InputError message={errors.full_name} />
|
||||
<Input
|
||||
id="full_name"
|
||||
name="full_name"
|
||||
placeholder="Masukkan nama lengkap"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.full_name}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone_number">
|
||||
Nomor Telepon <span className="text-red-500">*</span>
|
||||
Nomor Telepon{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<PhoneInput id="phone_number" name="phone_number" placeholder="08xx xxxx xxxx" />
|
||||
<InputError message={errors.phone_number} />
|
||||
<PhoneInput
|
||||
id="phone_number"
|
||||
name="phone_number"
|
||||
placeholder="08xx xxxx xxxx"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.phone_number}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 md:col-span-2 md:grid-cols-3">
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Jenis Kelamin <span className="text-red-500">*</span>
|
||||
Jenis Kelamin{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<input type="hidden" name="gender" value={gender} />
|
||||
<RadioGroup value={gender} onValueChange={setGender} className="flex gap-4">
|
||||
<input
|
||||
type="hidden"
|
||||
name="gender"
|
||||
value={gender}
|
||||
/>
|
||||
<RadioGroup
|
||||
value={gender}
|
||||
onValueChange={setGender}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="male" id="male" />
|
||||
<Label htmlFor="male" className="font-normal">Laki-laki</Label>
|
||||
<RadioGroupItem
|
||||
value="male"
|
||||
id="male"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="male"
|
||||
className="font-normal"
|
||||
>
|
||||
Laki-laki
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="female" id="female" />
|
||||
<Label htmlFor="female" className="font-normal">Perempuan</Label>
|
||||
<RadioGroupItem
|
||||
value="female"
|
||||
id="female"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="female"
|
||||
className="font-normal"
|
||||
>
|
||||
Perempuan
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<InputError message={errors.gender} />
|
||||
<InputError
|
||||
message={errors.gender}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Tempat Lahir <span className="text-red-500">*</span>
|
||||
Tempat Lahir{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input name="birth_place" placeholder="Masukkan tempat lahir" />
|
||||
<InputError message={errors.birth_place} />
|
||||
<Input
|
||||
name="birth_place"
|
||||
placeholder="Masukkan tempat lahir"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.birth_place}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Tanggal Lahir <span className="text-red-500">*</span>
|
||||
Tanggal Lahir{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<input type="hidden" name="birth_date" value={birthDate ? format(birthDate, 'yyyy-MM-dd') : ''} />
|
||||
<DatePicker value={birthDate} onChange={setBirthDate} />
|
||||
<InputError message={errors.birth_date} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="birth_date"
|
||||
value={
|
||||
birthDate
|
||||
? format(
|
||||
birthDate,
|
||||
'yyyy-MM-dd',
|
||||
)
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<DatePicker
|
||||
value={birthDate}
|
||||
onChange={setBirthDate}
|
||||
/>
|
||||
<InputError
|
||||
message={errors.birth_date}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2 md:col-span-2">
|
||||
<Label htmlFor="address">
|
||||
Alamat <span className="text-red-500">*</span>
|
||||
Alamat{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Textarea id="address" name="address" placeholder="Masukkan alamat" />
|
||||
<Textarea
|
||||
id="address"
|
||||
name="address"
|
||||
placeholder="Masukkan alamat"
|
||||
/>
|
||||
<InputError message={errors.address} />
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -139,55 +254,119 @@ export default function StudentCreate({ departments, lecturers }: Props) {
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="student_number">
|
||||
NIM <span className="text-red-500">*</span>
|
||||
NIM{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="student_number" name="student_number" placeholder="Masukkan NIM" />
|
||||
<InputError message={errors.student_number} />
|
||||
<Input
|
||||
id="student_number"
|
||||
name="student_number"
|
||||
placeholder="Masukkan NIM"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.student_number}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Jurusan <span className="text-red-500">*</span>
|
||||
Jurusan{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<input type="hidden" name="department_id" />
|
||||
<input
|
||||
type="hidden"
|
||||
name="department_id"
|
||||
/>
|
||||
<Select name="department_id">
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih jurusan" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{departments.map((dept) => (
|
||||
<SelectItem key={dept.id} value={String(dept.id)}>
|
||||
<SelectItem
|
||||
key={dept.id}
|
||||
value={String(dept.id)}
|
||||
>
|
||||
{dept.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={errors.department_id} />
|
||||
<InputError
|
||||
message={errors.department_id}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="enrollment_year">
|
||||
Tahun Masuk <span className="text-red-500">*</span>
|
||||
Tahun Masuk{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="enrollment_year" name="enrollment_year" type="number" placeholder="Contoh: 2024" />
|
||||
<InputError message={errors.enrollment_year} />
|
||||
<Input
|
||||
id="enrollment_year"
|
||||
name="enrollment_year"
|
||||
type="number"
|
||||
placeholder="Contoh: 2024"
|
||||
/>
|
||||
<InputError
|
||||
message={errors.enrollment_year}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Dosen Wali <span className="text-red-500">*</span>
|
||||
Dosen Wali{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<input type="hidden" name="academic_advisor_id" />
|
||||
<Select name="academic_advisor_id">
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih dosen wali" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{lecturers.map((lect) => (
|
||||
<SelectItem key={lect.id} value={String(lect.id)}>
|
||||
{lect.user?.profile?.full_name ?? 'N/A'} - {lect.lecturer_number}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={errors.academic_advisor_id} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="academic_advisor_id"
|
||||
value={advisor?.id ?? ''}
|
||||
/>
|
||||
<Combobox
|
||||
items={lecturers}
|
||||
value={advisor}
|
||||
onValueChange={setAdvisor}
|
||||
itemToStringLabel={(lect) =>
|
||||
`${lect.user?.profile?.full_name ?? 'N/A'} - ${lect.lecturer_number}`
|
||||
}
|
||||
isItemEqualToValue={(a, b) =>
|
||||
a.id === b.id
|
||||
}
|
||||
>
|
||||
<ComboboxInput
|
||||
placeholder="Pilih dosen wali"
|
||||
className="w-full"
|
||||
/>
|
||||
<ComboboxContent>
|
||||
<ComboboxEmpty>
|
||||
Dosen tidak ditemukan.
|
||||
</ComboboxEmpty>
|
||||
<ComboboxList>
|
||||
{lecturers.map((lect) => (
|
||||
<ComboboxItem
|
||||
key={lect.id}
|
||||
value={lect}
|
||||
>
|
||||
{lect.user?.profile
|
||||
?.full_name ??
|
||||
'N/A'}{' '}
|
||||
-{' '}
|
||||
{
|
||||
lect.lecturer_number
|
||||
}
|
||||
</ComboboxItem>
|
||||
))}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
<InputError
|
||||
message={errors.academic_advisor_id}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@ -7,23 +7,53 @@ import InputError from '@/components/input-error';
|
||||
import { PageHeader } from '@/components/page-header';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import {
|
||||
Combobox,
|
||||
ComboboxContent,
|
||||
ComboboxEmpty,
|
||||
ComboboxInput,
|
||||
ComboboxItem,
|
||||
ComboboxList,
|
||||
} from '@/components/ui/combobox';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { PhoneInput } from '@/components/ui/phone-input';
|
||||
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select';
|
||||
import { Textarea } from '@/components/ui/textarea';
|
||||
import { index, update } from '@/routes/admin/users/students';
|
||||
|
||||
type Department = { id: number; name: string };
|
||||
type Lecturer = { id: number; lecturer_number: string; user: { profile: { full_name: string } | null } | null };
|
||||
type Lecturer = {
|
||||
id: number;
|
||||
lecturer_number: string;
|
||||
user: { profile: { full_name: string } | null } | null;
|
||||
};
|
||||
|
||||
type User = {
|
||||
id: number;
|
||||
username: string;
|
||||
email: string;
|
||||
profile: { full_name: string; phone_number: string; address: string; gender: string; birth_date: string; birth_place: string } | null;
|
||||
student: { student_number: string; department_id: number; enrollment_year: number; academic_advisor_id: number; } | null;
|
||||
profile: {
|
||||
full_name: string;
|
||||
phone_number: string;
|
||||
address: string;
|
||||
gender: string;
|
||||
birth_date: string;
|
||||
birth_place: string;
|
||||
} | null;
|
||||
student: {
|
||||
student_number: string;
|
||||
department_id: number;
|
||||
enrollment_year: number;
|
||||
academic_advisor_id: number;
|
||||
} | null;
|
||||
};
|
||||
|
||||
type Props = {
|
||||
@ -35,7 +65,14 @@ type Props = {
|
||||
export default function StudentEdit({ user, departments, lecturers }: Props) {
|
||||
const [gender, setGender] = useState(user.profile?.gender ?? '');
|
||||
const [birthDate, setBirthDate] = useState<Date | undefined>(
|
||||
user.profile?.birth_date ? new Date(user.profile.birth_date) : undefined
|
||||
user.profile?.birth_date
|
||||
? new Date(user.profile.birth_date)
|
||||
: undefined,
|
||||
);
|
||||
const [advisor, setAdvisor] = useState<Lecturer | null>(
|
||||
lecturers.find(
|
||||
(lect) => lect.id === user.student?.academic_advisor_id,
|
||||
) ?? null,
|
||||
);
|
||||
|
||||
return (
|
||||
@ -65,16 +102,31 @@ export default function StudentEdit({ user, departments, lecturers }: Props) {
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="username">
|
||||
Username <span className="text-red-500">*</span>
|
||||
Username{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="username" name="username" defaultValue={user.username} />
|
||||
<Input
|
||||
id="username"
|
||||
name="username"
|
||||
defaultValue={user.username}
|
||||
/>
|
||||
<InputError message={errors.username} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="email">
|
||||
Email <span className="text-red-500">*</span>
|
||||
Email{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="email" name="email" type="email" defaultValue={user.email} />
|
||||
<Input
|
||||
id="email"
|
||||
name="email"
|
||||
type="email"
|
||||
defaultValue={user.email}
|
||||
/>
|
||||
<InputError message={errors.email} />
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -87,57 +139,147 @@ export default function StudentEdit({ user, departments, lecturers }: Props) {
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="full_name">
|
||||
Nama Lengkap <span className="text-red-500">*</span>
|
||||
Nama Lengkap{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="full_name" name="full_name" defaultValue={user.profile?.full_name ?? ''} />
|
||||
<InputError message={errors.full_name} />
|
||||
<Input
|
||||
id="full_name"
|
||||
name="full_name"
|
||||
defaultValue={
|
||||
user.profile?.full_name ?? ''
|
||||
}
|
||||
/>
|
||||
<InputError
|
||||
message={errors.full_name}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="phone_number">
|
||||
Nomor Telepon <span className="text-red-500">*</span>
|
||||
Nomor Telepon{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<PhoneInput id="phone_number" name="phone_number" value={user.profile?.phone_number ?? ''} />
|
||||
<InputError message={errors.phone_number} />
|
||||
<PhoneInput
|
||||
id="phone_number"
|
||||
name="phone_number"
|
||||
value={
|
||||
user.profile?.phone_number ?? ''
|
||||
}
|
||||
/>
|
||||
<InputError
|
||||
message={errors.phone_number}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-4 md:col-span-2 md:grid-cols-3">
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Jenis Kelamin <span className="text-red-500">*</span>
|
||||
Jenis Kelamin{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<input type="hidden" name="gender" value={gender} />
|
||||
<RadioGroup value={gender} onValueChange={setGender} className="flex gap-4">
|
||||
<input
|
||||
type="hidden"
|
||||
name="gender"
|
||||
value={gender}
|
||||
/>
|
||||
<RadioGroup
|
||||
value={gender}
|
||||
onValueChange={setGender}
|
||||
className="flex gap-4"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="male" id="male" />
|
||||
<Label htmlFor="male" className="font-normal">Laki-laki</Label>
|
||||
<RadioGroupItem
|
||||
value="male"
|
||||
id="male"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="male"
|
||||
className="font-normal"
|
||||
>
|
||||
Laki-laki
|
||||
</Label>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<RadioGroupItem value="female" id="female" />
|
||||
<Label htmlFor="female" className="font-normal">Perempuan</Label>
|
||||
<RadioGroupItem
|
||||
value="female"
|
||||
id="female"
|
||||
/>
|
||||
<Label
|
||||
htmlFor="female"
|
||||
className="font-normal"
|
||||
>
|
||||
Perempuan
|
||||
</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
<InputError message={errors.gender} />
|
||||
<InputError
|
||||
message={errors.gender}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Tempat Lahir <span className="text-red-500">*</span>
|
||||
Tempat Lahir{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input name="birth_place" defaultValue={user.profile?.birth_place ?? ''} />
|
||||
<InputError message={errors.birth_place} />
|
||||
<Input
|
||||
name="birth_place"
|
||||
defaultValue={
|
||||
user.profile?.birth_place ??
|
||||
''
|
||||
}
|
||||
/>
|
||||
<InputError
|
||||
message={errors.birth_place}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Tanggal Lahir <span className="text-red-500">*</span>
|
||||
Tanggal Lahir{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<input type="hidden" name="birth_date" value={birthDate ? format(birthDate, 'yyyy-MM-dd') : ''} />
|
||||
<DatePicker value={birthDate} onChange={setBirthDate} />
|
||||
<InputError message={errors.birth_date} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="birth_date"
|
||||
value={
|
||||
birthDate
|
||||
? format(
|
||||
birthDate,
|
||||
'yyyy-MM-dd',
|
||||
)
|
||||
: ''
|
||||
}
|
||||
/>
|
||||
<DatePicker
|
||||
value={birthDate}
|
||||
onChange={setBirthDate}
|
||||
/>
|
||||
<InputError
|
||||
message={errors.birth_date}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid gap-2 md:col-span-2">
|
||||
<Label htmlFor="address">
|
||||
Alamat <span className="text-red-500">*</span>
|
||||
Alamat{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Textarea id="address" name="address" defaultValue={user.profile?.address ?? ''} />
|
||||
<Textarea
|
||||
id="address"
|
||||
name="address"
|
||||
defaultValue={
|
||||
user.profile?.address ?? ''
|
||||
}
|
||||
/>
|
||||
<InputError message={errors.address} />
|
||||
</div>
|
||||
</CardContent>
|
||||
@ -150,53 +292,131 @@ export default function StudentEdit({ user, departments, lecturers }: Props) {
|
||||
<CardContent className="grid gap-4 md:grid-cols-2">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="student_number">
|
||||
NIM <span className="text-red-500">*</span>
|
||||
NIM{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="student_number" name="student_number" defaultValue={user.student?.student_number ?? ''} />
|
||||
<InputError message={errors.student_number} />
|
||||
<Input
|
||||
id="student_number"
|
||||
name="student_number"
|
||||
defaultValue={
|
||||
user.student?.student_number ??
|
||||
''
|
||||
}
|
||||
/>
|
||||
<InputError
|
||||
message={errors.student_number}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Jurusan <span className="text-red-500">*</span>
|
||||
Jurusan{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Select name="department_id" defaultValue={user.student?.department_id ? String(user.student.department_id) : undefined}>
|
||||
<Select
|
||||
name="department_id"
|
||||
defaultValue={
|
||||
user.student?.department_id
|
||||
? String(
|
||||
user.student
|
||||
.department_id,
|
||||
)
|
||||
: undefined
|
||||
}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih jurusan" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{departments.map((dept) => (
|
||||
<SelectItem key={dept.id} value={String(dept.id)}>
|
||||
<SelectItem
|
||||
key={dept.id}
|
||||
value={String(dept.id)}
|
||||
>
|
||||
{dept.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={errors.department_id} />
|
||||
<InputError
|
||||
message={errors.department_id}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="enrollment_year">
|
||||
Tahun Masuk <span className="text-red-500">*</span>
|
||||
Tahun Masuk{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Input id="enrollment_year" name="enrollment_year" type="number" defaultValue={user.student?.enrollment_year ?? ''} />
|
||||
<InputError message={errors.enrollment_year} />
|
||||
<Input
|
||||
id="enrollment_year"
|
||||
name="enrollment_year"
|
||||
type="number"
|
||||
defaultValue={
|
||||
user.student?.enrollment_year ??
|
||||
''
|
||||
}
|
||||
/>
|
||||
<InputError
|
||||
message={errors.enrollment_year}
|
||||
/>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label>
|
||||
Dosen Wali <span className="text-red-500">*</span>
|
||||
Dosen Wali{' '}
|
||||
<span className="text-red-500">
|
||||
*
|
||||
</span>
|
||||
</Label>
|
||||
<Select name="academic_advisor_id" defaultValue={user.student?.academic_advisor_id ? String(user.student.academic_advisor_id) : undefined}>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih dosen wali" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{lecturers.map((lect) => (
|
||||
<SelectItem key={lect.id} value={String(lect.id)}>
|
||||
{lect.user?.profile?.full_name ?? 'N/A'} - {lect.lecturer_number}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<InputError message={errors.academic_advisor_id} />
|
||||
<input
|
||||
type="hidden"
|
||||
name="academic_advisor_id"
|
||||
value={advisor?.id ?? ''}
|
||||
/>
|
||||
<Combobox
|
||||
items={lecturers}
|
||||
value={advisor}
|
||||
onValueChange={setAdvisor}
|
||||
itemToStringLabel={(lect) =>
|
||||
`${lect.user?.profile?.full_name ?? 'N/A'} - ${lect.lecturer_number}`
|
||||
}
|
||||
isItemEqualToValue={(a, b) =>
|
||||
a.id === b.id
|
||||
}
|
||||
>
|
||||
<ComboboxInput
|
||||
placeholder="Pilih dosen wali"
|
||||
className="w-full"
|
||||
/>
|
||||
<ComboboxContent>
|
||||
<ComboboxEmpty>
|
||||
Dosen tidak ditemukan.
|
||||
</ComboboxEmpty>
|
||||
<ComboboxList>
|
||||
{lecturers.map((lect) => (
|
||||
<ComboboxItem
|
||||
key={lect.id}
|
||||
value={lect}
|
||||
>
|
||||
{lect.user?.profile
|
||||
?.full_name ??
|
||||
'N/A'}{' '}
|
||||
-{' '}
|
||||
{
|
||||
lect.lecturer_number
|
||||
}
|
||||
</ComboboxItem>
|
||||
))}
|
||||
</ComboboxList>
|
||||
</ComboboxContent>
|
||||
</Combobox>
|
||||
<InputError
|
||||
message={errors.academic_advisor_id}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user