Add all office users specific user to the folder + remove them

src/front/Api/LeCoffreApi/SuperAdmin/Customers/Customers.ts

@@ -5,7 +5,8 @@ import BaseSuperAdmin from "../BaseSuperAdmin";
 
 // TODO Type get query params -> Where + inclue + orderby
 export interface IGetCustomersparams {
-	q?: {};
+	where?:{},
+	include?:{},
 }
 
 // TODO Type getbyuid query params

src/front/Api/LeCoffreApi/SuperAdmin/Folders/Folders.ts

@@ -6,6 +6,7 @@ import { EFolderStatus } from "le-coffre-resources/dist/Customer/OfficeFolder";
 // TODO Type get query params -> Where + inclue + orderby
 export interface IGetFoldersParams {
 	q?: {
+		select?: {};
 		where?: {};
 		include?: {};
 	};
@@ -37,6 +38,7 @@ export type IPutFoldersParams = {
 	description?: OfficeFolder["description"];
 	archived_description?: OfficeFolder["archived_description"];
 	status?: OfficeFolder["status"];
+	office_folder_has_stakeholder?: OfficeFolder["office_folder_has_stakeholder"];
 };
 
 @Service()

src/front/Api/LeCoffreApi/SuperAdmin/Users/Users.ts

@@ -4,7 +4,9 @@ import BaseSuperAdmin from "../BaseSuperAdmin";
 
 // TODO Type get query params -> Where + inclue + orderby
 export interface IGetUsersparams {
-	q?: {};
+	where?:{},
+	include?:{},
+	select?:{},
 }
 
 // TODO Type getbyuid query params
@@ -40,7 +42,8 @@ export default class Users extends BaseSuperAdmin {
 	 */
 	public async get(q: IGetUsersparams): Promise<User[]> {
 		const url = new URL(this.baseURl);
-		Object.entries(q).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
+		const query = { q };
+		Object.entries(query).forEach(([key, value]) => url.searchParams.set(key, JSON.stringify(value)));
 		try {
 			return await this.getRequest<User[]>(url);
 		} catch (err) {

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

@@ -3,21 +3,28 @@ import Form from "@Front/Components/DesignSystem/Form";
 import Typography, { ITypo } from "@Front/Components/DesignSystem/Typography";
 import BackArrow from "@Front/Components/Elements/BackArrow";
 import DefaultNotaryDashboard, { IDashBoardFolder } from "@Front/Components/LayoutTemplates/DefaultNotaryDashboard";
-
 import BasePage from "../../Base";
 import classes from "./classes.module.scss";
 import Link from "next/link";
-import { useRouter } from "next/router";
+import { NextRouter, useRouter } from "next/router";
 import RadioBox from "@Front/Components/DesignSystem/RadioBox";
 import MultiSelect from "@Front/Components/DesignSystem/MultiSelect";
 import Module from "@Front/Config/Module";
+import Users, { IGetUsersparams } from "@Front/Api/LeCoffreApi/SuperAdmin/Users/Users";
+import Folders from "@Front/Api/LeCoffreApi/SuperAdmin/Folders/Folders";
+import { OfficeFolderHasStakeholder } from "le-coffre-resources/dist/Customer";
+import { IOption } from "@Front/Components/DesignSystem/Select";
+import User from "le-coffre-resources/dist/Notary";
 
 type IPropsClass = {
 	selectedFolderUid: string;
+	router: NextRouter;
 };
 type IState = {
 	selectedFolder: IDashBoardFolder | null;
 	selectedOption?: ERadioBoxValue;
+	availableCollaborators: User[];
+	selectedCollaborators: readonly IOption[];
 };
 
 enum ERadioBoxValue {
@@ -30,19 +37,24 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 		super(props);
 		this.state = {
 			selectedFolder: null,
+			availableCollaborators: [],
+			selectedCollaborators: [],
 		};
 		this.onSelectedFolder = this.onSelectedFolder.bind(this);
 		this.onSelectedOptionAllOffice = this.onSelectedOptionAllOffice.bind(this);
 		this.onSelectedOptionSpecific = this.onSelectedOptionSpecific.bind(this);
+		this.onFormSubmit = this.onFormSubmit.bind(this);
+		this.onChangeSelectedCollaborators = this.onChangeSelectedCollaborators.bind(this);
 	}
 	public override render(): JSX.Element {		
 		const foldersInformationPath = Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path;
 		const backwardPath = foldersInformationPath.replace("[folderUid]", this.props.selectedFolderUid);
-		const selectOptions = [
-			{ value: "adazzdsqaad", label: "John Doe" },
-			{ value: "azdzafzad", label: "Jahn Doe" },
-			{ value: "azdazkdazoaz", label: "Marcelino Doe" },
-		];
+		const selectOptions : IOption[]= this.state.availableCollaborators.map((collaborator) => {
+			return {
+				label: collaborator.contact.first_name + " " + collaborator.contact.last_name,
+				value: collaborator.uid,
+			}
+		})
 		return (
 			<DefaultNotaryDashboard title={"Ajouter client(s)"} onSelectedFolder={this.onSelectedFolder}>
 				<div className={classes["root"]}>
@@ -51,7 +63,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 					</div>
 					<Typography typo={ITypo.H1Bis}>Modifier les collaborateurs</Typography>
 
-					<Form className={classes["form"]}>
+					<Form className={classes["form"]} onSubmit={this.onFormSubmit}>
 						<div className={classes["content"]}>
 							<RadioBox name="office" value={ERadioBoxValue.ALL} defaultChecked onChange={this.onSelectedOptionAllOffice}>
 								Tout l'office
@@ -63,7 +75,7 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 
 						{this.state.selectedOption === ERadioBoxValue.SELECTION && (
 							<div className={classes["sub-content"]}>
-								<MultiSelect options={selectOptions} placeholder="Collaborateurs" />
+								<MultiSelect onChange={this.onChangeSelectedCollaborators} options={selectOptions} placeholder="Collaborateurs" defaultValue={this.state.selectedCollaborators}/>
 							</div>
 						)}
 
@@ -79,6 +91,59 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 		);
 	}
 
+	public override async componentDidMount(){
+		await this.getFolderAvailableCollaborators(this.props.selectedFolderUid);
+	}
+
+	private async getFolderAvailableCollaborators(folderUid: string){
+		const query = {
+			q: {
+				office: true,
+				office_folder_has_stakeholder: {
+					include: {
+						user_stakeholder: {
+							include: {
+								contact: true,
+							}
+						}
+					}
+				},
+			},
+		};	
+
+		let folder = null;
+		try {
+			folder = await Folders.getInstance().getByUid(folderUid, query);			
+			const preSelectedCollaborators : IOption[]= folder.office_folder_has_stakeholder!.map((collaborator) => {
+				return {
+					label: collaborator.user_stakeholder.contact.first_name + " " + collaborator.user_stakeholder.contact.last_name,
+					value: collaborator.user_stakeholder.uid,
+				}
+			})
+			this.setState({selectedCollaborators: preSelectedCollaborators})
+		} catch (error) {			
+			this.props.router.push(Module.getInstance().get().modules.pages["404"].props.path);
+			return;
+		}
+	
+		const userQuery: IGetUsersparams = {
+			where: { 
+				office_uid: folder.office.uid,
+			},
+			include:{
+				contact: {
+					select:{
+						first_name:true,
+						last_name:true,
+					}
+				}
+			}
+		};
+
+		const availableCollaborators = await Users.getInstance().get(userQuery);		
+		this.setState({availableCollaborators});
+	}
+
 	private onSelectedOptionAllOffice(event: React.ChangeEvent<HTMLInputElement>) {
 		if (event.target.value !== ERadioBoxValue.ALL) return;
 		this.setState({
@@ -86,6 +151,10 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 		});
 	}
 
+	private onChangeSelectedCollaborators(selectedCollaborators: readonly IOption[]) {
+		this.setState({ selectedCollaborators });
+	}
+
 	private onSelectedOptionSpecific(event: React.ChangeEvent<HTMLInputElement>) {
 		if (event.target.value !== ERadioBoxValue.SELECTION) return;
 		this.setState({
@@ -96,11 +165,28 @@ class UpdateFolderCollaboratorsClass extends BasePage<IPropsClass, IState> {
 	private onSelectedFolder(folder: IDashBoardFolder): void {
 		this.setState({ selectedFolder: folder });
 	}
+
+	private async onFormSubmit(e: React.FormEvent<HTMLFormElement> | null, values: { [key: string]: string }) {
+		try {
+			let collaboratorsUid : OfficeFolderHasStakeholder[];
+			if(this.state.selectedOption === ERadioBoxValue.SELECTION){
+				collaboratorsUid = this.state.selectedCollaborators.map((collaborator) => ({user_stakeholder: {uid: collaborator.value}} as OfficeFolderHasStakeholder));
+			}
+			else{
+				collaboratorsUid = this.state.availableCollaborators.map((collaborator) => ({user_stakeholder: {uid: collaborator.uid}} as OfficeFolderHasStakeholder));
+			}			
+			await Folders.getInstance().put(this.props.selectedFolderUid, {office_folder_has_stakeholder: collaboratorsUid});
+			this.props.router.push(Module.getInstance().get().modules.pages.Folder.pages.FolderInformation.props.path.replace("[folderUid]", this.props.selectedFolderUid));
+			
+		} catch (error) {
+			console.error(error)	
+		}
+	}
 }
 
 export default function UpdateFolderCollaborators() {
 	const router = useRouter();
 	let { folderUid } = router.query;
 	folderUid = folderUid as string;
-	return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} />;
+	return <UpdateFolderCollaboratorsClass selectedFolderUid={folderUid} router={router}/>;
 }