Merge branch 'redmine-issues/13799' into 'develop'

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

See merge request !388

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) {