115 lines
4.2 KiB
TypeScript
115 lines
4.2 KiB
TypeScript
import InputError from '@/components/input-error';
|
|
import LoadingButton from '@/components/loading-button';
|
|
import { Card } from '@/components/ui/card';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { useForm, usePage } from '@inertiajs/react';
|
|
import { ExamUpdateProps } from '../../update';
|
|
|
|
const ExamSettings = () => {
|
|
const { props } = usePage<ExamUpdateProps>();
|
|
const { tab, exam } = props;
|
|
|
|
const { data, setData, post, errors, processing } = useForm({
|
|
tab: tab,
|
|
duration_hours: exam.duration_hours || 1,
|
|
duration_minutes: exam.duration_minutes || 0,
|
|
pass_mark: exam.pass_mark || 50,
|
|
max_attempts: exam.max_attempts ?? 3,
|
|
total_marks: exam.total_marks || 100,
|
|
});
|
|
|
|
// Handle form submission
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
post(route('exams.update', { exam: exam.id }));
|
|
};
|
|
|
|
return (
|
|
<Card className="container p-4 sm:p-6">
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
<div className="grid gap-6 md:grid-cols-2">
|
|
<div>
|
|
<Label>Duration (Hours) *</Label>
|
|
<Input
|
|
type="number"
|
|
name="duration_hours"
|
|
value={data.duration_hours.toString()}
|
|
onChange={(e) => setData('duration_hours', parseInt(e.target.value) || 0)}
|
|
placeholder="1"
|
|
min="0"
|
|
/>
|
|
<InputError message={errors.duration_hours} />
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Duration (Minutes) *</Label>
|
|
<Input
|
|
type="number"
|
|
name="duration_minutes"
|
|
value={data.duration_minutes.toString()}
|
|
onChange={(e) => setData('duration_minutes', parseInt(e.target.value) || 0)}
|
|
placeholder="0"
|
|
min="0"
|
|
max="59"
|
|
/>
|
|
<InputError message={errors.duration_minutes} />
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Pass Mark *</Label>
|
|
<Input
|
|
type="number"
|
|
name="pass_mark"
|
|
value={data.pass_mark.toString()}
|
|
onChange={(e) => setData('pass_mark', parseInt(e.target.value) || 0)}
|
|
placeholder="50"
|
|
min="0"
|
|
max="100"
|
|
/>
|
|
<InputError message={errors.pass_mark} />
|
|
<p className="mt-1 text-xs text-gray-500">Students must score this percentage to pass</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Max Attempts *</Label>
|
|
<Input
|
|
type="number"
|
|
name="max_attempts"
|
|
value={data.max_attempts.toString()}
|
|
onChange={(e) => {
|
|
const value = parseInt(e.target.value, 10);
|
|
setData('max_attempts', Number.isNaN(value) ? 0 : value);
|
|
}}
|
|
placeholder="0"
|
|
min="0"
|
|
/>
|
|
<InputError message={errors.max_attempts} />
|
|
<p className="mt-1 text-xs text-gray-500">0 = Unlimited attempts</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Label>Total Marks *</Label>
|
|
<Input
|
|
type="number"
|
|
name="total_marks"
|
|
value={data.total_marks.toString()}
|
|
onChange={(e) => setData('total_marks', parseInt(e.target.value) || 1)}
|
|
placeholder="100"
|
|
min="1"
|
|
/>
|
|
<InputError message={errors.total_marks} />
|
|
<p className="mt-1 text-xs text-gray-500">Total marks for the entire exam</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-8">
|
|
<LoadingButton loading={processing}>Save Changes</LoadingButton>
|
|
</div>
|
|
</form>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export default ExamSettings;
|