feat: Ajout de la gestion des membres pour un guichet (début)

IGNF · Oct 15, 2024 · 7f7f4b2 · 7f7f4b2
1 parent de37c1f
commit 7f7f4b2
Show file tree

Hide file tree

Showing 22 changed files with 474 additions and 136 deletions.
diff --git a/assets/@types/app_espaceco.ts b/assets/@types/app_espaceco.ts
@@ -46,3 +46,21 @@ export type SearchGridFilters = {
     fields?: ("name" | "title" | "type" | "extent" | "deleted")[];
     adm?: boolean;
 };
+
+export type CommunityMember = {
+    user_id: number;
+    username: string;
+    firstname: string | null;
+    surname: string | null;
+    emprises: string[]; // TODO renommer en grids
+    role: "pending" | "member" | "admin";
+    active: boolean;
+    date: string;
+};
+
+/* FORMULAIRES */
+export type DescriptionFormType = {
+    name: string;
+    description?: string;
+    keywords?: string[];
+};
diff --git a/assets/espaceco/api/community.ts b/assets/espaceco/api/community.ts
@@ -1,6 +1,6 @@
 import SymfonyRouting from "../../modules/Routing";
 
-import { CommunityListFilter, GetResponse } from "../../@types/app_espaceco";
+import { CommunityListFilter, CommunityMember, GetResponse } from "../../@types/app_espaceco";
 import { type CommunityResponseDTO } from "../../@types/espaceco";
 import { jsonFetch } from "../../modules/jsonFetch";
 
@@ -13,6 +13,11 @@ const get = (queryParams: { page: number; limit: number }, signal: AbortSignal)
     });
 };
 
