From 6fb40f9f01d4d30c7e7523e2ff464c4680f95a46 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Wed, 19 Apr 2023 14:16:52 +0200
Subject: [PATCH] :sparkles: Initializing page

---
 .../Components/DesignSystem/Modal/index.tsx   |  10 +-
 .../DefaultDoubleSidePage/index.tsx           |   4 +-
 .../Folder/AskDocuments/classes.module.scss   |  49 ++++
 .../Layouts/Folder/AskDocuments/index.tsx     | 215 ++++++++++++++++++
 .../Layouts/Folder/CreateFolder/index.tsx     |   2 +-
 .../folder/[uid]/ask-documents/index.tsx      |   5 +
 6 files changed, 278 insertions(+), 7 deletions(-)
 create mode 100644 src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss
 create mode 100644 src/front/Components/Layouts/Folder/AskDocuments/index.tsx
 create mode 100644 src/pages/folder/[uid]/ask-documents/index.tsx

diff --git a/src/front/Components/DesignSystem/Modal/index.tsx b/src/front/Components/DesignSystem/Modal/index.tsx
index 802af1a7..72b208c6 100644
--- a/src/front/Components/DesignSystem/Modal/index.tsx
+++ b/src/front/Components/DesignSystem/Modal/index.tsx
@@ -1,12 +1,12 @@
+import CrossIcon from "@Assets/Icons/cross.svg";
+import Image from "next/image";
 import React from "react";
+
+import Typography, { ITypo } from "../Typography";
 import classes from "./classes.module.scss";
 import Footer from "./Elements/Footer";
 import Header from "./Elements/Header";
-
 import Loader from "./Elements/Loader";
-import Typography, { ITypo } from "../Typography";
-import CrossIcon from "@Assets/Icons/cross.svg";
-import Image from "next/image";
 
 export type IProps = {
 	closeBtn?: boolean;
@@ -82,7 +82,7 @@ export default class Modal extends React.Component<IProps, IState> {
 			this.setState({
 				willClose: false,
 			});
-			this.props.onClose();
+			
 		}, this.props.animationDelay);
 	}
 }
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
index b86d5071..e76a0821 100644
--- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/index.tsx
@@ -15,6 +15,7 @@ type IProps = {
 	scrollTop: number | null;
 	image: StaticImageData;
 	type: "background" | "image";
+	showHeader: boolean;
 };
 
 type IState = {};
