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