From b06d9bf0ec1add0794446f051c1af7282b7bca8a Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Tue, 16 May 2023 17:35:28 +0200
Subject: [PATCH] wip

---
 src/front/Api/BaseApiService.ts               |  5 +-
 .../DesignSystem/Form/BaseField.tsx           | 31 +++++++++++
 .../DesignSystem/Form/TextField/index.tsx     | 19 ++-----
 .../DesignSystem/Form/TextareaField/index.tsx | 19 ++-----
 .../Components/DesignSystem/Form/index.tsx    | 52 ++++++++++++++++---
 .../Layouts/Folder/CreateFolder/index.tsx     | 29 +++--------
 6 files changed, 93 insertions(+), 62 deletions(-)

diff --git a/src/front/Api/BaseApiService.ts b/src/front/Api/BaseApiService.ts
index 2992b609..166621bc 100644
--- a/src/front/Api/BaseApiService.ts
+++ b/src/front/Api/BaseApiService.ts
@@ -119,17 +119,18 @@ export default abstract class BaseApiService {
 			responseJson = await response.json();
 		} catch (err: unknown) {
 			responseJson = null;
+			return Promise.reject(err);
 		}
 
 		if (!response.ok) {
-			return Promise.reject(response);
+			return Promise.reject(responseJson);
 		}
 
 		return responseJson as T;
 	}
 
 	protected onError(error: unknown) {
-		console.error(error);
+		//console.error(error);
 	}
 }
 
diff --git a/src/front/Components/DesignSystem/Form/BaseField.tsx b/src/front/Components/DesignSystem/Form/BaseField.tsx
index 109a776e..e36ed0f2 100644
--- a/src/front/Components/DesignSystem/Form/BaseField.tsx
+++ b/src/front/Components/DesignSystem/Form/BaseField.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { FormContext, IFormContext } from ".";
 import { ValidationError } from "class-validator";
+import Typography, { ITypo, ITypoColor } from "../Typography";
 
 export type IProps = {
 	value?: string;
@@ -34,6 +35,10 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 	constructor(props: P) {
 		super(props);
 		this.onChange = this.onChange.bind(this);
+		this.onFocus = this.onFocus.bind(this);
+		this.onBlur = this.onBlur.bind(this);
+		this.hasError = this.hasError.bind(this);
+		this.renderErrors = this.renderErrors.bind(this);
 	}
 
 	public override componentDidMount() {
@@ -68,6 +73,14 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 		};
 	}
 
+	protected onFocus(event: React.FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
+		this.context?.onFieldFocusChange(this.props.name, this, true);
+	}
+
+	protected onBlur(event: React.FocusEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
+		this.context?.onFieldFocusChange(this.props.name, this, false);
+	}
+
 	protected onChange(event: React.ChangeEvent<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement>) {
 		this.context?.onFieldChange(this.props.name, this);
 		this.setState({ value: event.currentTarget.value });
@@ -75,4 +88,22 @@ export default abstract class BaseField<P extends IProps, S extends IState = ISt
 			this.props.onChange(event);
 		}
 	}
+
+	protected hasError(): boolean {
+		if(!this.context) return false;
+		return this.state.validationError !== null && this.context.isInputFocused(this.props.name);
+	}
+
+	protected renderErrors(): JSX.Element[] | null {
+		if (!this.state.validationError || !this.state.validationError.constraints) return null;
+		let errors: JSX.Element[] = [];
+		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
+			errors.push(
+				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
+					{value}
+				</Typography>,
+			);
+		});
+		return errors;
+	}
 }
diff --git a/src/front/Components/DesignSystem/Form/TextField/index.tsx b/src/front/Components/DesignSystem/Form/TextField/index.tsx
index 76cb1e53..366e6f61 100644
--- a/src/front/Components/DesignSystem/Form/TextField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/TextField/index.tsx
@@ -18,34 +18,23 @@ export default class TextField extends BaseField<IProps> {
 		const value = this.state.value ?? "";
 		return (
 			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-				<div className={classes["root"]} data-is-errored={(this.state.validationError !== null).toString()}>
+				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<input
 						onChange={this.onChange}
 						data-value={value}
 						data-has-validation-errors={(this.state.validationError === null).toString()}
 						className={classnames(classes["input"], this.props.className)}
 						value={value}
+						onFocus={this.onFocus}
+						onBlur={this.onBlur}
 						name={this.props.name}
 					/>
 					<div className={classes["fake-placeholder"]}>
 						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
 					</div>
 				</div>
-				{this.state.validationError !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+				{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
 			</Typography>
 		);
 	}
-
-	private renderErrors(): JSX.Element[] | null {
-		if (!this.state.validationError || !this.state.validationError.constraints) return null;
-		let errors: JSX.Element[] = [];
-		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
-			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
-					{value}
-				</Typography>,
-			);
-		});
-		return errors;
-	}
 }
