4nk/lecoffre-front
4
0
Fork 0
Code Issues 1 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

✨ handle change manage collaborators

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-05 10:32:25 +02:00
parent 52e1da8bd7
commit ff15c7cf95
1 changed files with 90 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

141
src/front/Components/Layouts/Subscription/Manage/SubscriptionManageCollaborators/index.tsx
View File

@ -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"]}>
{availableCollaborators.map((collaborator) => (
<CheckBox
key={collaborator.uid}
option={{
label: "Jean Dupont",
value: "Jean Dupont",
}}
name="collaborators"
/>
<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"
/>
<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",
label: collaborator.contact?.first_name + " " + collaborator.contact?.last_name,
value: collaborator.uid,
}}
checked={selectedCollaborators.includes(collaborator.uid!)}
onChange={handleChange}
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>