feat(titre): ajoute un calque pour pouvoir afficher les titres valides (#518)

packages/ui/src/components/_common/map.tsx

-import { ref, computed, watch, onMounted } from 'vue'
+import { ref, computed, watch, onMounted, Ref } from 'vue'
 import { CaminoMap } from '../_map/index'
 
 import { leafletMarkerBuild, leafletGeojsonBuild, leafletDivIconBuild } from '../_map/leaflet'
 import { Icon } from '@/components/_ui/icon'
 import { getDomaineId, getTitreTypeType, TitreTypeId } from 'camino-common/src/static/titresTypes'
 import { GeoJsonObject } from 'geojson'
-import { LatLngTuple, Marker } from 'leaflet'
+import { LatLngTuple, LayerGroup, layerGroup, Marker } from 'leaflet'
 import { caminoDefineComponent } from '@/utils/vue-tsx-utils'
+import { titresGeoPolygon } from '@/api/titres'
+import { TitresStatutIds } from 'camino-common/src/static/titresStatuts'
+import { layersBuild, TitreWithPoint } from '@/components/titres/mapUtil'
+import { useRouter } from 'vue-router'
 
 export interface Props {
   geojson: GeoJsonObject
   points?: { nom: string; coordonnees: { x: number; y: number } }[]
   titreTypeId: TitreTypeId
   isMain?: boolean
+  titreId?: string
 }
 
-export const CamionCommonMap = caminoDefineComponent<Props>(['geojson', 'points', 'titreTypeId', 'isMain'], props => {
+export const CamionCommonMap = caminoDefineComponent<Props>(['geojson', 'points', 'titreTypeId', 'isMain', 'titreId'], props => {
   const map = ref<typeof CaminoMap | null>(null)
   const markersVisible = ref<boolean>(true)
   const patternVisible = ref<boolean>(true)
 
+  const router = useRouter()
+
   const isMain = computed(() => props.isMain ?? false)
 
   const points = computed(() => props.points ?? [])
@@ -87,9 +94,39 @@ export const CamionCommonMap = caminoDefineComponent<Props>(['geojson', 'points'
     centrer()
   })
 
+  const mapUpdate = async (data: { center?: number[]; zoom?: number; bbox?: number[] }) => {
+    const res: { elements: TitreWithPoint[] } = await titresGeoPolygon({
+      statutsIds: [TitresStatutIds.Valide, TitresStatutIds.ModificationEnInstance],
+      perimetre: data.bbox,
+    })
+    titresValidesGeojson.value.splice(0)
+    titresValidesGeojson.value.push(...res.elements.filter(({ id }) => id !== props.titreId))
+  }
+
+  const titresValidesGeojson = ref<TitreWithPoint[]>([])
+  const titresValidesLayer = ref<LayerGroup>(layerGroup([])) as Ref<LayerGroup>
+  const additionalOverlayLayers = computed<Record<string, LayerGroup>>(() => {
+    titresValidesLayer.value.clearLayers()
+
+    const { geojsons, markers } = layersBuild(titresValidesGeojson.value, router)
+    Object.values(geojsons).forEach(g => titresValidesLayer.value.addLayer(g))
+    markers.forEach(q => q.marker.addTo(titresValidesLayer.value))
+
+    return {
+      'Titres valides': titresValidesLayer.value,
+    }
+  })
+
   return () => (
     <div class="bg-alt">
-      <CaminoMap ref={map} geojsonLayers={geojsonLayers.value} markerLayers={markerLayers.value} class="map map-detail mb-s" />
+      <CaminoMap
+        ref={map}
+        mapUpdate={mapUpdate}
+        geojsonLayers={geojsonLayers.value}
+        markerLayers={markerLayers.value}
+        additionalOverlayLayers={additionalOverlayLayers.value}
+        class="map map-detail mb-s"
+      />
       <div class={`${isMain.value ? 'container' : ''}`}>
         <div class="tablet-blobs">
           <div class={`${!isMain.value ? 'px-s' : ''} tablet-blob-1-2`}>

packages/ui/src/components/_common/perimetre.tsx

@@ -58,7 +58,14 @@ export const Perimetre: FunctionalComponent<Props> = (props: Props) => {
       <div class={`${isMain ? 'width-full' : ''} line-neutral`} />
 
       {props.points && props.geojsonMultiPolygon && tabId === 'carte' ? (
-        <CamionCommonMap class={`${isMain ? 'width-full' : ''}`} geojson={props.geojsonMultiPolygon} points={props.points} titreTypeId={props.titreTypeId} isMain={props.isMain} />
+        <CamionCommonMap
+          class={`${isMain ? 'width-full' : ''}`}
+          geojson={props.geojsonMultiPolygon}
+          titreId={props.titreId}
+          points={props.points}
+          titreTypeId={props.titreTypeId}
+          isMain={props.isMain}
+        />
       ) : null}
 
       {props.points && tabId === 'points' ? (

packages/ui/src/components/_map/index.tsx

 import type { LatLngBoundsExpression, LatLngExpression, Map, Layer, LayersControlEvent, LeafletEvent } from 'leaflet'
 
 import { ref, onMounted, markRaw, watch } from 'vue'
-import { FeatureGroup, layerGroup } from 'leaflet'
+import { FeatureGroup, LayerGroup, layerGroup } from 'leaflet'
 import { caminoDefineComponent } from '@/utils/vue-tsx-utils'
 
 export interface Props {
   markerLayers: Layer[]
   geojsonLayers: Layer[]
   mapUpdate?: (data: { center?: number[]; zoom?: number; bbox?: number[] }) => void
+  additionalOverlayLayers?: Record<string, LayerGroup>
 }
 
-export const CaminoMap = caminoDefineComponent<Props>(['markerLayers', 'geojsonLayers', 'mapUpdate'], (props, { expose }) => {
+export const CaminoMap = caminoDefineComponent<Props>(['markerLayers', 'geojsonLayers', 'mapUpdate', 'additionalOverlayLayers'], (props, { expose }) => {
   const map = ref<HTMLDivElement | null>(null)
   const leafletComponent = ref<Map | null>(null)
   const updateBboxOnly = ref<boolean>(false)
@@ -150,6 +151,7 @@ export const CaminoMap = caminoDefineComponent<Props>(['markerLayers', 'geojsonL
       'Limite de la redevance d’archéologie préventive': RedevanceArcheologiePreventive,
       Contours: geojsonLayer,
       Points: markerLayer,
+      ...props.additionalOverlayLayers,
     }
     if (map.value !== null) {
       const leafletComponentOnMounted = markRaw(

packages/ui/src/components/titres/mapUtil.ts

@@ -2,7 +2,7 @@ import { leafletMarkerClusterGroupBuild, leafletGeojsonCenterFind, leafletGeojso
 import { TitresStatuts } from 'camino-common/src/static/titresStatuts'
 import { getDomaineId, getTitreTypeType } from 'camino-common/src/static/titresTypes'
 import { DomaineId, sortedDomaines } from 'camino-common/src/static/domaines'
-import { DivIconOptions, GeoJSONOptions, LeafletEventHandlerFnMap, Map, Marker, MarkerClusterGroup, PopupOptions } from 'leaflet'
+import { DivIconOptions, GeoJSON, GeoJSONOptions, LeafletEventHandlerFnMap, Map, Marker, MarkerClusterGroup, PopupOptions } from 'leaflet'
 import { Router } from 'vue-router'
 import { CommonTitre } from 'camino-common/src/titres'
 import { GeoJsonObject } from 'geojson'
@@ -97,7 +97,7 @@ export type CaminoMarker = {
   domaineId?: DomaineId
 }
 export const layersBuild = (titres: TitreWithPoint[], router: Router) =>
-  titres.reduce<{ geojsons: Record<string, any>; markers: CaminoMarker[] }>(
+  titres.reduce<{ geojsons: Record<string, GeoJSON>; markers: CaminoMarker[] }>(
     ({ geojsons, markers }, titre, index) => {
       if (!titre.geojsonMultiPolygon && !titre.geojsonCentre) return { geojsons, markers }