🐛 Open only one customer at a time

src/front/Components/DesignSystem/UserFolder/index.tsx

@@ -20,9 +20,11 @@ type IProps = {
 	animationDelay?: number;
 	folder: IDashBoardFolder;
 	isArchived?: boolean;
+	isOpened: boolean;
+	onOpen: (id: string) => void;
+	onClose: () => void;
 };
 type IState = {
-	isOpen: boolean;
 	isOpenDeletionModal: boolean;
 	willClose: boolean;
 };
@@ -37,7 +39,6 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	constructor(props: IProps) {
 		super(props);
 		this.state = {
-			isOpen: false,
 			isOpenDeletionModal: false,
 			willClose: false,
 		};
@@ -54,7 +55,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 			.get()
 			.modules.pages.Folder.pages.AskDocument.props.path.replace("[folderUid]", this.props.folder.uid ?? "");
 		return (
-			<div className={classes["root"]}>
+			<div className={classes["root"]} data-opened={this.props.isOpened.toString()}>
 				<Confirm
 					isOpen={this.state.isOpenDeletionModal}
 					onClose={this.closeDeletionModal}
@@ -74,12 +75,12 @@ export default class UserFolder extends React.Component<IProps, IState> {
 					<Image
 						src={ChevronIcon}
 						alt="chevron open close"
-						className={classNames(classes["chevron-icon"], this.state.isOpen && classes["open"])}
+						className={classNames(classes["chevron-icon"], this.props.isOpened && classes["open"])}
 						onClick={this.toggleOpen}
 					/>
 				</div>
 
-				{this.state.isOpen && (
+				{this.props.isOpened && (
 					<div className={classes["container"]} data-will-close={this.state.willClose.toString()} ref={this.rootRefElement}>
 						<QuantityProgressBar
 							title="Complétion du dossier client"
@@ -119,10 +120,19 @@ export default class UserFolder extends React.Component<IProps, IState> {
 		);
 	}
 
-	public override componentDidUpdate(): void {
+	public override componentDidUpdate(prevProps: IProps): void {
 		this.rootRefElement.current?.style.setProperty("--animation-delay", this.props.animationDelay!.toString().concat("ms"));
+		
+		if(prevProps.isOpened !== this.props.isOpened) {
+			if(this.props.isOpened) {
+				this.openComponent();
+			}else{
+				this.closeComponent();
+			}
+		}	
 	}
 
+
 	private calculateDocumentsPercentageProgress(): number {
 		if (!this.props.customer.documents) return 0;
 		const totalDocuments: number = this.props.customer.documents.length;
@@ -155,7 +165,7 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	// }
 
 	private toggleOpen(): void {
-		if (this.state.isOpen) {
+		if (this.props.isOpened) {
 			this.closeComponent();
 		} else {
 			this.openComponent();
@@ -163,17 +173,15 @@ export default class UserFolder extends React.Component<IProps, IState> {
 	}
 
 	private openComponent(): void {
-		this.setState({
+		this.props.onOpen(this.props.folder.uid!);
-			isOpen: true,
-		});
 	}
 
 	private closeComponent(): void {
 		if (this.state.willClose) return;
 		this.setState({ willClose: true });
 		window.setTimeout(() => {
+			this.props.onClose();
 			this.setState({
-				isOpen: false,
 				willClose: false,
 			});
 		}, this.props.animationDelay);

src/front/Components/Layouts/Folder/FolderInformation/ClientSection/index.tsx

@@ -1,19 +1,32 @@
-import React from "react";
-import classes from "./classes.module.scss";
-import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
-import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import PlusIcon from "@Assets/Icons/plus.svg";
+import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import UserFolder from "@Front/Components/DesignSystem/UserFolder";
-import Link from "next/link";
+import { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
 import Module from "@Front/Config/Module";
+import Link from "next/link";
+import React from "react";
+
+import classes from "./classes.module.scss";
 
 type IProps = {
 	folder: IDashBoardFolder;
 };
-type IState = {};
+type IState = {
+	openedCustomer: string;
+};
 
 export default class ClientSection extends React.Component<IProps, IState> {
+	public constructor(props: IProps) {
+		super(props);
+		this.state = {
+			openedCustomer: "",
+		};
+
+		this.selectUserFolder = this.selectUserFolder.bind(this);
+		this.closeUserFolder = this.closeUserFolder.bind(this);
+	}
+
 	public override render(): JSX.Element {
 		const navigatePath = Module.getInstance()
 			.get()
@@ -48,14 +61,35 @@ export default class ClientSection extends React.Component<IProps, IState> {
 	}
 
 	private renderCustomerFolders() {
-		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, key) => {
+		const output = this.props.folder.office_folder_has_customers?.map((folderHasCustomer, index) => {
 			if (!folderHasCustomer.customer) return null;
 			// TODO : Les documents ASKED fonctionne mais les autres documents ne doivcent etre seulement ceux qui correspondent au folder
-			return <UserFolder folder={this.props.folder} customer={folderHasCustomer.customer} key={key} />;
+			return (
+				<UserFolder
+					folder={this.props.folder}
+					customer={folderHasCustomer.customer}
+					key={this.props.folder.uid}
+					isOpened={this.state.openedCustomer === this.props.folder.uid}
+					onOpen={this.selectUserFolder}
+					onClose={this.closeUserFolder}
+				/>
+			);
 		});
 		return output ?? null;
 	}
 
+
+	private closeUserFolder() {
+		this.setState({
+			openedCustomer: "",
+		});
+	}
+
+	private selectUserFolder(index: string) {
+		this.setState({
+			openedCustomer: index,
+		});
+	}
 	private doesFolderHaveCustomer(): boolean {
 		if (!this.props.folder?.office_folder_has_customers) return false;
 		return this.props.folder?.office_folder_has_customers!.length > 0;