From 0322c7bf066eecd92617b7f4c4d7f06c2448ba77 Mon Sep 17 00:00:00 2001
From: Francesco Boccacci <boccacci.francesco@gmail.com>
Date: Wed, 30 Oct 2024 11:26:23 +0100
Subject: [PATCH] :sparkles: Autofilter on search (#677)

* :sparkles: Start to implement autofilter parameter

* :sparkles: set autofilter also for search_1n and set autofilter only if show is true

* :sparkles: Handle autofilter parameter on search request and handle filtertoken returned

* :globe_with_meridians: Translation

* :bug: Fix setting of active filter on multilayer search

* :bug: Remove update method call

* :bug: Toggle selection non oly on selection layer but feature by feature related to layer.

* :bug: Handle catch promise

* :bug: Handle remove feature when there is a current selection

* :bug: Fix reactive toggled attribute when removing a feature from results

* i18n

* menu item icons

* Revert "menu item icons"

This reverts commit 35a3f7b071c47363998cc8e2a93c31b206d95e8a.

* Revert "i18n"

This reverts commit 4d739fe93fcdd496bc40dcfee1213cd7b1f1b741.

---------

Co-authored-by: Raruto <Raruto@users.noreply.github.com>
---
 src/components/QueryResults.vue |  10 ++-
 src/components/SearchPanel.vue  |  20 +++++-
 src/components/g3w-search.js    |  23 ++++++-
 src/locales/de.js               |   3 +-
 src/locales/en.js               |   6 +-
 src/locales/fi.js               |   3 +-
 src/locales/fr.js               |   3 +-
 src/locales/it.js               |   3 +-
 src/locales/pl.js               |   3 +-
 src/locales/ro.js               |   3 +-
 src/locales/se.js               |   3 +-
 src/map/layers/geo-mixin.js     |   5 +-
 src/map/layers/layer.js         |  12 ++--
 src/services/data.js            |   9 ++-
 src/services/map.js             |  23 +++++--
 src/services/queryresults.js    | 113 ++++++++++++++++++++------------
 src/utils/parsers/index.js      |   3 +-
 src/utils/prompt.js             |   1 +
 18 files changed, 171 insertions(+), 75 deletions(-)

diff --git a/src/components/QueryResults.vue b/src/components/QueryResults.vue
index 47e9034c7..c2b0ba3af 100644
--- a/src/components/QueryResults.vue
+++ b/src/components/QueryResults.vue
@@ -669,8 +669,14 @@
         getCatalogLayerById(layer.id).saveFilter();
       },
 
-      addRemoveFilter(layer) {
-        getCatalogLayerById(layer.id).toggleFilterToken();
+      async addRemoveFilter(layer) {
+        await getCatalogLayerById(layer.id).toggleFilterToken();
+        //@since 3.11.0 In case of set active filter, remove all features not selected
+        if (layer.filter.active) {
+           layer.features
+            .filter(f => !f.selection.selected)
+            .forEach(f => this.$options.service.removeFeatureLayerFromResult(layer, f))
+        }
       },
 
       getContainerFromFeatureLayer({ layer, index } = {}) {
diff --git a/src/components/SearchPanel.vue b/src/components/SearchPanel.vue
index 1f91f32bf..64ac82928 100644
--- a/src/components/SearchPanel.vue
+++ b/src/components/SearchPanel.vue
@@ -135,6 +135,15 @@
           </div>
 
         </div>
+        <!-- @since 3.11.0 -->
+        <div class = "form-group">
+          <input
+            id        = "g3w-search-filter"
+            class     = "magic-checkbox"
+            v-model   = "autofilter"
+            type      = "checkbox"/>
+            <label for = "g3w-search-filter" v-t = "'sdk.search.autofilter'"></label>
+        </div>
 
         <!-- SEARCH BUTTON -->
         <div class = "form-group">
@@ -181,8 +190,9 @@
 
     data() {
       return {
-       state:    this.$options.service.state,
-       allvalue: SEARCH_ALLVALUE,
+       state:      this.$options.service.state,
+       autofilter: false, //@since 3.11.0
+       allvalue:   SEARCH_ALLVALUE,
       }
     },
 
@@ -464,6 +474,12 @@
       }
 
     },