diff --git a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
index 4115c557..43dd9c75 100644
--- a/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
+++ b/src/front/Components/DesignSystem/Form/TextareaField/index.tsx
@@ -18,7 +18,7 @@ export default class TextAreaField extends BaseField<IProps> {
 		const value = this.state.value ?? "";
 		return (
 			<Typography typo={ITypo.NAV_INPUT_16} color={ITypoColor.GREY}>
-				<div className={classes["root"]} data-is-errored={(this.state.validationError !== null).toString()}>
+				<div className={classes["root"]} data-is-errored={this.hasError().toString()}>
 					<textarea
 						name={this.props.name}
 						rows={4}
@@ -27,11 +27,13 @@ export default class TextAreaField extends BaseField<IProps> {
 						className={classnames(classes["textarea"], this.props.className)}
 						value={value}
 						readOnly={this.props.readonly}
+						onFocus={this.onFocus}
+						onBlur={this.onBlur}
 					/>
 					<div className={classes["fake-placeholder"]}>
 						{this.props.placeholder} {!this.props.required && " (Facultatif)"}
 					</div>
-					{this.state.validationError !== null && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
+					{this.hasError() && <div className={classes["errors-container"]}>{this.renderErrors()}</div>}
 				</div>
 			</Typography>
 		);
@@ -42,17 +44,4 @@ export default class TextAreaField extends BaseField<IProps> {
 			value: this.props.defaultValue ?? "",
 		});
 	}
-
-	private renderErrors(): JSX.Element[] | null {
-		if (!this.state.validationError || !this.state.validationError.constraints) return null;
-		let errors: JSX.Element[] = [];
-		Object.entries(this.state.validationError.constraints).forEach(([key, value]) => {
-			errors.push(
-				<Typography key={key} typo={ITypo.CAPTION_14} color={ITypoColor.RED_FLASH}>
-					{value}
-				</Typography>,
-			);
-		});
-		return errors;
-	}
 }
diff --git a/src/front/Components/DesignSystem/Form/index.tsx b/src/front/Components/DesignSystem/Form/index.tsx
index 7ad9b593..e3ab0f3e 100644
--- a/src/front/Components/DesignSystem/Form/index.tsx
+++ b/src/front/Components/DesignSystem/Form/index.tsx
@@ -8,25 +8,31 @@ export type IFormContext = {
 	setField: (name: string, field: IBaseField) => void;
 	unSetField: (name: string) => void;
 	onFieldChange: (name: string, field: IBaseField) => void;
+	onFieldFocusChange: (name: string, field: IBaseField, focused: boolean) => void;
+	isInputFocused: (name: string) => boolean;
 };
 
 type IFields = {
 	[key: string]: IBaseField;
 };
 
-type IState = {};
+type IState = {
+	inputFocused: {
+		name: string;
+		field: IBaseField;
+		focused: boolean;
+	};
+};
 
 export type IProps = {
+	onFieldFocusChange?: (name: string, field: IBaseField, focused: boolean) => void;
 	onFieldChange?: (name: string, field: IBaseField) => void;
-	onSubmit?: (
-		e: React.FormEvent<HTMLFormElement> | null,
-		values: { [key: string]: string },
-	) => void;
+	onSubmit?: (e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) => void;
 	className?: string;
 	children?: ReactNode;
 };
 
