From 100a0fcdaabf9e273bc19a6a0f420ba00106a422 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 17 Apr 2023 17:04:59 +0200
Subject: [PATCH 1/2] :sparkles: Page done

---
 .../DesignSystem/Button/classes.module.scss   |  2 +-
 .../Components/DesignSystem/Button/index.tsx  | 15 +++--
 .../DesignSystem/RadioBox/index.tsx           |  9 ++-
 .../Components/Layouts/DesignSystem/index.tsx |  6 +-
 .../Folder/CreateFolder/classes.module.scss   |  7 ++
 .../Layouts/Folder/CreateFolder/index.tsx     | 64 +++++++++++++++----
 6 files changed, 80 insertions(+), 23 deletions(-)

diff --git a/src/front/Components/DesignSystem/Button/classes.module.scss b/src/front/Components/DesignSystem/Button/classes.module.scss
index d0774f39..cc21022a 100644
--- a/src/front/Components/DesignSystem/Button/classes.module.scss
+++ b/src/front/Components/DesignSystem/Button/classes.module.scss
@@ -90,7 +90,7 @@
 		}
 	}
 
-	&[fullwidth="true"] {
+	&[fullwidthattr="true"] {
 		width: 100%;
 		flex: 1;
 	}
diff --git a/src/front/Components/DesignSystem/Button/index.tsx b/src/front/Components/DesignSystem/Button/index.tsx
index 6e710213..5c6e1cd8 100644
--- a/src/front/Components/DesignSystem/Button/index.tsx
+++ b/src/front/Components/DesignSystem/Button/index.tsx
@@ -13,7 +13,7 @@ type IProps = {
 	onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined;
 	children?: React.ReactNode;
 	variant?: EButtonVariant;
-	fullwidth?: "true" | "false";
+	fullwidth?: boolean;
 	icon?: string;
 	iconstyle?: CSSProperties;
 	disabled?: boolean;
@@ -23,12 +23,12 @@ type IProps = {
 };
 
 export default function Button(props: IProps) {
-	const {
+	let {
 		variant = EButtonVariant.PRIMARY,
 		disabled = false,
 		type = "button",
 		isloading = "false",
-		fullwidth = "false",
+		fullwidth = false,
 		iconposition = "right",
 		onClick,
 		children,
@@ -36,10 +36,13 @@ export default function Button(props: IProps) {
 		iconstyle,
 	} = props;
 
-	const attributes = { ...props, variant, disabled, type, isloading, fullwidth };
+	const fullwidthattr = fullwidth.toString();
+	const isloadingattr = isloading.toString();
+
+	const attributes = { ...props, variant, disabled, type, isloadingattr, fullwidthattr };
 	delete attributes.icon;
-	delete attributes.iconStyle;
-	delete attributes.iconPosition;
+	delete attributes.iconstyle;
+	delete attributes.iconposition;
 	return (
 		<button {...attributes} onClick={onClick} className={classes["root"]} type={type}>
 			{icon && iconposition === "left" && <Image src={icon} style={iconstyle} alt={"button icon"} />}
diff --git a/src/front/Components/DesignSystem/RadioBox/index.tsx b/src/front/Components/DesignSystem/RadioBox/index.tsx
index 2e13a657..5db4f30e 100644
--- a/src/front/Components/DesignSystem/RadioBox/index.tsx
+++ b/src/front/Components/DesignSystem/RadioBox/index.tsx
@@ -9,6 +9,7 @@ type IProps = {
 	toolTip?: string;
 	defaultChecked?: boolean;
 	onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+	value: string;
 };
 
 export default class RadioBox extends React.Component<IProps> {
@@ -16,7 +17,13 @@ export default class RadioBox extends React.Component<IProps> {
 		return (
 			<Typography typo={ITypo.P_ERR_18} color={ITypoColor.BLACK}>
 				<label className={classes["root"]}>
-					<input type="radio" name={this.props.name} defaultChecked={this.props.defaultChecked} onChange={this.props.onChange} />
+					<input
+						type="radio"
+						name={this.props.name}
+						defaultChecked={this.props.defaultChecked}
+						onChange={this.props.onChange}
+						value={this.props.value}
+					/>
 					{this.props.children}
 					{this.props.toolTip && <Tooltip className={classes["tooltip"]} text={this.props.toolTip} />}
 				</label>
diff --git a/src/front/Components/Layouts/DesignSystem/index.tsx b/src/front/Components/Layouts/DesignSystem/index.tsx
index 66327d96..ae937e9b 100644
--- a/src/front/Components/Layouts/DesignSystem/index.tsx
+++ b/src/front/Components/Layouts/DesignSystem/index.tsx
@@ -118,10 +118,12 @@ export default class DesignSystem extends BasePage<IProps, IState> {
 						<div className={classes["sub-section"]}>
 							<Typography typo={ITypo.H3}>RadioBox component</Typography>
 						</div>
-						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip">
+						<RadioBox name="RadioBox" toolTip="Radiobox with tooltip" value="box_1">
 							Radio Box 1
 						</RadioBox>
-						<RadioBox name="RadioBox">Radio Box 2</RadioBox>
+						<RadioBox name="RadioBox" value="box_2">
+							Radio Box 2
+						</RadioBox>
 					</div>
 					<div className={classes["section"]}>
 						<div className={classes["sub-section"]}>
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
index dc540580..e3450ab9 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
@@ -26,4 +26,11 @@
 			gap: 16px;
 		}
 	}
+
+	.collaborators-container {
+		margin-top: 32px;
+	}
+	.buttons-container {
+		margin-top: 32px;
+	}
 }
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
index 541516dc..7ad48d93 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
+++ b/src/front/Components/Layouts/Folder/CreateFolder/index.tsx
@@ -6,14 +6,38 @@ 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 from "@Front/Components/DesignSystem/Select";
+import Select, { IOption } from "@Front/Components/DesignSystem/Select";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
+import Button from "@Front/Components/DesignSystem/Button";
+import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 
 type IProps = {};
-type IState = {};
+type IState = {
+	folder_access: string;
+};
 export default class CreateFolder 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: "",
+		};
+
+		this.radioOnChange = this.radioOnChange.bind(this);
 	}
 
 	// TODO: Message if the user has not created any folder yet
@@ -32,15 +56,7 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 						<div className={classes["form-container"]}>
 							<InputField name="folder_number" fakeplaceholder="Numéro de dossier" type="number" />
 							<InputField name="entitled" fakeplaceholder="Intitulé" />
-							<Select
-								options={[
-									{ label: "Divorce", value: "divorce" },
-									{ label: "Succession", value: "succession" },
-									{ label: "Vente immobilière", value: "vente_immobiliere" },
-								]}
-								onChange={() => {}}
-								placeholder={"Type d’acte"}
-							/>
+							<Select options={this.actsOptions} onChange={() => {}} placeholder={"Type d’acte"} />
 							<InputField name="personal_note" fakeplaceholder="Note personnelle" textarea />
 						</div>
 						<div className={classes["access-container"]}>
@@ -48,10 +64,25 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 								Accès au dossier
 							</Typography>
 							<div className={classes["radio-container"]}>
-								<RadioBox name="file_access" defaultChecked>
+								<RadioBox name="file_access" defaultChecked onChange={this.radioOnChange} value="whole_office">
 									Sélectionner tout l'office
 								</RadioBox>
-								<RadioBox name="file_access">Sélectionner certains collaborateurs</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 pouvant accéder au dossier"
+									/>
+								</div>
+							)}
+							<div className={classes["buttons-container"]}>
+								<Button fullwidth disabled={true}>
+									Créer un dossier
+								</Button>
 							</div>
 						</div>
 					</Form>
@@ -59,5 +90,12 @@ export default class CreateFolder extends BasePage<IProps, IState> {
 			</DefaultDoubleSidePage>
 		);
 	}
+
 	public override async componentDidMount() {}
+
+	private radioOnChange(e: React.ChangeEvent<HTMLInputElement>) {
+		this.setState({
+			folder_access: e.target.value,
+		});
+	}
 }

From e7354c74e476a8a4a839c767504de4f168c0dbb6 Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Mon, 17 Apr 2023 17:18:16 +0200
Subject: [PATCH 2/2] :sparkles: Responsive almost done

---
 .../Form/Elements/InputField/classes.module.scss          | 5 ++---
 .../DefaultDoubleSidePage/classes.module.scss             | 4 +++-
 .../Layouts/Folder/CreateFolder/classes.module.scss       | 8 +++++++-
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss b/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss
index dc8f366a..7b70c608 100644
--- a/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss
+++ b/src/front/Components/DesignSystem/Form/Elements/InputField/classes.module.scss
@@ -21,7 +21,7 @@
 		align-items: center;
 		padding: 24px;
 		gap: 10px;
-		width: 530px;
+		width: 100%;
 		height: 70px;
 		border: 1px solid $grey-medium;
 
@@ -98,7 +98,7 @@
 	padding: 24px;
 	gap: 10px;
 
-	width: 530px;
+	width: 100%;
 	height: 70px;
 	border: 1px solid $grey-medium;
 
@@ -111,7 +111,6 @@
 		position: absolute;
 		background: $white;
 		transform: translateY(35px);
-		transition: transform 0.3s ease-in-out;
 	}
 
 	&:focus {
diff --git a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
index 7388ab8c..76ecc3ff 100644
--- a/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
+++ b/src/front/Components/LayoutTemplates/DefaultDoubleSidePage/classes.module.scss
@@ -15,7 +15,9 @@
 		}
 		.sides {
 			width: 50%;
-
+			@media (max-width: $screen-m) {
+				width: 100%;
+			}
 			&.image-container {
 				display: flex;
 				align-items: center;
diff --git a/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
index e3450ab9..ddfaeb8f 100644
--- a/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
+++ b/src/front/Components/Layouts/Folder/CreateFolder/classes.module.scss
@@ -1,6 +1,12 @@
+@import "@Themes/constants.scss";
+
 .root {
-	margin: 64px 0 0 64px;
+	padding: 64px 0 0 64px;
 	width: 530px;
+	@media (max-width: $screen-m) {
+		width: 100%;
+		padding: 64px 16px 0 16px;
+	}
 	.title {
 		margin-top: 24px;
 	}