Merge pull request #5172 from camptocamp/GSGMF-1044_filter-panel

Filters stay active when panel closed/open

contribs/gmf/apps/desktop/index.html.ejs

@@ -71,7 +71,7 @@
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Draw and Measure'|translate}}">
               <span class="fa fa-paint-brush"></span>
             </button>
-            <button ngeo-btn class="btn btn-default" ng-if="mainCtrl.filterSelectorEnabled" ng-model="mainCtrl.filterSelectorActive"
+            <button ngeo-btn class="btn btn-default" ng-class="{'gmf-filter-active': mainCtrl.filterIsApplied}" ng-model="mainCtrl.filterSelectorActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Filter'|translate}}">
               <span class="fa fa-filter"></span>
             </button>
@@ -149,7 +149,8 @@
               <gmf-filterselector
                   active="mainCtrl.filterSelectorActive"
                   map="mainCtrl.map"
-                  tool-group="mainCtrl.mapToolsGroup">
+                  tool-group="mainCtrl.mapToolsGroup"
+                  filter-is-applied="mainCtrl.filterIsApplied">
               </gmf-filterselector>
             </div>
           </div>

contribs/gmf/apps/desktop/sass/desktop.scss

@@ -11,3 +11,7 @@ header {
     }
   }
 }
+
+.gmf-app-tools .gmf-app-bar .btn-group-vertical .btn.gmf-filter-active {
+  background-color: darken($brand-primary, 30%);
+}

contribs/gmf/apps/desktop_alt/index.html.ejs

@@ -68,7 +68,7 @@
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Draw and Measure'|translate}}">
               <span class="fa fa-paint-brush"></span>
             </button>
-            <button ngeo-btn class="btn btn-default" ng-model="mainCtrl.filterSelectorActive"
+            <button ngeo-btn class="btn btn-default" ng-class="{'gmf-filter-active': mainCtrl.filterIsApplied}" ng-model="mainCtrl.filterSelectorActive"
               data-toggle="tooltip" data-placement="left" data-original-title="{{'Filter'|translate}}">
               <span class="fa fa-filter"></span>
             </button>
@@ -167,7 +167,8 @@
               <gmf-filterselector
                   active="mainCtrl.filterSelectorActive"
                   map="mainCtrl.map"
-                  tool-group="mainCtrl.mapToolsGroup">
+                  tool-group="mainCtrl.mapToolsGroup"
+                  filter-is-applied="mainCtrl.filterIsApplied">
               </gmf-filterselector>
             </div>
           </div>

contribs/gmf/apps/desktop_alt/sass/desktop_alt.scss

@@ -27,3 +27,7 @@ div .ngeo-displaywindow {
   right: initial;
   top: $topbar-height + $app-margin + 3 * $map-tools-size;
 }
+
+.gmf-app-tools .gmf-app-bar .btn-group-vertical .btn.gmf-filter-active {
+  background-color: darken($brand-primary, 30%);
+}

contribs/gmf/src/filters/filterselectorComponent.js

