WIP: adding route to feature browsing on map

src/services/map-service.js

@@ -116,7 +116,21 @@ const mapService = {
   },
 
   
-  addRouterToPopup(featureTypeSlug, featureId) {
+  addRouterToPopup({ featureTypeSlug, featureId, index }) {
+    function goToBrowseFeatureDetail() {
+      router.push({
+        name: 'details-signalement-filtre',
+        params: {
+          slug_type_signal: featureTypeSlug,
+        },
+        query: {
+          ordering: /* project.feature_browsing_default_sort */'-updated_on',
+          feature_type: /* project.feature_browsing_default_filter ? featureTypeSlug :  */'',
+          offset: index
+        }
+      });
+    }
+
     function goToFeatureDetail() {
       router.push({
         name: 'details-signalement',
@@ -126,7 +140,7 @@ const mapService = {
         },
       });
     }
-  
+
     function goToFeatureTypeDetail() {
       router.push({
         name: 'details-type-signalement',
@@ -135,8 +149,8 @@ const mapService = {
         },
       });
     }
+    document.getElementById('goToFeatureDetail').onclick = index ? goToBrowseFeatureDetail : goToFeatureDetail;
     document.getElementById('goToFeatureTypeDetail').onclick = goToFeatureTypeDetail;
-    document.getElementById('goToFeatureDetail').onclick = goToFeatureDetail;
   },
 
   onMapClick(event) {
@@ -153,7 +167,11 @@ const mapService = {
         const popupContent = this._createContentPopup(features[0], this.featureTypes);
         this.content.innerHTML = popupContent.html;
         this.overlay.setPosition(event.coordinate);
-        this.addRouterToPopup(popupContent.feature_type.slug, popupContent.featureId);
+        this.addRouterToPopup({
+          featureTypeSlug: popupContent.feature_type.slug,
+          featureId: popupContent.featureId,
+          index: popupContent.index,
+        });
       }
     }
     //const queryableLayerSelected = document.getElementById(`queryable-layers-selector-${this.wmsParams.basemapId}`).getElementsByClassName('selected')[0].textContent;
@@ -473,9 +491,13 @@ const mapService = {
     console.log('addToMap', addToMap);
     const drawSource = new VectorSource();
     let retour;
-    // TODO verifier utilité de cette boucle et remplacer par readFeatures plutot
+    let index = 0;
     features.forEach((feature) => {
       try {
+        if (feature.properties) {
+          feature.properties['index'] = index;
+          index += 1;
+        }
         retour = new GeoJSON().readFeature(feature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }, featureTypes);
         drawSource.addFeature(retour);
       } catch (err) {
@@ -511,13 +533,14 @@ const mapService = {
     };
     let feature_type;
     let status;
-    let date_maj;
+    let updated_on;
     let creator;
+    let index; // index is used to retrieve feature by query when browsing features
     
     if (feature.getProperties) {
-      status = feature.getProperties().status;
-      date_maj = feature.getProperties().updated_on;
-      creator = feature.getProperties().creator;
+      const properties = feature.getProperties();
+      ({ status, updated_on, creator, index } = properties); // using parenthesis to allow destructuring object without declaration
+      console.log({ index });
       if (featureTypes) {
         feature_type = feature.getProperties().feature_type ||
         featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
@@ -525,14 +548,14 @@ const mapService = {
     } else { //? TPD: I couldn't find when this code is used, is this still in use ?
       status = feature.status;
       if (status) status = status.name;
-      date_maj = feature.updated_on;
+      updated_on = feature.updated_on;
       creator = feature.creator;
       if (featureTypes) {
         feature_type = featureTypes.find((x) => x.slug === feature.feature_type.slug);
       }
     }
-    if(date_maj && !isNaN(new Date(date_maj))) { //* check if it is already formatted
-      date_maj = formatDate(new Date(date_maj));
+    if(updated_on && !isNaN(new Date(updated_on))) { //* check if it is already formatted
+      updated_on = formatDate(new Date(updated_on));
     }
     if (status) {
       if (status.label) { //* when the label is already in the feature
@@ -563,7 +586,7 @@ const mapService = {
                     Type : ${ feature_type ? '<a id="goToFeatureTypeDetail" class="pointer">' + feature_type.title + '</a>' : 'Type de signalement inconnu' }
                   </div>
                   <div>
-                    Dernière&nbsp;mise&nbsp;à&nbsp;jour&nbsp;:&nbsp;${date_maj}
+                    Dernière&nbsp;mise&nbsp;à&nbsp;jour&nbsp;:&nbsp;${updated_on}
                   </div>
                   ${author}
                   `;
@@ -573,7 +596,7 @@ const mapService = {
         feature.getProperties ?
           feature.getProperties().feature_id :
           feature.id;
-    return { html, feature_type, featureId };
+    return { html, feature_type, featureId, index };
   },
 
   zoom(zoomlevel) {