🐛 Autofill update client

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

@@ -29,7 +29,6 @@ class FolderListClass extends React.Component<IPropsClass, IState> {
 			<div className={classes["root"]}>
 				{this.props.folders.sort((folder) => {
 					const pendingDocuments = folder.documents!.filter((document) => document.document_status === "PENDING");
-					console.log(pendingDocuments.length);
 					return pendingDocuments.length >= 1 ? -1 : 1;
 				}).map((folder) => {
 					return (

src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx

@@ -66,6 +66,7 @@ export default class InputField extends BaseField<IProps> {
 							className={
 								this.props.className ? [classes["input"], classes[this.props.className]].join(" ") : classes["input"]
 							}
+							value={value}
 						/>
 						<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder}</div>
 					</div>
@@ -74,6 +75,12 @@ export default class InputField extends BaseField<IProps> {
 		}
 	}
 
+	public override componentDidMount() {
+		this.setState({
+			value: this.props.defaultValue ?? "",
+		})
+	}
+
 	// We filter the props we'll pass to the primitive input as they're useless for it
 	// It also avoids the console warning because of passing useless props to a primitive DOM element
 	private getHtmlAttributes() {

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

@@ -66,7 +66,7 @@ class FolderInformationClass extends BasePage<IPropsClass, IState> {
 									<FolderBoxInformation folder={this.state.selectedFolder} type={EFolderBoxInformationType.DESCRIPTION} />
 								</div>
 								<div className={classes["progress-bar"]}>
-									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={0} />
+									<QuantityProgressBar title="Complétion du dossier" total={100} currentNumber={34} />
 								</div>
 								{this.doesFolderHaveCustomer() && <ClientSection folder={this.state.selectedFolder} />}
 							</div>

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

@@ -1,20 +1,28 @@
+import "reflect-metadata";
+
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
 import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
+import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
+import { folders } from "@Front/Components/Layouts/DesignSystem/dummyData";
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-import { useRouter } from "next/router";
+import Module from "@Front/Config/Module";
+import { Contact } from "le-coffre-resources/dist/Customer";
+import Link from "next/link";
+import { NextRouter, useRouter } from "next/router";
+import { ChangeEvent } from "react";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
-import Link from "next/link";
-import { ChangeEvent } from "react";
-import Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
-import Module from "@Front/Config/Module";
 
-type IProps = {
+type IProps = {};
+
+type IPropsClass = IProps & {
 	selectedFolderUid: string;
+	router: NextRouter;
+	client: Contact | null;
 };
 type IState = {
 	selectedFolder: IDashBoardFolder | null;
@@ -25,8 +33,8 @@ type IState = {
 	isOpenLeavingModal: boolean;
 	doesInputHaveValues: boolean;
 };
-class UpdateClientClass extends BasePage<IProps, IState> {
+class UpdateClientClass extends BasePage<IPropsClass, IState> {
-	constructor(props: IProps) {
+	constructor(props: IPropsClass) {
 		super(props);
 		this.state = {
 			selectedFolder: null,
@@ -44,34 +52,38 @@ class UpdateClientClass extends BasePage<IProps, IState> {
 		this.onChangePhoneNumberInput = this.onChangePhoneNumberInput.bind(this);
 		this.openLeavingModal = this.openLeavingModal.bind(this);
 		this.closeLeavingModal = this.closeLeavingModal.bind(this);
+		this.leavePage = this.leavePage.bind(this);
 	}
-	public override render(): JSX.Element {
+
-		const backwardPath = Module.getInstance()
+	private backwardPath = Module.getInstance()
 		.get()
 		.modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid);
+
+	public override render(): JSX.Element {
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
 					<div className={classes["back-arrow"]}>
-						<BackArrow url={backwardPath} />
+						<BackArrow url={this.backwardPath} />
 					</div>
 					<Typography typo={ITypo.H1Bis}>Modifier les informations du client</Typography>
 					<Form className={classes["form"]}>
 						<div className={classes["content"]}>
-							<InputField name="input field" fakeplaceholder="Nom" onChange={this.onChangeNameInput} />
+							<InputField name="input field" fakeplaceholder="Nom" onChange={this.onChangeNameInput} defaultValue={this.props.client?.first_name}/>
-							<InputField name="input field" fakeplaceholder="Prénom" onChange={this.onChangeFirstNameInput} />
+							<InputField name="input field" fakeplaceholder="Prénom" onChange={this.onChangeFirstNameInput}  defaultValue={this.props.client?.last_name}/>
-							<InputField name="input field" fakeplaceholder="E-mail" isEmail onChange={this.onChangeEmailInput} />
+							<InputField name="input field" fakeplaceholder="E-mail" isEmail onChange={this.onChangeEmailInput}  defaultValue={this.props.client?.email}/>
 							<InputField
 								name="input field"
 								fakeplaceholder="Numéro de téléphone"
 								isPositiveNumber
 								onChange={this.onChangePhoneNumberInput}
+								defaultValue={this.props.client?.phone_number}
 							/>
 						</div>
 
 						<div className={classes["button-container"]}>
 							{!this.doesInputsHaveValues() ? (
-								<Link href={backwardPath} className={classes["cancel-button"]}>
+								<Link href={this.backwardPath} className={classes["cancel-button"]}>
 									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
 								</Link>
 							) : (
@@ -89,13 +101,18 @@ class UpdateClientClass extends BasePage<IProps, IState> {
 						header={"Êtes-vous sur de vouloir quitter sans enregistrer ?"}
 						cancelText={"Annuler"}
 						confirmText={"Quitter"}
-						cancelPath={backwardPath}>
+						onAccept={this.leavePage}>
 						Si vous quittez, toutes les modifications que vous avez effectuées ne seront pas enregistrées.{" "}
 					</Confirm>
 				</div>
 			</DefaultNotaryDashboard>
 		);
 	}
+
+	private leavePage() {
+		this.props.router.push(this.backwardPath);
+	}
+
 	private openLeavingModal(): void {
 		this.setState({ isOpenLeavingModal: true });
 	}
@@ -132,9 +149,15 @@ class UpdateClientClass extends BasePage<IProps, IState> {
 	}
 }
 
-export default function UpdateClient() {
+export default function UpdateClient(props: IProps) {
 	const router = useRouter();
-	let { folderUid } = router.query;
+	let { folderUid, clientUid } = router.query;
 	folderUid = folderUid as string;
-	return <UpdateClientClass selectedFolderUid={folderUid} />;
+
+	let client = null;
+	const folder = folders.find((folder) => folder.uid === folderUid) ?? null;
+	if (folder && folder.office_folder_has_customers) {
+		client = folder.office_folder_has_customers.find((client) => client.customer.contact.uid === clientUid) ?? null;
+	}
+	return <UpdateClientClass {...props} router={router} selectedFolderUid={folderUid} client={client?.customer.contact ?? null} />;
 }