-export const FormContext = React.createContext<IFormContext>({ setField: () => {}, unSetField: () => {}, onFieldChange: () => {} });
+export const FormContext = React.createContext<IFormContext>({ setField: () => {}, unSetField: () => {}, onFieldChange: () => {}, onFieldFocusChange: () => {}, isInputFocused: () => false});
 
 export default class Form extends React.Component<IProps, IState> {
 	protected fields: IFields = {};
@@ -35,12 +41,21 @@ export default class Form extends React.Component<IProps, IState> {
 	constructor(props: IProps) {
 		super(props);
 
-		this.state = {};
+		this.state = {
+			inputFocused: {
+				name: "",
+				field: {} as IBaseField,
+				focused: false,
+			},
+		};
+
 		this.setField = this.setField.bind(this);
 		this.unSetField = this.unSetField.bind(this);
 		this.onFieldChange = this.onFieldChange.bind(this);
 		this.onSubmit = this.onSubmit.bind(this);
 		this.formRef = React.createRef();
+		this.onFieldFocusChange = this.onFieldFocusChange.bind(this);
+		this.isInputFocused = this.isInputFocused.bind(this);
 	}
 
 	public override render() {
@@ -50,6 +65,8 @@ export default class Form extends React.Component<IProps, IState> {
 					setField: this.setField,
 					unSetField: this.unSetField,
 					onFieldChange: this.onFieldChange,
+					onFieldFocusChange: this.onFieldFocusChange,
+					isInputFocused: this.isInputFocused,
 				}}>
 				<form className={this.props.className} ref={this.formRef} onSubmit={this.onSubmit}>
 					{this.props.children}
@@ -108,7 +125,26 @@ export default class Form extends React.Component<IProps, IState> {
 		delete this.fields[name];
 	}
 
-	protected async onFieldChange(name: string, field: IBaseField) {
+	protected isInputFocused(name: string) {
+		console.log(this.state.inputFocused);
+		return this.state.inputFocused.name === name && this.state.inputFocused.focused;
+	}
+
+	protected onFieldFocusChange(name: string, field: IBaseField, focused: boolean) {
+		this.setState({
+			inputFocused: {
+				name,
+				field,
+				focused,
+			},
+		});
+
+		if (this.props.onFieldFocusChange) {
+			this.props.onFieldFocusChange(name, field, focused);
+		}
+	}
+
+	protected onFieldChange(name: string, field: IBaseField) {
 		if (this.props.onFieldChange) {
 			this.props.onFieldChange(name, field);
 		}
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
index 2bde07bb..e175b224 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -4,13 +4,16 @@ import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
 import Users from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
 import Button from "@Front/Components/DesignSystem/Button";
 import Form from "@Front/Components/DesignSystem/Form";
+import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
+import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
+import TextField from "@Front/Components/DesignSystem/Form/TextField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import { ValidationError } from "class-validator";
 import { Deed, DeedType, Office, OfficeFolder, OfficeFolderHasStakeholder } from "le-coffre-resources/dist/Notary";
-
 import User from "le-coffre-resources/dist/Notary";
 import { NextRouter, useRouter } from "next/router";
 import React from "react";
@@ -18,10 +21,6 @@ import { ActionMeta, MultiValue } from "react-select";
 
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
-import { ValidationError } from "class-validator";
-import SelectField, { IOption } from "@Front/Components/DesignSystem/Form/SelectField";
-import TextField from "@Front/Components/DesignSystem/Form/TextField";
-import TextAreaField from "@Front/Components/DesignSystem/Form/TextareaField";
 
 type IFormValues = {
 	folder_number: string;
@@ -273,7 +272,6 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 		try {
 			await officeFolderForm.validateOrReject?.({ groups: ["createFolder"], forbidUnknownValues: false });
 		} catch (validationErrors) {
-			console.log(validationErrors);
 			this.setState({
 				validationError: validationErrors as ValidationError[],
 			});
@@ -285,22 +283,9 @@ class CreateFolderClass extends BasePage<IPropsClass, IState> {
 			if (!newOfficeFolder) return;
 			this.props.router.push(`/folders/${newOfficeFolder.uid}`);
 		} catch (backError: any) {
-			if(backError.target && backError.property){
-				
-				this.setState({
-					validationError: backError as ValidationError[],
-				});
-			}else{
-				console.error(backError);
-				this.setState({
-					validationError: [{
-						constraints: {
-							unique: "Le numéro de dossier est déjà utilisé"
-						},
-						property: "folder_number",
-					} as ValidationError],
-				});
-			}
+			this.setState({
+				validationError: backError as ValidationError[],
+			});
 		}
 	}