Add authentification

frontend/src/components/Contracts/Modal/index.tsx

@@ -1,50 +1,57 @@
-import { Button, Group, Modal, TextInput, Title, type ModalBaseProps } from "@mantine/core";
+import { Button, Group, Modal, Select, 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";
+import { IconCancel, IconDownload } from "@tabler/icons-react";
+import { useGetForms } from "@/services/api";
+import { useMemo } from "react";
 
 export type ContractModalProps = ModalBaseProps & {
-    currentContract?: Contract;
-    handleSubmit: (contract: ContractInputs, id?: number) => void;
+    handleSubmit: (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,
-        // },
+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(() => {
+        return allForms?.map((form) => ({
+            value: String(form.id),
+            label: `${form.season} ${form.name}`,
+        }));
+    }, [allForms]);
+
     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"
+        <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
-                {...form.getInputProps("name")}
-            />
-            <TextInput
-                label={t("contract email", { capfirst: true })}
-                placeholder={t("contract email", { capfirst: true })}
-                radius="sm"
-                withAsterisk
-                {...form.getInputProps("email")}
+                clearable
+                allowDeselect
+                searchable
+                data={formSelect || []}
+                {...form.getInputProps("form_id")}
             />
             <Group mt="sm" justify="space-between">
                 <Button
@@ -61,22 +68,16 @@ export function ContractModal({
                 </Button>
                 <Button
                     variant="filled"
-                    aria-label={
-                        currentContract
-                            ? t("edit contract", { capfirst: true })
-                            : t("create contract", { capfirst: true })
-                    }
-                    leftSection={currentContract ? <IconEdit /> : <IconPlus />}
+                    aria-label={t("download contracts")}
+                    leftSection={<IconDownload />}
                     onClick={() => {
                         form.validate();
                         if (form.isValid()) {
-                            handleSubmit(form.getValues(), currentContract?.id);
+                            handleSubmit(Number(form.values.form_id));
                         }
                     }}
                 >
-                    {currentContract
-                        ? t("edit contract", { capfirst: true })
-                        : t("create contract", { capfirst: true })}
+                    {t("download contracts", { capfirst: true })}
                 </Button>
             </Group>
         </Modal>