feat(ogc-filters): Reshuffle of ogc filter selection

demo/src/app/geo/ogc-filter/ogc-filter.component.ts

@@ -512,112 +512,122 @@ export class AppOgcFilterComponent {
         enabled: true,
         editable: true,
         pushButtons: {
+          selectorType: 'pushButton',
+          order: 2,
           groups : [
-            {title: 'Nom du group1', name: '1', ids : ['id1']},
-            {title: 'Nom du group2', name: '2', ids : ['id1', 'id2']},
+            {title: 'Nom du group1 - push', name: '1 - push', ids : ['id1']},
           ],
           bundles: [
-          {
-            id: 'id1',
-            logical: 'Or',
-            buttons: [
-              {
-                title: 'Radar photo fixe',
-                enabled: true,
-                color: '0,0,255',
-                tooltip: 'Here a tooltip explaning ...',
-                filters: {
-                  operator: 'PropertyIsEqualTo',
-                  propertyName: 'typeAppareil',
-                  expression: 'Radar photo fixe'
-                }
-              },
-              {
-                title: 'Radar photo mobile',
-                enabled: false,
-                color: '255,200,0',
-                tooltip: 'Here a tooltip explaning ...',
-                filters: {
-                  operator: 'PropertyIsEqualTo',
-                  propertyName: 'typeAppareil',
-                  expression: 'Radar photo mobile'
-                }
-              },
-              {
-                title: 'Radar photo fixe + feu rouge',
-                enabled: false,
-                color: '0,200,0',
-                tooltip: 'Here a tooltip explaning ...',
-                filters: {
-                  operator: 'PropertyIsEqualTo',
-                  propertyName: 'typeAppareil',
-                  expression: 'Radar photo fixe et surveillance au feu rouge'
-                }
-              },
-              {
-                title: 'Radar feu rouge',
-                enabled: false,
-                color: '255,0,0',
-                tooltip: 'Here a tooltip explaning ...',
-                filters: {
-                  operator: 'PropertyIsEqualTo',
-                  propertyName: 'typeAppareil',
-                  expression: 'Appareil de surveillance au feu rouge'
-                }
-              }
-            ]
-          },
-          {
-            id: 'id2',
-            logical: 'Or',
-            vertical: true,
-            buttons: [
-              {
-                title: 'Montréal & Laval',
-                enabled: false,
-                tooltip: 'Here a tooltip explaning ...',
-                filters: {
-                  logical: 'Or',
-                  filters: [
-                    {
-                      operator: 'PropertyIsEqualTo',
-                      propertyName: 'region',
-                      expression: 'Montréal'
-                    },
-                    {
-                      operator: 'PropertyIsEqualTo',
-                      propertyName: 'region',
-                      expression: 'Laval'
-                    }
-                  ]
+            {
+              id: 'id1',
+              title: 'Régions',
+              logical: 'Or',
+              vertical: true,
+              selectors: [
+                {
+                  title: 'Montréal & Laval',
+                  enabled: false,
+                  tooltip: 'Here a tooltip explaning ...',
+                  filters: {
+                    logical: 'Or',
+                    filters: [
+                      {
+                        operator: 'PropertyIsEqualTo',
+                        propertyName: 'region',
+                        expression: 'Montréal'
+                      },
+                      {
+                        operator: 'PropertyIsEqualTo',
+                        propertyName: 'region',
+                        expression: 'Laval'
+                      }
+                    ]
+                  }
+                },
+                {
+                  title: 'Outside Montréal & Laval',
+                  enabled: false,
+                  tooltip: 'Here a tooltip explaning ...',
+                  filters: {
+                    logical: 'And',
+                    filters: [
+                      {
+                        operator: 'PropertyIsNotEqualTo',
+                        propertyName: 'region',
+                        expression: 'Montréal'
+                      },
+                      {
+                        operator: 'PropertyIsNotEqualTo',
+                        propertyName: 'region',
+                        expression: 'Laval'
+                      }
+                    ]
+                  }
                 }
-              },
-              {
-                title: 'Outside Montréal & Laval',
-                enabled: false,
-                tooltip: 'Here a tooltip explaning ...',
-                filters: {
-                  logical: 'And',
-                  filters: [
-                    {
-                      operator: 'PropertyIsNotEqualTo',
-                      propertyName: 'region',
-                      expression: 'Montréal'
-                    },
-                    {
-                      operator: 'PropertyIsNotEqualTo',
-                      propertyName: 'region',
-                      expression: 'Laval'
-                    }
-                  ]
+              ]
+            }
+          ]
+        },
+        checkboxes: {
+          selectorType: 'checkbox',
+          order: 1,
+          groups : [
+            {title: 'Nom du group1 - checkbox', name: '1 - checkbox', ids : ['id1']},
+          ],
+          bundles: [
+            {
+              id: 'id1',
+              title: 'Type de radar photo',
+              logical: 'Or',
+              selectors: [
+                {
+                  title: 'Radar photo fixe',
+                  enabled: true,
+                  tooltip: 'Here a tooltip explaning ...',
+                  filters: {
+                    operator: 'PropertyIsEqualTo',
+                    propertyName: 'typeAppareil',
+                    expression: 'Radar photo fixe'
+                  }
+                },
+                {
+                  title: 'Radar photo mobile',
+                  enabled: false,
+                  tooltip: 'Here a tooltip explaning ...',
+                  filters: {
+                    operator: 'PropertyIsEqualTo',
+                    propertyName: 'typeAppareil',
+                    expression: 'Radar photo mobile'
+                  }
+                },
+                {
+                  title: 'Radar photo fixe + feu rouge',
+                  enabled: false,
+                  color: '0,200,0',
+                  tooltip: 'Here a tooltip explaning ...',
+                  filters: {
+                    operator: 'PropertyIsEqualTo',
+                    propertyName: 'typeAppareil',
+                    expression: 'Radar photo fixe et surveillance au feu rouge'
+                  }
+                },
+                {
+                  title: 'Radar feu rouge',
+                  enabled: false,
+                  color: '255,0,0',
+                  tooltip: 'Here a tooltip explaning ...',
+                  filters: {
+                    operator: 'PropertyIsEqualTo',
+                    propertyName: 'typeAppareil',
+                    expression: 'Appareil de surveillance au feu rouge'
+                  }
                 }
-              }
-            ]
-          }
-        ]
-      },
+              ]
+            }
+          ]
+        },
         allowedOperatorsType: OgcFilterOperatorType.Basic
-      },
+        },
       paramsWFS: {
         featureTypes: 'radars_photos',
         fieldNameGeometry: 'geometry',
@@ -633,7 +643,7 @@ export class AppOgcFilterComponent {
       .subscribe(dataSource => {
         this.map.addLayer(
           this.layerService.createLayer({
-            title: 'Filterable WMS layers with predefined filters (buttons)',
+            title: 'Filterable WMS layers with predefined filters (push buttons)',
             source: dataSource
           })
         );

packages/geo/src/lib/datasource/shared/datasources/wms-datasource.ts

@@ -113,7 +113,7 @@ export class WMSDataSource extends DataSource {
         'wms'
       );
     } else {
-      initOgcFilters.advancedOgcFilters = initOgcFilters.pushButtons
+      initOgcFilters.advancedOgcFilters = (initOgcFilters.pushButtons || initOgcFilters.checkboxes || initOgcFilters.radioButtons)
         ? false
         : true;
     }

packages/geo/src/lib/filter/filter.module.ts

@@ -52,7 +52,7 @@ import { OgcFilterableListComponent } from './ogc-filterable-list/ogc-filterable
 import { OgcFilterButtonComponent } from './ogc-filter-button/ogc-filter-button.component';
 import { OGCFilterService } from './shared/ogc-filter.service';
 import { OGCFilterTimeService } from './shared/ogc-filter-time.service';
-import { OgcFilterToggleButtonComponent } from './ogc-filter-toggle-button/ogc-filter-toggle-button.component';
+import { OgcFilterSelectionComponent } from './ogc-filter-selection/ogc-filter-selection.component';
 
 import { SpatialFilterTypeComponent } from './spatial-filter/spatial-filter-type/spatial-filter-type.component';
 import { SpatialFilterListComponent } from './spatial-filter/spatial-filter-list/spatial-filter-list.component';
@@ -105,7 +105,7 @@ import { OgcFilterTimeSliderComponent } from './ogc-filter-time/ogc-filter-time-
     TimeFilterListBindingDirective,
     OgcFilterFormComponent,
     OgcFilterButtonComponent,
-    OgcFilterToggleButtonComponent,
+    OgcFilterSelectionComponent,
     OgcFilterableFormComponent,
     OgcFilterableItemComponent,
     OgcFilterableListComponent,
@@ -125,7 +125,7 @@ import { OgcFilterTimeSliderComponent } from './ogc-filter-time/ogc-filter-time-
     TimeFilterListBindingDirective,
     OgcFilterFormComponent,
     OgcFilterButtonComponent,
-    OgcFilterToggleButtonComponent,
+    OgcFilterSelectionComponent,
     OgcFilterableFormComponent,
     OgcFilterableItemComponent,
     OgcFilterableListComponent,

packages/geo/src/lib/filter/filter.theming.scss

@@ -1,7 +1,9 @@
 @import './time-filter-form/time-filter-form.theming';
 @import './ogc-filter-time/ogc-filter-time-slider.theming';
+@import './ogc-filter-selection/ogc-filter-selection.theming';
 
 @mixin igo-filter-theming($theme, $typography) {
   @include igo-time-filter-form-theming($theme);
   @include igo-ogc-filter-time-slider-theming($theme);
+  @include igo-ogc-filter-selection-theming($theme);
 }

packages/geo/src/lib/filter/index.ts

@@ -6,7 +6,7 @@ export * from './ogc-filterable-form';
 export * from './ogc-filterable-item';
 export * from './ogc-filterable-list';
 export * from './ogc-filter-form';
-export * from './ogc-filter-toggle-button';
+export * from './ogc-filter-selection';
 export * from './ogc-filter-button';
 export * from './ogc-filter-time';
 export * from './time-filter-button';

packages/geo/src/lib/filter/ogc-filter-button/ogc-filter-button.component.html

@@ -1,6 +1,6 @@
 <button 
   *ngIf="header && options.ogcFilters && options.ogcFilters.enabled &&
-  (options.ogcFilters.pushButtons || options.ogcFilters.editable)"
+  (options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.editable)"
   mat-icon-button
   collapsibleButton
   tooltip-position="below"
@@ -12,7 +12,7 @@
 
 <div #ogcFilter class="igo-layer-actions-container"
 *ngIf="options.ogcFilters && options.ogcFilters.enabled &&
-(options.ogcFilters.pushButtons || options.ogcFilters.editable)">
+(options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.editable)">
   <igo-ogc-filterable-item
     *ngIf="ogcFilterCollapse && options.ogcFilters.enabled"
     igoListItem

packages/geo/src/lib/filter/ogc-filter-button/ogc-filter-button.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, ChangeDetectionStrategy, OnInit } from '@angular/core
 
 import { Layer } from '../../layer/shared/layers/layer';
 import { IgoMap } from '../../map';
-import { OgcFilterableDataSourceOptions, IgoPushButton, OgcFiltersOptions } from '../shared/ogc-filter.interface';
+import { OgcFilterableDataSourceOptions, IgoOgcSelector, OgcFiltersOptions } from '../shared/ogc-filter.interface';
 
 @Component({
   selector: 'igo-ogc-filter-button',
@@ -18,13 +18,32 @@ export class OgcFilterButtonComponent implements OnInit {
     const filter = this.options.ogcFilters as any;
     if (filter && !filter.advancedOgcFilters) {
       if (filter.pushButtons) {
-        const pushButtons = filter.pushButtons as IgoPushButton;
+        const pushButtons = filter.pushButtons as IgoOgcSelector;
         const currentPushButtonGroup = pushButtons.groups.find(gr => gr.enabled);
         let cntPushButtons = 0;
         if (currentPushButtonGroup) {
-          currentPushButtonGroup.computedButtons.map(cb => cntPushButtons += cb.buttons.filter(button => button.enabled).length);
+          currentPushButtonGroup.computedSelectors.map(cb => cntPushButtons += (cb.selectors as any).filter(
+            button => button.enabled).length);
         }
         return cntPushButtons > 0 ? cntPushButtons : undefined;
+      } else if (filter.checkboxes) {
+        const checkboxes = filter.checkboxes as IgoOgcSelector;
+        const currentCheckboxGroup = checkboxes.groups.find(gr => gr.enabled);
+        let cntCheckboxes = 0;
+        if (currentCheckboxGroup) {
+          currentCheckboxGroup.computedSelectors.map(cb => cntCheckboxes += (cb.selectors as any).filter(
+            checkbox => checkbox.enabled).length);
+        }
+        return cntCheckboxes > 0 ? cntCheckboxes : undefined;
+      } else if (filter.radioButtons) {
+        const radioButtons = filter.radioButtons as IgoOgcSelector;
+        const currentRadioButtonsGroup = radioButtons.groups.find(gr => gr.enabled);
+        let cntRadioButtons = 0;
+        if (currentRadioButtonsGroup) {
+          currentRadioButtonsGroup.computedSelectors.map(cb => cntRadioButtons += (cb.selectors as any).filter(
+            checkbox => checkbox.enabled).length);
+        }
+        return cntRadioButtons > 0 ? cntRadioButtons : undefined;
       } else {
         return;
       }

packages/geo/src/lib/filter/ogc-filter-selection/index.ts

@@ -0,0 +1 @@
+export * from './ogc-filter-selection.component';