Skip to content

Commit 03f7854

Browse files
pierreavizoupierreavizou
committed
feat(admin):empty state side menu and filters for registry manager
1 parent cbc6074 commit 03f7854

File tree

4 files changed

+182
-73
lines changed

4 files changed

+182
-73
lines changed

‎packages/reva-admin-react/src/app/responsable-certifications/certifications/layout.tsx

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
"use client";
2+
import SideMenu from "@codegouvfr/react-dsfr/SideMenu";
3+
import { usePathname, useSearchParams } from "next/navigation";
4+
import { ReactNode } from "react";
5+
6+
export default function CertificationsLayout({
7+
children,
8+
}: {
9+
children: ReactNode;
10+
}) {
11+
const currentPathname = usePathname();
12+
const searchParams = useSearchParams();
13+
14+
const searchFilter = searchParams.get("search") || "";
15+
16+
const hrefSideMenu = (path: string, category: string) => {
17+
const params = new URLSearchParams();
18+
params.set("page", "1");
19+
params.set("CATEGORY", category);
20+
21+
if (searchFilter) {
22+
params.set("search", searchFilter);
23+
}
24+
25+
return `${path}/?${params.toString()}`;
26+
};
27+
28+
const menuItem = ({
29+
text,
30+
path,
31+
category,
32+
defaultMenuItem,
33+
}: {
34+
text: string;
35+
path: string;
36+
category: string;
37+
defaultMenuItem?: boolean;
38+
}) => ({
39+
isActive:
40+
(currentPathname.startsWith(path) &&
41+
searchParams.get("CATEGORY") === category) ||
42+
(!searchParams.get("CATEGORY") && defaultMenuItem),
43+
linkProps: {
44+
href: hrefSideMenu(path, category),
45+
target: "_self",
46+
},
47+
text,
48+
});
49+
50+
const validatedManuItems = [
51+
menuItem({
52+
text: "Visibles",
53+
path: "/responsable-certifications/certifications/",
54+
category: "VISIBLE",
55+
}),
56+
menuItem({
57+
text: "Invisibles",
58+
path: "/responsable-certifications/certifications/",
59+
category: "INVISIBLE",
60+
}),
61+
];
62+
63+
const toValidateMenuItems = [
64+
menuItem({
65+
text: "À valider",
66+
path: "/responsable-certifications/certifications/",
67+
category: "TO_VALIDATE",
68+
defaultMenuItem: true,
69+
}),
70+
];
71+
72+
return (
73+
<div className="flex flex-col flex-1 md:flex-row gap-10 md:gap-0">
74+
<nav
75+
role="navigation"
76+
aria-label="Menu latéral"
77+
className="flex flex-col gap-4 md:basis-[400px]"
78+
>
79+
<SideMenu
80+
className="flex-shrink-0 flex-grow-0 md:basis-[400px]"
81+
align="left"
82+
burgerMenuButtonText="Toutes les certifications"
83+
sticky
84+
fullHeight
85+
title="Toutes les certifications"
86+
items={[
87+
{
88+
text: "Validées",
89+
items: validatedManuItems,
90+
},
91+
...toValidateMenuItems,
92+
]}
93+
/>
94+
</nav>
95+
96+
<div className="mt-3 flex-1">{children}</div>
97+
</div>
98+
);
99+
}

‎packages/reva-admin-react/src/app/responsable-certifications/certifications/page.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
export default function RegistryManagerHomepage() {
2+
return <div>liste</div>;
3+
}

‎packages/reva-admin-react/src/app/responsable-certifications/layout.tsx

