feat(panorama-formations): ajout du header de la page formation

server/src/modules/data/index.ts

@@ -8,6 +8,7 @@ import { getDataForPanoramaRegionRoute } from "./usecases/getDataForPanoramaRegi
 import { getDemandesRestitutionIntentionsRoute } from "./usecases/getDemandesRestitutionIntentions/getDemandesRestitutionIntentions.route";
 import { getDepartementRoute } from "./usecases/getDepartement/getDepartement.route";
 import { getDepartementsRoute } from "./usecases/getDepartements/getDepartements.route";
+import { getDomaineDeFormationRoute } from "./usecases/getDomaineDeFormation/getDomaineDeFormation.route";
 import { getDomainesDeFormationRoute } from "./usecases/getDomainesDeFormation/getDomainesDeFormation.route";
 import { getEtablissementRoute } from "./usecases/getEtablissement/getEtablissement.route";
 import { getFormationEtablissementsRoutes } from "./usecases/getFormationEtablissements/getFormationEtablissements.routes";
@@ -64,5 +65,6 @@ export const registerFormationModule = ({ server }: { server: Server }) => {
  ...searchCampusRoute(server),
  ...getRepartitionPilotageIntentionsRoute({ server }),
  ...getDomainesDeFormationRoute({ server }),
+ ...getDomaineDeFormationRoute({ server }),
  };
 };

server/src/modules/data/usecases/getDomaineDeFormation/dependencies/getFilters.dep.ts

@@ -0,0 +1,41 @@
+import { kdb } from "../../../../../db/db";
+import {
+ isInPerimetreIJAcademie,
+ isInPerimetreIJDepartement,
+ isInPerimetreIJRegion,
+} from "../../../utils/isInPerimetreIJ";
+
+export const getFilters = async () => {
+ const regions = await kdb
+ .selectFrom("region")
+ .select(["region.libelleRegion as label", "region.codeRegion as value"])
+ .where(isInPerimetreIJRegion)
+ .execute();
+
+ const academies = await kdb
+ .selectFrom("academie")
+ .select([
+ "academie.libelleAcademie as label",
+ "academie.codeAcademie as value",
+ "academie.codeRegion as codeRegion",
+ ])
+ .where(isInPerimetreIJAcademie)
+ .execute();
+
+ const departements = await kdb
+ .selectFrom("departement")
+ .select([
+ "departement.libelleDepartement as label",
+ "departement.codeDepartement as value",
+ "departement.codeAcademie as codeAcademie",
+ "departement.codeRegion as codeRegion",
+ ])
+ .where(isInPerimetreIJDepartement)
+ .execute();
+
+ return {
+ regions,
+ academies,
+ departements,
+ };
+};

server/src/modules/data/usecases/getDomaineDeFormation/dependencies/getNsf.dep.ts

@@ -0,0 +1,8 @@
+import { kdb } from "../../../../../db/db";
+
+export const getNsf = (codeNsf: string) =>
+ kdb
+ .selectFrom("nsf")
+ .where("codeNsf", "=", codeNsf)
+ .selectAll()
+ .executeTakeFirst();

server/src/modules/data/usecases/getDomaineDeFormation/dependencies/index.ts

@@ -0,0 +1,2 @@
+export { getFilters } from "./getFilters.dep";
+export { getNsf } from "./getNsf.dep";

server/src/modules/data/usecases/getDomaineDeFormation/getDomaineDeFormation.route.ts

@@ -0,0 +1,21 @@
+import { createRoute } from "@http-wizard/core";
+
+import { Server } from "../../../../server";
+import { getDomaineDeFormationSchema } from "./getDomaineDeFormation.schema";
+import { getDomaineDeFormation } from "./getDomaineDeFormation.usecase";
+
+export const getDomaineDeFormationRoute = ({ server }: { server: Server }) => {
+ return createRoute("/domaine-de-formation/:codeNsf", {
+ method: "GET",
+ schema: getDomaineDeFormationSchema,
+ }).handle((props) =>
+ server.route({
+ ...props,
+ handler: async (request, response) => {
+ const { codeNsf } = request.params;
+ const result = await getDomaineDeFormation(codeNsf);
+ response.status(200).send(result);
+ },
+ })
+ );
+};

server/src/modules/data/usecases/getDomaineDeFormation/getDomaineDeFormation.schema.ts

@@ -0,0 +1,34 @@
+import { OptionSchema } from "shared/schema/optionSchema";
+import { z } from "zod";
+
+const filtersSchema = z.object({
+ regions: z.array(OptionSchema),
+ academies: z.array(
+ OptionSchema.extend({
+ codeRegion: z.string(),
+ })
+ ),
+ departements: z.array(
+ OptionSchema.extend({
+ codeRegion: z.string(),
+ codeAcademie: z.string(),
+ })
+ ),
+});
+
+const queryFiltersSchema = z.object({});
+
+export type Filters = z.infer<typeof queryFiltersSchema>;
+
+export const getDomaineDeFormationSchema = {
+ params: z.object({
+ codeNsf: z.string(),
+ }),
+ response: {
+ 200: z.object({
+ codeNsf: z.string(),
+ libelleNsf: z.string(),
+ filters: filtersSchema,
+ }),
+ },
+};

