Feature: show list of geographical units which covers address in address details modal

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/AddressDetailsContent.vue

@@ -1,13 +1,14 @@
 <template>
-  <address-details-map :address="props.address"></address-details-map>
   <address-render-box :address="props.address"></address-render-box>
-
+  <address-details-map :address="props.address"></address-details-map>
+  <address-details-geographical-layers :address="props.address"></address-details-geographical-layers>
 </template>
 
 <script lang="ts" setup>
 import {Address} from "../../../types";
 import AddressDetailsMap from "./Parts/AddressDetailsMap.vue";
 import AddressRenderBox from "../Entity/AddressRenderBox.vue";
+import AddressDetailsGeographicalLayers from "./Parts/AddressDetailsGeographicalLayers.vue";
 
 interface AddressModalContentProps {
   address: Address,

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsGeographicalLayers.vue

@@ -0,0 +1,55 @@
+<template>
+  <template v-for="container in data.containers">
+    <h4>{{ container.layer.name.fr }}</h4>
+    <ul>
+      <li v-for="unit in container.units">{{ unit.unitName }} ({{ unit.unitRefId }})</li>
+    </ul>
+  </template>
+</template>
+
+<script lang="ts" setup>
+
+import {Address, GeographicalUnitLayer, SimpleGeographicalUnit} from "../../../../types";
+import {getGeographicalUnitsByAddress, getAllGeographicalUnitLayers} from "../../../../lib/api/address";
+import {onMounted, reactive} from "vue";
+
+export interface AddressDetailsGeographicalLayersProp {
+  address: Address
+};
+
+interface GeographicalUnitContainer {
+  layer: GeographicalUnitLayer;
+  units: SimpleGeographicalUnit[];
+}
+
+const props = defineProps<AddressDetailsGeographicalLayersProp>();
+
+const data: {
+  containers: GeographicalUnitContainer[]
+} = reactive({
+  containers: []
+});
+
+
+onMounted(async () => {
+  const [units, layers] = await Promise.all([
+    getGeographicalUnitsByAddress(props.address),
+    getAllGeographicalUnitLayers()
+  ]) as [SimpleGeographicalUnit[], GeographicalUnitLayer[]];
+
+  for (let layer of layers) {
+    let us = units.filter((u) => u.layerId === layer.id);
+    if (us.length > 0) {
+      data.containers.push({
+        layer,
+        units: us
+      });
+    }
+  }
+})
+
+</script>
+
+<style scoped>
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/AddressDetails/Parts/AddressDetailsMap.vue

@@ -3,8 +3,7 @@
     Cette adresse est incomplète. La position géographique est approximative.
   </div>
   <div v-if="props.address.point !== null" class="address_details_map" ref="map_div"></div>
-  <a :href="makeUrlGoogleMap(props.address)" target="_blank">Google Maps</a>
-  <a :href="makeUrlOsm(props.address)" target="_blank">OSM</a>
+  <p>Voir sur <a :href="makeUrlGoogleMap(props.address)" target="_blank">Google Maps</a> <a :href="makeUrlOsm(props.address)" target="_blank">OSM</a></p>
 </template>
 
 <script lang="ts" setup>
@@ -29,14 +28,13 @@ let map: L.Map|null = null;
 let marker: L.Marker|null = null;
 
 onMounted(() => {
-  console.log(map_div.value);
   if (map_div.value === null) {
     throw new Error('map div not found');
   }
 
   if (props.address.point !== null) {
     map = L.map(map_div.value);
-    map.setView(lonLatForLeaflet(props.address.point), 15);
+    map.setView(lonLatForLeaflet(props.address.point), 18);
 
 
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
@@ -57,7 +55,7 @@ onMounted(() => {
 const makeUrlGoogleMap = (address: Address): string => {
   const params = new URLSearchParams();
   params.append('api', '1');
-  if (address.point !== null) {
+  if (address.point !== null && address.addressReference !== null) {
     params.append('query', `${address.point.coordinates[1]} ${address.point.coordinates[0]}`);
   } else {
     params.append('query', address.lines.join(', '));
@@ -67,7 +65,7 @@ const makeUrlGoogleMap = (address: Address): string => {
 }
 
 const makeUrlOsm = (address: Address): string => {
-  if (address.point !== null) {
+  if (address.point !== null && address.addressReference !== null) {
     const params = new URLSearchParams();
     params.append('mlat', `${address.point.coordinates[1]}`);
     params.append('mlon', `${address.point.coordinates[0]}`);