feat(ogc-filter/dom): allow domain of values to fill ogc-filter selec…

packages/common/src/lib/dom/dom.interfaces.ts

@@ -0,0 +1,11 @@
+export interface DOMOptions {
+  id?: number;
+  name?: string;
+  url?: string;
+  values?: DOMValue[];
+}
+
+export interface DOMValue {
+  id: number | string;
+  value: string;
+}

packages/common/src/lib/dom/dom.module.ts

@@ -0,0 +1,17 @@
+import { ModuleWithProviders, NgModule } from '@angular/core';
+
+import { DOMService } from './dom.service';
+
+@NgModule({
+  providers: [DOMService]
+})
+export class IgoDOMModule {
+  static forRoot(): ModuleWithProviders<IgoDOMModule> {
+    return {
+      ngModule: IgoDOMModule,
+      providers: [
+        DOMService
+      ]
+    };
+  }
+}

packages/common/src/lib/dom/dom.service.ts

@@ -0,0 +1,32 @@
+import { HttpClient, HttpErrorResponse } from '@angular/common/http';
+import { catchError, map } from 'rxjs/operators';
+import { throwError } from 'rxjs';
+
+import { DOMOptions, DOMValue } from './dom.interfaces';
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class DOMService {
+
+  constructor(private http: HttpClient) {}
+
+  async getDom(dom: DOMOptions): Promise<DOMValue[]> {
+    const url = dom.url;
+    let result: DOMValue[];
+
+    await this.http.get<any>(url).pipe(
+      map(response => {
+        result = response;
+        return response;
+      }),
+      catchError((err: HttpErrorResponse) => {
+        return throwError(err);
+      })
+    ).toPromise();
+
+    return result;
+  }
+
+}

packages/common/src/lib/dom/index.ts

@@ -0,0 +1,2 @@
+export * from './dom.service';
+export * from './dom.interfaces';

packages/common/src/public_api.ts

@@ -12,6 +12,7 @@ export * from './lib/collapsible/collapsible.module';
 export * from './lib/confirm-dialog/confirm-dialog.module';
 export * from './lib/context-menu/context-menu.module';
 export * from './lib/custom-html/custom-html.module';
+export * from './lib/dom/dom.module';
 export * from './lib/drag-drop/drag-drop.module';
 export * from './lib/dynamic-component/dynamic-component.module';
 export * from './lib/dynamic-component/dynamic-outlet/dynamic-outlet.module';
@@ -53,6 +54,7 @@ export * from './lib/confirm-dialog';
 export * from './lib/context-menu';
 export * from './lib/custom-html';
 export * from './lib/drag-drop';
+export * from './lib/dom';
 export * from './lib/dynamic-component';
 export * from './lib/form';
 export * from './lib/home-button';

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

@@ -64,6 +64,9 @@ export class WFSDataSource extends DataSource {
     if (ogcFilters?.select){
       ogcFilters.select.selectorType = 'select';
     }
+    if (ogcFilters?.autocomplete){
+      ogcFilters.autocomplete.selectorType = 'autocomplete';
+    }
 
     this.setOgcFilters((this.options as OgcFilterableDataSourceOptions).ogcFilters, true);
   }

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

