feat: display communes from epci

BaseAdresseNationale · Nov 27, 2024 · bdcc39a · bdcc39a
1 parent c702a0d
commit bdcc39a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 20 deletions.
diff --git a/components/api-depot/client/client-form/perimeter-list.tsx b/components/api-depot/client/client-form/perimeter-list.tsx
@@ -50,13 +50,14 @@ const PerimeterList = ({ perimeters, handlePerimeter }: PerimeterListProps) => {
               key={idx}
               className="fr-container fr-my-2w fr-grid-row fr-grid-row--gutters fr-grid-row--bottom"
             >
-              <Perimeter
-                type={p.type}
-                code={p.code}
-                handlePerimeter={(p) => handleChange(p, idx)}
-              />
-
-              <div className="fr-col-1">
+              <div className="fr-col-8">
+                <Perimeter
+                  type={p.type}
+                  code={p.code}
+                  handlePerimeter={(p) => handleChange(p, idx)}
+                />
+              </div>
+              <div className="fr-col-2">
                 <Button
                   iconId="fr-icon-delete-bin-line"
                   onClick={(e) => removePerimeter(e, idx)}

diff --git a/components/api-depot/client/client-form/perimeter.tsx b/components/api-depot/client/client-form/perimeter.tsx
@@ -8,7 +8,8 @@ import allCommunes from "@etalab/decoupage-administratif/data/communes.json";
 import AutocompleteInput from "@/components/autocomplete-input";
 import SelectInput from "@/components/select-input";
 import { PerimeterType, TypePerimeterEnum } from "types/api-depot";
-import { useFuse } from "@/hooks/use-fuse";
+import { Tooltip } from "@codegouvfr/react-dsfr/Tooltip";
+import Badge from "@codegouvfr/react-dsfr/Badge";
 
 const typeOptions = [
   { label: "EPCI", value: "epci" },
@@ -74,9 +75,19 @@ const Perimeter = ({ type, code, handlePerimeter }: PerimetreProps) => {
     }
   };
 
+  const communeFromEPCI = useMemo(() => {
+    if (type === TypePerimeterEnum.EPCI) {
+      return epcis
+        .find((epci) => epci.code === code)
+        ?.membres.map((commune) => `${commune.nom} (${commune.code})`)
+        .join(", ");
+    }
+    return null;
+  }, [type, code]);
+
   return (
     <div className="fr-grid-row fr-grid-row--gutters">
-      <div className="fr-col-6">
+      <div className="fr-col-5">
         <SelectInput
           label="Type"
           value={type}
@@ -88,7 +99,7 @@ const Perimeter = ({ type, code, handlePerimeter }: PerimetreProps) => {
         />
       </div>
 
-      <div className="fr-col-6">
+      <div className="fr-col-5">
         <AutocompleteInput
           id={uniqueId()}
           label="Code"
@@ -97,6 +108,11 @@ const Perimeter = ({ type, code, handlePerimeter }: PerimetreProps) => {
           onChange={handleChange}
         />
       </div>
+      <div className="fr-col-2" style={{ alignContent: "end" }}>
+        {type === TypePerimeterEnum.EPCI && (
+          <Tooltip kind="hover" title={communeFromEPCI} />
+        )}
+      </div>
     </div>
   );
 };

diff --git a/package.json b/package.json
@@ -23,7 +23,7 @@
     "typeorm:migration:down": "yarn typeorm migration:revert -- -d ./typeorm.config.ts"
   },
   "dependencies": {
-    "@codegouvfr/react-dsfr": "^0.69.0",
+    "@codegouvfr/react-dsfr": "^1.14.7",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@etalab/decoupage-administratif": "^4.0.0",

diff --git a/yarn.lock b/yarn.lock
@@ -197,12 +197,13 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
-"@codegouvfr/react-dsfr@^0.69.0":
-  version "0.69.0"
-  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-0.69.0.tgz#51d818fadc1fc73f5bb23fd98f63d6507a0296aa"
-  integrity sha512-5hLoGUSBDmXxiHGu3Q3Z7cX2iVL60KEyu6zvGSUZ77DW04yEGYtR31iHdi4RQl6tFYYtSZnoNNLxuRRQJSEdqQ==
+"@codegouvfr/react-dsfr@^1.14.7":
+  version "1.14.7"
+  resolved "https://registry.yarnpkg.com/@codegouvfr/react-dsfr/-/react-dsfr-1.14.7.tgz#1d7c95adf6afa252e43a9064feb6ac413974f49c"
+  integrity sha512-NCq1aMl4tA5rgY8Iu+q74s7CjS8wytW0TACqvVlBRFxuoijkDNnHyiEdfPZgHcz8ZAR0BJqQfrHeVTVFVXTYHQ==
   dependencies:
-    tsafe "^1.6.3"
+    tsafe "^1.7.2"
+    yargs-parser "^21.1.1"
 
 "@colors/[email protected]", "@colors/colors@^1.6.0":
   version "1.6.0"
@@ -4649,10 +4650,10 @@ ts-node@^10.9.2:
     v8-compile-cache-lib "^3.0.1"
     yn "3.1.1"
 
-tsafe@^1.6.3:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.6.4.tgz#048a114761714538c72f16abd25bb247d4e3780e"
-  integrity sha512-l4Z54QFGHO8GF0gBpb3yPGHjkIkIirl8rwW+lMBmtEMzOJeRs8BdjkDEx6nU8Ak9PQVp/KNDtECxTja8MMIDoA==
+tsafe@^1.7.2:
+  version "1.8.5"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.8.5.tgz#cdf9fa3111974ac480d7ee519f8241815e5d22ea"
+  integrity sha512-LFWTWQrW6rwSY+IBNFl2ridGfUzVsPwrZ26T4KUJww/py8rzaQ/SY+MIz6YROozpUCaRcuISqagmlwub9YT9kw==
 
 tsconfig-paths@^3.14.2:
   version "3.14.2"