+    watch: {
+      //@since 3.11.0 Set state auto filter to a search result
+      autofilter(bool = false) {
+        this.state.autofilter = Number(bool); //0/1 instead true false
+      }
+    },
 
     async mounted() {
       //@since 3.11.0 Need to add $nextTick()
diff --git a/src/components/g3w-search.js b/src/components/g3w-search.js
index 1e968aa01..1cce8e91a 100644
--- a/src/components/g3w-search.js
+++ b/src/components/g3w-search.js
@@ -71,6 +71,7 @@ export function SearchPanel(opts = {}, show = false) {
       /** keep a reference to initial search options (you shouldn't mutate them..) */
       options:   d.input.options,
     })),
+    autofilter:           0, //@since v3.11.0. Used to set already feature layers filtered https://github.com/g3w-suite/g3w-client/issues/676
   };
 
   // create search form structure 
@@ -175,7 +176,8 @@ async function doSearch({
         queryUrl,
         formatter: 1,
         feature_count,
-        raw:       false // in order to get a raw response
+        raw:        false, // in order to get a raw response
+        autofilter: Number(show && state.autofilter), //0/1 autofilter by server,
       },
       outputs: show && { title: state.title }
     });
@@ -215,7 +217,8 @@ async function doSearch({
             })),
           }),
           formatter: 1,
