✨ Autofilter on search (#677)

* ✨ Start to implement autofilter parameter * ✨ set autofilter also for search_1n and set autofilter only if show is true * ✨ Handle autofilter parameter on search request and handle filtertoken returned * 🌐 Translation * 🐛 Fix setting of active filter on multilayer search * 🐛 Remove update method call * 🐛 Toggle selection non oly on selection layer but feature by feature related to layer. * 🐛 Handle catch promise * 🐛 Handle remove feature when there is a current selection * 🐛 Fix reactive toggled attribute when removing a feature from results * i18n * menu item icons * Revert "menu item icons" This reverts commit 35a3f7b. * Revert "i18n" This reverts commit 4d739fe. --------- Co-authored-by: Raruto <[email protected]>
g3w-suite · Oct 30, 2024 · 0322c7b · 0322c7b
1 parent d709702
commit 0322c7b
Show file tree

Hide file tree

Showing 18 changed files with 171 additions and 75 deletions.
diff --git 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
@@ -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
@@ -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;
 }
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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);
+    }
   }
 
   /**