fix(spatial filter): Spatial filter1.6 (#783)

* WIP * lint * WIP * WIP * WIP * WIP * WIP Co-authored-by: Marc-André Barbeau <[email protected]>
infra-geo-ouverte · Dec 1, 2020 · a1d0534 · a1d0534
1 parent ee37f12
commit a1d0534
Show file tree

Hide file tree

Showing 10 changed files with 247 additions and 124 deletions.
diff --git a/packages/geo/src/lib/filter/shared/spatial-filter.service.ts b/packages/geo/src/lib/filter/shared/spatial-filter.service.ts
@@ -7,7 +7,8 @@ import { Observable } from 'rxjs';
 import { Feature } from '../../feature/shared';
 import {
   SpatialFilterQueryType,
-  SpatialFilterItemType
+  SpatialFilterItemType,
+  SpatialFilterType
 } from './spatial-filter.enum';
 import { SpatialFilterThematic } from './spatial-filter.interface';
 
@@ -157,7 +158,8 @@ export class SpatialFilterService {
               params: {
                 geometry: 'true',
                 icon: 'true',
-                buffer: buffer.toString()
+                bufferInput: buffer.toString(),
+                simplified: '100'
               }
             }
           )
@@ -185,7 +187,8 @@ export class SpatialFilterService {
               params: {
                 geometry: 'true',
                 icon: 'true',
-                buffer: buffer.toString()
+                buffer: buffer.toString(),
+                simplified: '100'
               }
             }
           )
