89 lines
2.9 KiB
TypeScript
89 lines
2.9 KiB
TypeScript
import { Button, Group, Modal, Select, type ModalBaseProps } from "@mantine/core";
|
|
import { t } from "@/config/i18n";
|
|
import { useForm } from "@mantine/form";
|
|
import { IconCancel, IconDownload } from "@tabler/icons-react";
|
|
import { useGetForms } from "@/services/api";
|
|
import { useMemo } from "react";
|
|
|
|
export type ContractModalProps = ModalBaseProps & {
|
|
handleSubmit: (id: number) => void;
|
|
};
|
|
|
|
export type ContractDownloadInputs = {
|
|
form_id: number;
|
|
};
|
|
|
|
export function ContractModal({ opened, onClose, handleSubmit }: ContractModalProps) {
|
|
const { data: allForms } = useGetForms();
|
|
const form = useForm({
|
|
initialValues: {
|
|
form_id: null,
|
|
},
|
|
validate: {
|
|
form_id: (value) =>
|
|
!value ? `${t("a form", { capfirst: true })} ${t("is required")}` : null,
|
|
},
|
|
});
|
|
|
|
const formSelect = useMemo(() => {
|
|
if (!allForms) {
|
|
return [];
|
|
}
|
|
return allForms?.map((form) => ({
|
|
value: String(form.id),
|
|
label: `${form.season} ${form.name}`,
|
|
}));
|
|
}, [allForms]);
|
|
|
|
return (
|
|
<Modal
|
|
opened={opened}
|
|
onClose={onClose}
|
|
title={t("download contracts", { capfirst: true })}
|
|
>
|
|
<Select
|
|
label={t("form", { capfirst: true })}
|
|
placeholder={t("select a form", { capfirst: true })}
|
|
description={t(
|
|
"by selecting a form here you can download all contracts of your form",
|
|
{ capfirst: true },
|
|
)}
|
|
nothingFoundMessage={t("nothing found", { capfirst: true })}
|
|
withAsterisk
|
|
clearable
|
|
allowDeselect
|
|
searchable
|
|
data={formSelect || []}
|
|
{...form.getInputProps("form_id")}
|
|
/>
|
|
<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={t("download contracts")}
|
|
leftSection={<IconDownload />}
|
|
onClick={() => {
|
|
form.validate();
|
|
if (form.isValid()) {
|
|
handleSubmit(Number(form.values.form_id));
|
|
}
|
|
}}
|
|
>
|
|
{t("download contracts", { capfirst: true })}
|
|
</Button>
|
|
</Group>
|
|
</Modal>
|
|
);
|
|
}
|