Lines changed: 0 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,81 +1,9 @@
11
import { ReactNode } from "react";
2-
import Image from "next/image";
3-
4-
const attachedCertifications = [1];
5-
const certificationsToValidate = [];
6-
7-
const NoCertifications = () => {
8-
return (
9-
<div className="grid grid-cols-3 grid-rows-1 w-11/12 mx-auto">
10-
<div className="col-span-2 m-auto">
11-
<h1 className="">
12-
Bienvenue sur votre espace Responsable des certifications !
13-
</h1>
14-
<p className="text-lg">
15-
C’est ici que vous pourrez compléter, modifier et valider les
16-
certifications.
17-
</p>
18-
<p className="text-sm">
19-
Si vous avez d’ores et déjà demandé à France VAE d’ajouter une ou
20-
plusieurs certifications, vous les retrouverez ici très prochainement.
21-
</p>
22-
</div>
23-
<div className="m-auto">
24-
<Image
25-
src="/admin2/components/success.svg"
26-
alt="Success pictogram"
27-
width={282}
28-
height={319}
29-
/>
30-
</div>
31-
</div>
32-
);
33-
};
34-
35-
const CertificationsToValidate = () => {
36-
return (
37-
<div className="grid grid-cols-3 grid-rows-1 w-11/12 mx-auto">
38-
<div className="col-span-2 m-auto">
39-
<h1 className="">
40-
Bienvenue sur votre espace Responsable des certifications !
41-
</h1>
42-
<p className="text-lg">
43-
Vous pouvez dès à présent compléter et valider les certifications
44-
suivantes :
45-
<ul>
46-
<li>Certif 1</li>
47-
<li>Certif 2</li>
48-
</ul>
49-
</p>
50-
<p className="text-sm">
51-
Vous avez demandé à France VAE d’ajouter d’autres certifications ?
52-
Retrouvez-les dans votre espace très prochainement !
53-
</p>
54-
</div>
55-
<div className="m-auto">
56-
<Image
57-
src="/admin2/components/success.svg"
58-
alt="Success pictogram"
59-
width={282}
60-
height={319}
61-
/>
62-
</div>
63-
</div>
64-
);
65-
};
662

673
export default function RegistryManagerLayout({
684
children,
695
}: {
706
children: ReactNode;
717
}) {
72-
if (attachedCertifications.length === 0) {
73-
return <NoCertifications />;
74-
}
75-
76-
if (certificationsToValidate.length > 0) {
77-
return <CertificationsToValidate />;
78-
}
79-
808
return <div className="flex flex-col md:flex-row w-full">{children}</div>;
819
}

‎packages/reva-admin-react/src/app/responsable-certifications/page.tsx

Lines changed: 80 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,82 @@
1+
// import { ReactNode } from "react";
2+
import Image from "next/image";
3+
import Button from "@codegouvfr/react-dsfr/Button";
4+
import { redirect } from "next/navigation";
5+
6+
const attachedCertifications = [1];
7+
const certificationsToValidate = [1];
8+
9+
const NoCertifications = () => {
10+
return (
11+
<div className="grid grid-cols-3 grid-rows-1 w-11/12 mx-auto">
12+
<div className="col-span-2 m-auto">
13+
<h1 className="">
14+
Bienvenue sur votre espace Responsable des certifications !
15+
</h1>
16+
<p className="text-lg">
17+
C’est ici que vous pourrez compléter, modifier et valider les
18+
certifications.
19+
</p>
20+
<p className="text-sm">
21+
Si vous avez d’ores et déjà demandé à France VAE d’ajouter une ou
22+
plusieurs certifications, vous les retrouverez ici très prochainement.
23+
</p>
24+
</div>
25+
<div className="m-auto">
26+
<Image
27+
src="/admin2/components/success.svg"
28+
alt="Success pictogram"
29+
width={282}
30+
height={319}
31+
/>
32+
</div>
33+
</div>
34+
);
35+
};
36+
37+
const CertificationsToValidate = () => {
38+
return (
39+
<div className="grid grid-cols-3 grid-rows-1 w-11/12 mx-auto">
40+
<div className="col-span-2 m-auto">
41+
<h1 className="">
42+
Bienvenue sur votre espace Responsable des certifications !
43+
</h1>
44+
<p className="text-lg">
45+
Vous pouvez dès à présent compléter et valider les certifications
46+
suivantes :
47+
<ul>
48+
<li>Certif 1</li>
49+
<li>Certif 2</li>
50+
</ul>
51+
</p>
52+
<p className="text-sm">
53+
Vous avez demandé à France VAE d’ajouter d’autres certifications ?
54+
Retrouvez-les dans votre espace très prochainement !
55+
</p>
56+
<Button linkProps={{ href: "certifications" }} className="mt-10">
57+
Voir les certifications à valider
58+
</Button>
59+
</div>
60+
<div className="m-auto">
61+
<Image
62+
src="/admin2/components/success.svg"
63+
alt="Success pictogram"
64+
width={282}
65+
height={319}
66+
/>
67+
</div>
68+
</div>
69+
);
70+
};
71+
172
export default function RegistryManagerHomepage() {
2-
return <div>liste et menu</div>;
73+
if (attachedCertifications.length === 0) {
74+
return <NoCertifications />;
75+
}
76+
77+
if (certificationsToValidate.length > 0) {
78+
return <CertificationsToValidate />;
79+
}
80+
81+
return redirect("certifications");
382
}

0 commit comments

Comments
 (0)