From 6bb370a716679c902eb1f04d3802afdd38f89b80 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Thu, 27 Apr 2023 12:36:17 +0200
Subject: [PATCH] :bug: Optionnal fields on update client

---
 .../Form/Elements/InputField/index.tsx        |  9 ++++--
 .../Layouts/Folder/UpdateClient/index.tsx     | 28 +++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx b/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx
index 4511802a..61a55cdc 100644
--- a/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/Elements/InputField/index.tsx
@@ -12,6 +12,11 @@ export type IProps = IBaseFieldProps & {
 
 // @ts-ignore TODO: typing error on IProps (validator class?? cf Massi 22/02/23)
 export default class InputField extends BaseField<IProps> {
+	static override defaultProps: Partial<IBaseFieldProps> = {
+		...BaseField.defaultProps,
+		required: true
+	}
+	
 	public override render(): ReactNode {
 		let pattern;
 
@@ -48,7 +53,7 @@ export default class InputField extends BaseField<IProps> {
 							}
 							value={value}
 						/>
-						<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder}</div>
+						<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}</div>
 					</div>
 				</Typography>
 			);
@@ -69,7 +74,7 @@ export default class InputField extends BaseField<IProps> {
 							}
 							value={value}
 						/>
-						<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder}</div>
+						<div className={classes["fake-placeholder"]}>{this.props.fakeplaceholder} {!this.props.required && " (Facultatif)"}</div>
 					</div>
 				</Typography>
 			);
diff --git a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
index f7ce75fb..286d67df 100644
--- a/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateClient/index.tsx
@@ -32,6 +32,8 @@ type IState = {
 	inputPhoneNumberValue: string;
 	isOpenLeavingModal: boolean;
 	doesInputHaveValues: boolean;
+	inputBirthdate: Date | null;
+	inputAddress: string;
 };
 class UpdateClientClass extends BasePage<IPropsClass, IState> {
 	constructor(props: IPropsClass) {
@@ -44,6 +46,8 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 			inputPhoneNumberValue: "",
 			isOpenLeavingModal: false,
 			doesInputHaveValues: false,
+			inputBirthdate: null,
+			inputAddress: "",
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.onChangeNameInput = this.onChangeNameInput.bind(this);
@@ -53,6 +57,8 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 		this.openLeavingModal = this.openLeavingModal.bind(this);
 		this.closeLeavingModal = this.closeLeavingModal.bind(this);
 		this.leavePage = this.leavePage.bind(this);
+		this.onChangeBirthDateInput = this.onChangeBirthDateInput.bind(this);
+		this.onChangeAddressInput = this.onChangeAddressInput.bind(this);
 	}
 
 	private backwardPath = Module.getInstance()
@@ -79,6 +85,20 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 								onChange={this.onChangePhoneNumberInput}
 								defaultValue={this.props.client?.phone_number}
 							/>
+							<InputField
+								name="birthdate"
+								type="date"
+								fakeplaceholder="Date de naissance"
+								required={false}
+								onChange={this.onChangeBirthDateInput}
+							/>
+							<InputField
+								name="address"
+								type="text"
+								fakeplaceholder="Adresse"
+								required={false}
+								onChange={this.onChangeAddressInput}
+							/>
 						</div>
 
 						<div className={classes["button-container"]}>
@@ -121,6 +141,14 @@ class UpdateClientClass extends BasePage<IPropsClass, IState> {
 		this.setState({ isOpenLeavingModal: false });
 	}
 
+	private onChangeBirthDateInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputBirthdate: new Date(event.target.value) });
+	}
+
+	private onChangeAddressInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
+		this.setState({ inputAddress: event.target.value });
+	}
+
 	private onChangeNameInput(event: ChangeEvent<HTMLInputElement & HTMLSelectElement & HTMLTextAreaElement>) {
 		this.setState({ inputNameValue: event.target.value });
 	}