@@ -211,7 +214,6 @@ export class SpatialFilterService {
           .post<{ features: Feature[] }>(url + urlItem, {
             geometry: 'true',
             icon: 'true',
-            buffer,
             loc: JSON.stringify(feature)
           })
           .pipe(
@@ -235,7 +237,6 @@ export class SpatialFilterService {
           .post<{ features: Feature[] }>(url + urlItem, {
             geometry: 'true',
             icon: 'true',
-            buffer,
             loc: JSON.stringify(feature)
           })
           .pipe(
@@ -282,4 +283,51 @@ export class SpatialFilterService {
         );
     }
   }
+
+  /*
+   * Get buffer geometry
+   */
+  loadBufferGeometry(
+    feature: Feature,
+    filterType: SpatialFilterType,
+    buffer?: number,
+    type?: SpatialFilterQueryType,
+  ): Observable<Feature> {
+    if (filterType === SpatialFilterType.Predefined) {
+      const featureType = this.urlFilterList[type];
+      const featureCode = '/' + feature.properties.code;
+      if (featureType && featureCode) {
+        return this.http
+          .get<Feature>(this.baseUrl + featureType + featureCode,
+            {
+              params: {
+                geometry: '100',
+                bufferOutput: buffer.toString()
+              }
+            }
+          )
+          .pipe(
+            map(f => {
+              f.meta = {
+                id: f.properties.code,
+                alias: f.properties.nom,
+                title: f.properties.nom
+              };
+              return f;
+            })
+          );
+      }
+    } else {
+      return this.http
+        .post<Feature>(this.baseUrl + 'geospatial/buffer?', {
+          buffer,
+          loc: JSON.stringify(feature)
+        })
+        .pipe(
+          map(f => {
+            return f;
+          })
+        );
+    }
+  }
 }
diff --git a/.../geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.html b/.../geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.html
@@ -26,7 +26,7 @@
     </mat-slide-toggle>
 </div>
 
-<!-- <div class="buffer-unit" *ngIf="isPolygon()">
+<div class="buffer-unit" *ngIf="isPolygon()">
   <form class="buffer-form">
     <mat-form-field class="buffer">
       <input type="number" matInput placeholder="{{'igo.geo.spatialFilter.buffer' | translate}}" [formControl]="bufferFormControl"
@@ -43,7 +43,7 @@
     </mat-option>
     </mat-select>
   </mat-form-field>
-</div> -->
+</div>
 
 <div class="radius-unit" *ngIf="isPoint()">
   <form class="radius-form">
@@ -147,7 +147,7 @@
     {{'igo.geo.spatialFilter.goSearch' | translate}}
   </button>
 
-  <button mat-raised-button class="remove-button" [disabled]="layers.length === 0" (click)="clearButton()">
+  <button mat-raised-button class="remove-button" [disabled]="allLayers.length === 0" (click)="clearButton()">
     {{'igo.geo.spatialFilter.removeLayer' | translate}}
   </button>
 

diff --git a/.../geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.scss b/.../geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.scss
@@ -1,3 +1,5 @@
+@import '../../../../../../core/src/style/partial/media';
+
 .header {
     margin-top: 5px;
     width: 100%;
@@ -44,27 +46,72 @@
 }
 
 .search-button {
-    left: 25px;
-    width: 150px;
+    left: 15px;
+    width: 165px;
+
+    @include mobile {
+        left: 10px;
+        width: 45%;
+        min-height: 35px;
+        white-space: normal;
+        line-height: normal;
+    }
+}
+
+.export-button {
+    left: 15px;
+    width: 165px;
+
+    @include mobile {
+        left: 10px;
+        margin-top: 10px;
+        width: 45%;
+        min-height: 35px;
+        white-space: normal;
+        line-height: normal;
+    }
 }
 
 .remove-button {
-    margin: 12px;
-    width: 150px;
+    margin-top: 12px;
+    left: 5px;
+    width: 165px;
+
+    @include mobile {
+        margin: 0px;
+        width: 45%;
+        min-height: 35px;
+        white-space: normal;
+        line-height: normal;
+    }
 }
 
 .clear-form-button {
     left: 10px;
-    width: 150px;
+    width: 165px;
+
+    @include mobile {
+        width: 45%;
+        min-height: 35px;
+        white-space: normal;
+        line-height: normal;
+    }
 }
 
 .clear-search-button {
-    left: 10px;
-    width: 150px;
+    left: 5px;
+    width: 165px;
+
+    @include mobile {
+        width: 45%;
+        min-height: 35px;
+        white-space: normal;
+        line-height: normal;
+    }
 }
 
 .thematics {
-    max-height: 30%;
+    max-height: 35%;
     overflow: auto;
     margin-top: 5px;
     width: 98%;

diff --git a/...es/geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.ts b/...es/geo/src/lib/filter/spatial-filter/spatial-filter-item/spatial-filter-item.component.ts
@@ -29,9 +29,7 @@ import { Layer } from '../../../layer/shared';
 import { NestedTreeControl } from '@angular/cdk/tree';
 import { SpatialFilterThematic } from './../../shared/spatial-filter.interface';
 import { MessageService, LanguageService } from '@igo2/core';
-import buffer from '@turf/buffer';
-import * as turf from '@turf/helpers';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
+import { debounceTime } from 'rxjs/operators';
 
 /**
  * Spatial-Filter-Item (search parameters)
@@ -135,6 +133,8 @@ export class SpatialFilterItemComponent implements OnDestroy, OnInit {
 
   @Input() layers: Layer[] = [];
 
+  @Input() allLayers: Layer[] = [];
+
   @Input()
   get thematicLength(): number {
     return this._thematicLength;
@@ -230,6 +230,12 @@ export class SpatialFilterItemComponent implements OnDestroy, OnInit {
           return a.name.localeCompare(b.name);
         });
       }
+      this.groups.push(this.languageService.translate.instant('igo.geo.terrapi.limites'));
+      const limits: SpatialFilterThematic = {
+        name: this.groups[0],
+        children: []
+      };
+      this.thematics.push(limits);
       this.childrens.forEach(child => {
         if (child.group && (this.groups.indexOf(child.group) === -1)) {
           this.groups.push(child.group);
@@ -239,13 +245,28 @@ export class SpatialFilterItemComponent implements OnDestroy, OnInit {
           };
           this.thematics.push(thematic);
         }
+
         if (!child.group) {
-          const thematic: SpatialFilterThematic = {
-            name: child.name,
-            children: [],
-            source: child.source
-          };
-          this.thematics.push(thematic);
+          if (
+            child.name === this.languageService.translate.instant('igo.geo.terrapi.AdmRegion') ||
+            child.name === this.languageService.translate.instant('igo.geo.terrapi.Mun') ||
+            child.name === this.languageService.translate.instant('igo.geo.terrapi.Arrond') ||
+            child.name === this.languageService.translate.instant('igo.geo.terrapi.CircFed') ||
+            child.name === this.languageService.translate.instant('igo.geo.terrapi.CircProv') ||
+            child.name === this.languageService.translate.instant('igo.geo.terrapi.DirReg') ||
+            child.name === this.languageService.translate.instant('igo.geo.terrapi.MRC') ||
+            child.name === this.languageService.translate.instant('igo.geo.terrapi.RegTour')) {
+              child.group = limits.name;
+          } else if (child.name === this.languageService.translate.instant('igo.geo.terrapi.routes')) {
+            child.group = this.languageService.translate.instant('igo.geo.spatialFilter.group.transport');
+          } else {
+            const thematic: SpatialFilterThematic = {
+              name: child.name,
+              children: [],
+              source: child.source
+            };
+            this.thematics.push(thematic);
+          }
         }
         this.thematics.sort((a, b) => {
           return a.name.localeCompare(b.name);
@@ -296,13 +317,25 @@ export class SpatialFilterItemComponent implements OnDestroy, OnInit {
         if (this.measureUnit === MeasureLengthUnit.Meters && value > 0 && value <= 100000) {
           this.buffer = value;
           this.bufferEvent.emit(value);
-          this.zoneWithBuffer = buffer(turf.polygon(this.drawZone.coordinates), this.bufferFormControl.value / 1000, {units: 'kilometers'});
-          this.zoneWithBufferChange.emit(this.zoneWithBuffer);
+          this.spatialFilterService.loadBufferGeometry(
+            this.drawZone,
+            SpatialFilterType.Polygon,
+            value
+          ).subscribe((featureGeom: Feature) => {
+            this.zoneWithBuffer = featureGeom;
+            this.zoneWithBufferChange.emit(this.zoneWithBuffer);
+          });
         } else if (this.measureUnit === MeasureLengthUnit.Kilometers && value > 0 && value <= 100) {
           this.buffer = value;
           this.bufferEvent.emit(value);
-          this.zoneWithBuffer = buffer(turf.polygon(this.drawZone.coordinates), this.bufferFormControl.value, {units: 'kilometers'});
-          this.zoneWithBufferChange.emit(this.zoneWithBuffer);
+          this.spatialFilterService.loadBufferGeometry(
+            this.drawZone,
+            SpatialFilterType.Polygon,
+            value * 1000
+          ).subscribe((featureGeom: Feature) => {
+            this.zoneWithBuffer = featureGeom;
+            this.zoneWithBufferChange.emit(this.zoneWithBuffer);
+          });
         } else if (value === 0) {
           this.buffer = value;
           this.bufferEvent.emit(value);
@@ -535,15 +568,27 @@ export class SpatialFilterItemComponent implements OnDestroy, OnInit {
    */
   toggleSearchButton() {
     if (!this.isPredefined()) {
-      this.drawZone.meta = {
-        id: undefined,
-        title: 'Zone'
-      };
-      this.drawZone.properties = {
-        nom: 'Zone',
-        type: this.type as string
-      };
-      this.drawZoneEvent.emit(this.drawZone);
+      if (this.buffer > 0) {
+        this.zoneWithBuffer.meta = {
+          id: undefined,
+          title: 'Zone'
+        };
+        this.zoneWithBuffer.properties = {
+          nom: 'Zone',
+          type: this.type as string
+        };
+        this.drawZoneEvent.emit(this.zoneWithBuffer);
+      } else {
+        this.drawZone.meta = {
+          id: undefined,
+          title: 'Zone'
+        };
+        this.drawZone.properties = {
+          nom: 'Zone',
+          type: this.type as string
+        };
+        this.drawZoneEvent.emit(this.drawZone);
+      }
     }
     if (this.isPoint()) {
       this.radiusEvent.emit(this.radius);

diff --git a/.../geo/src/lib/filter/spatial-filter/spatial-filter-list/spatial-filter-list.component.html b/.../geo/src/lib/filter/spatial-filter/spatial-filter-list/spatial-filter-list.component.html
@@ -11,7 +11,7 @@
     </mat-form-field>
 <form>
 
-<!-- <div class="buffer-div">
+<div class="buffer-div">
     <form class="buffer-form">
         <mat-form-field class="buffer">
             <input type="number" matInput placeholder="{{'igo.geo.spatialFilter.buffer' | translate}}" [formControl]="bufferFormControl"
@@ -28,4 +28,4 @@
         </mat-option>
         </mat-select>
     </mat-form-field>
-</div> -->
+</div>