feat(organisation): fold organization members by default (#539)

numerique-gouv · Sep 24, 2024 · d8418aa · d8418aa
1 parent 92037e7
commit d8418aa
Show file tree

Hide file tree

Showing 5 changed files with 64 additions and 24 deletions.
diff --git a/e2e/features/organizations/dinum.feature b/e2e/features/organizations/dinum.feature
@@ -39,7 +39,7 @@ Fonctionnalité: Page organisation
     * sur la même ligne je vois "external"
 
   # Scénario: Membres de DINUM
-    Alors je vois "Membres enregistrés dans cette organisation :"
+    Quand je clique sur "1 membre enregistré dans l’organisation :"
     * je vois la ligne de table "[email protected]"
     * sur la même ligne je vois "Raphael"
     * sur la même ligne je vois "Dubigny"

diff --git a/packages/~/moderations/api/src/:id/Members_Of_Organization_Table.tsx b/packages/~/moderations/api/src/:id/Members_Of_Organization_Table.tsx
@@ -27,7 +27,7 @@ export async function Members_Of_Organization_Table() {
   return (
     <section>
       <details open={isOpen}>
-        <summary id={$describedby}>
+        <summary>
           <h3 class="inline-block" id={$describedby}>
             👥 {count}{" "}
             {formattedPlural(count, {

diff --git a/packages/~/organizations/api/src/:id/context.ts b/packages/~/organizations/api/src/:id/context.ts
@@ -3,6 +3,7 @@
 import type { App_Context } from "@~/app.middleware/context";
 import { urls } from "@~/app.urls";
 import type { Organization } from "@~/organizations.lib/entities/Organization";
+import { type get_organization_members_count_dto } from "@~/organizations.repository/get_organization_members_count";
 import type { Env, InferRequestType } from "hono";
 import { useRequestContext } from "hono/jsx-renderer";
 //
@@ -28,6 +29,7 @@ type FicheOrganization = Pick<
 export interface ContextVariablesType extends Env {
   Variables: {
     organization: FicheOrganization;
+    query_organization_members_count: Promise<get_organization_members_count_dto>;
   };
 }
 export type ContextType = App_Context & ContextVariablesType;

diff --git a/packages/~/organizations/api/src/:id/index.tsx b/packages/~/organizations/api/src/:id/index.tsx
@@ -5,6 +5,7 @@ import { NotFoundError } from "@~/app.core/error";
 import { Entity_Schema } from "@~/app.core/schema";
 import { Main_Layout } from "@~/app.layout";
 import { GetOrganizationById } from "@~/organizations.repository";
+import { get_organization_members_count } from "@~/organizations.repository/get_organization_members_count";
 import { to as await_to } from "await-to-js";
 import { Hono } from "hono";
 import { jsxRenderer } from "hono/jsx-renderer";
@@ -63,6 +64,18 @@ export default new Hono<ContextType>()
       set("organization", organization);
       return next();
     },
+    async function set_query_organization_members_count(
+      { set, var: { organization, moncomptepro_pg } },
+      next,
+    ) {
+      set(
+        "query_organization_members_count",
+        get_organization_members_count(moncomptepro_pg, {
+          organization_id: organization.id,
+        }),
+      );
+      return next();
+    },
     async function GET({ render }) {
       return render(<Organization_Page />);
     },

diff --git a/packages/~/organizations/api/src/:id/page.tsx b/packages/~/organizations/api/src/:id/page.tsx
@@ -2,6 +2,7 @@
 
 import { hyper_ref } from "@~/app.core/html";
 import { hx_include, hx_trigger_from_body } from "@~/app.core/htmx";
+import { formattedPlural } from "@~/app.ui/plurial";
 import { hx_urls } from "@~/app.urls";
 import { ORGANISATION_EVENTS } from "@~/organizations.lib/event";
 import { usePageRequestContext } from "./context";
@@ -14,15 +15,6 @@ export default async function Page() {
     var: { organization },
   } = usePageRequestContext();
   const $domains_describedby = hyper_ref();
-  const $members_describedby = hyper_ref();
-  const $page_ref = hyper_ref();
-
-  const hx_get_members_query_props = await hx_urls.organizations[
-    ":id"
-  ].members.$get({
-    param: { id: organization.id.toString() },
-    query: { describedby: $members_describedby, page_ref: $page_ref },
-  });
 
   const hx_get_domains_query_props = await hx_urls.organizations[
     ":id"
@@ -47,19 +39,52 @@ export default async function Page() {
       ></div>
       <hr />
       <br />
-      <h3 id={$members_describedby}>
-        Membres enregistrés dans cette organisation :
-      </h3>
-      <div
-        {...hx_get_members_query_props}
-        class="fr-table"
-        hx-include={hx_include([$page_ref])}
-        hx-target="this"
-        hx-trigger={[
-          "load",
-          ...hx_trigger_from_body([ORGANISATION_EVENTS.Enum.MEMBERS_UPDATED]),
-        ]}
-      ></div>
+      <MembersInTheOrganization />
     </main>
   );
 }
+
+async function MembersInTheOrganization() {
+  const $describedby = hyper_ref();
+  const $members_describedby = hyper_ref();
+  const $page_ref = hyper_ref();
+  const {
+    var: { organization, query_organization_members_count },
+  } = usePageRequestContext();
+  const count = await query_organization_members_count;
+
+  const hx_get_members_query_props = await hx_urls.organizations[
+    ":id"
+  ].members.$get({
+    param: { id: organization.id.toString() },
+    query: { describedby: $members_describedby, page_ref: $page_ref },
+  });
+
+  return (
+    <section>
+      <details open={false}>
+        <summary>
+          <h3 class="inline-block" id={$describedby}>
+            👥 {count}{" "}
+            {formattedPlural(count, {
+              one: "membre enregistré",
+              other: "membres enregistrés ",
+            })}{" "}
+            dans l’organisation :
+          </h3>
+        </summary>
+
+        <div
+          {...hx_get_members_query_props}
+          class="fr-table"
+          hx-include={hx_include([$page_ref])}
+          hx-target="this"
+          hx-trigger={[
+            "load",
+            ...hx_trigger_from_body([ORGANISATION_EVENTS.Enum.MEMBERS_UPDATED]),
+          ]}
+        ></div>
+      </details>
+    </section>
+  );
+}