84 lines
3.1 KiB
TypeScript
84 lines
3.1 KiB
TypeScript
import InputError from '@/components/input-error';
|
|
import LoadingButton from '@/components/loading-button';
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Label } from '@/components/ui/label';
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
|
import { SharedData } from '@/types/global';
|
|
import { useForm, usePage } from '@inertiajs/react';
|
|
import { ReactNode, useState } from 'react';
|
|
|
|
interface Props {
|
|
actionComponent: ReactNode;
|
|
}
|
|
|
|
const InviteForm = ({ actionComponent }: Props) => {
|
|
const { props } = usePage<SharedData>();
|
|
const { translate } = props;
|
|
const { dashboard, input, common, button } = translate;
|
|
const [open, setOpen] = useState(false);
|
|
|
|
const { data, post, setData, processing, errors, reset } = useForm({
|
|
name: '',
|
|
email: '',
|
|
status: 1,
|
|
});
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
post(route('users.store'), {
|
|
onSuccess: () => {
|
|
reset();
|
|
setOpen(false);
|
|
},
|
|
});
|
|
};
|
|
|
|
return (
|
|
<Dialog open={open} onOpenChange={setOpen}>
|
|
<DialogTrigger asChild>{actionComponent}</DialogTrigger>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<DialogTitle>{dashboard.invite_user}</DialogTitle>
|
|
<p className="text-muted-foreground text-sm">{dashboard.invite_user_description}</p>
|
|
</DialogHeader>
|
|
|
|
<form onSubmit={handleSubmit} className="mt-4 space-y-4 text-start">
|
|
<div>
|
|
<Label>{input.name}</Label>
|
|
<Input required value={data.name} onChange={(e) => setData('name', e.target.value)} />
|
|
<InputError message={errors.name} />
|
|
</div>
|
|
|
|
<div>
|
|
<Label>{input.email}</Label>
|
|
<Input type="email" required value={data.email} onChange={(e) => setData('email', e.target.value)} />
|
|
<InputError message={errors.email} />
|
|
</div>
|
|
|
|
<div>
|
|
<Label>{input.status}</Label>
|
|
<Select value={data.status === 1 ? 'active' : 'inactive'} onValueChange={(value) => setData('status', value === 'active' ? 1 : 0)}>
|
|
<SelectTrigger>
|
|
<SelectValue placeholder={dashboard.select_approval_status} />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="active">{common.active}</SelectItem>
|
|
<SelectItem value="inactive">{common.inactive}</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
<InputError message={errors.status} />
|
|
</div>
|
|
|
|
<LoadingButton loading={processing} className="w-full">
|
|
{button.send ?? button.submit}
|
|
</LoadingButton>
|
|
</form>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
};
|
|
|
|
export default InviteForm;
|