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

REDMINE_ISSUE-13822|Les pop-up des autres signalements ne s'affichent pa

See merge request geocontrib/geocontrib-frontend!391

src/assets/styles/base.css

@@ -378,55 +378,3 @@ body {
   background: #f3f3f3 !important;
   color: #35495e !important;
 }
-
-/* OPENLAYERS */
-.ol-zoom{
- right: 5px !important;
- left:unset !important;
-}
-
-.ol-popup {
-  position: absolute;
-  background-color: white;
-  padding: 15px;
-  border-radius: 10px;
-  border: 1px solid #cccccc;
-  bottom: 12px;
-  left: -106px;
-  width: 212px;
-  line-height: 1.4;
-  -webkit-box-shadow: 0px 0px 15px -1px #000000; 
-  box-shadow: 0px 0px 15px -1px #000000;
-  font: 12px/1.5 Helvetica Neue,Arial,Helvetica,sans-serif;
-}
-
-.ol-popup:after, .ol-popup:before {
-  top: 100%;
-  border: solid transparent;
-  content: " ";
-  height: 0;
-  width: 0;
-  position: absolute;
-  pointer-events: none;
-}
-.ol-popup:after {
-  border-top-color: white;
-  border-width: 10px;
-  left: 50%;
-  margin-left: -10px;
-}
-.ol-popup:before {
-  border-top-color: #cccccc;
-  border-width: 11px;
-  left: 50%;
-  margin-left: -11px;
-}
-.ol-popup-closer {
-  text-decoration: none;
-  position: absolute;
-  top: 2px;
-  right: 8px;
-}
-.ol-popup-closer:after {
-  content: "✖";
-}

src/assets/styles/openlayers-custom.css

+/* OPENLAYERS */
+.ol-zoom{
+  right: 5px !important;
+  left:unset !important;
+}
+ 
+.ol-popup {
+  position: absolute;
+  background-color: white;
+  padding: 15px;
+  border-radius: 10px;
+  bottom: 12px;
+  left: -106px;
+  min-width: 212px;
+  line-height: 1.4;
+  -webkit-box-shadow: 0 3px 14px rgba(0,0,0,.4);
+  box-shadow: 0 3px 14px rgba(0,0,0,.4);
+}
+.ol-popup #popup-content {
+  white-space: nowrap;
+  color: #2d2d2d;
+}
+
+.ol-popup:after, .ol-popup:before {
+  top: 100%;
+  border: solid transparent;
+  content: " ";
+  height: 0;
+  width: 0;
+  position: absolute;
+  pointer-events: none;
+}
+.ol-popup:after {
+  border-top-color: white;
+  border-width: 10px;
+  left: 50%;
+  margin-left: -10px;
+}
+.ol-popup:before {
+  border-top-color: #cccccc;
+  border-width: 11px;
+  left: 50%;
+  margin-left: -11px;
+}
+.ol-popup-closer {
+  text-decoration: none;
+  position: absolute;
+  top: 4px;
+  right: 0;
+  width: 24px;
+  height: 24px;
+  font: 18px/24px Tahoma,Verdana,sans-serif;
+  color: #757575;
+}
+.ol-popup-closer:after {
+  content: "×";
+}
 .ol-scale-line {
   left: 2em;
   background: hsla(0,0%,100%,.5);
@@ -34,41 +91,6 @@
   background-color: #ebebeb;
 }
 
-/* .leaflet-bar {
-  box-shadow: none !important;
-}
-
-.leaflet-bar a {
-  background-color: #fff;
-  color: #000;
-  height: 30px !important;
-  width: 30px !important;
-  font: 700 16px Lucida Console,Monaco,monospace;
-  margin: 0;
-}
-.leaflet-bar a:hover {
-  cursor: pointer;
-  background-color: #ebebeb;
-}
-
-.leaflet-bar a > i {
-  margin: 0;
-} */
-
-
-/* For geocoder search bar */
-.multiselect {
-  font: 500 12px Lucida Console,Monaco,monospace;
-}
-.multiselect__content-wrapper {
-  border: 2px solid rgba(0,0,0,.2) !important;
-  background-clip: padding-box !important;
-  padding: 0 !important;
-  border-top: none !important;
-  left: -2px;
-  width: calc(100% + 4px) !important;
-}
-
 /* hide the popup before the map get loaded */
 .map-container > #popup.ol-popup {
   display: none;

