124 lines
4.0 KiB
TypeScript
124 lines
4.0 KiB
TypeScript
import backgroundImage from "@Assets/images/background_refonte.svg";
|
|
import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
|
|
import AutocompleteMultiSelect from "@Front/Components/DesignSystem/AutocompleteMultiSelect";
|
|
import Button, { EButtonstyletype, EButtonVariant } from "@Front/Components/DesignSystem/Button";
|
|
import DragAndDrop from "@Front/Components/DesignSystem/DragAndDrop";
|
|
import Form from "@Front/Components/DesignSystem/Form";
|
|
import RadioBox from "@Front/Components/DesignSystem/RadioBox";
|
|
import Typography, { ETypo, ETypoColor } from "@Front/Components/DesignSystem/Typography";
|
|
import BackArrow from "@Front/Components/Elements/BackArrow";
|
|
import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
|
|
import Module from "@Front/Config/Module";
|
|
import { PaperAirplaneIcon } from "@heroicons/react/24/outline";
|
|
import { OfficeFolder } from "le-coffre-resources/dist/Notary";
|
|
import { useRouter } from "next/router";
|
|
import React, { useCallback, useEffect, useMemo, useState } from "react";
|
|
|
|
import classes from "./classes.module.scss";
|
|
|
|
enum EClientSelection {
|
|
ALL_CLIENTS = "all_clients",
|
|
SELECTED_CLIENTS = "selected_clients",
|
|
}
|
|
|
|
export default function SendDocuments() {
|
|
const router = useRouter();
|
|
let { folderUid } = router.query;
|
|
const [folder, setFolder] = useState<OfficeFolder | null>(null);
|
|
const [clientSelection, setClientSelection] = useState<EClientSelection | null>(null);
|
|
|
|
const onFormSubmit = useCallback(
|
|
async (
|
|
_e: React.FormEvent<HTMLFormElement> | null,
|
|
_values: {
|
|
[key: string]: any;
|
|
},
|
|
//TODO: when back is done
|
|
) => {},
|
|
[],
|
|
);
|
|
|
|
const fetchFolder = useCallback(async () => {
|
|
Folders.getInstance()
|
|
.getByUid(folderUid as string, {
|
|
q: {
|
|
customers: {
|
|
include: {
|
|
contact: true,
|
|
},
|
|
},
|
|
},
|
|
})
|
|
.then((folder) => setFolder(folder))
|
|
.catch((e) => console.warn(e));
|
|
}, [folderUid]);
|
|
|
|
const onClientSelectionChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
|
|
setClientSelection(e.target.value as EClientSelection);
|
|
console.log(e.target.value);
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchFolder();
|
|
}, [fetchFolder]);
|
|
|
|
const backUrl = useMemo(
|
|
() =>
|
|
Module.getInstance()
|
|
.get()
|
|
.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string),
|
|
[folderUid],
|
|
);
|
|
|
|
const clientsOptions = useMemo(() => {
|
|
if (!folder?.customers) return [];
|
|
return folder.customers.map((customer) => ({
|
|
id: customer.uid ?? "",
|
|
label: `${customer.contact?.first_name} ${customer.contact?.last_name}`,
|
|
}));
|
|
}, [folder]);
|
|
|
|
return (
|
|
<DefaultDoubleSidePage title={"Demander des documents"} image={backgroundImage} showHeader>
|
|
<div className={classes["root"]}>
|
|
<BackArrow url={backUrl} />
|
|
<Typography typo={ETypo.TITLE_H1} color={ETypoColor.TEXT_PRIMARY}>
|
|
Envoyer des documents, sélectionnez les destinataires :
|
|
</Typography>
|
|
<div className={classes["radioboxes"]}>
|
|
<RadioBox
|
|
name="clients"
|
|
value={EClientSelection.ALL_CLIENTS}
|
|
label="Sélectionner tous les clients du dossier"
|
|
onChange={onClientSelectionChange}
|
|
/>
|
|
<RadioBox
|
|
name="clients"
|
|
value={EClientSelection.SELECTED_CLIENTS}
|
|
label="Sélectionner certains clients"
|
|
onChange={onClientSelectionChange}
|
|
/>
|
|
</div>
|
|
|
|
<Form onSubmit={onFormSubmit} className={classes["form"]}>
|
|
{clientSelection === EClientSelection.SELECTED_CLIENTS && (
|
|
<AutocompleteMultiSelect label="Choisir le ou les clients: " options={clientsOptions} />
|
|
)}
|
|
<DragAndDrop title="Glisser ou déposer ou" description="Formats acceptés : PDF, JPG Taille maximale : 5 Mo" />
|
|
|
|
<div className={classes["buttons-container"]}>
|
|
<a href={backUrl}>
|
|
<Button variant={EButtonVariant.PRIMARY} styletype={EButtonstyletype.OUTLINED}>
|
|
Annuler
|
|
</Button>
|
|
</a>
|
|
<Button type="submit" rightIcon={<PaperAirplaneIcon />}>
|
|
Envoyer
|
|
</Button>
|
|
</div>
|
|
</Form>
|
|
</div>
|
|
</DefaultDoubleSidePage>
|
|
);
|
|
}
|