-          feature_count
+          feature_count,
+          autofilter: state.autofilter //Boolean autofilter by server
         },
         outputs: {
           title: state.title
@@ -229,5 +232,19 @@ async function doSearch({
 
   state.searching = false;
 
-  return parsed ? parsed : data;
+  const result = parsed ? parsed : data;
+
+  //In the case of autofilter, need to get filtertokern attribute from server response data and set to each layer
+  if (1 === state.autofilter && result) {
+
+    (result.data || []).forEach(({ layer, filtertoken }) => {
+      //if returned filtertoken, filter is apply on layer
+      if (filtertoken) {
+        layer.state.filter.active = true;
+        layer.setFilterToken(filtertoken);
+      }
+    })
+  }
+
+  return result;
 }
\ No newline at end of file
diff --git a/src/locales/de.js b/src/locales/de.js
index 73f1d8902..71c08f273 100644
--- a/src/locales/de.js
+++ b/src/locales/de.js
@@ -63,7 +63,8 @@ export default {
             pre: "Bitte",
             post: "oder mehrere Zeichen eingeben"
           }
-        }
+        },
+        autofilter: "Filtern Sie die Ergebnisse"
       },
       print: {
         no_layers: 'Kein Layer zu drucken',
diff --git a/src/locales/en.js b/src/locales/en.js
index 09ab7d8a4..82d387ec9 100644
--- a/src/locales/en.js
+++ b/src/locales/en.js
@@ -63,8 +63,10 @@ export default {
             pre: "Please enter",
             post: "or more characters"
           }
-        }
-      },
+        },
+        autofilter: "Filter results"
+
+},
       print: {
         no_layers: 'No Layer to print',
         template: "Template",
diff --git a/src/locales/fi.js b/src/locales/fi.js
index 6dc5fbd64..66e342b2f 100644
--- a/src/locales/fi.js
+++ b/src/locales/fi.js
@@ -63,7 +63,8 @@ export default {
             pre: "Syötä",
             post: "tai useampi merkki"
           }
-        }
+        },
+        autofilter: "Suodata tulokset"
       },
       print: {
         no_layers: 'Ei tulostettavia tasoja',
diff --git a/src/locales/fr.js b/src/locales/fr.js
index c40132163..a7cb01ca7 100644
--- a/src/locales/fr.js
+++ b/src/locales/fr.js
@@ -63,7 +63,8 @@ export default {
             pre: "Tapez au moins",
             post: "caractères"
           }
-        }
+        },
+        autofilter: "Filtrer les résultats"
       },
       print: {
         no_layers: 'Aucune layer visible',
diff --git a/src/locales/it.js b/src/locales/it.js
index de80e09ed..b94467ad0 100644
--- a/src/locales/it.js
+++ b/src/locales/it.js
@@ -63,7 +63,8 @@ export default {
             pre: "Digita almeno",
             post: "caratteri"
           }
-        }
+        },
+        autofilter: "Filtro sui risultati"
       },
       print: {
         no_layers: 'Nessun Layer visibile',
diff --git a/src/locales/pl.js b/src/locales/pl.js
index 2f16195af..723598e20 100644
--- a/src/locales/pl.js
+++ b/src/locales/pl.js
@@ -63,7 +63,8 @@ export default {
             pre: "Podaj",
             post: "lub więcej znaków"
           }
-        }
+        },
+        autofilter: "Filtruj wyniki"
       },
       print: {
         no_layers: "Brak warstwy do wydrukowania",
diff --git a/src/locales/ro.js b/src/locales/ro.js
index 0afedd5a3..effaeff4d 100644
--- a/src/locales/ro.js
+++ b/src/locales/ro.js
@@ -63,7 +63,8 @@ export default {
             pre: "Te rog introdu",
             post: "sau mai multe caractere"
           }
-        }
+        },
+        autofilter: "Filtrați rezultatele"
       },
       print: {
         no_layers: 'Nu avem straturi de print',
diff --git a/src/locales/se.js b/src/locales/se.js
index fc9883d7e..a05e1bf76 100644
--- a/src/locales/se.js
+++ b/src/locales/se.js
@@ -63,7 +63,8 @@ export default {
             pre: "Mata in",
             post: "eller flera tecken"
           }
-        }
+        },
+        autofilter: "Filtrera resultaten"
       },
       print: {
         no_layers: 'Inga nivåer att skriva ut',
diff --git a/src/map/layers/geo-mixin.js b/src/map/layers/geo-mixin.js
index b51353ee4..ebbab1abe 100644
--- a/src/map/layers/geo-mixin.js
+++ b/src/map/layers/geo-mixin.js
@@ -253,7 +253,7 @@ export default BaseClass => class extends BaseClass {
    * Set selection layer on a map not visible
    */
   hideOlSelectionFeatures() {
-    GUI.getService('map').toggleSelection(false);
+    GUI.getService('map').toggleSelection(false, this.state.id);
   }
   
   /**
@@ -277,7 +277,8 @@ export default BaseClass => class extends BaseClass {
         }
       });
     // Ensures visibility of selection layer on a map
-    GUI.getService('map').toggleSelection(Object.values(this.olSelectionFeatures).some(f => f.selected));
+    // in case of layer filter active, always not visible
+    GUI.getService('map').toggleSelection(!this.state.filter.active && Object.values(this.olSelectionFeatures).some(f => f.selected), this.state.id);
   }
   
   /**
diff --git a/src/map/layers/layer.js b/src/map/layers/layer.js
index 538655b5f..e145e0d81 100644
--- a/src/map/layers/layer.js
+++ b/src/map/layers/layer.js
@@ -1456,8 +1456,7 @@ class Layer extends G3WObject {
 
     if (this.isGeoLayer()) {
       // whether fid is excluded from selection
-      const is_excluded = selection.has(SELECTION.EXCLUDE) ? selection.has(fid) : !selection.has(fid);
-      this.setOlSelectionFeatureByFid(fid, is_excluded  ? 'remove' : 'add');
+      this.setOlSelectionFeatureByFid(fid, selection.has(SELECTION.EXCLUDE) ? selection.has(fid) : !selection.has(fid)  ? 'remove' : 'add');
     }
 
     /** If there is a filterActive */
@@ -1767,6 +1766,7 @@ class Layer extends G3WObject {
    * @param options.unique
    * @param options.queryUrl
    * @param options.ordering
+   * @param options.autofilter //@since 3.11.0
    * @param { Object }        params - OWS search params
    * 
    * @returns { Promise }
@@ -1798,6 +1798,7 @@ class Layer extends G3WObject {
                 suggest:   options.suggest,
                 /** @since 3.9.0 */
                 formatter: undefined !== options.formatter ? options.formatter : 1,
+                autofilter: options.autofilter,
               })
             );
           } catch(e) {
@@ -1834,6 +1835,7 @@ class Layer extends G3WObject {
     formatter = 1,
     queryUrl,
     ordering,
+    autofilter, //@since 3.11.0
   } = {}) {
     const provider        = this.getProvider('data');
     provider._projections = provider._projections || { map: null, layer: null };
@@ -1845,7 +1847,8 @@ class Layer extends G3WObject {
       unique,
       fformatter,
       ffield,
-      filtertoken: ApplicationState.tokens.filtertoken
+      filtertoken: ApplicationState.tokens.filtertoken,
+      autofilter,
     };
     try {
       const url = queryUrl ? queryUrl : provider._layer.getUrl('data');
@@ -1867,9 +1870,10 @@ class Layer extends G3WObject {
           data: ResponseParser.get('application/json')({
             layers:      [provider._layer],
             response:    response.vector.data,
+            filtertoken: response.filtertoken, //@since v3.11.0 returned filtertoken in case of autofilter request
             projections: provider._projections,
           })
-        };
+        }
       }
 
     } catch(e) {
diff --git a/src/services/data.js b/src/services/data.js
index 9f7f4ad59..4fcbd4b04 100644
--- a/src/services/data.js
+++ b/src/services/data.js
@@ -232,6 +232,7 @@ export default {
    * @param options.feature_count
    * @param options.formatter
    * @param options.ordering
+   * @param options.autofilter //@since 3.11.0
    * 
    * @returns { Promise<{ data: [], query: { type: 'search', search: * }, type: 'api' | 'ows' }> }
    */
@@ -243,6 +244,7 @@ export default {
     feature_count,
     formatter: 1,
     ordering,
+    autofilter: 0,
   }) {
     const { layer, ...params } = options;
     params.filter              = [].concat(params.filter); // check if filter is array
@@ -253,12 +255,13 @@ export default {
       ))
         .filter(d => 'fulfilled' === d.status)
         .map(({ value } = {}) => {
-          if (options.raw)                                        { return { data: value }; }
+          if (params.raw)                                        { return { data: value }; }
           if (Array.isArray(value.data) && value.data.length > 0) { return value.data[0]; }
         }),
       query: {
-        type:   'search',
-        search: options.filter,
+        type:       'search',
+        search:     params.filter,
+        autofilter: !!params.autofilter, //@since 3.11.0 set Boolean
       },
       type: 'api',
     };
