82 lines
3 KiB
TypeScript
82 lines
3 KiB
TypeScript
|
import { Button } from '@/components/ui/button';
|
||
|
|
import { Input } from '@/components/ui/input';
|
||
|
|
import { Label } from '@/components/ui/label';
|
||
|
|
import InputError from '@/components/InputError';
|
||
|
|
import { useForm } from '@inertiajs/react';
|
||
|
|
import { LoaderCircle } from 'lucide-react';
|
||
|
|
import { FormEventHandler } from 'react';
|
||
|
|
|
||
|
|
interface MilestoneFormData {
|
||
|
|
target: string;
|
||
|
|
description: string;
|
||
|
|
[key: string]: string;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface AddMilestoneFormProps {
|
||
|
|
onSuccess?: () => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function AddMilestoneForm({ onSuccess }: AddMilestoneFormProps) {
|
||
|
|
const { data, setData, post, processing, errors, reset } = useForm<MilestoneFormData>({
|
||
|
|
target: '',
|
||
|
|
description: '',
|
||
|
|
});
|
||
|
|
|
||
|
|
const submit: FormEventHandler = (e) => {
|
||
|
|
e.preventDefault();
|
||
|
|
|
||
|
|
post(route('milestones.store'), {
|
||
|
|
onSuccess: () => {
|
||
|
|
reset();
|
||
|
|
if (onSuccess) {
|
||
|
|
onSuccess();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="w-full max-w-md">
|
||
|
|
<div className="space-y-4">
|
||
|
|
<form onSubmit={submit} className="space-y-4">
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="target" className="text-red-400">Target Number</Label>
|
||
|
|
<Input
|
||
|
|
id="target"
|
||
|
|
type="number"
|
||
|
|
step="1"
|
||
|
|
min="1"
|
||
|
|
placeholder="1500"
|
||
|
|
value={data.target}
|
||
|
|
onChange={(e) => setData('target', e.target.value)}
|
||
|
|
className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30"
|
||
|
|
/>
|
||
|
|
<InputError message={errors.target} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
<Label htmlFor="description" className="text-red-400">Description</Label>
|
||
|
|
<Input
|
||
|
|
id="description"
|
||
|
|
type="text"
|
||
|
|
placeholder="First milestone"
|
||
|
|
value={data.description}
|
||
|
|
onChange={(e) => setData('description', e.target.value)}
|
||
|
|
className="bg-black border-red-500/30 text-red-400 focus:border-red-400 placeholder:text-red-400/30"
|
||
|
|
/>
|
||
|
|
<InputError message={errors.description} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Button
|
||
|
|
type="submit"
|
||
|
|
disabled={processing}
|
||
|
|
className="w-full bg-red-600 hover:bg-red-700 text-white border-red-500"
|
||
|
|
>
|
||
|
|
{processing && <LoaderCircle className="mr-2 h-4 w-4 animate-spin" />}
|
||
|
|
Add Milestone
|
||
|
|
</Button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|