✨ Refacto types de fichiers à demander

src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/classes.module.scss

@@ -0,0 +1,11 @@
+.add-document-form-container {
+	display: flex;
+	flex-direction: column;
+	gap: 24px;
+
+	.radiobox-container {
+		> :not(:last-child) {
+			margin-bottom: 16px;
+		}
+	}
+}

src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx

@@ -0,0 +1,159 @@
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+import classes from "./classes.module.scss";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
+import { ChangeEvent, useCallback, useEffect, useState } from "react";
+import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
+import { DocumentType, OfficeFolder } from "le-coffre-resources/dist/Notary";
+import Deeds from "@Front/Api/LeCoffreApi/Notary/Deeds/Deeds";
+import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
+import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
+import { MultiValue } from "react-select";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
+
+type IProps = {
+	isCreateDocumentModalVisible: boolean;
+	closeModal: () => void;
+	folder: OfficeFolder;
+};
+
+export default function ParameterDocuments(props: IProps) {
+	const [visibleDescription, setVisibleDescription] = useState<string>("");
+	const [documentName, setDocumentName] = useState<string>("");
+
+	const [addOrEditDocument, setAddOrEditDocument] = useState<"add" | "edit">("edit");
+
+	const [selectedDocuments, setSelectedDocuments] = useState<IOption[]>([]);
+	const [formattedOptions, setFormattedOptions] = useState<IOption[]>([]);
+
+	const getAvailableDocuments = useCallback(async () => {
+		const documents = await DocumentTypes.getInstance().get({});
+
+		const formattedOptions: IOption[] = documents
+			.filter((document) => {
+				return !props.folder.deed?.document_types?.some((documentType) => documentType.uid === document.uid);
+			})
+			.map((document) => {
+				return {
+					label: document.name,
+					value: document.uid,
+				};
+			});
+		setFormattedOptions(formattedOptions);
+	}, [props.folder.deed?.document_types]);
+
+	const onVisibleDescriptionChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+		setVisibleDescription(event.target.value);
+	};
+
+	const onDocumentNameChange = (event: ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) => {
+		setDocumentName(event.target.value);
+	};
+
+	const onDocumentChangeHandler = useCallback((values: MultiValue<IOption>) => {
+		setSelectedDocuments(values as IOption[]);
+	}, []);
+
+	const handleClose = useCallback(() => {
+		setFormattedOptions([]);
+		setSelectedDocuments([]);
+		setAddOrEditDocument("edit");
+		setVisibleDescription("");
+		setDocumentName("");
+		props.closeModal();
+	}, [props]);
+
+	const addDocument = useCallback(async () => {
+		if (addOrEditDocument === "add") {
+			try {
+				const documentType = await DocumentTypes.getInstance().post({
+					name: documentName,
+					private_description: visibleDescription,
+					office: {
+						uid: props.folder.office!.uid!,
+					},
+					public_description: visibleDescription,
+				});
+
+				const oldDocumentsType = props.folder.deed?.document_types!;
+				await Deeds.getInstance().put(props.folder.deed?.uid!, {
+					document_types: [...oldDocumentsType, documentType],
+				});
+
+				//await this.loadData();
+				handleClose();
+			} catch (e) {
+				console.error(e);
+			}
+		} else {
+			try {
+				const oldDocumentsType = props.folder.deed?.document_types!;
+				await Deeds.getInstance().put(props.folder.deed?.uid!, {
+					document_types: [
+						...oldDocumentsType,
+						...selectedDocuments.map((document) => DocumentType.hydrate<DocumentType>({ uid: document.value as string })),
+					],
+				});
+
+				//await this.loadData();
+				handleClose();
+			} catch (e) {
+				console.error(e);
+			}
+		}
+	}, [addOrEditDocument, documentName, handleClose, props, selectedDocuments, visibleDescription]);
+
+	const selectEditMode = () => {
+		setAddOrEditDocument("edit");
+	};
+
+	const selectAddMode = () => {
+		setAddOrEditDocument("add");
+	};
+
+	useEffect(() => {
+		getAvailableDocuments();
+	}, [getAvailableDocuments, props.folder]);
+
+	return (
+		<Confirm
+			isOpen={props.isCreateDocumentModalVisible}
+			onClose={handleClose}
+			onAccept={addDocument}
+			closeBtn
+			header={"Ajouter des documents demandables"}
+			cancelText={"Annuler"}
+			confirmText={"Ajouter"}>
+			<div className={classes["add-document-form-container"]}>
+				<div className={classes["radiobox-container"]}>
+					<RadioBox name="document" onChange={selectEditMode} checked={addOrEditDocument === "edit"} value={"existing client"}>
+						<Typography typo={ITypo.P_ERR_18}>Document existant</Typography>
+					</RadioBox>
+
+					<RadioBox name="document" onChange={selectAddMode} checked={addOrEditDocument === "add"} value={"new client"}>
+						<Typography typo={ITypo.P_ERR_18}>Créer un document</Typography>
+					</RadioBox>
+				</div>
+				{addOrEditDocument === "add" && (
+					<>
+						<TextField name="document_name" placeholder="Nom du document à ajouter" onChange={onDocumentNameChange} />
+						<TextAreaField
+							name="description"
+							placeholder="Description visible par le client"
+							onChange={onVisibleDescriptionChange}
+						/>
+					</>
+				)}
+				{addOrEditDocument === "edit" && (
+					<MultiSelect
+						options={formattedOptions}
+						placeholder="Cliquez pour sélectionner des documents"
+						onChange={onDocumentChangeHandler}
+						defaultValue={selectedDocuments}
+					/>
+				)}
+			</div>
+		</Confirm>
+	);
+}