diff --git a/src/services/map.js b/src/services/map.js
index 6a57fc9f6..f21097434 100644
--- a/src/services/map.js
+++ b/src/services/map.js
@@ -250,11 +250,6 @@ class MapService extends G3WObject {
 
       selectionLayer: new ol.layer.Vector({
         source: new ol.source.Vector(),
-        style: feat => [createSelectedStyle({
-          geometryType: feat.getGeometry().getType(),
-          color:        this.defaultsLayers._style.selectionLayer.color,
-          fill:         true
-        })]
       }),
 
     };
@@ -1946,8 +1941,22 @@ class MapService extends G3WObject {
   /**
    * @since 3.11.0
    */
-  toggleSelection(visible = true) {
-    this.defaultsLayers.selectionLayer.setVisible(visible);
+  toggleSelection(visible = true, layerId) {
+    //take in account that of layer id is specified, need to set only
+    // features related to layer visible or not
+    if (layerId) {
+      this.defaultsLayers
+        .selectionLayer.getSource()
+        .getFeatures()
+        .filter(f => layerId === f.__layerId)
+        .forEach(f => f.setStyle(visible ? createSelectedStyle({
+          geometryType: f.getGeometry().getType(),
+          color:        this.defaultsLayers._style.selectionLayer.color,
+          fill:         true
+        }): new ol.style.Style(null)))
+    } else {
+      this.defaultsLayers.selectionLayer.setVisible(visible);
+    }
   }
 
   /**
diff --git a/src/services/queryresults.js b/src/services/queryresults.js
index 09fc8f3c3..ed1be88de 100644
--- a/src/services/queryresults.js
+++ b/src/services/queryresults.js
@@ -78,10 +78,9 @@ export default new (class QueryResultsService extends G3WObject {
         if (false === options.add) {
           // in case of new request results reset the query otherwise maintain the previous request
           this.clearState();
-          this.state.query = queryResponse.query;
-          this.state.type  = queryResponse.type;
+          this.state.query      = queryResponse.query;
+          this.state.type       = queryResponse.type;
         }
-
         // whether add external layers to response
         if (true === queryResponse.query.external.add && false === options.add) {
           const catalog = GUI.getService('catalog');
@@ -111,7 +110,7 @@ export default new (class QueryResultsService extends G3WObject {
           'circle':      this.state.query.geometry,
         })[this.state.query.type];
 
-        // show query result on map
+        // show a query result on map
         if (geom) {
           const feature = new ol.Feature(geom);
           feature.setId(undefined);
@@ -123,7 +122,7 @@ export default new (class QueryResultsService extends G3WObject {
         }
 
         // Convert response from DataProvider into a QueryResult component data structure
-        // Skip when layer has no features or rawdata is undefined (external wms)
+        // Skip when the layer has no features or rawdata is undefined (external wms)
         const layers = queryResponse.data
           .flatMap(d => [].concat(d))
           .filter(d => d && (undefined !== d.rawdata || (Array.isArray(d.features) && d.features.length > 0)))
@@ -200,7 +199,7 @@ export default new (class QueryResultsService extends G3WObject {
               });
             }
         
-            // Parse attributes to show on result based on field
+            // Parse attributes to show on a result based on field
         
             let attrs = !attributes && getAlphanumericPropertiesFromFeature(
               Object.keys(features[0] instanceof ol.Feature ? features[0].getProperties() : features[0].properties)
@@ -235,7 +234,7 @@ export default new (class QueryResultsService extends G3WObject {
                 id:         external ? f.getId() : (f instanceof ol.Feature ? f.getId() : f.id),
                 attributes: f instanceof ol.Feature ? f.getProperties() : f.properties,
                 geometry:   f instanceof ol.Feature ? f.getGeometry()   : f.geometry,
-                selection:  f.selection,
+                selection:  { selected: false },
                 show:       true,
               })),
               hasgeometry:            Array.isArray(features) && !rawdata && features.some(f => f instanceof ol.Feature ? f.getGeometry() : f.geometry),
@@ -643,26 +642,39 @@ export default new (class QueryResultsService extends G3WObject {
    * @since 3.8.0
    */
   updateLayerResultFeatures(responseLayer) {
-    const layer        = this.state.layers.find(l => l.id === responseLayer.id)                   // get layer from current `state.layers` showed on a result
-      responseFeatures = responseLayer.features || [],                                            // extract features from responseLayer object
-      external         = (this.state.layers.find(l => l.id === responseLayer.id) || {}).external, // get id of external layer or not (`external` is a layer added by mapcontrol addexternlayer)
-      has_features     = layer && (layer.features || []).length > 0;                              // check if the current layer has features on response
-
+    const layer            = this.state.layers.find(l => l.id === responseLayer.id);                // get layer from current `state.layers` showed on a result
+    const responseFeatures = responseLayer.features || [];                                            // extract features from responseLayer object
+    const external         = (this.state.layers.find(l => l.id === responseLayer.id) || {}).external; // get id of external layer or not (`external` is a layer added by mapcontrol addexternlayer)
+    const has_features     = layer && (layer.features || []).length > 0;                              // check if the current layer has features on response
     if (has_features) {
       const features_ids = layer.features.map(f => external ? f.id : f.attributes[G3W_FID]) // get features id from current layer on a result
-      responseFeatures.forEach(feat => {
+      //get action selection;
+      const action = this.state.layersactions[layer.id].find(a => 'selection' === a.id);
+      responseFeatures.forEach((feat, index) => {
         const feature_id = this._getFeatureId(feat, external);
-        if (features_ids.some(id => id === feature_id)) {                     // remove feature (because is already loaded)
-          setTimeout(() => delete this.state.layersFeaturesBoxes[this.getBoxId(layer, feat)]);
-          layer.features = (layer.features || []).filter(f => this._getFeatureId(f, external) !== feature_id);
+        // If true, remove the feature because is already loaded
+        if (features_ids.some(id => id === feature_id)) {
+          //@since 3.11.0
+          if (action && feat.selection.selected) {
+            (external ? layer : getCatalogLayerById(layer.id)).excludeSelectionFid(feature_id, layer.filter.active);
+          }
+          //filter feature
+          layer.features.splice(index, 1);
+          if (action) {
+            delete action.state.toggled[index];
+            //need to reset toggled state in reactive mode
+            action.state.toggled = Vue.observable(layer.features.reduce((a,f,i) => { a[i] = f.selection.selected; return a }, {}));
+          }
         } else {                                                              // add feature
           layer.features.push(feat);
         }
+        setTimeout(() => delete this.state.layersFeaturesBoxes[this.getBoxId(layer, feat)]);
       });
       // toggle layer feature box
-      (layer.features || []).forEach(feature => {
+      (layer.features || []).forEach(f => {
+        console.log(f)
         const collapsed = (layer.features || []).length > 1;
-        const box       = this.state.layersFeaturesBoxes[this.getBoxId(layer, feature)];
+        const box       = this.state.layersFeaturesBoxes[this.getBoxId(layer, f)];
         if (box) {
           setTimeout(() => box.collapsed = collapsed); // due to vue reactivity, wait a little bit before update layers
         }
@@ -719,7 +731,7 @@ export default new (class QueryResultsService extends G3WObject {
     // loop results
     layers.forEach(layer => {
 
-      // set eventually layer action tool and need to be reactive
+      // eventually set layer action tool and need to be reactive
       this.state.layeractiontool[layer.id]           = Vue.observable({ component: null, config: null });
       this.state.currentactiontools[layer.id]        = Vue.observable({ ...Array((layer.features || []).length).fill(null) });
       this.state.currentactionfeaturelayer[layer.id] = Vue.observable({ ...Array((layer.features || []).length).fill(null) });
@@ -881,13 +893,28 @@ export default new (class QueryResultsService extends G3WObject {
             if (layer.external && undefined !== layer.selection.active) { // external layer
               action.state.toggled[index] = feature.selection.selected;
             } else if (feature && undefined !== layer.selection.active) { // project layer
-              const pLayer = getCatalogLayerById(layer.id);
+              const pLayer              = getCatalogLayerById(layer.id);
+              const is_selected_feature = feature ? pLayer.hasSelectionFid(this._getFeatureId(feature, layer.external)) : false;
+              feature.selection.selected = is_selected_feature;
+              //@since 3.11.0
+              // if set autofilter and feature is not selected,
+              //need to add selection of a map
+              if (this.state.query.autofilter && !is_selected_feature) {
+                this.addToSelection(layer, feature, action, index);
+                //In the case of geometry layer, need tyo hide selection layer from a map because
+                //the filter is set active
+                if (layer.hasgeometry) {
+                  pLayer.hideOlSelectionFeatures();
+                }
+              }
               action.state.toggled[index] = (
+                //set active in case of autofilter
+                this.state.query.autofilter
                 //need to check if set active filter and no saved filter is set
-                (pLayer.state.filter.active && null == pLayer.state.filter.current) ||
+                || (pLayer.state.filter.active && null == pLayer.state.filter.current)
                 //or if feature fid is in selected array
-                pLayer.hasSelectionFid(feature ? this._getFeatureId(feature, layer.external): null)
-              );
+                || is_selected_feature
+              )
             }
           },
           /** @since 3.9.0 reactive `toggled` when adding new feature and then bind click on query result context (exclude existing features and add reactive array property) */
@@ -923,7 +950,7 @@ export default new (class QueryResultsService extends G3WObject {
       // In case of external layer don't listen to `selection` event
       if (layer.external && layer.toc && undefined !== layer.selection.active) {
         layer.features.forEach(f => f.selection = (layer.selection.features.find(s => f.id === s.getId()) || ({ selection: { selected: false }})).selection);
-      } else if(!layer.external && layer.toc && undefined !== layer.selection.active) {
+      } else if (!layer.external && layer.toc && undefined !== layer.selection.active) {
         const handler = () => layer.features.forEach((_, i) => this.state.layersactions[layer.id].find(a => a.id === 'selection').state.toggled[i] = false);
         getCatalogLayerById(layer.id).on('unselectionall', handler);
         this.unlistenerlayeractionevents.push({ layer: getCatalogLayerById(layer.id), event: 'unselectionall', handler });
@@ -1745,12 +1772,14 @@ export default new (class QueryResultsService extends G3WObject {
     const getFeatureId       = service._getFeatureId.bind(service);
     const getActionLayerById = service.getActionLayerById.bind(service);
 
-    const GIVE_ME_A_NAME = undefined === feature && undefined === action && undefined === index;
-    const _action        = GIVE_ME_A_NAME ? getActionLayerById({ layer, id: 'selection' })                  : action;
-    const toggled        = GIVE_ME_A_NAME && Object.values(_action.state.toggled).reduce((prev, curr) => prev && curr, true);
-    const _layer         = GIVE_ME_A_NAME ? (layer.external ? layer : getCatalogLayerById(layer.id))        : (((service.state.layers.find(l => l.id === layer.id) || {}).external || false) ? layer : getCatalogLayerById(layer.id));
-    const features       = GIVE_ME_A_NAME ? (layer.features && layer.features.length ? layer.features : []) : [feature];
-    const params         = GIVE_ME_A_NAME ? {
+    //is true when click on the selection icon on top of each layer result
+    const layerSelection     = undefined === feature && undefined === action && undefined === index;
+
+    const _action        = layerSelection ? getActionLayerById({ layer, id: 'selection' })                  : action;
+    const toggled        = layerSelection && Object.values(_action.state.toggled).reduce((prev, curr) => prev && curr, true);
+    const _layer         = layerSelection ? (layer.external ? layer : getCatalogLayerById(layer.id))        : (((service.state.layers.find(l => l.id === layer.id) || {}).external || false) ? layer : getCatalogLayerById(layer.id));
+    const features       = layerSelection ? (layer.features && layer.features.length ? layer.features : []) : [feature];
+    const params         = layerSelection ? {
       fids: features.length > 0 ? features.map(f => _layer.external ? f.id : f.attributes[G3W_FID]) : null,
       features,
       force: toggled ? 'remove' : 'add'
@@ -1761,8 +1790,15 @@ export default new (class QueryResultsService extends G3WObject {
       force: undefined
     };
 
-    if (!GIVE_ME_A_NAME) {
+    if (layerSelection) {
+      layer.features.forEach((f, i) => {
+        _action.state.toggled[i] = !toggled;
+        f.selection.selected     = _action.state.toggled[i];
+      });
+    } else {
+      console.log('qui')
       _action.state.toggled[index] = !_action.state.toggled[index];
+      feature.selection.selected   = _action.state.toggled[index];
     }
 
     /**
@@ -1844,7 +1880,7 @@ export default new (class QueryResultsService extends G3WObject {
       let layer                     = _layer;
       let { fids, features, force } = params;
 
-      //Take in account array or single fid
+      //Take in an account array or single fid
       features = Array.isArray(features) ? features : [features];
 
       //check if layer.selection.features is undefined
@@ -1858,7 +1894,7 @@ export default new (class QueryResultsService extends G3WObject {
 
         // Set feature used in selection tool action
         if (undefined === layer.selection.features.find(f => f.getId() === fid)) {
-          // create ol feature from object
+          // create ol feature from an object
           let feat = feature;
           const { attributes } = feature;
           if (feature.geometry) {
@@ -1872,14 +1908,11 @@ export default new (class QueryResultsService extends G3WObject {
         }
     
         //check if feature is already select or feature is already removed (no selected)
-        /** If not changes to apply return */
+        /** If not, changes to apply return */
         if (('add' === force && feature.selection.selected) || ('remove' === force && !feature.selection.selected)) {
           return;
         }
-    
-        /**Switch selected boolean value */
-        feature.selection.selected = !feature.selection.selected;
-    
+
         /** Need to add selection on map */
         map.setSelectionFeatures(
           (feature.selection.selected ? 'add' : 'remove'),
@@ -1893,10 +1926,6 @@ export default new (class QueryResultsService extends G3WObject {
       layer.selection.active = layer.selection.features.reduce((acc, feature) => acc || feature.selection.selected, false);
     }
 
-    if (GIVE_ME_A_NAME) {
-      layer.features.forEach((f, i) => _action.state.toggled[i] = !toggled);
-    }
-
   }
 
 });
\ No newline at end of file
diff --git a/src/utils/parsers/index.js b/src/utils/parsers/index.js
index 927f2c057..9448a0b9f 100644
--- a/src/utils/parsers/index.js
+++ b/src/utils/parsers/index.js
@@ -126,8 +126,9 @@ export const ResponseParser = {
           projections,
           layers = [],
           wms = true,
+          filtertoken, //@since 3.11.0
         } = {}) {
-          const layersFeatures = layers.map(layer => ({ layer, features: [] }));
+          const layersFeatures = layers.map(layer => ({ layer, features: [], filtertoken }));
           const layersId       = layers.map(l => wms ? l.getWMSLayerName() : l.getWFSLayerName());
           // features
           (
diff --git a/src/utils/prompt.js b/src/utils/prompt.js
index a4ea92f1d..d76587873 100644
--- a/src/utils/prompt.js
+++ b/src/utils/prompt.js
@@ -57,6 +57,7 @@ export async function prompt({
     })
   )
     .then(callback)
+    .catch(e => console.warn(e))
     .finally(() => {
       vueInput.$destroy();
       vueInput = null;