Skip to content

Commit

Permalink
fix(geographical-categories): display sidemenu and filter map
Browse files Browse the repository at this point in the history
  • Loading branch information
@Mihoub2
Mihoub2 committed Nov 7, 2023
1 parent 9952910 commit 87264ba
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 168 deletions.
9 changes: 5 additions & 4 deletions src/components/map/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`,
Expand Down
84 changes: 45 additions & 39 deletions src/pages/categories-geographiques/[id]/elements-lies.js
View file
Original file line number Diff line number Diff line change
@@ -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';

Expand All @@ -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);
Expand All @@ -36,55 +52,43 @@ 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>
<Title as="h2" look="h4">
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>
Expand All @@ -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>
);
}
59 changes: 2 additions & 57 deletions src/pages/categories-geographiques/[id]/presentation.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -61,8 +58,6 @@ export default function GeographicalCategoryPresentationPage() {
}));
}

const identifiers = [];

return (
<>
{
Expand All @@ -80,7 +75,6 @@ export default function GeographicalCategoryPresentationPage() {
</Row>
)
}

{
data?.parent && (
<Row className="fr-mb-3w">
Expand All @@ -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 && (
Expand All @@ -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>
</>
)}
</>
);
}
91 changes: 43 additions & 48 deletions src/pages/categories-geographiques/[id]/structuresList.js
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
}
Expand All @@ -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>
);
}

Expand All @@ -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" />;
Expand Down
Loading

0 comments on commit 87264ba

Please sign in to comment.