@@ -23,12 +24,13 @@ export default class DefaultDoubleSidePage extends React.Component<IProps, IStat
 	public static defaultProps = {
 		scrollTop: 0,
 		type: "background",
+		showHeader: false,
 	};
 
 	public override render(): JSX.Element {
 		return (
 			<div className={classes["root"]}>
-				<Header isUserConnected={false} />
+				<Header isUserConnected={this.props.showHeader} />
 				<div className={classes["content"]}>
 					<div className={classNames(classes["sides"], classes["side-left"])}>{this.props.children}</div>
 					{this.props.type === "image" && (
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss
new file mode 100644
index 00000000..d8635d4c
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/AskDocuments/classes.module.scss
@@ -0,0 +1,49 @@
+@import "@Themes/constants.scss";
+
+.root {
+	margin: 64px;
+	width: 530px;
+
+	@media (max-width: $screen-l) {
+		width: 100%;
+		margin: 64px 0;
+		padding: 0 64px;
+	}
+
+	@media (max-width: $screen-m) {
+		padding: 0 16px 0 16px;
+	}
+
+	.title {
+		margin-top: 24px;
+	}
+
+	.subtitle {
+		margin-top: 32px;
+	}
+
+	.form-container {
+		margin-top: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: 24px;
+	}
+
+	.access-container {
+		margin-top: 16px;
+
+		.radio-container {
+			margin-top: 16px;
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+		}
+	}
+
+	.collaborators-container {
+		margin-top: 32px;
+	}
+	.buttons-container {
+		margin-top: 32px;
+	}
+}
diff --git a/src/front/Components/Layouts/Folder/AskDocuments/index.tsx b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
new file mode 100644
index 00000000..015820e4
--- /dev/null
+++ b/src/front/Components/Layouts/Folder/AskDocuments/index.tsx
@@ -0,0 +1,215 @@
+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 Confirm from "@Front/Components/DesignSystem/Modal/Confirm";
+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 DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
+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;
+	isCreateDocumentModalVisible: boolean;
+};
+export default class AskDocuments extends BasePage<IProps, IState> {
+	private collaboratorsOptions: IOption[] = [
+		{ label: "John Doe", value: "john_doe" },
+		{ label: "Éric Dupont", value: "eric_dupont" },
+		{ label: "Julien Doe", value: "julien_doe" },
+		{ label: "Nathalie Costa", value: "nathalie_costa" },
+		{ label: "Max Durant", value: "max_durant" },
+		{ label: "Jane Doe", value: "jane_doe" },
+	];
+
+	private actsOptions: IOption[] = [
+		{ label: "Divorce", value: "divorce" },
+		{ 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: [],
+			},
+			isCreateDocumentModalVisible: false,
+		};
+
+		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);
+	}
+
+	public override render(): JSX.Element {
+		return (
+			<DefaultTemplate title={"Dossier"}>
+				<div className={classes["root"]}>
+					<BackArrow />
+					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
+						Demander des documents
+					</Typography>
+					<Form onSubmit={this.onFormSubmit}>
+						<div className={classes["form-container"]}>
+							<InputField
+								name="folder_number"
+								fakeplaceholder="Numéro de dossier"
+								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}>
+								Accès au dossier
+							</Typography>
+							<div className={classes["radio-container"]}>
+								<RadioBox name="file_access" defaultChecked onChange={this.radioOnChange} value="whole_office">
+									Sélectionner tout l'office
+								</RadioBox>
+								<RadioBox name="file_access" onChange={this.radioOnChange} value="select_collaborators">
+									Sélectionner certains collaborateurs
+								</RadioBox>
+							</div>
+							{this.state.folder_access === "select_collaborators" && (
+								<div className={classes["collaborators-container"]}>
+									<MultiSelect
+										options={this.collaboratorsOptions}
+										placeholder="Sélectionner les collaborateurs"
+										onChange={this.onCollaboratorsChange}
+										defaultValue={this.state.formValues.collaborators ?? []}
+									/>
+								</div>
+							)}
+							<div className={classes["buttons-container"]}>
+								<Button fullwidth disabled={!this.isFormSubmittable()} type="submit">
+									Créer un dossier
+								</Button>
+							</div>
+						</div>
+					</Form>
+					<Confirm
+						isOpen={this.state.isCreateDocumentModalVisible}
+						onClose={() => {}}
+						onAccept={() => {}}
+						closeBtn
+						header={"Créer un type de document"}
+						cancelText={"Annuler"}
+						confirmText={"Ajouter"}>
+						Blabla
+					</Confirm>
+				</div>
+			</DefaultTemplate>
+		);
+	}
+
+	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,
+		});
+	}
+}
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
index ce1e16e8..51d2a622 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -68,7 +68,7 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 
 	public override render(): JSX.Element {
 		return (
-			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image">
+			<DefaultDoubleSidePage title={"Dossier"} image={RightImage} type="image" showHeader={true}>
 				<div className={classes["root"]}>
 					<BackArrow />
 					<Typography typo={ITypo.H1} color={ITypoColor.BLACK} className={classes["title"]}>
diff --git a/src/pages/folder/[uid]/ask-documents/index.tsx b/src/pages/folder/[uid]/ask-documents/index.tsx
new file mode 100644
index 00000000..62f03195
--- /dev/null
+++ b/src/pages/folder/[uid]/ask-documents/index.tsx
@@ -0,0 +1,5 @@
+import AskDocuments from "@Front/Components/Layouts/Folder/AskDocuments";
+
+export default function Route() {
+	return <AskDocuments />;
+}