@@ -114,7 +114,7 @@ export class WMSDataSource extends DataSource {
       );
     } else {
       initOgcFilters.advancedOgcFilters = (initOgcFilters.pushButtons || initOgcFilters.checkboxes
-        || initOgcFilters.radioButtons || initOgcFilters.select)
+        || initOgcFilters.radioButtons || initOgcFilters.select || initOgcFilters.autocomplete)
         ? false
         : true;
       if (initOgcFilters.advancedOgcFilters && initOgcFilters.filters) {
@@ -135,6 +135,9 @@ export class WMSDataSource extends DataSource {
       if (initOgcFilters.select){
         initOgcFilters.select.selectorType = 'select';
       }
+      if (initOgcFilters.autocomplete){
+        initOgcFilters.autocomplete.selectorType = 'autocomplete';
+      }
     }
 
     if (

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

@@ -32,7 +32,8 @@ import {
   IgoCollapsibleModule,
   IgoListModule,
   IgoKeyValueModule,
-  IgoEntityModule
+  IgoEntityModule,
+  IgoDOMModule
 } from '@igo2/common';
 import { IgoGeometryModule } from './../geometry/geometry.module';
 
@@ -94,6 +95,7 @@ import { OgcFilterTimeSliderComponent } from './ogc-filter-time/ogc-filter-time-
     IgoCollapsibleModule,
     IgoListModule,
     IgoEntityModule,
+    IgoDOMModule,
     IgoKeyValueModule,
     IgoGeometryModule,
     MatBadgeModule

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

@@ -1,6 +1,7 @@
 <button
   *ngIf="header && options.ogcFilters && options.ogcFilters.enabled &&
-  (options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.editable)"
+  (options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete
+    || options.ogcFilters.editable)"
   mat-icon-button
   collapsibleButton
   tooltip-position="below"
@@ -12,7 +13,8 @@
 
 <div #ogcFilter class="igo-layer-actions-container"
 *ngIf="options.ogcFilters && options.ogcFilters.enabled &&
-(options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.editable)">
+(options.ogcFilters.pushButtons || options.ogcFilters.checkboxes || options.ogcFilters.radioButtons || options.ogcFilters.select || options.ogcFilters.autocomplete
+  || 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

@@ -23,7 +23,7 @@ export class OgcFilterButtonComponent implements OnInit {
         const currentPushButtonGroup = pushButtons.groups.find(gr => gr.enabled);
         let cntPushButtons = 0;
         if (currentPushButtonGroup) {
-          currentPushButtonGroup.computedSelectors.map(cb => cntPushButtons += (cb.selectors as any).filter(
+          currentPushButtonGroup.computedSelectors?.map(cb => cntPushButtons += (cb.selectors as any)?.filter(
             button => button.enabled).length);
         }
         cnt += cntPushButtons;
@@ -33,7 +33,7 @@ export class OgcFilterButtonComponent implements OnInit {
         const currentCheckboxGroup = checkboxes.groups.find(gr => gr.enabled);
         let cntCheckboxes = 0;
         if (currentCheckboxGroup) {
-          currentCheckboxGroup.computedSelectors.map(cb => cntCheckboxes += (cb.selectors as any).filter(
+          currentCheckboxGroup.computedSelectors?.map(cb => cntCheckboxes += (cb.selectors as any)?.filter(
             checkbox => checkbox.enabled).length);
         }
         cnt += cntCheckboxes;
@@ -43,7 +43,7 @@ export class OgcFilterButtonComponent implements OnInit {
         const currentRadioButtonsGroup = radioButtons.groups.find(gr => gr.enabled);
         let cntRadioButtons = 0;
         if (currentRadioButtonsGroup) {
-          currentRadioButtonsGroup.computedSelectors.map(cb => cntRadioButtons += (cb.selectors as any).filter(
+          currentRadioButtonsGroup.computedSelectors?.map(cb => cntRadioButtons += (cb.selectors as any)?.filter(
             radio => radio.enabled).length);
         }
         cnt += cntRadioButtons;
@@ -53,11 +53,21 @@ export class OgcFilterButtonComponent implements OnInit {
         const currentSelectGroup = select.groups.find(gr => gr.enabled);
         let cntSelect = 0;
         if (currentSelectGroup) {
-          currentSelectGroup.computedSelectors.map(cb => cntSelect += (cb.selectors as any).filter(
+          currentSelectGroup.computedSelectors?.map(cb => cntSelect += (cb.selectors as any)?.filter(
             multi => multi.enabled).length);
         }
         cnt += cntSelect;
       }
+      if (filter.autocomplete) {
+        const autocomplete = filter.autocomplete as IgoOgcSelector;
+        const currentAutocompleteGroup = autocomplete.groups.find(gr => gr.enabled);
+        let cntAutocomplete = 0;
+        if (currentAutocompleteGroup) {
+          currentAutocompleteGroup.computedSelectors?.map(cb => cntAutocomplete += (cb.selectors as any)?.filter(
+            autocomplete => autocomplete.enabled).length);
+        }
+        cnt += cntAutocomplete;
+      }
     } else if (filter && filter.filters && !filter.filters.filters) {
       return 1;
     } else if (filter && filter.filters && filter.filters.filters) {

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

@@ -129,38 +129,74 @@ <h4>{{bundle.title}}</h4>
             (click)="emptySelect()">
             <mat-icon svgIcon="filter-remove"></mat-icon>
           </mat-button>
-          <mat-form-field>
+          <mat-form-field [style.width.%]="bundle.width ? bundle.width : undefined">
             <div *ngIf="bundle.multiple; else notMulti">
               <mat-select
-                #selection [multiple]="bundle.multiple" [placeholder]="bundle.title"
-                [formControl]="select" [(ngModel)]="enableds">
+                #selection [multiple]="bundle.multiple" [placeholder]="bundle.title" formControlName="selectMulti">
                 <div class="checkboxes mat-typography">
                   <mat-checkbox *ngIf="bundle.multiple"
-                    [(ngModel)]="allSelected" [ngModelOptions]="{standalone: true}"
+                    [(ngModel)]="selectAllSelected" [ngModelOptions]="{standalone: true}"
                     (change)="toggleAllSelection()">Tous
                   </mat-checkbox>
                 </div>
                 <mat-option *ngFor="let ogcSelect of bundle.selectors"
                   [matTooltip]="getToolTip(ogcSelect)" tooltip-position="below" matTooltipDelay="500" matTooltipClass="material-tooltip"
-                  (onSelectionChange)="optionClick()"
+                  (onSelectionChange)="selectOptionClick($event.source.value, bundle, $event)"
                   [value]="ogcSelect">{{ogcSelect.title}}
                 </mat-option>
               </mat-select>
             </div>
             <ng-template #notMulti>
               <mat-select
-                [placeholder]="bundle.title"
-                [formControl]="select" [(ngModel)]="enabled">
+                [placeholder]="bundle.title" formControlName="select">
                 <mat-option *ngFor="let ogcSelect of bundle.selectors"
                   [matTooltip]="getToolTip(ogcSelect)" tooltip-position="below" matTooltipDelay="500" matTooltipClass="material-tooltip"
-                  [value]="ogcSelect">{{ogcSelect.title}}
+                  [value]="ogcSelect" (onSelectionChange)="selectOptionClick($event.source.value, bundle)">{{ogcSelect.title}}
                 </mat-option>
               </mat-select>
             </ng-template>
           </mat-form-field>
         </div>
       </ng-container>
     </div>
+
+    <div class="autocompleteGroups" *ngIf="selector.selectorType === 'autocomplete'">
+      <mat-divider></mat-divider>
+      <div class="groupsSelector" *ngIf="getAutocompleteGroups().length > 1">
+        <mat-form-field>
+          <mat-select
+            formControlName="autocompleteGroup"
+            [matTooltip]="'igo.geo.layer.legend.selectStyle' | translate" tooltip-position="below" matTooltipShowDelay="500"
+            [(value)]="currentAutocompleteGroup">
+            <mat-option *ngFor="let autocompleteGroup of getAutocompleteGroups()"
+              [value]="autocompleteGroup">{{autocompleteGroup.title}}
+            </mat-option>
+          </mat-select>
+        </mat-form-field>
+      </div>
+      <ng-container *ngFor="let bundle of currentAutocompleteGroup.computedSelectors">
+        <h4>{{bundle.title}}</h4>
+        <div class="groupsSelector">
+          <mat-button *ngIf="bundle.unfiltered"
+            mat-icon-button
+            color="warn"
+            [matTooltip]="'igo.geo.filter.resetFilters' | translate" tooltip-position="below" matTooltipShowDelay="500"  matTooltipClass="material-tooltip"
+            (click)="emptyAutocomplete()">
+            <mat-icon svgIcon="filter-remove"></mat-icon>
+          </mat-button>
+          <mat-form-field *ngIf="filteredOgcAutocomplete[bundle.id]" [style.width.%]="bundle.width ? bundle.width : undefined">
+            <input matInput type="text" formControlName="autocomplete" #autocomplete class="autocomplete"
+              [matAutocomplete]="auto" [placeholder]="bundle.title">
+              <mat-autocomplete #auto="matAutocomplete" #autocomplete (optionSelected)="autocompleteOptionClick($event.option.value)"
+              [displayWith]="displayFn">
+                <mat-option *ngFor="let ogcAutocomplete of filteredOgcAutocomplete[bundle.id] | async" [value]="ogcAutocomplete">
+                  {{ ogcAutocomplete.value }}
+                </mat-option>
+              </mat-autocomplete>
+          </mat-form-field>
+        </div>
+      </ng-container>
+    </div>
   </div>
 </form>
 

packages/geo/src/lib/filter/ogc-filter-selection/ogc-filter-selection.component.scss

@@ -52,6 +52,7 @@
 
   mat-button {
     padding-right: 10px;
+    cursor: pointer;
   }
 
   h4 {