133 lines
3.5 KiB
TypeScript
133 lines
3.5 KiB
TypeScript
import { Stack } from "@mui/material";
|
|
import { useTheme } from "@mui/material";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useForm, FormProvider } from "react-hook-form";
|
|
import { zodResolver } from "@hookform/resolvers/zod/dist/zod.js";
|
|
import { Dialog } from "@/Components/inputs";
|
|
import { useAddTeamMemberForm } from "@/Hooks/useAddTeamMemberForm";
|
|
import type { AddTeamMemberFormData } from "@/Validation/addTeamMember";
|
|
import type { User } from "@/Types/User";
|
|
import { usePost } from "@/Hooks/UseApi";
|
|
import { LAYOUT } from "@/Utils/Theme/constants";
|
|
import { FormTextField } from "@/Components/inputs/forms/FormTextField";
|
|
import { RoleSelectField } from "./RoleSelectField";
|
|
|
|
interface AddTeamMemberDialogProps {
|
|
open: boolean;
|
|
onClose: () => void;
|
|
onSuccess?: () => void;
|
|
}
|
|
|
|
interface RegisterPayload {
|
|
firstName: string;
|
|
lastName: string;
|
|
email: string;
|
|
password: string;
|
|
role: string[];
|
|
}
|
|
|
|
export const AddTeamMemberDialog = ({
|
|
open,
|
|
onClose,
|
|
onSuccess,
|
|
}: AddTeamMemberDialogProps) => {
|
|
const theme = useTheme();
|
|
const { t } = useTranslation();
|
|
const { schema, defaults } = useAddTeamMemberForm();
|
|
const { post, loading } = usePost<RegisterPayload, User>();
|
|
|
|
const form = useForm<AddTeamMemberFormData>({
|
|
resolver: zodResolver(schema),
|
|
defaultValues: defaults,
|
|
values: defaults,
|
|
});
|
|
|
|
const { handleSubmit, reset, setError } = form;
|
|
|
|
const handleClose = () => {
|
|
reset();
|
|
onClose();
|
|
};
|
|
|
|
const onSubmit = async (data: AddTeamMemberFormData) => {
|
|
if (loading) return;
|
|
|
|
const { confirm: _confirm, ...userData } = data;
|
|
const payload: RegisterPayload = userData;
|
|
|
|
const result = await post("/auth/users", payload);
|
|
|
|
if (result?.success) {
|
|
reset();
|
|
onClose();
|
|
onSuccess?.();
|
|
} else if (result?.msg) {
|
|
if (result.msg.toLowerCase().includes("email")) {
|
|
setError("email", { message: result.msg });
|
|
}
|
|
}
|
|
};
|
|
|
|
return (
|
|
<FormProvider {...form}>
|
|
<Dialog
|
|
open={open}
|
|
title={t("pages.account.team.addMember.title")}
|
|
content={t("pages.account.team.addMember.description")}
|
|
onCancel={handleClose}
|
|
onConfirm={handleSubmit(onSubmit)}
|
|
confirmText={t("common.buttons.addMember")}
|
|
loading={loading}
|
|
maxWidth="sm"
|
|
fullWidth
|
|
>
|
|
<Stack gap={theme.spacing(LAYOUT.XS)}>
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(LAYOUT.XS)}
|
|
>
|
|
<FormTextField
|
|
name="firstName"
|
|
fieldLabel={t("common.form.name.option.firstName.label")}
|
|
placeholder={t("common.form.name.option.firstName.placeholder")}
|
|
/>
|
|
<FormTextField
|
|
name="lastName"
|
|
fieldLabel={t("common.form.name.option.lastName.label")}
|
|
placeholder={t("common.form.name.option.lastName.placeholder")}
|
|
/>
|
|
</Stack>
|
|
<FormTextField
|
|
name="email"
|
|
type="email"
|
|
fieldLabel={t("common.form.email.option.email.label")}
|
|
placeholder={t("common.form.email.option.email.placeholder")}
|
|
/>
|
|
|
|
<RoleSelectField />
|
|
|
|
<Stack
|
|
direction="row"
|
|
gap={theme.spacing(LAYOUT.XS)}
|
|
>
|
|
<FormTextField
|
|
name="password"
|
|
fieldLabel={t("pages.auth.common.form.option.password.label")}
|
|
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
|
type="password"
|
|
sx={{ flex: 1 }}
|
|
/>
|
|
|
|
<FormTextField
|
|
name="confirm"
|
|
fieldLabel={t("pages.auth.common.form.option.confirmPassword.label")}
|
|
placeholder={t("pages.auth.common.form.option.password.placeholder")}
|
|
type="password"
|
|
/>
|
|
</Stack>
|
|
</Stack>
|
|
</Dialog>
|
|
</FormProvider>
|
|
);
|
|
};
|