diff --git a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx index d96314ff..10e6109e 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/ParameterDocuments/index.tsx +++ b/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); } diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx index 30f2d87f..7b1503ae 100644 --- a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx +++ b/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(false); const [documentTypes, setDocumentTypes] = useState([]); const [folder, setFolder] = useState(null); + const [selectedDocumentTypes, setSelectedDocumentTypes] = useState([]); + const formRef = useRef
(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 (
@@ -136,7 +199,7 @@ export default function AskDocuments() { Demander des documents - +
{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 ; + return ( + + ); })}
@@ -175,7 +246,12 @@ export default function AskDocuments() {
{folder && ( - + )} );