From 87264baa8ba76f3c4a64fd3521099b8efff2d8bd Mon Sep 17 00:00:00 2001
From: Mihoub Debache <debache.mihoub@gmail.com>
Date: Tue, 7 Nov 2023 14:30:47 +0100
Subject: [PATCH] fix(geographical-categories): display sidemenu and filter map

---
 src/components/map/index.js                   |  9 +-
 .../[id]/elements-lies.js                     | 84 +++++++++--------
 .../[id]/presentation.js                      | 59 +-----------
 .../[id]/structuresList.js                    | 91 +++++++++----------
 src/pages/categories-geographiques/index.js   | 63 +++++++++----
 5 files changed, 138 insertions(+), 168 deletions(-)

diff --git a/src/components/map/index.js b/src/components/map/index.js
index d85477f1..f4e885fb 100644
--- a/src/components/map/index.js
+++ b/src/components/map/index.js
@@ -6,10 +6,11 @@ import { MapContainer, Marker, TileLayer, Tooltip, useMap } from 'react-leaflet'
 
 const getIcon = (color = '#0078f3') => divIcon({
   html: `
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="36" height="36">
-    <path fill="none" d="M0 0h24v24H0z"/>
-      <g fill=${color}>
-        <path d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1 1 12.728 0zM12 15a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0-2a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
+       <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="25" height="30">
+      <path fill="none" d="M0 0h24v24H0z"/>
+      <g fill=${color} stroke=#000 stroke-width="1" fill-opacity="0.5">
+        <path d="M18.364 17.364L12 23.728l-6.364-6.364a9 9 0 1 1 12.728 0"/>
+        <circle cx="12" cy="13" r="1"/>
       </g>
     </svg>
   `,
diff --git a/src/pages/categories-geographiques/[id]/elements-lies.js b/src/pages/categories-geographiques/[id]/elements-lies.js
index d4a97995..588e2a3f 100644
--- a/src/pages/categories-geographiques/[id]/elements-lies.js
+++ b/src/pages/categories-geographiques/[id]/elements-lies.js
@@ -1,4 +1,5 @@
-import { Badge, Col, Container, Row, Title } from '@dataesr/react-dsfr';
+import { Badge, Col, Row, TextInput, Title } from '@dataesr/react-dsfr';
+import { useState } from 'react';
 import useFetch from '../../../hooks/useFetch';
 import useUrl from '../../../hooks/useUrl';
 
@@ -12,9 +13,24 @@ export default function GeographicalCategoryRelatedElements() {
     data: dataStructures,
     isLoading: structuresLoading,
   } = useFetch(`${url}/structures`);
+  const [filter, setFilter] = useState('');
 
   const exceptionGps = [];
   const exception = useFetch('/geographical-exceptions');
+  const filterMarkers = (data) => data
+    .filter((item) => (item?.currentLocalisation?.geometry?.coordinates || []).length === 2)
+    .filter((item) => item.currentName.usualName.toLowerCase().includes(filter.toLowerCase()))
+    .map((item) => ({
+      label: item.currentName.usualName,
+      latLng: [item.currentLocalisation.geometry.coordinates[1], item.currentLocalisation.geometry.coordinates[0]],
+      address: `{${item.currentLocalisation?.address || ''},
+          ${item.currentLocalLocalisation?.postalCode || ''} ${item.currentLocalisation?.locality || ''}, ${item.currentLocalisation?.country}}`,
+    }));
+
+  const filteredMarkers = filterMarkers(dataStructures?.data || []);
+  const handleFilterChange = (e) => {
+    setFilter(e.target.value);
+  };
 
   if (exception?.data?.data) {
     const geographicalCategoryIds = exception.data.data.map((item) => item.geographicalCategoryId);
@@ -36,32 +52,22 @@ export default function GeographicalCategoryRelatedElements() {
   if (structuresLoading) {
     structuresContent = <PageSpinner />;
   } else if (dataStructures?.data?.length > 0) {
+    const filteredCardsData = dataStructures.data.filter((item) => item.currentName.usualName.toLowerCase().includes(filter.toLowerCase()));
     structuresContent = (
       <>
         <Title as="h2" look="h4">
           Structures associées
-          <Badge text={dataStructures.totalCount} colorFamily="yellow-tournesol" />
+          <Badge text={filteredMarkers.length} colorFamily="yellow-tournesol" />
         </Title>
-        <Row className="fr-mb-3w">
+        <Row gutters className="fr-mb-3w">
           <Col>
-            <Map
-              markers={
-                dataStructures.data
-                  .filter((item) => (item?.currentLocalisation?.geometry?.coordinates || []).length === 2)
-                  .map((item) => ({
-                    label: item.currentName.usualName,
-                    latLng: [item.currentLocalisation.geometry.coordinates[1], item.currentLocalisation.geometry.coordinates[0]],
-                    address: `{${item.currentLocalisation?.address || ''},
-                      ${item.currentLocalisation?.postalCode || ''} ${item.currentLocalisation?.locality || ''}, ${item.currentLocalisation?.country}}`,
-                  }))
-              }
-            />
+            <Map markers={filteredMarkers} />
           </Col>
         </Row>
         <Row gutters>
-          <StructuresList
-            data={dataStructures.data}
-          />
+          <Col n="12">
+            <StructuresList data={filteredCardsData} />
+          </Col>
         </Row>
         <Row className="fr-mt-3w">
           <Col>
@@ -69,22 +75,20 @@ export default function GeographicalCategoryRelatedElements() {
               Autres structures associées en dehors du territoire
               <Badge text={exceptionGps.length} colorFamily="yellow-tournesol" />
             </Title>
-            <Row className="fr-mb-3w">
-              <Col>
-                <Map
-                  markers={
-                    exceptionGps
-                      .filter((item) => (item?.currentLocalisation?.geometry?.coordinates || []).length === 2)
-                      .map((item) => ({
-                        label: item.resource.currentName.displayName,
-                        latLng: [item.currentLocalisation.geometry.coordinates[1], item.currentLocalisation.geometry.coordinates[0]],
-                        address: `${item.currentLocalisation?.address || ''},
+            <Col>
+              <Map
+                markers={
+                  exceptionGps
+                    .filter((item) => (item?.currentLocalisation?.geometry?.coordinates || []).length === 2)
+                    .map((item) => ({
+                      label: item.resource.currentName.displayName,
+                      latLng: [item.currentLocalisation.geometry.coordinates[1], item.currentLocalisation.geometry.coordinates[0]],
+                      address: `${item.currentLocalisation?.address || ''},
                           ${item.currentLocalisation?.postalCode || ''} ${item.currentLocalisation?.locality || ''}, ${item.currentLocalisation?.country}`,
-                      }))
-                  }
-                />
-              </Col>
-            </Row>
+                    }))
+                }
+              />
+            </Col>
             <ExceptionStructuresList exceptionGps={exceptionGps} />
           </Col>
         </Row>
@@ -93,12 +97,14 @@ export default function GeographicalCategoryRelatedElements() {
   }
 
   return (
-    <Container>
-      {/* <Title as="h2" look="h4">
-        Catégorie parente
-      </Title>
-      {data?.closestParent && <Tag color="blue-ecume" className="fr-mb-3w" />} */}
+    <Col>
+      <TextInput
+        label="Filtre sur le nom de la structure"
+        name="nameFilter"
+        onChange={handleFilterChange}
+        value={filter}
+      />
       {structuresContent}
-    </Container>
+    </Col>
   );
 }
diff --git a/src/pages/categories-geographiques/[id]/presentation.js b/src/pages/categories-geographiques/[id]/presentation.js
index 00f4f41f..215af40a 100644
--- a/src/pages/categories-geographiques/[id]/presentation.js
+++ b/src/pages/categories-geographiques/[id]/presentation.js
@@ -2,16 +2,13 @@ import { Badge, Col, Row, Title } from '@dataesr/react-dsfr';
 import useFetch from '../../../hooks/useFetch';
 import useUrl from '../../../hooks/useUrl';
 import KeyValueCard from '../../../components/card/key-value-card';
-import Wiki from '../../../components/blocs/wiki';
 import { PageSpinner } from '../../../components/spinner';
 import Error from '../../../components/errors';
 import Map from '../../../components/map/geographical-categories-map';
 import {
   ExceptionStructuresList,
-  StructuresList,
 } from './structuresList';
-import { Bloc, BlocActionButton, BlocContent, BlocTitle } from '../../../components/bloc';
-import { exportGeographicalCategoriesStructuresToCsv } from '../../../components/blocs/relations/utils/exports';
+import { BlocTitle } from '../../../components/bloc';
 import GeographicalTags from '../../../components/blocs/geographical-tags';
 
 export default function GeographicalCategoryPresentationPage() {
@@ -61,8 +58,6 @@ export default function GeographicalCategoryPresentationPage() {
     }));
   }
 
-  const identifiers = [];
-
   return (
     <>
       {
@@ -80,7 +75,6 @@ export default function GeographicalCategoryPresentationPage() {
           </Row>
         )
       }
-
       {
         data?.parent && (
           <Row className="fr-mb-3w">
@@ -91,43 +85,14 @@ export default function GeographicalCategoryPresentationPage() {
           </Row>
         )
       }
-
       <Row gutters>
-        <Col n="6">
+        <Col n="12">
           <Map
             height="800px"
             markers={markers}
             polygonCoordinates={polygonCoordinates}
           />
         </Col>
-        <Col n="6">
-          <Row>
-            <Col>
-              <Title as="h2" look="h4">
-                Structures associées
-                <Badge
-                  className="fr-ml-1w fr-mr-1w"
-                  colorFamily="yellow-tournesol"
-                  text={dataStructures?.totalCount.toString() || '0'}
-                />
-              </Title>
-            </Col>
-            <Col className="text-right">
-              <BlocActionButton
-                edit={false}
-                icon="ri-download-line"
-                onClick={() => exportGeographicalCategoriesStructuresToCsv({
-                  data: dataStructures?.data,
-                  fileName: `structure_${data?.nameFr}`,
-                })}
-              >
-                Télécharger la liste
-              </BlocActionButton>
-            </Col>
-
-          </Row>
-          <StructuresList data={dataStructures?.data} />
-        </Col>
       </Row>
       {
         exceptionGps?.length > 0 && (
@@ -150,26 +115,6 @@ export default function GeographicalCategoryPresentationPage() {
         )
       }
 
-      {identifiers.length > 0 && (
-        <Bloc data={identifiers}>
-          <BlocTitle as="h3" look="h4">
-            Identifiants
-          </BlocTitle>
-          <BlocContent>
-            bloc content
-          </BlocContent>
-        </Bloc>
-
-      )}
-
-      {data?.wikidata && (
-        <>
-          <Title as="h3" look="h4">Présence sur le web</Title>
-          <Row spacing="mb-5w">
-            <Wiki geographicalCategoryWiki={data.wikidata} />
-          </Row>
-        </>
-      )}
     </>
   );
 }
diff --git a/src/pages/categories-geographiques/[id]/structuresList.js b/src/pages/categories-geographiques/[id]/structuresList.js
index 0465c03a..955a0346 100644
--- a/src/pages/categories-geographiques/[id]/structuresList.js
+++ b/src/pages/categories-geographiques/[id]/structuresList.js
@@ -1,4 +1,4 @@
-import { Badge, Col, Icon, Row, Tile, TextInput } from '@dataesr/react-dsfr';
+import { Badge, Col, Icon, Row, Tile } from '@dataesr/react-dsfr';
 import PropTypes from 'prop-types';
 import { Link as RouterLink } from 'react-router-dom';
 import { useState } from 'react';
@@ -18,41 +18,34 @@ const getDescription = (item) => {
 };
 
 export function StructuresList({ data }) {
-  const [filter, setFilter] = useState('');
+  const [filter] = useState('');
   if (!data && !data?.data) {
     return null;
   }
   const list = data
     .filter((item) => item.currentName.usualName.toLowerCase().indexOf(filter.toLowerCase()) > -1)
     .map((item) => (
-      <Row gutters>
-        <Col n="12" as="li" key={item.id}>
-          <Tile horizontal color="var(--structures-color)">
-            <div className="fr-tile__body">
-              <p className="fr-tile__title">
-                <RouterLink className="fr-tile__link fr-link--md" to={`/structures/${item.id}`}>
-                  <Icon name="ri-building-line" size="1x" color="var(--structures-color)" />
-                  {getName(item)}
-                </RouterLink>
-              </p>
-              <p className="fr-tile__desc">{getDescription(item)}</p>
-            </div>
-          </Tile>
-        </Col>
-      </Row>
+      <Col n="12" as="li" key={item.id}>
+        <Tile horizontal color="var(--structures-color)">
+          <div className="fr-tile__body">
+            <p className="fr-tile__title">
+              <RouterLink className="fr-tile__link fr-link--md" to={`/structures/${item.id}`}>
+                <Icon name="ri-building-line" size="1x" color="var(--structures-color)" />
+                {getName(item)}
+              </RouterLink>
+            </p>
+            <p className="fr-tile__desc">{getDescription(item)}</p>
+          </div>
+        </Tile>
+      </Col>
     ));
 
   return (
-    <>
-      <TextInput
-        label="Filtre sur le nom de la structure"
-        name="nameFilter"
-        onChange={(e) => setFilter(e.target.value)}
-        value={filter}
-      />
-      <div style={{ height: '700px', overflowY: 'scroll' }}>
-        <style>
-          {`
+    <Row>
+      <Col>
+        <div style={{ height: '700px', overflowY: 'scroll' }}>
+          <style>
+            {`
               ::-webkit-scrollbar {
                 width: 8px;
               }
@@ -67,10 +60,11 @@ export function StructuresList({ data }) {
                 background-color: transparent;
               }
               `}
-        </style>
-        <ExpendableListCards list={list} max={5} nCol="12 md-12" />
-      </div>
-    </>
+          </style>
+          <ExpendableListCards list={list} max={5} nCol="12 md-6" />
+        </div>
+      </Col>
+    </Row>
   );
 }
 
@@ -80,23 +74,24 @@ export function ExceptionStructuresList({ exceptionGps }) {
   }
 
   const list = exceptionGps.map((item) => (
-    <Col n="12" as="li" key={item.id}>
-      <Tile horizontal color="var(--structures-color)">
-        <div className="fr-tile__body">
-          <p className="fr-tile__title">
-            <RouterLink className="fr-tile__link fr-link--md" to={`/structures/${item.resource.id}`}>
-              <Icon name="ri-building-line" size="1x" color="var(--structures-color)" />
-              {getName(item)}
-            </RouterLink>
-          </p>
-          {item?.resource?.structureStatus === 'inactive' ? (
-            <Badge isSmall colorFamily="brown-opera" text="Inactive" spacing="mb-0" />
-          ) : null}
-          <p className="fr-tile__desc">{getDescription(item)}</p>
-        </div>
-      </Tile>
-    </Col>
-
+    <Row>
+      <Col n="12" as="li" key={item.id}>
+        <Tile horizontal color="var(--structures-color)">
+          <div className="fr-tile__body">
+            <p className="fr-tile__title">
+              <RouterLink className="fr-tile__link fr-link--md" to={`/structures/${item.resource.id}`}>
+                <Icon name="ri-building-line" size="1x" color="var(--structures-color)" />
+                {getName(item)}
+              </RouterLink>
+            </p>
+            {item?.resource?.structureStatus === 'inactive' ? (
+              <Badge isSmall colorFamily="brown-opera" text="Inactive" spacing="mb-0" />
+            ) : null}
+            <p className="fr-tile__desc">{getDescription(item)}</p>
+          </div>
+        </Tile>
+      </Col>
+    </Row>
   ));
 
   return <ExpendableListCards list={list} nCol="12 md-4" />;
diff --git a/src/pages/categories-geographiques/index.js b/src/pages/categories-geographiques/index.js
index 05d0587c..f5e48d47 100644
--- a/src/pages/categories-geographiques/index.js
+++ b/src/pages/categories-geographiques/index.js
@@ -2,9 +2,9 @@ import { Link as RouterLink, Outlet } from 'react-router-dom';
 import {
   Badge, BadgeGroup,
   Breadcrumb, BreadcrumbItem,
-  Col, Container, Row,
-  // Icon,
-  // SideMenu, SideMenuLink,
+  Col, Container, Icon, Row,
+  SideMenu,
+  SideMenuLink,
   Title,
 } from '@dataesr/react-dsfr';
 import useFetch from '../../hooks/useFetch';
@@ -17,11 +17,14 @@ import GeographicalCategoriesRelatedElements from './[id]/elements-lies';
 import Error from '../../components/errors';
 import usePageTitle from '../../hooks/usePageTitle';
 import { GEOGRAPHICAL_CATEGORIES_LABELS_MAPPER } from '../../utils/constants';
+import Wiki from '../../components/blocs/wiki';
+import { Bloc, BlocContent, BlocTitle } from '../../components/bloc';
 
 function GeographicalCategoriesByIdPage() {
   const { url } = useUrl();
   const { data, isLoading, error } = useFetch(url);
   usePageTitle(`Catégorie géographique · ${data?.nameFr}`);
+  const identifiers = [];
 
   if (isLoading) return <PageSpinner />;
   if (error) return <Error status={error} />;
@@ -29,7 +32,7 @@ function GeographicalCategoriesByIdPage() {
   return (
     <Container spacing="pb-6w">
       <Row>
-        {/* <Col n="12 md-3">
+        <Col n="12 md-3">
           <SideMenu buttonLabel="Navigation">
             <SideMenuLink asLink={<RouterLink to="presentation" replace />}>
               <Icon name="ri-eye-2-line" size="1x" />
@@ -45,8 +48,7 @@ function GeographicalCategoriesByIdPage() {
             </SideMenuLink>
           </SideMenu>
         </Col>
-        <Col n="12 md-9"> */}
-        <Col n="12 md-12">
+        <Col n="12 md-9">
           <Row className="flex--space-between flex--wrap stick">
             <Breadcrumb>
               <BreadcrumbItem asLink={<RouterLink to="/" />}>
@@ -60,21 +62,42 @@ function GeographicalCategoriesByIdPage() {
               <BreadcrumbItem>{data.usualNameFr}</BreadcrumbItem>
             </Breadcrumb>
           </Row>
-          <Row>
-            <Title as="h2">
-              {`${data.nameFr} (${GEOGRAPHICAL_CATEGORIES_LABELS_MAPPER[data.level]})`}
-              <BadgeGroup className="fr-pt-1w">
-                <Badge text="Catégorie géographique" colorFamily="blue-ecume" />
-                <CopyBadgeButton
-                  colorFamily="yellow-tournesol"
-                  text={data.id}
-                  lowercase
-                />
-              </BadgeGroup>
-            </Title>
-          </Row>
-          <Outlet />
+          <Col n="12 md-12">
+            <Row>
+              <Title as="h2">
+                {`${data.nameFr} (${GEOGRAPHICAL_CATEGORIES_LABELS_MAPPER[data.level]})`}
+                <BadgeGroup className="fr-pt-1w">
+                  <Badge text="Catégorie géographique" colorFamily="blue-ecume" />
+                  <CopyBadgeButton
+                    colorFamily="yellow-tournesol"
+                    text={data.id}
+                    lowercase
+                  />
+                </BadgeGroup>
+              </Title>
+            </Row>
+            <Outlet />
+          </Col>
         </Col>
+        {identifiers.length > 0 && (
+          <Bloc data={identifiers}>
+            <BlocTitle as="h3" look="h4">
+              Identifiants
+            </BlocTitle>
+            <BlocContent>
+              Contenue a modifier asap
+            </BlocContent>
+          </Bloc>
+
+        )}
+        {data?.wikidata && (
+          <>
+            <Title as="h3" look="h4">Présence sur le web</Title>
+            <Row spacing="mb-5w">
+              <Wiki geographicalCategoryWiki={data.wikidata} />
+            </Row>
+          </>
+        )}
       </Row>
     </Container>
   );