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

✨ connect manage collaborators

Browse Source
This commit is contained in:
Maxime Lalo 2024-04-04 17:07:46 +02:00
parent c777132077
commit e698f5a781
1 changed files with 103 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,92 +4,114 @@ import DefaultTemplate from "@Front/Components/LayoutTemplates/DefaultTemplate";
import Form from "@Front/Components/DesignSystem/Form"; import Form from "@Front/Components/DesignSystem/Form";
import CheckBox from "@Front/Components/DesignSystem/CheckBox"; import CheckBox from "@Front/Components/DesignSystem/CheckBox";
import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button"; import Button, { EButtonVariant } from "@Front/Components/DesignSystem/Button";
import { useCallback, useEffect, useState } from "react";
import { Subscription } from "le-coffre-resources/dist/Admin";
import { useRouter } from "next/router";
import JwtService from "@Front/Services/JwtService/JwtService";
import Subscriptions from "@Front/Api/LeCoffreApi/Admin/Subscriptions/Subscriptions";
export default function SubscriptionManageCollaborators() { export default function SubscriptionManageCollaborators() {
const router = useRouter();
const [subscription, setSubscription] = useState<Subscription | null>(null);
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;
setSubscription(subscription[0]);
}, []);
useEffect(() => {
loadSubscription();
}, [loadSubscription]);
return ( return (
<DefaultTemplate title="Nouvelle souscription" hasBackArrow> <DefaultTemplate title="Nouvelle souscription" hasBackArrow>
<div className={classes["root"]}> {subscription && (
<Typography typo={ITypo.H2} color={ITypoColor.BLACK}> <div className={classes["root"]}>
Choisissez les collaborateurs pour votre abonnement <Typography typo={ITypo.H2} color={ITypoColor.BLACK}>
</Typography> Choisissez les collaborateurs pour votre abonnement
<Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
7 sièges disponibles
</Typography>
<Form>
<div className={classes["collaborators-container"]}>
<CheckBox
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",
}}
name="collaborators"
/>
</div>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.BLACK}>
7 collaborateurs sélectionnés
</Typography> </Typography>
<div className={classes["buttons-container"]}> <Typography typo={ITypo.P_SB_18} color={ITypoColor.BLACK}>
<Button variant={EButtonVariant.PRIMARY} fullwidth> {subscription.nb_seats} sièges disponibles
Enregistrer </Typography>
</Button> <Form>
<Button variant={EButtonVariant.GHOST} fullwidth> <div className={classes["collaborators-container"]}>
Annuler <CheckBox
</Button> option={{
</div> label: "Jean Dupont",
</Form> value: "Jean Dupont",
</div> }}
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",
}}
name="collaborators"
/>
</div>
<Typography typo={ITypo.CAPTION_14} color={ITypoColor.BLACK}>
7 collaborateurs sélectionnés
</Typography>
<div className={classes["buttons-container"]}>
<Button variant={EButtonVariant.PRIMARY} fullwidth>
Enregistrer
</Button>
<Button variant={EButtonVariant.GHOST} fullwidth>
Annuler
</Button>
</div>
</Form>
</div>
)}
</DefaultTemplate> </DefaultTemplate>
); );
} }