✨ Create folder refacto

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

@@ -1,49 +1,28 @@
 @import "@Themes/constants.scss";
 
 .root {
-	margin: 64px;
+	width: 472px;
-	width: 530px;
+	margin: 24px auto;
 
-	@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;
+	gap: var(--spacing-xl, 32px);
-	}
 
-	.access-container {
+	.form {
-		margin-top: 16px;
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-md, 16px);
+
+		.bottom-container {
+			display: flex;
+			flex-direction: column;
+			gap: var(--spacing-xl, 32px);
 
 			.radio-container {
-			margin-top: 16px;
 				display: flex;
 				flex-direction: column;
-			gap: 16px;
+				gap: var(--spacing-md, 16px);
 			}
 		}
-
-	.collaborators-container {
-		margin-top: 32px;
-	}
-	.buttons-container {
-		margin-top: 32px;
 	}
 }

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

@@ -1,4 +1,4 @@
-import backgroundImage from "@Assets/images/404-background-image.jpeg";
+import backgroundImage from "@Assets/images/background_refonte.svg";
 import DeedTypes from "@Front/Api/LeCoffreApi/Notary/DeedTypes/DeedTypes";
 import Folders from "@Front/Api/LeCoffreApi/Notary/Folders/Folders";
 import Users from "@Front/Api/LeCoffreApi/Notary/Users/Users";
@@ -21,6 +21,7 @@ import React, { useEffect, useState } from "react";
 import classes from "./classes.module.scss";
 import JwtService from "@Front/Services/JwtService/JwtService";
 import { DeedType } from "le-coffre-resources/dist/Notary";
+import { MultiValue } from "react-select";
 
 export default function CreateFolder(): JSX.Element {
 	/**
@@ -30,6 +31,7 @@ export default function CreateFolder(): JSX.Element {
 	const [availableDeedTypes, setAvailableDeedTypes] = useState<DeedType[]>([]);
 	const [collaborators, setCollaborators] = useState<User[]>([]);
 	const [validationError, setValidationError] = useState<ValidationError[]>([]);
+	const [selectedCollaborators, setSelectedCollaborators] = useState<User[]>([]);
 
 	/**
 	 * Hooks call
@@ -46,7 +48,6 @@ export default function CreateFolder(): JSX.Element {
 			[key: string]: any;
 		},
 	) => {
-		console.log(values);
 		const officeId = JwtService.getInstance().decodeJwt()?.office_Id;
 
 		const officeFolderForm = OfficeFolder.hydrate<OfficeFolder>({
@@ -62,7 +63,7 @@ export default function CreateFolder(): JSX.Element {
 				uid: officeId,
 			}),
 			customers: [],
-			stakeholders: collaborators,
+			stakeholders: folderAccess === "whole_office" ? collaborators : selectedCollaborators,
 		});
 
 		try {
@@ -86,6 +87,11 @@ export default function CreateFolder(): JSX.Element {
 	const radioOnChange = (e: React.ChangeEvent<HTMLInputElement>) =>
 		setFolderAccess(e.target.value as "whole_office" | "select_collaborators");
 
+	const onSelectedCollaboratorsChange = (values: MultiValue<IOption>) => {
+		const selectedCollaborators = collaborators.filter((collaborator) => values.some((value) => value.value === collaborator.uid));
+		setSelectedCollaborators(selectedCollaborators);
+	};
+
 	/**
 	 * UseEffect
 	 */
@@ -98,7 +104,10 @@ export default function CreateFolder(): JSX.Element {
 			.get({
 				include: { contact: true },
 			})
-			.then((users) => setCollaborators(users));
+			.then((users) => {
+				setCollaborators(users);
+				setSelectedCollaborators(users);
+			});
 	}, []);
 
 	/**
@@ -108,14 +117,16 @@ export default function CreateFolder(): JSX.Element {
 		<DefaultDoubleSidePage title={"Dossier"} image={backgroundImage} type="background" showHeader={true}>
 			<div className={classes["root"]}>
 				<BackArrow />
+				<div className={classes["header"]}>
 					<Typography typo={ETypo.DISPLAY_LARGE} color={ETypoColor.COLOR_GENERIC_BLACK} className={classes["title"]}>
 						Créer un dossier
 					</Typography>
 					<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500} className={classes["subtitle"]}>
-					Informations dossier
+						Informations du dossier
 					</Typography>
-				<Form onSubmit={onFormSubmit}>
+				</div>
-					<div className={classes["form-container"]}>
+
+				<Form onSubmit={onFormSubmit} className={classes["form"]}>
 					<TextField
 						name="folder_number"
 						placeholder="Numéro de dossier"
@@ -144,9 +155,9 @@ export default function CreateFolder(): JSX.Element {
 						required={false}
 					/>
 
-						<div className={classes["access-container"]}>
+					<div className={classes["bottom-container"]}>
 						<Typography typo={ETypo.TITLE_H5} color={ETypoColor.COLOR_PRIMARY_500}>
-								Accès au dossier
+							Donner l'accès au dossier
 						</Typography>
 						<div className={classes["radio-container"]}>
 							<RadioBox name="file_access" defaultChecked onChange={radioOnChange} value="whole_office">
@@ -165,6 +176,11 @@ export default function CreateFolder(): JSX.Element {
 											value: collaborator.uid,
 										})) as IOption[]
 									}
+									defaultValue={selectedCollaborators.map((collaborator) => ({
+										label: collaborator.contact?.last_name.concat(" ", collaborator.contact.first_name) as string,
+										value: collaborator.uid!,
+									}))}
+									onChange={onSelectedCollaboratorsChange}
 									placeholder="Sélectionner les collaborateurs"
 									validationError={validationError.find((error) => error.property === "stakeholders")}
 								/>
@@ -176,7 +192,6 @@ export default function CreateFolder(): JSX.Element {
 							</Button>
 						</div>
 					</div>
-					</div>
 				</Form>
 			</div>
 		</DefaultDoubleSidePage>