85 lines
3.2 KiB
TypeScript
85 lines
3.2 KiB
TypeScript
import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
|
|
import { t } from "@/config/i18n";
|
|
import { useForm } from "@mantine/form";
|
|
import { IconCancel, IconEdit, IconPlus } from "@tabler/icons-react";
|
|
import { type Contract, type ContractInputs } from "@/services/resources/contracts";
|
|
|
|
export type ContractModalProps = ModalBaseProps & {
|
|
currentContract?: Contract;
|
|
handleSubmit: (contract: ContractInputs, id?: number) => void;
|
|
};
|
|
|
|
export function ContractModal({
|
|
opened,
|
|
onClose,
|
|
currentContract,
|
|
handleSubmit,
|
|
}: ContractModalProps) {
|
|
const form = useForm<ContractInputs>({
|
|
// initialValues: {
|
|
// firstname: currentContract?.firstname ?? "",
|
|
// lastname: currentContract?.lastname ?? "",
|
|
// email: currentContract?.email ?? "",
|
|
// },
|
|
// validate: {
|
|
// firstname: (value) =>
|
|
// !value ? `${t("name", { capfirst: true })} ${t("is required")}` : null,
|
|
// email: (value) =>
|
|
// !value ? `${t("email", { capfirst: true })} ${t("is required")}` : null,
|
|
// },
|
|
});
|
|
|
|
return (
|
|
<Modal opened={opened} onClose={onClose} title={t("create contract", { capfirst: true })}>
|
|
<Title order={4}>{t("informations", { capfirst: true })}</Title>
|
|
<TextInput
|
|
label={t("contract name", { capfirst: true })}
|
|
placeholder={t("contract name", { capfirst: true })}
|
|
radius="sm"
|
|
withAsterisk
|
|
{...form.getInputProps("name")}
|
|
/>
|
|
<TextInput
|
|
label={t("contract email", { capfirst: true })}
|
|
placeholder={t("contract email", { capfirst: true })}
|
|
radius="sm"
|
|
withAsterisk
|
|
{...form.getInputProps("email")}
|
|
/>
|
|
<Group mt="sm" justify="space-between">
|
|
<Button
|
|
variant="filled"
|
|
color="red"
|
|
aria-label={t("cancel", { capfirst: true })}
|
|
leftSection={<IconCancel />}
|
|
onClick={() => {
|
|
form.clearErrors();
|
|
onClose();
|
|
}}
|
|
>
|
|
{t("cancel", { capfirst: true })}
|
|
</Button>
|
|
<Button
|
|
variant="filled"
|
|
aria-label={
|
|
currentContract
|
|
? t("edit contract", { capfirst: true })
|
|
: t("create contract", { capfirst: true })
|
|
}
|
|
leftSection={currentContract ? <IconEdit /> : <IconPlus />}
|
|
onClick={() => {
|
|
form.validate();
|
|
if (form.isValid()) {
|
|
handleSubmit(form.getValues(), currentContract?.id);
|
|
}
|
|
}}
|
|
>
|
|
{currentContract
|
|
? t("edit contract", { capfirst: true })
|
|
: t("create contract", { capfirst: true })}
|
|
</Button>
|
|
</Group>
|
|
</Modal>
|
|
);
|
|
}
|