✨ handle change manage collaborators

src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx

@@ -5,21 +5,97 @@ import Form from "@Front/Components/DesignSystem/Form";
 import CheckBox from "@Front/Components/DesignSystem/CheckBox";
 import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
 import { useCallback, useEffect, useState } from "react";
-import { Subscription } from "le-coffre-resources/dist/Admin";
+import User, { Subscription } from "le-coffre-resources/dist/Admin";
 import JwtService from "@Front/Services/JwtService/JwtService";
 import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
 
 export default function SubscriptionManageCollaborators() {
 	const [subscription, setSubscription] = useState<Subscription | null>(null);
+	const [availableCollaborators, setAvailableCollaborators] = useState<User[]>([
+		{
+			created_at: new Date("2021-09-29T14:00:00.000Z"),
+			uid: "1",
+			idNot: "1",
+			updated_at: new Date("2021-09-29T14:00:00.000Z"),
+			contact: {
+				civility: "M",
+				created_at: new Date("2021-09-29T14:00:00.000Z"),
+				email: "jean.dupont@gmail.com",
+				first_name: "Jean",
+				last_name: "Dupont",
+				updated_at: new Date("2021-09-29T14:00:00.000Z"),
+			},
+		},
+		{
+			created_at: new Date("2021-09-29T14:00:00.000Z"),
+			uid: "2",
+			idNot: "1",
+			updated_at: new Date("2021-09-29T14:00:00.000Z"),
+			contact: {
+				civility: "M",
+				created_at: new Date("2021-09-29T14:00:00.000Z"),
+				email: "jean.dupont@gmail.com",
+				first_name: "Jean",
+				last_name: "Dupont",
+				updated_at: new Date("2021-09-29T14:00:00.000Z"),
+			},
+		},
+
+		{
+			created_at: new Date("2021-09-29T14:00:00.000Z"),
+			uid: "3",
+			idNot: "1",
+			updated_at: new Date("2021-09-29T14:00:00.000Z"),
+			contact: {
+				civility: "M",
+				created_at: new Date("2021-09-29T14:00:00.000Z"),
+				email: "jean.dupont@gmail.com",
+				first_name: "Jean",
+				last_name: "Dupont",
+				updated_at: new Date("2021-09-29T14:00:00.000Z"),
+			},
+		},
+		{
+			created_at: new Date("2021-09-29T14:00:00.000Z"),
+			uid: "4",
+			idNot: "1",
+			updated_at: new Date("2021-09-29T14:00:00.000Z"),
+			contact: {
+				civility: "M",
+				created_at: new Date("2021-09-29T14:00:00.000Z"),
+				email: "jean.dupont@gmail.com",
+				first_name: "Jean",
+				last_name: "Dupont",
+				updated_at: new Date("2021-09-29T14:00:00.000Z"),
+			},
+		},
+	]);
+	const [selectedCollaborators, setSelectedCollaborators] = useState<string[]>([]);
 
 	const loadSubscription = useCallback(async () => {
 		const jwt = JwtService.getInstance().decodeJwt();
 		const subscription = await Subscriptions.getInstance().get({ where: { office: { uid: jwt?.office_Id } } });
 		console.log(subscription);
 		if (!subscription[0]) return;
+		subscription[0].seats?.forEach((seat) => setSelectedCollaborators((prev) => [...prev, seat.user.uid!]));
 		setSubscription(subscription[0]);
 	}, []);
 
+	const handleChange = useCallback(
+		(event: React.ChangeEvent<HTMLInputElement>) => {
+			if (!subscription) return;
+			const value = event.target.value;
+			if (selectedCollaborators.includes(value)) {
+				setSelectedCollaborators((prev) => prev.filter((collaborator) => collaborator !== value));
+			} else {
+				if (selectedCollaborators.length <= subscription.nb_seats!) {
+					setSelectedCollaborators((prev) => [...prev, value]);
+				}
+			}
+		},
+		[selectedCollaborators, subscription],
+	);
+
 	useEffect(() => {
 		loadSubscription();
 	}, [loadSubscription]);
@@ -36,68 +112,21 @@ export default function SubscriptionManageCollaborators() {
 					</Typography>
 					<Form>
 						<div className={classes["collaborators-container"]}>
-							<CheckBox
+							{availableCollaborators.map((collaborator) => (
-								option={{
+								<CheckBox
-									label: "Jean Dupont",
+									key={collaborator.uid}
-									value: "Jean Dupont",
+									option={{
-								}}
+										label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name,
-								name="collaborators"
+										value: collaborator.uid,
-							/>
+									}}
-							<CheckBox
+									checked={selectedCollaborators.includes(collaborator.uid!)}
-								option={{
+									onChange={handleChange}
-									label: "Jean Dupont",
+									name="collaborators"
-									value: "Jean Dupont",
+								/>
-								}}
+							))}
-								name="collaborators"
-							/>
-							<CheckBox
-								option={{
-									label: "Jean Dupont",
-									value: "Jean Dupont",
-								}}
-								name="collaborators"
-								checked
-							/>
-							<CheckBox
-								option={{
-									label: "Jean Dupont",
-									value: "Jean Dupont",
-								}}
-								name="collaborators"
-							/>
-							<CheckBox
-								option={{
-									label: "Jean Dupont",
-									value: "Jean Dupont",
-								}}
-								name="collaborators"
-								checked
-							/>
-							<CheckBox
-								option={{
-									label: "Jean Dupont",
-									value: "Jean Dupont",
-								}}
-								name="collaborators"
-								checked
-							/>
-							<CheckBox
-								option={{
-									label: "Jean Dupont",
-									value: "Jean Dupont",
-								}}
-								name="collaborators"
-							/>
-							<CheckBox
-								option={{
-									label: "Jean Dupont",
-									value: "Jean Dupont",
-								}}
-								name="collaborators"
-							/>
 						</div>
 						<Typography typo={ITypo.CAPTION_14} color={ITypoColor.BLACK}>
-							7 collaborateurs sélectionnés
+							{selectedCollaborators.length} collaborateurs sélectionnés
 						</Typography>
 						<div className={classes["buttons-container"]}>
 							<Button variant={EButtonVariant.PRIMARY} fullwidth>