+const getCommunitiesName = () => {
+    const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_get_names");
+    return jsonFetch<string[]>(url);
+};
+
 const searchByName = (name: string, filter: CommunityListFilter, signal: AbortSignal) => {
     const queryParams = { name: `%${name}%`, filter: filter, sort: "name:ASC" };
     const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_search", queryParams);
@@ -34,6 +39,18 @@ const getCommunity = (communityId: number) => {
     return jsonFetch<CommunityResponseDTO>(url);
 };
 
+const getCommunityMembers = (communityId: number, page: number, limit: number = 10, signal: AbortSignal) => {
+    const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_get_members", { communityId, page: page, limit: limit });
+    return jsonFetch<GetResponse<CommunityMember>>(url, {
+        signal: signal,
+    });
+};
+
+const getCommunityMembershipRequests = (communityId: number) => {
+    const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_get_members", { communityId, page: 1, limit: 50, roles: ["pending"] });
+    return jsonFetch<CommunityMember[]>(url);
+};
+
 const updateLogo = (communityId: number, formData: FormData) => {
     const url = SymfonyRouting.generate("cartesgouvfr_api_espaceco_community_update_logo", { communityId });
     return jsonFetch<CommunityResponseDTO>(
@@ -49,6 +66,6 @@ const updateLogo = (communityId: number, formData: FormData) => {
     );
 };
 
-const community = { get, getCommunity, searchByName, getAsMember, updateLogo };
+const community = { get, getCommunitiesName, getCommunity, getCommunityMembers, getCommunityMembershipRequests, searchByName, getAsMember, updateLogo };
 
 export default community;
diff --git a/assets/espaceco/pages/communities/Communities.tsx b/assets/espaceco/pages/communities/Communities.tsx
@@ -51,15 +51,15 @@ const Communities: FC = () => {
     const [community, setCommunity] = useState<CommunityResponseDTO | null>(null);
 
     const communityQuery = useQuery<GetResponse<CommunityResponseDTO>, CartesApiException>({
-        queryKey: RQKeys.community_list(queryParams.page, queryParams.limit),
+        queryKey: RQKeys.communityList(queryParams.page, queryParams.limit),
         queryFn: ({ signal }) => api.community.get(queryParams, signal),
         staleTime: 3600000,
         //retry: false,
         enabled: filter === "public",
     });
 
     const communitiesAsMember = useQuery<GetResponse<CommunityResponseDTO>, CartesApiException>({
-        queryKey: RQKeys.communities_as_member(queryParams.pending ?? false, queryParams.page, queryParams.limit),
+        queryKey: RQKeys.communitiesAsMember(queryParams.pending ?? false, queryParams.page, queryParams.limit),
         queryFn: ({ signal }) => api.community.getAsMember(queryParams, signal),
         staleTime: 3600000,
         //retry: false,

diff --git a/assets/espaceco/pages/communities/ManageCommunity.tsx b/assets/espaceco/pages/communities/ManageCommunity.tsx
@@ -18,6 +18,7 @@ import Grid from "./management/Grid";
 import Layer from "./management/Layer";
 import Reports from "./management/Reports";
 import ZoomAndCentering from "./management/ZoomAndCentering";
+import Members from "./management/Members";
 
 type ManageCommunityProps = {
     communityId: number;
@@ -78,6 +79,7 @@ const ManageCommunity: FC<ManageCommunityProps> = ({ communityId }) => {
                                 { tabId: "tab5", label: t("tab5") }, // Outils
                                 { tabId: "tab6", label: t("tab6") }, // Signalements
                                 { tabId: "tab7", label: t("tab7") }, // Emprises
+                                { tabId: "tab8", label: t("tab8") }, // Membres
                             ]}
                             onTabChange={setSelectedTabId}
                         >
@@ -93,7 +95,9 @@ const ManageCommunity: FC<ManageCommunityProps> = ({ communityId }) => {
                                         case "tab6":
                                             return <Reports community={communityQuery.data} />;
                                         case "tab7":
-                                            return <Grid grids={communityQuery.data?.grids ?? []} />; // TODO
+                                            return <Grid grids={communityQuery.data.grids ?? []} />; // TODO
+                                        case "tab8":
+                                            return <Members communityId={communityQuery.data.id} />;
                                         default:
                                             return <p>`Content of ${selectedTabId}`</p>;
                                     }

diff --git a/assets/espaceco/pages/communities/ManageCommunityTr.tsx b/assets/espaceco/pages/communities/ManageCommunityTr.tsx
@@ -17,6 +17,7 @@ export const { i18n } = declareComponentKeys<
     | "tab5"
     | "tab6"
     | "tab7"
+    | "tab8"
     | "desc.tab.title"
     | "desc.name"
     | "desc.hint_name"
@@ -86,6 +87,7 @@ export const ManageCommunityFrTranslations: Translations<"fr">["ManageCommunity"
     tab5: "Outils",
     tab6: "Signalements",
     tab7: "Emprises",
+    tab8: "Membres",
     "desc.tab.title": "Décrire le guichet",
     "desc.name": "Nom du guichet",
     "desc.hint_name": "Donnez un nom clair et compréhensible",
@@ -188,6 +190,7 @@ export const ManageCommunityEnTranslations: Translations<"en">["ManageCommunity"
     tab5: undefined,
     tab6: undefined,
     tab7: undefined,
+    tab8: undefined,
     "desc.tab.title": undefined,
     "desc.name": undefined,
     "desc.hint_name": undefined,

diff --git a/assets/espaceco/pages/communities/management/Description.tsx b/assets/espaceco/pages/communities/management/Description.tsx
@@ -13,10 +13,10 @@ import MarkdownEditor from "../../../../components/Input/MarkdownEditor";
 import thumbnails from "../../../../data/doc_thumbnail.json";
 import categories from "../../../../data/topic_categories.json";
 import { ComponentKey, useTranslation } from "../../../../i18n/i18n";
+import { appRoot } from "../../../../router/router";
 import { getFileExtension } from "../../../../utils";
 import { AddDocumentDialog, AddDocumentDialogModal } from "./AddDocumentDialog";
 import CommunityLogo from "./CommunityLogo";
-import { appRoot } from "../../../../router/router";
 
 import "../../../../sass/pages/espaceco/community.scss";
 
@@ -41,6 +41,8 @@ const readFileAsDataURL = async (file: File) => {
 }; */
 
 const Description: FC<DescriptionProps> = ({ community }) => {
+    // const { tab1 } = useCommunityFormStore(community)();
+
     const { t: tCommon } = useTranslation("Common");
     const { t: tValid } = useTranslation("ManageCommunityValidations");
     const { t } = useTranslation("ManageCommunity");

diff --git a/assets/espaceco/pages/communities/management/Grid.tsx b/assets/espaceco/pages/communities/management/Grid.tsx
@@ -1,22 +1,39 @@
 import { FC } from "react";
-import { useTranslation } from "../../../../i18n/i18n";
+import { useForm } from "react-hook-form";
 import { Grid } from "../../../../@types/espaceco";
+import { useTranslation } from "../../../../i18n/i18n";
 import GridList from "./GridList";
 
 type GridProps = {
     grids: Grid[];
 };
 
+type GridForm = {
+    grids: string[];
+};
+
 const Grid: FC<GridProps> = ({ grids }) => {
     const { t } = useTranslation("ManageCommunity");
+
+    const form = useForm<GridForm>({
+        mode: "onSubmit",
+        values: {
+            grids: Array.from(grids, (g) => g.name),
+        },
+    });
+    const { setValue: setFormValue } = form;
+
     return (
         <>
             <h3>{t("grid.grids")}</h3>
             {t("grid.explain")}
             <GridList
                 grids={grids}
                 onChange={(grids) => {
-                    console.log(grids); // TODO
+                    setFormValue(
+                        "grids",
+                        Array.from(grids, (g) => g.name)
+                    );
                 }}
             />
         </>

diff --git a/assets/espaceco/pages/communities/management/GridList.tsx b/assets/espaceco/pages/communities/management/GridList.tsx
@@ -12,8 +12,6 @@ type GridListProps = {
 
 const GridList: FC<GridListProps> = ({ grids = [], onChange }) => {
     const [grid, setGrid] = useState<Grid | null>(null);
-    console.log(grid);
-
     const [internal, setInternal] = useState<Grid[]>([...grids]);
 
     const handleRemove = useCallback(
@@ -27,8 +25,9 @@ const GridList: FC<GridListProps> = ({ grids = [], onChange }) => {
 
     const handleAdd = () => {
         if (grid) {
-            const grids = [...internal, grid];
+            const grids = Array.from(new Set([...internal, grid]));
             setInternal(grids);
+            onChange(grids);
         }
     };
     const data = useMemo(() => {
@@ -42,18 +41,22 @@ const GridList: FC<GridListProps> = ({ grids = [], onChange }) => {
 
     return (
         <div>
-            <div className={fr.cx("fr-grid-row")}>
+            <div className={fr.cx("fr-grid-row", "fr-grid-row--middle")}>
                 <div className={fr.cx("fr-col-6")}>
                     <SearchGrids
                         label={""}
                         filters={{
                             fields: ["name", "title", "type", "extent"],
                         }}
-                        onChange={(grid) => setGrid(grid)}
+                        onChange={(grid) => {
+                            if (grid) {
+                                setGrid(grid);
+                            }
+                        }}
                     />
                 </div>
                 <div className={fr.cx("fr-col-1")}>
-                    <div className={fr.cx("fr-grid-row", "fr-grid-row--left", "fr-grid-row--middle")}>
+                    <div className={fr.cx("fr-grid-row", "fr-grid-row--left")}>
                         <Button title={""} priority={"tertiary no outline"} iconId={"fr-icon-add-circle-line"} onClick={handleAdd} />
                     </div>
                 </div>