Feature/ora mt 262 create folder (#9)

src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss

@@ -28,6 +28,7 @@
 				background: var(--grey-soft);
 				.image {
 					width: 100%;
+					height: 100%;
 					object-fit: contain;
 				}
 			}

src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss

@@ -3,10 +3,18 @@
 .root {
 	margin: 64px;
 	width: 530px;
-	@media (max-width: $screen-m) {
+
+	@media (max-width: $screen-l) {
 		width: 100%;
-		margin: 64px 16px 0 16px;
+		margin: 0;
+		margin-top: 64px;
+		padding: 0 32px 0 32px;
 	}
+
+	@media (max-width: $screen-m) {
+		padding: 0 16px 0 16px;
+	}
+
 	.title {
 		margin-top: 24px;
 	}

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

@@ -1,19 +1,31 @@
-import BasePage from "../../Base";
-import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
-import classes from "./classes.module.scss";
-import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
 import RightImage from "@Front/Assets/images/create-folder/right-image.png";
-import BackArrow from "@Front/Components/Elements/BackArrow";
-import Form from "@Front/Components/DesignSystem/Form";
-import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
-import Select, { IOption } from "@Front/Components/DesignSystem/Select";
-import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import Button from "@Front/Components/DesignSystem/Button";
+import Form, { IApiFormErrors } from "@Front/Components/DesignSystem/Form";
+import InputField from "@Front/Components/DesignSystem/Form/Elements/InputField";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
+import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
+import Typography, { ITypo, ITypoColor } from "@Front/Components/DesignSystem/Typography";
+import BackArrow from "@Front/Components/Elements/BackArrow";
+import DefaultDoubleSidePage from "@Front/Components/LayoutTemplates/DefaultDoubleSidePage";
+import React from "react";
+import { ActionMeta, MultiValue } from "react-select";
+
+import BasePage from "../../Base";
+import classes from "./classes.module.scss";
+
+type IFormValues = {
+	folder_number: number;
+	entitled: string;
+	act_type: IOption | null;
+	personal_note: string;
+	collaborators: MultiValue<IOption>;
+};
 
 type IProps = {};
 type IState = {
 	folder_access: string;
+	formValues: IFormValues;
 };
 export default class CreateFolder extends BasePage<IProps, IState> {
 	private collaboratorsOptions: IOption[] = [
@@ -30,17 +42,30 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 		{ label: "Succession", value: "succession" },
 		{ label: "Vente immobilière", value: "vente_immobiliere" },
 	];
+
 	public constructor(props: IProps) {
 		super(props);
 
 		this.state = {
 			folder_access: "",
+			formValues: {
+				folder_number: NaN,
+				entitled: "",
+				act_type: null,
+				personal_note: "",
+				collaborators: [],
+			},
 		};
 
 		this.radioOnChange = this.radioOnChange.bind(this);
+		this.onFolderNumberChange = this.onFolderNumberChange.bind(this);
+		this.onEntitleChange = this.onEntitleChange.bind(this);
+		this.onActTypeChange = this.onActTypeChange.bind(this);
+		this.onPersonalNoteChange = this.onPersonalNoteChange.bind(this);
+		this.onCollaboratorsChange = this.onCollaboratorsChange.bind(this);
+		this.isFormSubmittable = this.isFormSubmittable.bind(this);
 	}
 
-	// TODO: Message if the user has not created any folder yet
 	public override render(): JSX.Element {
 		return (
 			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
@@ -52,12 +77,22 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 					<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH} className={classes["subtitle"]}>
 						Informations dossier
 					</Typography>
-					<Form>
+					<Form onSubmit={this.onFormSubmit}>
 						<div className={classes["form-container"]}>
-							<InputField name="folder_number" fakeplaceholder="Numéro de dossier" type="number" />
+							<InputField
-							<InputField name="entitled" fakeplaceholder="Intitulé" />
+								name="folder_number"
-							<Select options={this.actsOptions} onChange={() => {}} placeholder={"Type d’acte"} />
+								fakeplaceholder="Numéro de dossier"
-							<InputField name="personal_note" fakeplaceholder="Note personnelle" textarea />
+								type="number"
+								onChange={this.onFolderNumberChange}
+							/>
+							<InputField name="entitled" fakeplaceholder="Intitulé" onChange={this.onEntitleChange} />
+							<Select options={this.actsOptions} placeholder={"Type d’acte"} onChange={this.onActTypeChange} />
+							<InputField
+								name="personal_note"
+								fakeplaceholder="Note personnelle"
+								textarea
+								onChange={this.onPersonalNoteChange}
+							/>
 						</div>
 						<div className={classes["access-container"]}>
 							<Typography typo={ITypo.H3} color={ITypoColor.PURPLE_FLASH}>
@@ -76,11 +111,12 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 									<MultiSelect
 										options={this.collaboratorsOptions}
 										placeholder="Sélectionner les collaborateurs pouvant accéder au dossier"
+										onChange={this.onCollaboratorsChange}
 									/>
 								</div>
 							)}
 							<div className={classes["buttons-container"]}>
-								<Button fullwidth disabled={true}>
+								<Button fullwidth disabled={!this.isFormSubmittable()} type="submit">
 									Créer un dossier
 								</Button>
 							</div>
@@ -93,6 +129,76 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 
 	public override async componentDidMount() {}
 
+	private onFolderNumberChange(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			formValues: {
+				...this.state.formValues,
+				folder_number: parseInt(e.target.value),
+			},
+		});
+	}
+
+	private onEntitleChange(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			formValues: {
+				...this.state.formValues,
+				entitled: e.target.value,
+			},
+		});
+	}
+
+	private onActTypeChange(selectedOption: IOption) {
+		this.setState({
+			formValues: {
+				...this.state.formValues,
+				act_type: selectedOption,
+			},
+		});
+	}
+
+	private onPersonalNoteChange(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			formValues: {
+				...this.state.formValues,
+				personal_note: e.target.value,
+			},
+		});
+	}
+
+	private onCollaboratorsChange(newValue: MultiValue<IOption>, actionMeta: ActionMeta<IOption>) {
+		this.setState({
+			formValues: {
+				...this.state.formValues,
+				collaborators: newValue,
+			},
+		});
+	}
+
+	private onFormSubmit(
+		e: React.FormEvent<HTMLFormElement> | null,
+		values: {
+			[key: string]: string;
+		},
+		onApiErrors: (apiFormErrors: IApiFormErrors | null) => void,
+	) {}
+
+	private isFormSubmittable(): boolean {
+		if (
+			this.state.formValues.entitled === "" ||
+			this.state.formValues.personal_note === "" ||
+			Number.isNaN(this.state.formValues.folder_number) ||
+			this.state.formValues.act_type === null
+		) {
+			return false;
+		}
+
+		if (this.state.folder_access === "select_collaborators" && this.state.formValues.collaborators.length === 0) {
+			return false;
+		}
+
+		return true;
+	}
+
 	private radioOnChange(e: React.ChangeEvent<HTMLInputElement>) {
 		this.setState({
 			folder_access: e.target.value,