REDMINE_ISSUE-13799|Liste et carte - Rechargement de l'appli au clic sur un signalement sur la carte

use router in popup links to avoid website reload

Maintenant on pourra supprimer les reverse url dans django, car il n'y a plus besoin de feature_url et de feature_type_url renvoyé par le back.

src/services/map-service.js

@@ -20,6 +20,8 @@ import VectorLayer from 'ol/layer/Vector';
 import { fromLonLat } from 'ol/proj.js';
 import OverlayPositioning from 'ol/OverlayPositioning';
 
+import router from '@/router';
+
 
 let dictLayersToLeaflet = {};
 let statusList = [
@@ -124,18 +126,40 @@ const mapService = {
     return this.map;
   },
 
+  
+  addRouterToPopup(featureTypeSlug, featureId) {
+    function goToFeatureDetail() {
+      console.log(featureTypeSlug, featureId);
+      router.push({
+        name: 'details-signalement',
+        params: {
+          slug_type_signal: featureTypeSlug, //'1-polygones'
+          slug_signal: featureId, //'d267c6fa-d676-45c9-8e34-ec3d1bcc7c25'
+        },
+      });
+    }
+  
+    function goToFeatureTypeDetail() {
+      router.push({
+        name: 'details-type-signalement',
+        params: {
+          feature_type_slug: featureTypeSlug, //'1-polygones'
+        },
+      });
+    }
+    document.getElementById('goToFeatureTypeDetail').onclick = goToFeatureTypeDetail;
+    document.getElementById('goToFeatureDetail').onclick = goToFeatureDetail;
+  },
+
   onMapClick(event) {
-    let self = this;
     const features = this.map.getFeaturesAtPixel(event.pixel, {
-      layerFilter(l) {
-        return l === self.mvtLayer;
-      },
+      layerFilter: (l) => l === this.mvtLayer
     });
     if (features && features.length > 0) {
-      const popupContent = this._createContentPopup(features[0],
-        this.mvtLayer.featureTypes, this.mvtLayer.project_slug);
-      this.content.innerHTML = popupContent;
+      const popupContent = this._createContentPopup(features[0], this.mvtLayer.featureTypes);
+      this.content.innerHTML = popupContent.html;
       this.overlay.setPosition(event.coordinate);
+      this.addRouterToPopup(popupContent.feature_type.slug, popupContent.featureId);
     }
     //const queryableLayerSelected = document.getElementById(`queryable-layers-selector-${this.wmsParams.basemapId}`).getElementsByClassName('selected')[0].textContent;
     if (this.layers) {
@@ -476,7 +500,7 @@ const mapService = {
     this.map.on(eventName, callback);
   },
 
-  _createContentPopup: function (feature, featureTypes, project_slug) {
+  _createContentPopup: function (feature, featureTypes) {
     const formatDate = (current_datetime) => {
       let formatted_date = current_datetime.getFullYear() + '-' + ('0' + (current_datetime.getMonth() + 1)).slice(-2) + '-' + ('0' + current_datetime.getDate()).slice(-2) + ' ' +
         ('0' + current_datetime.getHours()).slice(-2) + ':' + ('0' + current_datetime.getMinutes()).slice(-2);
@@ -485,37 +509,24 @@ const mapService = {
     let feature_type;
     let status;
     let date_maj;
-    let feature_type_url;
-    let feature_url;
 
     if (feature.getProperties) {
       status = feature.getProperties().status;
       date_maj = feature.getProperties().updated_on;
-      feature_type_url = feature.getProperties().feature_type_url;
-      feature_url = feature.getProperties().feature_url;
     } else {
       status = feature.status;
       date_maj = feature.updated_on;
-      feature_type_url = feature.feature_type_url;
-      feature_url = feature.feature_url;
     }
 
     if (featureTypes) { // => VectorTile
       feature_type = featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
       status = statusList.find((x) => x.value === feature.getProperties().status).name;
       date_maj = formatDate(new Date(feature.getProperties().updated_on));
-      feature_type_url = '/geocontrib/projet/' + project_slug + '/type-signalement/' + feature_type.slug + '/';
-      feature_url = feature_type_url + 'signalement/' + feature.getProperties().feature_id + '/';
     } else {
       feature_type = feature.getProperties ? feature.getProperties().feature_type : feature.feature_type;
       status = feature.getProperties ? feature.getProperties().status.label : feature.status.label;
     }
 
-    //* adapt link url for shared-project restricted navigation
-    if (window.location.pathname.includes('projet-partage')) {
-      feature_url = feature_url.replace('projet', 'projet-partage');
-      feature_type_url = feature_type_url.replace('projet', 'projet-partage');
-    }
     let author = '';
     const creator = feature.getProperties ? feature.getProperties().creator : feature.creator;
     if (creator) {
@@ -527,21 +538,23 @@ const mapService = {
     }
 
     const title = feature.getProperties ? feature.getProperties().title : feature.title;
-    return `
-              <h4>
-                  <a href="${feature_url}">${title}</a>
-              </h4>
-              <div>
-                  Statut : ${status}
-              </div>
-              <div>
-                  Type : <a href="${feature_type_url}"> ${feature_type.title} </a>
-              </div>
-              <div>
-                  Dernière mise à jour : ${date_maj}
-              </div>
-              ${author}
-          `;
+    const html = `
+                  <h4>
+                    <a id="goToFeatureDetail" class="pointer">${title}</a>
+                  </h4>
+                  <div>
+                    Statut : ${status}
+                  </div>
+                  <div>
+                    Type : <a id="goToFeatureTypeDetail" class="pointer"> ${feature_type.title} </a>
+                  </div>
+                  <div>
+                    Dernière mise à jour : ${date_maj}
+                  </div>
+                  ${author}
+                  `;
+    const featureId = feature.getProperties ? feature.getProperties().feature_id : feature.id;
+    return { html, feature_type, featureId };
   },
   zoomTo(location, zoomlevel, lon, lat) {
     if (lon && lat) {