Merge pull request #3622 from camptocamp/fix_displayquerygrid_display

Use escaped label as id for querygrid, because id are not unique

contribs/gmf/src/directives/displayquerygrid.js

@@ -212,6 +212,7 @@ gmf.DisplayquerygridController = function($injector, $scope, ngeoQueryResult, ng
 
   /**
    * @type {!gmfx.GridMergeTabs}
+   * @export
    */
   this.mergeTabs = {};
 
@@ -346,7 +347,7 @@ gmf.DisplayquerygridController.prototype.updateData_ = function() {
     if (source.tooManyResults) {
       this.makeGrid_(null, source);
     } else {
-      source.id = this.escapeValue_(source.id);
+      source.id = this.escapeValue(source.id);
       const features = source.features;
       if (features.length > 0) {
         this.collectData_(source);
@@ -381,12 +382,12 @@ gmf.DisplayquerygridController.prototype.hasOneWithTooManyResults_ = function()
 };
 
 /**
- * Returns an escaped value.
+ * Returns the value with all symbols and spaces replaced by an underscore.
  * @param {string|number} value A value to escape.
  * @returns {string|number} value An escaped value.
- * @private
+ * @export
  */
-gmf.DisplayquerygridController.prototype.escapeValue_ = function(value) {
+gmf.DisplayquerygridController.prototype.escapeValue = function(value) {
   // Work-around for Number.isInteger() when not always getting a number ...
   if (Number.isInteger(/** @type {number} */ (value))) {
     return value;
@@ -703,21 +704,21 @@ gmf.DisplayquerygridController.prototype.selectTab = function(gridSource) {
   }
   this.updateFeatures_(gridSource);
 
-  this.reflowGrid_(source.id);
+  this.reflowGrid_();
 };
 
 
 /**
  * @private
- * @param {string|number} sourceId Id of the source that should be refreshed.
  */
-gmf.DisplayquerygridController.prototype.reflowGrid_ = function(sourceId) {
+gmf.DisplayquerygridController.prototype.reflowGrid_ = function() {
   // This is a "work-around" to make sure that the grid is rendered correctly.
   // When a pane is activated by setting `this.selectedTab`, the class `active`
   // is not yet set on the pane. That's why the class is set manually, and
   // after the pane is shown (in the next digest loop), the grid table can
   // be refreshed.
-  const activePane = this.$element_.find(`div.tab-pane#${sourceId}`);
+  const id = this.escapeValue(this.selectedTab || '');
+  const activePane = this.$element_.find(`div.tab-pane#${id}`);
   activePane.removeClass('active').addClass('active');
   this.$timeout_(() => {
     activePane.find('div.ngeo-grid-table-container table')['trigger']('reflow');

contribs/gmf/src/directives/partials/displayquerygrid.html

@@ -16,9 +16,9 @@
       ng-click="ctrl.selectTab(gridSource)">
 
       <a
-        href="#{{gridSource.source.id}}"
-        data-target="#{{gridSource.source.id}}"
-        aria-controls="{{gridSource.source.id}}"
+        href="#{{ctrl.escapeValue(gridSource.source.label)}}"
+        data-target="#{{ctrl.escapeValue(gridSource.source.label)}}"
+        aria-controls="{{ctrl.escapeValue(gridSource.source.label)}}"
         role="tab"
         data-toggle="tab">
 
@@ -38,7 +38,7 @@
       role="tabpanel"
       class="tab-pane"
       ng-class="{'active' : ctrl.isSelected(gridSource)}"
-      id="{{gridSource.source.id}}">
+      id="{{ctrl.escapeValue(gridSource.source.label)}}">
 
       <ngeo-grid
         ngeo-grid-configuration="gridSource.configuration"