Fixed ask document checkboxes

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

@@ -2,6 +2,7 @@ import Deeds from "@Front/Api/LeCoffreApi/Notary/Deeds/Deeds";
 import DocumentTypes from "@Front/Api/LeCoffreApi/Notary/DocumentTypes/DocumentTypes";
 import { IOption } from "@Front/Components/DesignSystem/Dropdown/DropdownMenu/DropdownOption";
 import AutocompleteMultiSelectField from "@Front/Components/DesignSystem/Form/AutocompleteMultiSelectField";
+import { IOption as IFormOption } from "@Front/Components/DesignSystem/Form/SelectFieldOld";
 import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import Modal from "@Front/Components/DesignSystem/Modal";
@@ -15,6 +16,7 @@ type IProps = {
 	isCreateDocumentModalVisible: boolean;
 	closeModal: () => void;
 	folder: OfficeFolder;
+	onDocumentsUpdated?: (newDocumentTypes: IFormOption[]) => void;
 };
 
 export default function ParameterDocuments(props: IProps) {
@@ -80,9 +82,18 @@ export default function ParameterDocuments(props: IProps) {
 					document_types: [...oldDocumentsType, documentType],
 				});
 
-				//await this.loadData();
+				// Create a new document type in the format expected by the parent component
+				const newDocumentType: IFormOption = {
+					label: documentType.name!,
+					value: documentType.uid!,
+					description: documentType.private_description!,
+				};
+
+				if (props.onDocumentsUpdated) {
+					props.onDocumentsUpdated([newDocumentType]);
+				}
+				
 				handleClose();
-				window.location.reload();
 			} catch (e) {
 				console.error(e);
 			}
@@ -96,9 +107,23 @@ export default function ParameterDocuments(props: IProps) {
 					],
 				});
 
-				//await this.loadData();
+				// Get the full document details for the selected documents
+				const documentsById = await Promise.all(
+					selectedDocuments.map(async (doc) => {
+						const fullDoc = await DocumentTypes.getInstance().getByUid(doc.id as string);
+						return {
+							label: fullDoc.name!,
+							value: fullDoc.uid!,
+							description: fullDoc.private_description!,
+						} as IFormOption;
+					})
+				);
+
+				if (props.onDocumentsUpdated) {
+					props.onDocumentsUpdated(documentsById);
+				}
+				
 				handleClose();
-				window.location.reload();
 			} catch (e) {
 				console.error(e);
 			}

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

@@ -9,7 +9,7 @@ import Module from "@Front/Config/Module";
 import { PlusIcon } from "@heroicons/react/24/outline";
 import { OfficeFolder } from "le-coffre-resources/dist/Notary";
 import { useRouter } from "next/router";
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect, useState, useRef } from "react";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import classes from "./classes.module.scss";
 import ParameterDocuments from "./ParameterDocuments";