@@ -125,11 +125,6 @@ class FilterSelectorController {
      */
     this.active = false;
 
-    $scope.$watch(
-      () => this.active,
-      this.handleActiveChange_.bind(this)
-    );
-
     /**
      * @type {?import("ol/Map.js").default}
      */
@@ -140,7 +135,6 @@ class FilterSelectorController {
      */
     this.toolGroup = null;
 
-
     // Injected properties
 
     /**
@@ -353,23 +347,6 @@ class FilterSelectorController {
   }
 
 
-  /**
-   * Called when the active property changes. Toggle data source registration.
-   * Also, when deactivated, deselect data source.
-   * @param {boolean} active Active.
-   * @private
-   * @hidden
-   */
-  handleActiveChange_(active) {
-    if (!active) {
-      this.aRuleIsActive = false;
-      this.timeout_(() => {
-        this.gmfDataSourceBeingFiltered.dataSource = null;
-      });
-    }
-  }
-
-
   /**
    * @param {boolean} register Whether register the data sources or not.
    * @private
@@ -768,7 +745,8 @@ module.component('gmfFilterselector', {
   bindings: {
     active: '=',
     map: '<',
-    toolGroup: '<'
+    toolGroup: '<',
+    filterIsApplied: '='
   },
   controller: FilterSelectorController,
   templateUrl: gmfFilterselectorTemplateUrl

contribs/gmf/src/filters/filterselectorcomponent.html

@@ -48,6 +48,7 @@
         datasource="$ctrl.readyDataSource"
         directed-rules="$ctrl.directedRules"
         feature-overlay="$ctrl.featureOverlay"
+        filter-is-applied="$ctrl.filterIsApplied"
         map="$ctrl.map"
         tool-group="$ctrl.toolGroup">
     </ngeo-filter>

src/filter/component.html

@@ -84,7 +84,7 @@
     class="btn btn-link"
     type="button"
     ng-click="$ctrl.apply()"
-    ng-disabled="$ctrl.hasARule() === false || $ctrl.datasource.visible === false">
+    ng-disabled="$ctrl.datasource.visible === false">
   <span class="fa fa-check"></span>
   <span translate>Apply filter</span>
 </button>
@@ -93,7 +93,7 @@
     class="btn btn-link"
     type="button"
     ng-click="$ctrl.getData()"
-    ng-disabled="$ctrl.hasARule() === false || $ctrl.datasource.visible === false">
+    ng-disabled="$ctrl.datasource.visible === false">
   <span class="fa fa-chevron-right"></span>
   <span translate>Get data</span>
 </button>

src/filter/component.js

@@ -77,6 +77,7 @@ module.component('ngeoFilter', {
     'datasource': '<',
     'directedRules': '<',
     'featureOverlay': '<',
+    'filterIsApplied': '=',
     'map': '<',
     'toolGroup': '<'
   },
@@ -141,6 +142,10 @@ class FilterController {
      */
     this.toolGroup = '';
 
+    /**
+     * @type {boolean}
+     */
+    this.filterIsApplied = false;
 
     // === Injected properties ===
 
@@ -231,6 +236,13 @@ class FilterController {
       this.handleARuleIsActiveChange_.bind(this)
     );
 
+    this.scope_.$watch(
+      () => this.datasource.filterRules,
+      () => {
+        this.filterIsApplied = this.hasARuleActive();
+      }
+    );
+
     // (1) Separate the attributes in 2: geometry and the others.
     const attributes = this.datasource.attributes;
     for (const attribute of attributes) {
@@ -242,10 +254,10 @@ class FilterController {
     }
 
     // (2) All rules that have geometry are added in the featureOverlay
-    /** @type {import("ngeo/rule/Rule.js").default[]} */
-    const rules_ = [];
-    const rules = rules_.concat(this.customRules, this.directedRules);
-    for (const rule of rules) {
+    for (const rule of this.customRules) {
+      this.registerRule_(rule);
+    }
+    for (const rule of this.directedRules) {
       this.registerRule_(rule);
     }
 
@@ -275,12 +287,22 @@ class FilterController {
 
 
   /**
-   * @return {boolean} True if at least one rule is currently defined.
+   * @return {boolean} True if at least one rule is currently defined with an expression.
    */
-  hasARule() {
-    /** @type {import("ngeo/rule/Rule.js").default[]} */
-    const a = [];
-    return a.concat(this.customRules, this.directedRules).length > 0;
+  hasARuleActive() {
+    let customRuleActive = false;
+    let directedRuleActive = false;
+    for (const rule of this.customRules) {
+      if (rule.expression) {
+        customRuleActive = true;
+      }
+    }
+    for (const rule of this.directedRules) {
+      if (rule.expression) {
+        directedRuleActive = true;
+      }
+    }
+    return customRuleActive || directedRuleActive;
   }
 
 
@@ -357,10 +379,12 @@ class FilterController {
    */
   getRulesWithValue_() {
     const filterRules = [];
-    /** @type {import("ngeo/rule/Rule.js").default[]} */
-    const a = [];
-    const rules = a.concat(this.customRules, this.directedRules);
-    for (const rule of rules) {
+    for (const rule of this.customRules) {
+      if (rule.value) {
+        filterRules.push(rule);
+      }
+    }
+    for (const rule of this.directedRules) {
       if (rule.value) {
         filterRules.push(rule);
       }
@@ -456,10 +480,13 @@ class FilterController {
    */
   handleRuleActiveChange_() {
     let aRuleIsActive = false;
-    /** @type {import("ngeo/rule/Rule.js").default[]} */
-    const a = [];
-    const rules = a.concat(this.customRules, this.directedRules);
-    for (const rule of rules) {
+    for (const rule of this.customRules) {
+      if (rule.active) {
+        aRuleIsActive = true;
+        break;
+      }
+    }
+    for (const rule of this.directedRules) {
       if (rule.active) {
         aRuleIsActive = true;
         break;
@@ -477,10 +504,13 @@ class FilterController {
     if (this.aRuleIsActive) {
       return;
     }
-    /** @type {import("ngeo/rule/Rule.js").default[]} */
-    const a = [];
-    const rules = a.concat(this.customRules, this.directedRules);
-    for (const rule of rules) {
+    for (const rule of this.customRules) {
+      if (rule.active) {
+        rule.active = false;
+        break;
+      }
+    }
+    for (const rule of this.directedRules) {
       if (rule.active) {
         rule.active = false;
         break;