src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss

@@ -37,10 +37,4 @@
 	.buttons-container {
 		margin-top: 32px;
 	}
-
-	.add-document-form-container {
-		display: flex;
-		flex-direction: column;
-		gap: 24px;
-	}
 }

src/front/Components/Layouts/Folder/AskDocuments/index.tsx

@@ -1,15 +1,10 @@
 import PlusIcon from "@Assets/Icons/plus.svg";
-import Deeds from "@Front/Api/LeCoffreApi/Notary/Deeds/Deeds";
 import Documents from "@Front/Api/LeCoffreApi/Notary/Documents/Documents";
-import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Form from "@Front/Components/DesignSystem/Form";
 import { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
-import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
-import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
@@ -20,6 +15,7 @@ import React from "react";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
+import ParameterDocuments from "./ParameterDocuments";
 
 type IProps = {};
 type IPropsClass = IProps & {
@@ -29,8 +25,6 @@ type IPropsClass = IProps & {
 };
 type IState = {
 	isCreateDocumentModalVisible: boolean;
-	documentName: string;
-	visibleDescription: string;
 	documentTypes: IOption[];
 	folder: OfficeFolder | null;
 };
@@ -41,8 +35,6 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 
 		this.state = {
 			isCreateDocumentModalVisible: false,
-			documentName: "",
-			visibleDescription: "",
 			documentTypes: [],
 			folder: null,
 		};
@@ -50,11 +42,6 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 		this.onFormSubmit = this.onFormSubmit.bind(this);
 		this.closeModal = this.closeModal.bind(this);
 		this.openModal = this.openModal.bind(this);
-		this.cancel = this.cancel.bind(this);
-		this.onVisibleDescriptionChange = this.onVisibleDescriptionChange.bind(this);
-		this.onDocumentNameChange = this.onDocumentNameChange.bind(this);
-		this.addDocument = this.addDocument.bind(this);
-		this.canAddDocument = this.canAddDocument.bind(this);
 	}
 
 	public override render(): JSX.Element {
@@ -101,25 +88,14 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 							</div>
 						</div>
 					</Form>
-					<Confirm
-						isOpen={this.state.isCreateDocumentModalVisible}
-						onClose={this.closeModal}
-						onAccept={this.addDocument}
-						canConfirm={this.canAddDocument()}
-						closeBtn
-						header={"Créer un type de document"}
-						cancelText={"Annuler"}
-						confirmText={"Ajouter"}>
-						<div className={classes["add-document-form-container"]}>
-							<TextField name="document_name" placeholder="Nom du document à ajouter" onChange={this.onDocumentNameChange} />
-							<TextAreaField
-								name="description"
-								placeholder="Description visible par le client"
-								onChange={this.onVisibleDescriptionChange}
-							/>
-						</div>
-					</Confirm>
 				</div>
+				{this.state.folder && (
+					<ParameterDocuments
+						folder={this.state.folder}
+						closeModal={this.closeModal}
+						isCreateDocumentModalVisible={this.state.isCreateDocumentModalVisible}
+					/>
+				)}
 			</DefaultNotaryDashboard>
 		);
 	}
@@ -128,6 +104,8 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 		this.loadData();
 	}
 
+	private cancel() {}
+
 	private async loadData() {
 		try {
 			const folder = await Folders.getInstance().getByUid(this.props.folderUid, {
@@ -186,72 +164,16 @@ class AskDocumentsClass extends BasePage<IPropsClass, IState> {
 		return documentTypesOptions;
 	}
 
-	private canAddDocument() {
-		if (this.state.documentName === "" || this.state.visibleDescription === "") {
-			return false;
-		}
-		return true;
-	}
-
-	private async addDocument() {
-		try {
-			const documentType = await DocumentTypes.getInstance().post({
-				name: this.state.documentName,
-				private_description: this.state.visibleDescription,
-				office: {
-					uid: this.state.folder?.office!.uid!,
-				},
-				public_description: this.state.visibleDescription,
-			});
-
-			const oldDocumentsType = this.state.folder?.deed?.document_types!;
-			await Deeds.getInstance().put(this.state.folder?.deed?.uid!, {
-				document_types: [...oldDocumentsType, documentType],
-			});
-
-			await this.loadData();
-			this.setState({
-				isCreateDocumentModalVisible: false,
-				documentName: "",
-				visibleDescription: "",
-			});
-		} catch (e) {
-			console.error(e);
-		}
-	}
-
-	private onVisibleDescriptionChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
-		this.setState({
-			visibleDescription: e.target.value,
-		});
-	}
-
-	private onDocumentNameChange(e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) {
-		this.setState({
-			documentName: e.target.value,
-		});
-	}
-
-	private cancel() {
-		this.setState({
-			visibleDescription: "",
-			documentName: "",
-		});
-	}
-
 	private openModal() {
 		this.setState({
 			isCreateDocumentModalVisible: true,
-			visibleDescription: "",
-			documentName: "",
 		});
 	}
 
 	private closeModal() {
+		this.loadData();
 		this.setState({
 			isCreateDocumentModalVisible: false,
-			visibleDescription: "",
-			documentName: "",
 		});
 	}