@@ -22,9 +22,31 @@ export default function AskDocuments() {
 	const [isCreateDocumentModalVisible, setIsCreateDocumentModalVisible] = useState<boolean>(false);
 	const [documentTypes, setDocumentTypes] = useState<IOption[]>([]);
 	const [folder, setFolder] = useState<OfficeFolder | null>(null);
+	const [selectedDocumentTypes, setSelectedDocumentTypes] = useState<string[]>([]);
+	const formRef = useRef<Form>(null);
 
 	const closeModal = () => setIsCreateDocumentModalVisible(false);
-	const openModal = () => setIsCreateDocumentModalVisible(true);
+	const openModal = () => {
+		// Store the currently selected document types before opening modal
+		const selectedTypes = getSelectedDocumentTypes();
+		setSelectedDocumentTypes(selectedTypes);
+		setIsCreateDocumentModalVisible(true);
+	};
+
+	const getSelectedDocumentTypes = () => {
+		// Get all checked checkboxes
+		if (!formRef.current) return [];
+		
+		const formElement = formRef.current.formRef.current;
+		if (!formElement) return [];
+		
+		const checkboxes = Array.from(formElement.elements)
+			.filter(elem => elem.getAttribute("type") === "checkbox" && elem.getAttribute("name") === "document_types") as HTMLInputElement[];
+		
+		return checkboxes
+			.filter(checkbox => checkbox.checked)
+			.map(checkbox => checkbox.value);
+	};
 
 	const onFormSubmit = useCallback(
 		async (
@@ -122,13 +144,54 @@ export default function AskDocuments() {
 		}
 	}, [folderUid, getAvailableDocuments]);
 
+	// Update checkboxes after data has been refreshed
+	const updateCheckedState = useCallback(() => {
+		if (!formRef.current || selectedDocumentTypes.length === 0) return;
+		
+		const formElement = formRef.current.formRef.current;
+		if (!formElement) return;
+		
+		// Check all checkboxes that were previously selected
+		const checkboxes = Array.from(formElement.elements)
+			.filter(elem => elem.getAttribute("type") === "checkbox" && elem.getAttribute("name") === "document_types") as HTMLInputElement[];
+		
+		checkboxes.forEach(checkbox => {
+			if (selectedDocumentTypes.includes(checkbox.value)) {
+				checkbox.checked = true;
+				// Trigger change to update the internal state of CheckBox component
+				const event = new Event('change', { bubbles: true });
+				checkbox.dispatchEvent(event);
+			}
+		});
+	}, [selectedDocumentTypes]);
+
 	useEffect(() => {
 		loadData();
 	}, [loadData]);
 
+	useEffect(() => {
+		// Set timeout to ensure DOM is updated with checkboxes before trying to check them
+		const timer = setTimeout(() => {
+			updateCheckedState();
+		}, 0);
+		return () => clearTimeout(timer);
+	}, [documentTypes, updateCheckedState]);
+
 	const backUrl = Module.getInstance()
 		.get()
 		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", folderUid as string);
+	
+	const handleDocumentsUpdated = async (newDocumentTypes: IOption[]) => {
+		// Store existing selections
+		const existingSelections = getSelectedDocumentTypes();
+		
+		// Update document types with new ones
+		setDocumentTypes([...documentTypes, ...newDocumentTypes]);
+		
+		// Set these as selected
+		setSelectedDocumentTypes([...existingSelections, ...newDocumentTypes.map(dt => dt.value as string)]);
+	};
+
 	return (
 		<DefaultDoubleSidePage title={"Demander des documents"} image={backgroundImage} showHeader>
 			<div className={classes["root"]}>
@@ -136,7 +199,7 @@ export default function AskDocuments() {
 				<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 					Demander des documents
 				</Typography>
-				<Form onSubmit={onFormSubmit}>
+				<Form ref={formRef} onSubmit={onFormSubmit}>
 					<div className={classes["form-container"]}>
 						<div className={classes["checkbox-container"]}>
 							{documentTypes.map((documentType) => {
@@ -147,10 +210,18 @@ export default function AskDocuments() {
 											toolTip={documentType.description}
 											option={documentType}
 											key={documentType.value as string}
+											checked={selectedDocumentTypes.includes(documentType.value as string)}
 										/>
 									);
 								}
-								return <CheckBox name="document_types" option={documentType} key={documentType.value as string} />;
+								return (
+									<CheckBox 
+										name="document_types" 
+										option={documentType} 
+										key={documentType.value as string} 
+										checked={selectedDocumentTypes.includes(documentType.value as string)}
+									/>
+								);
 							})}
 						</div>
 						<div className={classes["add-document-container"]}>
@@ -175,7 +246,12 @@ export default function AskDocuments() {
 				</Form>
 			</div>
 			{folder && (
-				<ParameterDocuments folder={folder} closeModal={closeModal} isCreateDocumentModalVisible={isCreateDocumentModalVisible} />
+				<ParameterDocuments 
+					folder={folder} 
+					closeModal={closeModal} 
+					isCreateDocumentModalVisible={isCreateDocumentModalVisible}
+					onDocumentsUpdated={handleDocumentsUpdated}
+				/>
 			)}
 		</DefaultDoubleSidePage>
 	);