From 456fd1d9c25293ef2dca9f02b1b564481c3dce5a Mon Sep 17 00:00:00 2001
From: Maxime Lalo <maxime.lalo.pro@gmail.com>
Date: Tue, 19 Sep 2023 15:34:49 +0200
Subject: [PATCH] :bug: Fix pre selected users

---
 .../UpdateFolderCollaborators/index.tsx       | 108 +++++++++++-------
 1 file changed, 65 insertions(+), 43 deletions(-)

diff --git a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
index 4c3ea3ea..02245906 100644
--- a/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
+++ b/src/front/Components/Layouts/Folder/UpdateFolderCollaborators/index.tsx
@@ -24,7 +24,9 @@ type IState = {
 	selectedFolder: OfficeFolder | null;
 	selectedOption?: ERadioBoxValue;
 	availableCollaborators: User[];
+	defaultCheckedAllOffice: boolean;
 	selectedCollaborators: readonly IOption[];
+	loading: boolean;
 };
 
 enum ERadioBoxValue {
@@ -39,6 +41,9 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 			selectedFolder: null,
 			availableCollaborators: [],
 			selectedCollaborators: [],
+			defaultCheckedAllOffice: false,
+			selectedOption: ERadioBoxValue.SELECTION,
+			loading: true,
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
@@ -55,6 +60,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 				value: collaborator.uid,
 			};
 		});
+
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
@@ -63,34 +69,44 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 					</div>
 					<Typography typo={ITypo.H1Bis}>Modifier les collaborateurs</Typography>
 
-					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
-						<div className={classes["content"]}>
-							<RadioBox name="office" value={ERadioBoxValue.ALL} defaultChecked onChange={this.onSelectedOptionAllOffice}>
-								Tout l'office
-							</RadioBox>
-							<RadioBox name="office" value={ERadioBoxValue.SELECTION} onChange={this.onSelectedOptionSpecific}>
-								Sélectionner des collaborateurs
-							</RadioBox>
-						</div>
-
-						{this.state.selectedOption === ERadioBoxValue.SELECTION && (
-							<div className={classes["sub-content"]}>
-								<MultiSelect
-									onChange={this.onChangeSelectedCollaborators}
-									options={selectOptions}
-									placeholder="Collaborateurs"
-									defaultValue={this.state.selectedCollaborators}
-								/>
+					{!this.state.loading && (
+						<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
+							<div className={classes["content"]}>
+								<RadioBox
+									name="office"
+									value={ERadioBoxValue.ALL}
+									defaultChecked={this.state.defaultCheckedAllOffice}
+									onChange={this.onSelectedOptionAllOffice}>
+									Tout l'office
+								</RadioBox>
+								<RadioBox
+									name="office"
+									value={ERadioBoxValue.SELECTION}
+									defaultChecked={!this.state.defaultCheckedAllOffice}
+									onChange={this.onSelectedOptionSpecific}>
+									Sélectionner des collaborateurs
+								</RadioBox>
 							</div>
-						)}
 
-						<div className={classes["button-container"]}>
-							<Link href={backwardPath} className={classes["cancel-button"]}>
-								<Button variant={EButtonVariant.GHOST}>Annuler</Button>
-							</Link>
-							<Button type="submit">Enregistrer</Button>
-						</div>
-					</Form>
+							{this.state.selectedOption === ERadioBoxValue.SELECTION && (
+								<div className={classes["sub-content"]}>
+									<MultiSelect
+										onChange={this.onChangeSelectedCollaborators}
+										options={selectOptions}
+										placeholder="Collaborateurs"
+										defaultValue={this.state.selectedCollaborators}
+									/>
+								</div>
+							)}
+
+							<div className={classes["button-container"]}>
+								<Link href={backwardPath} className={classes["cancel-button"]}>
+									<Button variant={EButtonVariant.GHOST}>Annuler</Button>
+								</Link>
+								<Button type="submit">Enregistrer</Button>
+							</div>
+						</Form>
+					)}
 				</div>
 			</DefaultNotaryDashboard>
 		);
@@ -121,27 +137,33 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 					value: collaborator.uid,
 				};
 			});
-			this.setState({ selectedCollaborators: preSelectedCollaborators });
+
+			// no need to pass query 'where' param here, default query for notaries include only users which are in the same office as the caller
+			const userQuery: IGetUsersParams = {
+				include: {
+					contact: {
+						select: {
+							first_name: true,
+							last_name: true,
+						},
+					},
+				},
+			};
+
+			const availableCollaborators = await Users.getInstance().get(userQuery);
+
+			this.setState({
+				loading: false,
+				availableCollaborators,
+				selectedCollaborators: preSelectedCollaborators,
+				defaultCheckedAllOffice: preSelectedCollaborators.length === availableCollaborators.length,
+				selectedOption:
+					preSelectedCollaborators.length === availableCollaborators.length ? ERadioBoxValue.ALL : ERadioBoxValue.SELECTION,
+			});
 		} catch (error) {
 			this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
 			return;
 		}
-
-		// no need to pass query 'where' param here, default query for notaries include only users which are in the same office as the caller
-		const userQuery: IGetUsersParams = {
-			include: {
-				contact: {
-					select: {
-						first_name: true,
-						last_name: true,
-					},
-				},
-			},
-		};
-
-		const availableCollaborators = await Users.getInstance().get(userQuery);
-		console.log(availableCollaborators)
-		this.setState({ availableCollaborators });
 	}
 
 	private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {