feat: ajout GroupEspaceCo et utilisation de nouveau système de layout #…

…642
IGNF · Feb 11, 2025 · 4219c40 · 4219c40
1 parent 3ade5c9
commit 4219c40
Show file tree

Hide file tree

Showing 14 changed files with 121 additions and 58 deletions.
diff --git a/assets/entrepot/pages/dashboard/DashboardPro.tsx b/assets/entrepot/pages/dashboard/DashboardPro.tsx
@@ -188,6 +188,7 @@ const DashboardPro = () => {
                         <Tile
                             linkProps={routes.espaceco_community_list().link}
                             imageUrl={internetSvgUrl}
+                            imageSvg={true}
                             desc="Voir la liste des guichets"
                             orientation="horizontal"
                             title={t("espaceco_frontoffice_list")}

diff --git a/assets/espaceco/pages/communities/Communities.tsx b/assets/espaceco/pages/communities/Communities.tsx
@@ -6,13 +6,12 @@ import RadioButtons from "@codegouvfr/react-dsfr/RadioButtons";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { FC, useMemo, useState } from "react";
 
+import Main from "@/components/Layout/Main";
 import { CommunityListFilter, GetResponse, UserMe, arrCommunityListFilters } from "../../../@types/app_espaceco";
 import { CommunityResponseDTO } from "../../../@types/espaceco";
-import AppLayout from "../../../components/Layout/AppLayout";
 import LoadingText from "../../../components/Utils/LoadingText";
 import Skeleton from "../../../components/Utils/Skeleton";
 import Wait from "../../../components/Utils/Wait";
-import { datastoreNavItems } from "../../../config/navItems/datastoreNavItems";
 import { useTranslation } from "../../../i18n/i18n";
 import RQKeys from "../../../modules/espaceco/RQKeys";
 import { CartesApiException } from "../../../modules/jsonFetch";
@@ -24,8 +23,6 @@ import SearchCommunity from "./SearchCommunity";
 
 const defaultLimit = 10;
 
-const navItems = datastoreNavItems();
-
 type QueryParamsType = {
     page: number;
     limit: number;
@@ -37,7 +34,7 @@ const Communities: FC = () => {
 
     const { t: tCommon } = useTranslation("Common");
     const { t: tBreadcrumb } = useTranslation("Breadcrumb");
-    const { t } = useTranslation("CommunityList");
+    const { t } = useTranslation("EspaceCoCommunityList");
 
     const filter = useMemo<CommunityListFilter>(() => {
         const f = route.params["filter"];
@@ -117,14 +114,13 @@ const Communities: FC = () => {
     });
 
     return (
-        <AppLayout
-            navItems={navItems}
+        <Main
             customBreadcrumbProps={{
                 homeLinkProps: routes.home().link,
                 segments: [{ label: tBreadcrumb("dashboard_pro"), linkProps: routes.dashboard_pro().link }],
                 currentPageLabel: tBreadcrumb("espaceco_community_list"),
             }}
-            documentTitle={t("title")}
+            title={t("title")}
         >
             <h1>{t("title")}</h1>
             <div>
@@ -228,7 +224,7 @@ const Communities: FC = () => {
                     mutate(datas);
                 }}
             />
-        </AppLayout>
+        </Main>
     );
 };
 

diff --git a/assets/espaceco/pages/communities/CommunityList.locale.tsx b/assets/espaceco/pages/communities/CommunityList.locale.tsx
@@ -18,10 +18,10 @@ const { i18n } = declareComponentKeys<
     | "community_creation"
     | "create_community"
     | "append_community"
->()("CommunityList");
+>()("EspaceCoCommunityList");
 export type I18n = typeof i18n;
 
-export const CommunityListFrTranslations: Translations<"fr">["CommunityList"] = {
+export const EspaceCoCommunityListFrTranslations: Translations<"fr">["EspaceCoCommunityList"] = {
     title: "Liste des guichets",
     filters: "Filtres",
     all_public_communities: "Tous les guichets publics",
@@ -44,7 +44,7 @@ export const CommunityListFrTranslations: Translations<"fr">["CommunityList"] =
     append_community: "Reprendre la configuration de ce guichet",
 };
 
-export const CommunityListEnTranslations: Translations<"en">["CommunityList"] = {
+export const EspaceCoCommunityListEnTranslations: Translations<"en">["EspaceCoCommunityList"] = {
     title: "List of communities",
     filters: "Filters",
     all_public_communities: undefined,

diff --git a/assets/espaceco/pages/communities/CommunityListItem.tsx b/assets/espaceco/pages/communities/CommunityListItem.tsx
@@ -16,7 +16,7 @@ type CommunityListItemProps = {
 };
 
 const CommunityListItem: FC<CommunityListItemProps> = ({ className, community }) => {
-    const { t } = useTranslation("CommunityList");
+    const { t } = useTranslation("EspaceCoCommunityList");
     const { t: tCommon } = useTranslation("Common");
 
     const [showDescription, toggleShowDescription] = useToggle(false);

diff --git a/assets/espaceco/pages/communities/CreateCommunity.tsx b/assets/espaceco/pages/communities/CreateCommunity.tsx
@@ -5,12 +5,11 @@ import { FC, useMemo, useState } from "react";
 import { fr } from "@codegouvfr/react-dsfr";
 import Button from "@codegouvfr/react-dsfr/Button";
 import Stepper from "@codegouvfr/react-dsfr/Stepper";
+import Main from "@/components/Layout/Main";
 import { CommunityFormMode, UserMe } from "../../../@types/app_espaceco";
 import { CommunityResponseDTO } from "../../../@types/espaceco";
-import AppLayout from "../../../components/Layout/AppLayout";
 import LoadingText from "../../../components/Utils/LoadingText";
 import Wait from "../../../components/Utils/Wait";
-import { datastoreNavItems } from "../../../config/navItems/datastoreNavItems";
 import { useTranslation } from "../../../i18n/i18n";
 import RQKeys from "../../../modules/espaceco/RQKeys";
 import { CartesApiException } from "../../../modules/jsonFetch";
@@ -22,8 +21,6 @@ import ZoomAndCentering from "./management/ZoomAndCentering";
 import Reports from "./management/Reports";
 import EditTools from "./management/EditTools";
 
-const navItems = datastoreNavItems();
-
 type CreateCommunityProps = {
     communityId: number;
 };
@@ -96,8 +93,7 @@ const CreateCommunity: FC<CreateCommunityProps> = ({ communityId }) => {
     }, [communityQuery.data]);
 
     return (
-        <AppLayout
-            navItems={navItems}
+        <Main
             customBreadcrumbProps={{
                 homeLinkProps: routes.home().link,
                 segments: [
@@ -106,7 +102,7 @@ const CreateCommunity: FC<CreateCommunityProps> = ({ communityId }) => {
                 ],
                 currentPageLabel: tBreadcrumb("espaceco_create_community"),
             }}
-            documentTitle={t("title")}
+            title={t("title")}
         >
             {communityQuery.data?.active ? (
                 <Alert severity="error" closable={false} title={t("forbidden_access")} />
@@ -211,7 +207,7 @@ const CreateCommunity: FC<CreateCommunityProps> = ({ communityId }) => {
                     )}
                 </div>
             )}
-        </AppLayout>
+        </Main>
     );
 };
 

diff --git a/assets/espaceco/pages/communities/ManageCommunity.tsx b/assets/espaceco/pages/communities/ManageCommunity.tsx
@@ -5,11 +5,10 @@ import Tabs from "@codegouvfr/react-dsfr/Tabs";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { FC, useMemo, useState } from "react";
 
+import Main from "@/components/Layout/Main";
 import { UserMe } from "../../../@types/app_espaceco";
 import { CommunityResponseDTO } from "../../../@types/espaceco";
-import AppLayout from "../../../components/Layout/AppLayout";
 import LoadingText from "../../../components/Utils/LoadingText";
-import { datastoreNavItems } from "../../../config/navItems/datastoreNavItems";
 import { useTranslation } from "../../../i18n/i18n";
 import RQKeys from "../../../modules/espaceco/RQKeys";
 import { CartesApiException } from "../../../modules/jsonFetch";
@@ -28,8 +27,6 @@ type ManageCommunityProps = {
     communityId: number;
 };
 
-const navItems = datastoreNavItems();
-
 const ManageCommunity: FC<ManageCommunityProps> = ({ communityId }) => {
     const { t } = useTranslation("ManageCommunity");
     const { t: tBreadcrumb } = useTranslation("Breadcrumb");
@@ -91,8 +88,7 @@ const ManageCommunity: FC<ManageCommunityProps> = ({ communityId }) => {
     }, [communityQuery.data]);
 
     return (
-        <AppLayout
-            navItems={navItems}
+        <Main
             customBreadcrumbProps={{
                 homeLinkProps: routes.home().link,
                 segments: [
@@ -101,7 +97,7 @@ const ManageCommunity: FC<ManageCommunityProps> = ({ communityId }) => {
                 ],
                 currentPageLabel: tBreadcrumb("espaceco_manage_community", { communityName: communityQuery.data?.name }),
             }}
-            documentTitle={t("title", { name: communityQuery.data?.name })}
+            title={t("title", { name: communityQuery.data?.name })}
         >
             <h1>{t("title", { name: communityQuery.data?.name })}</h1>
             {isUpdateError && <Alert severity="error" closable title={t("updating_failed")} />}
@@ -221,7 +217,7 @@ const ManageCommunity: FC<ManageCommunityProps> = ({ communityId }) => {
                     </div>
                 )
             )}
-        </AppLayout>
+        </Main>
     );
 };
 

diff --git a/assets/espaceco/pages/communities/MemberInvitation.tsx b/assets/espaceco/pages/communities/MemberInvitation.tsx
@@ -8,21 +8,18 @@ import { FC, useEffect, useMemo, useState } from "react";
 
 import { CommunityMember, Role, UserMe } from "../../../@types/app_espaceco";
 import { CommunityResponseDTO } from "../../../@types/espaceco";
-import AppLayout from "../../../components/Layout/AppLayout";
 import LoadingText from "../../../components/Utils/LoadingText";
 import Wait from "../../../components/Utils/Wait";
-import { datastoreNavItems } from "../../../config/navItems/datastoreNavItems";
 import { useTranslation } from "../../../i18n/i18n";
 import RQKeys from "../../../modules/espaceco/RQKeys";
 import { CartesApiException } from "../../../modules/jsonFetch";
 import { routes } from "../../../router/router";
 import { useApiEspaceCoStore } from "../../../stores/ApiEspaceCoStore";
 import api from "../../api";
+import Main from "@/components/Layout/Main";
 
 import "../../../../assets/sass/pages/espaceco/member_invitation.scss";
 
-const navItems = datastoreNavItems();
-
 type MemberInvitationProps = {
     communityId: number;
 };
@@ -106,14 +103,13 @@ const MemberInvitation: FC<MemberInvitationProps> = ({ communityId }) => {
     const community = useMemo(() => query.data, [query.data]);
 
     return (
-        <AppLayout
-            navItems={navItems}
+        <Main
             customBreadcrumbProps={{
                 homeLinkProps: routes.home().link,
                 segments: [],
                 currentPageLabel: tBreadcrumb("espaceco_member_invitation"),
             }}
-            documentTitle={t("document_title")}
+            title={t("document_title")}
         >
             <h1>{t("document_title")}</h1>
             {meQuery.isLoading && <LoadingText as="h6" message={t("userme_loading")} />}
@@ -185,7 +181,7 @@ const MemberInvitation: FC<MemberInvitationProps> = ({ communityId }) => {
                     <Alert severity={"warning"} closable title={t("not_member")} />
                 ))
             )}
-        </AppLayout>
+        </Main>
     );
 };
 

diff --git a/assets/i18n/languages/en.tsx b/assets/i18n/languages/en.tsx
@@ -34,7 +34,7 @@ import { UserKeyEnTranslations } from "../../entrepot/pages/users/keys/UserKey.l
 import { UserKeysListTabEnTranslations } from "../../entrepot/pages/users/keys/UserKeysListTab/UserKeysListTab.locale";
 import { MeEnTranslations } from "../../entrepot/pages/users/me/Me.locale";
 import { PermissionsEnTranslations } from "../../entrepot/pages/users/permissions/Permissions.locale";
-import { CommunityListEnTranslations } from "../../espaceco/pages/communities/CommunityList.locale";
+import { EspaceCoCommunityListEnTranslations } from "@/espaceco/pages/communities/CommunityList.locale";
 import { CreateCommunityEnTranslations } from "../../espaceco/pages/communities/CreateCommunity.locale";
 import { CreateCommunityDialogEnTranslations } from "../../espaceco/pages/communities/CreateCommunityDialog.locale";
 import { ManageCommunityEnTranslations } from "../../espaceco/pages/communities/ManageCommunity.locale";
@@ -106,7 +106,7 @@ export const translations: Translations<"en"> = {
     PyramidRasterGenerateForm: PyramidRasterGenerateFormEnTranslations,
     PyramidRasterWmsRasterServiceForm: PyramidRasterWmsRasterServiceFormEnTranslations,
     PyramidRasterWmtsServiceForm: PyramidRasterWmtsServiceFormEnTranslations,
-    CommunityList: CommunityListEnTranslations,
+    EspaceCoCommunityList: EspaceCoCommunityListEnTranslations,
     CreateCommunityDialog: CreateCommunityDialogEnTranslations,
     CreateCommunity: CreateCommunityEnTranslations,
     ManageCommunity: ManageCommunityEnTranslations,

diff --git a/assets/i18n/languages/fr.tsx b/assets/i18n/languages/fr.tsx
@@ -35,7 +35,8 @@ import { UserKeyFrTranslations } from "../../entrepot/pages/users/keys/UserKey.l
 import { UserKeysListTabFrTranslations } from "../../entrepot/pages/users/keys/UserKeysListTab/UserKeysListTab.locale";
 import { MeFrTranslations } from "../../entrepot/pages/users/me/Me.locale";
 import { PermissionsFrTranslations } from "../../entrepot/pages/users/permissions/Permissions.locale";
-import { CommunityListFrTranslations } from "../../espaceco/pages/communities/CommunityList.locale";
+import { EspaceCoCommunityListFrTranslations } from "@/espaceco/pages/communities/CommunityList.locale";
+
 import { CreateCommunityFrTranslations } from "../../espaceco/pages/communities/CreateCommunity.locale";
 import { CreateCommunityDialogFrTranslations } from "../../espaceco/pages/communities/CreateCommunityDialog.locale";
 import { ManageCommunityFrTranslations } from "../../espaceco/pages/communities/ManageCommunity.locale";
@@ -108,7 +109,7 @@ export const translations: Translations<"fr"> = {
     DatasheetUploadForm: DatasheetUploadFormFrTranslations,
     DatasheetList: DatasheetListFrTranslations,
     AccessRestrictions: AccessRestrictionsFrTranslations,
-    CommunityList: CommunityListFrTranslations,
+    EspaceCoCommunityList: EspaceCoCommunityListFrTranslations,
     ManageCommunity: ManageCommunityFrTranslations,
     CreateCommunityDialog: CreateCommunityDialogFrTranslations,
     CreateCommunity: CreateCommunityFrTranslations,

diff --git a/assets/router/GroupEspaceCo.tsx b/assets/router/GroupEspaceCo.tsx
@@ -0,0 +1,47 @@
+import { lazy, useMemo } from "react";
+import { Route } from "type-route";
+
+import AppLayout from "@/components/Layout/AppLayout";
+import { datastoreNavItems } from "@/config/navItems/datastoreNavItems";
+import PageNotFoundWithLayout from "@/pages/error/PageNotFoundWithLayout";
+import { groups } from "./router";
+
+const EspaceCoCommunityList = lazy(() => import("../espaceco/pages/communities/Communities"));
+const EspaceCoCreateCommunity = lazy(() => import("../espaceco/pages/communities/CreateCommunity"));
+const EspaceCoManageCommunity = lazy(() => import("../espaceco/pages/communities/ManageCommunity"));
+const MemberInvitation = lazy(() => import("../espaceco/pages/communities/MemberInvitation"));
+
+interface IGroupEspaceCoProps {
+    route: Route<typeof groups.espaceco>;
+}
+
+function GroupEspaceCo(props: IGroupEspaceCoProps) {
+    const { route, ...rest } = props;
+
+    const navItems = datastoreNavItems();
+
+    const content: { render: JSX.Element } = useMemo(() => {
+        switch (route.name) {
+            case "espaceco_community_list":
+                return { render: <EspaceCoCommunityList /> };
+            case "espaceco_create_community":
+                return { render: <EspaceCoCreateCommunity communityId={route.params.communityId} /> };
+            case "espaceco_manage_community":
+                return { render: <EspaceCoManageCommunity communityId={route.params.communityId} /> };
+            case "espaceco_member_invitation":
+                return { render: <MemberInvitation communityId={route.params.communityId} /> };
+        }
+    }, [route]);
+
+    if (!content) {
+        return <PageNotFoundWithLayout />;
+    }
+
+    return (
+        <AppLayout {...rest} navItems={navItems}>
+            {content.render}
+        </AppLayout>
+    );
+}
+
+export default GroupEspaceCo;
diff --git a/assets/router/RouterRenderer.tsx b/assets/router/RouterRenderer.tsx
@@ -1,4 +1,4 @@
-import { FC, JSX, lazy, Suspense, useMemo } from "react";
+import { FC, JSX, Suspense, useMemo } from "react";
 
 import AppLayout from "../components/Layout/AppLayout";
 import LoadingText from "../components/Utils/LoadingText";
@@ -12,11 +12,7 @@ import GroupDatastore from "./GroupDatastore";
 import GroupApp from "./GroupApp";
 import PageNotFoundWithLayout from "../pages/error/PageNotFoundWithLayout";
 import Main from "../components/Layout/Main";
-
-const EspaceCoCommunityList = lazy(() => import("../espaceco/pages/communities/Communities"));
-const EspaceCoCreateCommunity = lazy(() => import("../espaceco/pages/communities/CreateCommunity"));
-const EspaceCoManageCommunity = lazy(() => import("../espaceco/pages/communities/ManageCommunity"));
-const MemberInvitation = lazy(() => import("../espaceco/pages/communities/MemberInvitation"));
+import GroupEspaceCo from "./GroupEspaceCo";
 
 const RouterRenderer: FC = () => {
     const route = useRoute();
@@ -42,16 +38,7 @@ const RouterRenderer: FC = () => {
         }
 
         if (groups.espaceco.has(route)) {
-            switch (route.name) {
-                case "espaceco_community_list":
-                    return <EspaceCoCommunityList />;
-                case "espaceco_create_community":
-                    return <EspaceCoCreateCommunity communityId={route.params.communityId} />;
-                case "espaceco_manage_community":
-                    return <EspaceCoManageCommunity communityId={route.params.communityId} />;
-                case "espaceco_member_invitation":
-                    return <MemberInvitation communityId={route.params.communityId} />;
-            }
+            return <GroupEspaceCo route={route} />;
         }
 
         return <GroupApp route={route} />;

diff --git a/assets/utils/index.ts b/assets/utils/index.ts
@@ -7,7 +7,7 @@ export * from "./offering";
 export * from "./types";
 export * from "./user";
 export * from "./image";
-export * from "./schema";
+export * from "./form";
 
 // charsets
 export { default as charsets } from "@/data/charset_list.json";

diff --git a/package.json b/package.json
@@ -15,9 +15,17 @@
         "@tanstack/react-query": "^5.0.0",
         "@tanstack/react-query-devtools": "^5.0.0",
         "@tanstack/react-query-persist-client": "^5.51.15",
+        "@tiptap/extension-color": "^2.11.5",
+        "@tiptap/extension-highlight": "^2.11.5",
         "@tiptap/extension-image": "^2.11.3",
         "@tiptap/extension-link": "^2.11.3",
         "@tiptap/extension-placeholder": "^2.11.3",
+        "@tiptap/extension-subscript": "^2.11.5",
+        "@tiptap/extension-superscript": "^2.11.5",
+        "@tiptap/extension-text-align": "^2.11.5",
+        "@tiptap/extension-text-style": "^2.11.5",
+        "@tiptap/extension-underline": "^2.11.5",
+        "@tiptap/extension-youtube": "^2.11.5",
         "@vitejs/plugin-react": "^4.3.1",
         "autoprefixer": "^10.0.0",
         "date-fns": "^4.0.0",