src/components/Map/SidebarLayers.vue

@@ -228,7 +228,11 @@ export default {
 
     onQueryLayerChange(layer) {
       this.selectedQueryLayer = layer.name;
-      this.baseMaps[0].layers.find((l) => l.title === layer.name).query = true;
+      if (this.baseMaps[0].layers.find((l) => l.title === layer.name)) {
+        this.baseMaps[0].layers.find((l) => l.title === layer.name).query = true;
+      } else {
+        console.error('No such param \'query\' found among basemap[0].layers');
+      }
       layer.query = true;
     },
 
@@ -365,7 +369,7 @@ export default {
 
     addLayers(baseMap) {
       baseMap.layers.forEach((layer) => {
-        var layerOptions = this.availableLayers.find((l) => l.id === layer.id);
+        const layerOptions = this.availableLayers.find((l) => l.id === layer.id);
         layer = Object.assign(layer, layerOptions);
         layer.options.basemapId = baseMap.id;
       });

src/components/Project/Detail/ProjectFeatureTypes.vue

@@ -591,7 +591,7 @@ export default {
 
     onGeoJSONFileChange(e) {
       this.importing = true;
-      var files = e.target.files || e.dataTransfer.files;
+      const files = e.target.files || e.dataTransfer.files;
       if (!files.length) {
         return;
       }
@@ -620,7 +620,7 @@ export default {
 
     onCSVFileChange(e) {
       this.featureTypeImporting = true;
-      var files = e.target.files || e.dataTransfer.files;
+      const files = e.target.files || e.dataTransfer.files;
       if (!files.length) {
         return;
       }

src/services/map-service.js

@@ -24,24 +24,6 @@ import router from '@/router';
 
 
 let dictLayersToLeaflet = {};
-let statusList = [
-  {
-    name: 'Brouillon',
-    value: 'draft',
-  },
-  {
-    name: 'Publié',
-    value: 'published',
-  },
-  {
-    name: 'Archivé',
-    value: 'archived',
-  },
-  {
-    name: 'En attente de publication',
-    value: 'pending',
-  },
-];
 
 const mapService = {
   layers: [],
@@ -58,9 +40,11 @@ const mapService = {
   getMap() {
     return this.map;
   },
+
   destroyMap() {
     this.map = undefined;
   },
+
   createMap(el, options) {
     const {
       lat,
@@ -133,8 +117,8 @@ const mapService = {
       router.push({
         name: 'details-signalement',
         params: {
-          slug_type_signal: featureTypeSlug, //'1-polygones'
-          slug_signal: featureId, //'d267c6fa-d676-45c9-8e34-ec3d1bcc7c25'
+          slug_type_signal: featureTypeSlug,
+          slug_signal: featureId,
         },
       });
     }
@@ -143,7 +127,7 @@ const mapService = {
       router.push({
         name: 'details-type-signalement',
         params: {
-          feature_type_slug: featureTypeSlug, //'1-polygones'
+          feature_type_slug: featureTypeSlug,
         },
       });
     }
@@ -152,11 +136,13 @@ const mapService = {
   },
 
   onMapClick(event) {
+    //* retrieve features under pointer
     const features = this.map.getFeaturesAtPixel(event.pixel, {
-      layerFilter: (l) => l === this.mvtLayer
+      layerFilter: (l) => l ===  this.mvtLayer || this.olLayer
     });
+    //* prepare popup content
     if (features && features.length > 0) {
-      const popupContent = this._createContentPopup(features[0], this.mvtLayer.featureTypes);
+      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);
@@ -188,42 +174,31 @@ const mapService = {
           }
         });
         params.url = urlInfos[0];
-        let self = this;
         axios.get(
           window.proxy_url,
-          {
-            params: params,
-          }
+          { params }
         ).then(response => {
           const data = response.data;
-          var err = typeof data === 'object' ? null : data;
-          if (data.features || err) {
-            self.showGetFeatureInfo(err, event, data, queryLayer);
-          }
-        })
-          .catch(error => {
-            throw (error);
-          }
-          );
+          const err = typeof data === 'object' ? null : data;
+          if (data.features || err) this.showGetFeatureInfo(err, event, data, queryLayer);
+        }).catch(error => {
+          throw error;
+        });
       }
     }
 
   },
-  showGetFeatureInfo: function (err, event, data, layer) {
 
+  showGetFeatureInfo: function (err, event, data, layer) {
     let content;
-
     if (err) {
       content = `
           <h4>${layer.options.title}</h4>
           <p>Données de la couche inaccessibles</p>
       `;
-
       this.content.innerHTML = content;
       this.overlay.setPosition(event.coordinate);
-    } else {
-
-      // Otherwise show the content in a popup
+    } else { // Otherwise show the content in a popup
       const contentLines = [];
       let contentTitle;
       if (data.features.length > 0) {
@@ -238,10 +213,10 @@ const mapService = {
 
         this.content.innerHTML = content;
         this.overlay.setPosition(event.coordinate);
-
       }
     }
   },
+
   getFeatureInfoUrl(event, layer) {
     const olLayer = dictLayersToLeaflet[layer.id];
     const source = olLayer.getSource();
@@ -253,12 +228,14 @@ const mapService = {
     }
     return url;
   },
+
   fitBounds(bounds) {
     let ext = boundingExtent([[bounds[0][1], bounds[0][0]], [bounds[1][1], bounds[1][0]]]);
     ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857');
     this.map.getView().fit(ext, { padding: [25, 25, 25, 25] });
 
   },
+
   fitExtent(ext) {
     //ext = transformExtent(ext, 'EPSG:4326', 'EPSG:3857');
     this.map.getView().fit(ext, { padding: [25, 25, 25, 25] });
@@ -270,7 +247,6 @@ const mapService = {
     if (layers) { //* if admin has defined basemaps for this project
       let count = 0;
       layers.forEach((layer) => {
-
         if (layer) {
           count +=1;
           const options = layer.options;
@@ -335,14 +311,12 @@ const mapService = {
     Object.values(dictLayersToLeaflet).forEach(element => {
       this.map.removeLayer(element);
     });
-
     dictLayersToLeaflet = {};
   },
 
   updateOpacity(layerId, opacity) {
     const layer = dictLayersToLeaflet[layerId];
     layer.setOpacity(parseFloat(opacity));
-
   },
 
   updateOrder(layers) {
@@ -366,9 +340,8 @@ const mapService = {
     }
   },
 
-  addVectorTileLayer: function (url, projectId, projectSlug, featureTypes, formFilters) {
-    let format_cfg = {/*featureClass: Feature*/ };
-
+  addVectorTileLayer: function (url, projectId, featureTypes, formFilters) {
+    const format_cfg = {/*featureClass: Feature*/ };
     const mvt = new MVT(format_cfg);
     const options = {
       urls: [],
@@ -384,8 +357,7 @@ const mapService = {
       style: styleFunction,
       source: layerSource
     });
-    this.mvtLayer.featureTypes = featureTypes;
-    this.mvtLayer.project_slug = projectSlug;
+    this.featureTypes = featureTypes; // store featureTypes for popups
     this.mvtLayer.setZIndex(30);
     this.map.addLayer(this.mvtLayer);
     window.layerMVT = this.mvtLayer;
@@ -471,7 +443,7 @@ const mapService = {
     let retour;
     // TODO verifier utilité de cette boucle et remplacer par readFeatures plutot
     features.forEach((feature) => {
-      retour = new GeoJSON().readFeature(feature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' });
+      retour = new GeoJSON().readFeature(feature, { dataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }, featureTypes);
       drawSource.addFeature(retour);
       // const featureProperties = feature.properties ? feature.properties : feature;
       // const featureType = featureTypes
@@ -493,6 +465,8 @@ const mapService = {
     });
     olLayer.setZIndex(29);
     this.map.addLayer(olLayer);
+    this.olLayer = olLayer;
+    this.featureTypes = featureTypes; // store featureTypes for popups
     return drawSource;
   },
 
@@ -502,33 +476,36 @@ const mapService = {
 
   _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) + ' ' +
+      let formatted_date = current_datetime.getFullYear() + '-' + ('0' + (current_datetime.getMonth() + 1)).slice(-2) + '-' + ('0' + current_datetime.getDate()).slice(-2) + '&nbsp;' +
         ('0' + current_datetime.getHours()).slice(-2) + ':' + ('0' + current_datetime.getMinutes()).slice(-2);
       return formatted_date;
     };
     let feature_type;
     let status;
     let date_maj;
-
+    let creator;
+    
     if (feature.getProperties) {
       status = feature.getProperties().status;
+      if (status) status = status.label;
       date_maj = feature.getProperties().updated_on;
-    } else {
+      creator = feature.getProperties().creator;
+      if (featureTypes) {
+        feature_type = feature.getProperties().feature_type ||
+        featureTypes.find((x) => x.slug.split('-')[0] === '' + feature.getProperties().feature_type_id);
+      }
+    } else { //? 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;
+      creator = feature.creator;
+      if (featureTypes) {
+        feature_type = featureTypes.find((x) => x.slug === feature.feature_type.slug);
+      }
     }
-
-    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));
-    } else {
-      feature_type = feature.getProperties ? feature.getProperties().feature_type : feature.feature_type;
-      status = feature.getProperties ? feature.getProperties().status.label : feature.status.label;
-    }
+    if(date_maj && date_maj.updated_on) date_maj = formatDate(new Date(date_maj.updated_on));
 
     let author = '';
-    const creator = feature.getProperties ? feature.getProperties().creator : feature.creator;
     if (creator) {
       author = creator.full_name
         ? `<div>
@@ -549,13 +526,14 @@ const mapService = {
                     Type : <a id="goToFeatureTypeDetail" class="pointer"> ${feature_type.title} </a>
                   </div>
                   <div>
-                    Dernière mise à jour : ${date_maj}
+                    Dernière&nbsp;mise&nbsp;à&nbsp;jour&nbsp;:&nbsp;${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) {
       location = [+lon, +lat];
@@ -565,8 +543,8 @@ const mapService = {
   },
 
   addOverlay(loc) {
-    var pos = fromLonLat(loc);
-    var marker = new Overlay({
+    const pos = fromLonLat(loc);
+    const marker = new Overlay({
       position: pos, 
       positioning: OverlayPositioning.CENTER_CENTER,
       element: document.getElementById('marker'),

src/views/Project/FeaturesListAndMap.vue

@@ -351,16 +351,14 @@ export default {
       });
 
       // --------- End sidebar events ----------
-      let self=this;
       setTimeout(() => {
         const project_id = this.projectSlug.split('-')[0];
         const mvtUrl = `${this.API_BASE_URL}features.mvt/`;
         mapService.addVectorTileLayer(
           mvtUrl,
           project_id,
-          self.projectSlug,
-          self.feature_types,
-          self.form
+          this.feature_types,
+          this.form
         );
       }, 1000);
 

src/views/Project/ProjectDetail.vue

@@ -437,12 +437,11 @@ export default {
       if (this.project && this.permissions.can_view_project) {
         await this.INITIATE_MAP(this.$refs.map);
         this.checkForOfflineFeature();
-        let project_id = this.$route.params.slug.split('-')[0];
+        const project_id = this.$route.params.slug.split('-')[0];
         const mvtUrl = `${this.API_BASE_URL}features.mvt`;
         mapService.addVectorTileLayer(
           mvtUrl,
           project_id,
-          this.$route.params.slug,
           this.feature_types
         );
         this.mapLoading = false;