server/src/modules/data/usecases/getDomaineDeFormation/getDomaineDeFormation.usecase.ts

@@ -0,0 +1,30 @@
+import Boom from "@hapi/boom";
+import { getFilters, getNsf } from "./dependencies";
+
+const getDomaineDeFormationFactory =
+ (
+ deps = {
+ getNsf,
+ getFilters,
+ }
+ ) =>
+ async (codeNsf: string) => {
+ const [nsf, filters] = await Promise.all([
+ deps.getNsf(codeNsf),
+ deps.getFilters(),
+ ]);
+
+ if (!nsf) {
+ throw Boom.notFound(
+ `Le domaine de formation avec le code ${codeNsf} est inconnue`
+ );
+ }
+
+ return {
+ codeNsf,
+ libelleNsf: nsf.libelleNsf,
+ filters,
+ };
+ };
+
+export const getDomaineDeFormation = getDomaineDeFormationFactory();

ui/app/(wrapped)/components/Nav.tsx

@@ -264,14 +264,6 @@ export const Nav = () => {
  </NavMenuLink>
  </MenuItem>
  )}
- <MenuItem p="0">
- <NavMenuLink
- href="/panorama/formation"
- segment="panorama/formation"
- >
- Domaine de formation
- </NavMenuLink>
- </MenuItem>
  <MenuItem p="0">
  <NavMenuLink
  href="/panorama/lien-metier-formation"

ui/app/(wrapped)/domaine-de-formation/[codeNsf]/client.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import { useStateParams } from "../../../../utils/useFilters";
+
+type Props = {
+ codeNsf: string;
+ libelleNsf: string;
+};
+
+export const PageDomaineDeFormationClient = () => {
+ const [filters, setFilters] = useStateParams<{
+ cfd?: string;
+ codeRegion?: string;
+ codeDepartement?: string;
+ codeAcademie?: string;
+ }>({ defaultValues: {} });
+
+ return <p>Hello</p>;
+};

ui/app/(wrapped)/domaine-de-formation/[codeNsf]/components/FiltersSection/FiltersSection.tsx

@@ -0,0 +1,3 @@
+export const FiltersSection = () => {
+ return <div>FiltersSection</div>;
+};

ui/app/(wrapped)/domaine-de-formation/[codeNsf]/components/HeaderSection/AccesRapide.tsx

@@ -0,0 +1,29 @@
+import { ShortLink } from "@/components/ShortLink";
+import { HStack, StackDivider } from "@chakra-ui/react";
+
+export const AccesRapide = () => {
+ return (
+ <HStack
+ divider={<StackDivider borderColor={"grey.650"} />}
+ color={"bluefrance.113"}
+ >
+ <ShortLink
+ iconLeft={"ri:map-pin-line"}
+ label={"Formations"}
+ href="#formations"
+ ml={"0px"}
+ />
+ <ShortLink
+ iconLeft={"ri:link"}
+ label={"Liens utiles"}
+ href="#liens-utiles"
+ />
+ <ShortLink
+ iconRight={"ri:arrow-right-line"}
+ label={"Ouvrir la console des formations"}
+ href={`/console/formations`}
+ target="_blank"
+ />
+ </HStack>
+ );
+};

ui/app/(wrapped)/domaine-de-formation/[codeNsf]/components/HeaderSection/HeaderSection.tsx

@@ -0,0 +1,46 @@
+"use client";
+
+import { getNsfIcon } from "@/utils/getNsfIcon";
+import { Flex, Heading, Icon, Img } from "@chakra-ui/react";
+import { Icon as Iconify } from "@iconify/react";
+import { AccesRapide } from "./AccesRapide";
+
+export const HeaderSection = ({
+ codeNsf,
+ libelleNsf,
+}: {
+ codeNsf: string;
+ libelleNsf: string;
+}) => {
+ return (
+ <Flex justifyContent={"space-between"} direction={"row"} py={"16px"}>
+ <Flex direction={"column"} alignItems={"start"} gap={"24px"}>
+ <Flex
+ direction={"row"}
+ alignItems={"center"}
+ justifyContent={"center"}
+ gap={"16px"}
+ >
+ <Icon
+ as={Iconify}
+ icon={getNsfIcon(codeNsf)}
+ borderRadius={"full"}
+ boxSize={"54px"}
+ bgColor={"white"}
+ p={"8px"}
+ />
+ <Heading as="h1" size="lg" fontSize={{ base: "32px" }}>
+ {libelleNsf}
+ </Heading>
+ </Flex>
+ <AccesRapide />
+ </Flex>
+
+ <Img
+ src="/illustrations/team-at-work.svg"
+ objectFit="contain"
+ alt="Illustration équipe en collaboration"
+ />
+ </Flex>
+ );
+};