Merge pull request #9907 from mfo/main-in-repetition

ETQ admin je peux ajouter un champ carte dans un bloc répétable
This commit is contained in:
mfo 2024-02-09 09:30:33 +01:00 committed by GitHub
commit 6a0b17a3ef
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 32 additions and 13 deletions

View file

@ -90,7 +90,6 @@ class TypesDeChampEditor::ChampComponent < ApplicationComponent
end end
EXCLUDE_FROM_BLOCK = [ EXCLUDE_FROM_BLOCK = [
TypeDeChamp.type_champs.fetch(:carte),
TypeDeChamp.type_champs.fetch(:repetition) TypeDeChamp.type_champs.fetch(:repetition)
] ]

View file

@ -1,5 +1,6 @@
import React from 'react'; import React from 'react';
import { fire } from '@utils'; import { fire } from '@utils';
import type { FeatureCollection } from 'geojson';
import ComboAdresseSearch from '../../ComboAdresseSearch'; import ComboAdresseSearch from '../../ComboAdresseSearch';
import { ComboSearchProps } from '~/components/ComboSearch'; import { ComboSearchProps } from '~/components/ComboSearch';
@ -8,7 +9,7 @@ export function AddressInput(
comboProps: Pick< comboProps: Pick<
ComboSearchProps, ComboSearchProps,
'screenReaderInstructions' | 'announceTemplateId' 'screenReaderInstructions' | 'announceTemplateId'
> > & { featureCollection: FeatureCollection }
) { ) {
return ( return (
<div <div
@ -21,7 +22,10 @@ export function AddressInput(
placeholder="Rechercher une adresse : saisissez au moins 2 caractères" placeholder="Rechercher une adresse : saisissez au moins 2 caractères"
allowInputValues={false} allowInputValues={false}
onChange={(_, feature) => { onChange={(_, feature) => {
fire(document, 'map:zoom', { feature }); fire(document, 'map:zoom', {
featureCollection: comboProps.featureCollection,
feature
});
}} }}
{...comboProps} {...comboProps}
/> />

View file

@ -6,6 +6,7 @@ import type { FeatureCollection } from 'geojson';
import { useMapLibre } from '../../shared/maplibre/MapLibre'; import { useMapLibre } from '../../shared/maplibre/MapLibre';
import { import {
useFitBounds, useFitBounds,
useFitBoundsNoFly,
useEvent, useEvent,
useMapEvent, useMapEvent,
useFlyTo useFlyTo
@ -117,6 +118,7 @@ function useExternalEvents(
} }
) { ) {
const fitBounds = useFitBounds(); const fitBounds = useFitBounds();
const fitBoundsNoFly = useFitBoundsNoFly();
const flyTo = useFlyTo(); const flyTo = useFlyTo();
const onFeatureFocus = useCallback( const onFeatureFocus = useCallback(
@ -136,12 +138,11 @@ function useExternalEvents(
const onZoomFocus = useCallback( const onZoomFocus = useCallback(
({ detail }) => { ({ detail }) => {
const { feature } = detail; if (detail.feature && detail.featureCollection == featureCollection) {
if (feature) { flyTo(17, detail.feature.geometry.coordinates);
flyTo(17, feature.geometry.coordinates);
} }
}, },
[flyTo] [flyTo, featureCollection]
); );
const onFeatureCreate = useCallback( const onFeatureCreate = useCallback(
@ -184,10 +185,10 @@ function useExternalEvents(
); );
useEffect(() => { useEffect(() => {
fitBounds(featureCollection.bbox as LngLatBoundsLike); fitBoundsNoFly(featureCollection.bbox as LngLatBoundsLike);
// We only want to zoom on bbox on component mount. // We only want to zoom on bbox on component mount.
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [fitBounds]); }, [fitBoundsNoFly]);
useEvent('map:feature:focus', onFeatureFocus); useEvent('map:feature:focus', onFeatureFocus);
useEvent('map:feature:create', onFeatureCreate); useEvent('map:feature:create', onFeatureCreate);

View file

@ -1,9 +1,13 @@
import React, { useState, useId } from 'react'; import React, { useState, useId } from 'react';
import { fire } from '@utils'; import { fire } from '@utils';
import type { Feature } from 'geojson'; import type { Feature, FeatureCollection } from 'geojson';
import CoordinateInput from 'react-coordinate-input'; import CoordinateInput from 'react-coordinate-input';
export function PointInput() { export function PointInput({
featureCollection
}: {
featureCollection: FeatureCollection;
}) {
const inputId = useId(); const inputId = useId();
const [value, setValue] = useState(''); const [value, setValue] = useState('');
const [feature, setFeature] = useState<Feature | null>(null); const [feature, setFeature] = useState<Feature | null>(null);
@ -60,7 +64,7 @@ export function PointInput() {
properties: {} properties: {}
}; };
setFeature(feature); setFeature(feature);
fire(document, 'map:zoom', { feature }); fire(document, 'map:zoom', { featureCollection, feature });
} else { } else {
setFeature(null); setFeature(null);
} }

View file

@ -50,6 +50,7 @@ export default function MapEditor({
<ImportFileInput featureCollection={featureCollection} {...actions} /> <ImportFileInput featureCollection={featureCollection} {...actions} />
<AddressInput <AddressInput
featureCollection={featureCollection}
screenReaderInstructions={autocompleteScreenReaderInstructions} screenReaderInstructions={autocompleteScreenReaderInstructions}
announceTemplateId={autocompleteAnnounceTemplateId} announceTemplateId={autocompleteAnnounceTemplateId}
/> />
@ -82,7 +83,7 @@ export default function MapEditor({
</> </>
) : null} ) : null}
</MapLibre> </MapLibre>
<PointInput /> <PointInput featureCollection={featureCollection} />
</> </>
); );
} }

View file

@ -26,6 +26,16 @@ export function useFitBounds() {
); );
} }
export function useFitBoundsNoFly() {
const map = useMapLibre();
return useCallback(
(bbox: LngLatBoundsLike) => {
map.fitBounds(bbox, { padding: 100, linear: true, duration: 0 });
},
[map]
);
}
export function useFlyTo() { export function useFlyTo() {
const map = useMapLibre(); const map = useMapLibre();
return useCallback( return useCallback(