feat(layer-list): control layerlist by url (#248)

* feat(route) Control layer list by url llck, llca, llcv, llcr to ton

* feat(tool) Adding parameter to map-detail options to control layer list.

* feat(route) Control layerlist by url

* feat(layer-list) Adding a service to store layer-list controls.

* feat(layer-list) Adding way to control the layer-list toolbar

* feat(share-map) Url params for layer list control llck,llca,llcv,llcr

* refactor(share-map) commented code.

* fix(layer-list) for showToolbar=never

* refactor(*) moving oninit & afterviewinit content to functions.

* refactor(layer-list) reuse existing properties.

* fix(layer-list) layer list controls and excludeBaseLayers options

projects/context/src/lib/share-map/share-map/share-map-binding.directive.ts

@@ -1,7 +1,8 @@
-import { Directive, Self, OnInit } from '@angular/core';
+import { Directive, Self, OnInit, Optional } from '@angular/core';
 
-import { MapService } from '@igo2/geo';
+import { MapService, LayerListService } from '@igo2/geo';
 import { ShareMapComponent } from './share-map.component';
+import { RouteService } from '@igo2/core';
 
 @Directive({
   selector: '[igoShareMapBinding]'
@@ -11,12 +12,47 @@ export class ShareMapBindingDirective implements OnInit {
 
   constructor(
     @Self() component: ShareMapComponent,
-    private mapService: MapService
+    private mapService: MapService,
+    private layerListService: LayerListService,
+    @Optional() private route: RouteService
   ) {
     this.component = component;
   }
 
   ngOnInit() {
     this.component.map = this.mapService.getMap();
+    this.initRoutes();
+  }
+
+  private initRoutes() {
+    if (
+      this.route &&
+      (this.route.options.llcKKey || this.route.options.llcAKey ||
+        this.route.options.llcVKey || this.route.options.llcVKey)) {
+      this.route.queryParams.subscribe(params => {
+
+        const keywordFromUrl = params[this.route.options.llcKKey as string];
+        const sortedAplhaFromUrl = params[this.route.options.llcAKey as string];
+        const onlyVisibleFromUrl = params[this.route.options.llcVKey as string];
+        const onlyInRangeFromUrl = params[this.route.options.llcRKey as string];
+        if (keywordFromUrl && !this.layerListService.keywordInitializated) {
+          this.layerListService.keyword = keywordFromUrl;
+          this.layerListService.keywordInitializated = true;
+        }
+        if (sortedAplhaFromUrl && !this.layerListService.sortedAlphaInitializated) {
+          this.layerListService.sortedAlpha = sortedAplhaFromUrl === '1' ? true : false;
+          this.layerListService.sortedAlphaInitializated = true;
+        }
+        if (onlyVisibleFromUrl && !this.layerListService.onlyVisibleInitializated) {
+          this.layerListService.onlyVisible = onlyVisibleFromUrl === '1' ? true : false;
+          this.layerListService.onlyVisibleInitializated = true;
+        }
+        if (onlyInRangeFromUrl && !this.layerListService.onlyInRangeInitializated) {
+          this.layerListService.onlyInRange = onlyInRangeFromUrl === '1' ? true : false;
+          this.layerListService.onlyInRangeInitializated = true;
+        }
+        this.component.resetUrl();
+      });
+    }
   }
 }

projects/context/src/lib/share-map/share-map/share-map.component.ts

@@ -4,7 +4,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { uuid, Clipboard } from '@igo2/utils';
 import { ConfigService, MessageService, LanguageService } from '@igo2/core';
 import { AuthService } from '@igo2/auth';
-import { IgoMap } from '@igo2/geo';
+import { IgoMap, LayerListService } from '@igo2/geo';
 
 import { ShareMapService } from '../shared/share-map.service';
 
@@ -46,14 +46,18 @@ export class ShareMapComponent implements AfterViewInit, OnInit {
   public url: string;
   public hasApi = false;
   public userId;
+  public publicShareOption = {
+    layerlistControls: { querystring: '' }
+  };
 
   constructor(
     private config: ConfigService,
     private languageService: LanguageService,
     private messageService: MessageService,
     private auth: AuthService,
     private shareMapService: ShareMapService,
-    private formBuilder: FormBuilder
+    private formBuilder: FormBuilder,
+    private layerListService: LayerListService
   ) {
     this.hasApi = this.config.getConfig('context.url') ? true : false;
   }
@@ -73,10 +77,32 @@ export class ShareMapComponent implements AfterViewInit, OnInit {
     }
   }
 
+  public hasLayerListControls(): boolean {
+    if (this.layerListService.keyword || this.layerListService.sortedAlpha  ||
+      this.layerListService.onlyVisible || this.layerListService.onlyInRange ) {
+        this.publicShareOption.layerlistControls.querystring = '';
+        if (this.layerListService.keyword) {
+          this.publicShareOption.layerlistControls.querystring += '&llck=' + this.layerListService.keyword;
+        }
+        if (this.layerListService.sortedAlpha) {
+          this.publicShareOption.layerlistControls.querystring += '&llca=1';
+        }
+        if (this.layerListService.onlyVisible) {
+          this.publicShareOption.layerlistControls.querystring += '&llcv=1';
+        }
+        if (this.layerListService.onlyInRange) {
+          this.publicShareOption.layerlistControls.querystring += '&llcr=1';
+        }
+      return true;
+    }
+    return false;
+  }
+
   resetUrl(values: any = {}) {
+    this.hasLayerListControls();
     const inputs = Object.assign({}, values);
     inputs.uri = this.userId ? `${this.userId}-${values.uri}` : values.uri;
-    this.url = this.shareMapService.getUrl(this.map, inputs);
+    this.url = this.shareMapService.getUrl(this.map, inputs, this.publicShareOption);
   }
 
   copyTextToClipboard(textArea) {

projects/context/src/lib/share-map/shared/share-map.service.ts

@@ -21,11 +21,11 @@ export class ShareMapService {
     this.urlApi = this.config.getConfig('context.url');
   }
 
-  getUrl(map: IgoMap, formValues) {
+  getUrl(map: IgoMap, formValues, publicShareOption) {
     if (this.urlApi) {
       return this.getUrlWithApi(map, formValues);
     }
-    return this.getUrlWithoutApi(map);
+    return this.getUrlWithoutApi(map, publicShareOption);
   }
 
   getUrlWithApi(map: IgoMap, formValues) {
@@ -43,7 +43,7 @@ export class ShareMapService {
     return `${location.origin + location.pathname}?context=${formValues.uri}`;
   }
 
-  getUrlWithoutApi(map: IgoMap) {
+  getUrlWithoutApi(map: IgoMap, publicShareOption) {
     if (
       !this.route ||
       !this.route.options.visibleOnLayersKey ||
@@ -52,6 +52,7 @@ export class ShareMapService {
     ) {
       return;
     }
+    const llc = publicShareOption.layerlistControls.querystring;
 
     const visibleKey = this.route.options.visibleOnLayersKey;
     const invisibleKey = this.route.options.visibleOffLayersKey;
@@ -103,6 +104,6 @@ export class ShareMapService {
 
     return `${location.origin}${
       location.pathname
-    }?${context}&${zoom}&${center}&${layersUrl}&${routingUrl}`;
+    }?${context}&${zoom}&${center}&${layersUrl}&${llc}&${routingUrl}`.replace(/&&/g, '&');
   }
 }

projects/core/src/lib/route/route.interface.ts

@@ -8,4 +8,8 @@ export interface RouteServiceOptions {
   visibleOffLayersKey?: boolean | string;
   routingCoordKey?: boolean | string;
   toolKey?: boolean | string;
+  llcKKey?: boolean | string;
+  llcAKey?: boolean | string;
+  llcVKey?: boolean | string;
+  llcRKey?: boolean | string;
 }

projects/core/src/lib/route/route.service.ts

@@ -36,7 +36,11 @@ export class RouteService {
       visibleOnLayersKey: 'visiblelayers',
       visibleOffLayersKey: 'invisiblelayers',
       routingCoordKey: 'routing',
-      toolKey: 'tool'
+      toolKey: 'tool',
+      llcKKey: 'llck',
+      llcAKey: 'llca',
+      llcVKey: 'llcv',
+      llcRKey: 'llcr'
     };
     this.options = Object.assign({}, defaultOptions, options);
   }

projects/geo/src/lib/layer/layer-list/index.ts

@@ -1,2 +1,4 @@
 export * from './layer-list.component';
 export * from './layer-list-binding.directive';
+export * from './layer-list.enum';
+export * from './layer-list.service';

projects/geo/src/lib/layer/layer-list/layer-list-binding.directive.ts

@@ -1,19 +1,23 @@
-import { Directive, Self, OnInit, OnDestroy } from '@angular/core';
+import { Directive, Self, OnInit, OnDestroy, AfterViewInit, Optional } from '@angular/core';
 import { Subscription } from 'rxjs';
 
+import { RouteService } from '@igo2/core';
 import { MapService } from '../../map/shared/map.service';
 import { LayerListComponent } from './layer-list.component';
+import { LayerListService } from './layer-list.service';
 
 @Directive({
   selector: '[igoLayerListBinding]'
 })
-export class LayerListBindingDirective implements OnInit, OnDestroy {
+export class LayerListBindingDirective implements OnInit, AfterViewInit, OnDestroy {
   private component: LayerListComponent;
   private layers$$: Subscription;
 
   constructor(
     @Self() component: LayerListComponent,
-    private mapService: MapService
+    private mapService: MapService,
+    private layerListService: LayerListService,
+    @Optional() private route: RouteService
   ) {
     this.component = component;
   }
@@ -27,7 +31,47 @@ export class LayerListBindingDirective implements OnInit, OnDestroy {
       .layers$.subscribe(layers => (this.component.layers = layers));
   }
 
+  ngAfterViewInit(): void {
+    this.initRoutes();
+  }
+
+  private initRoutes() {
+    if (
+      this.route &&
+      (this.route.options.llcKKey || this.route.options.llcAKey ||
+        this.route.options.llcVKey || this.route.options.llcVKey)) {
+      this.route.queryParams.subscribe(params => {
+
+        const keywordFromUrl = params[this.route.options.llcKKey as string];
+        const sortedAplhaFromUrl = params[this.route.options.llcAKey as string];
+        const onlyVisibleFromUrl = params[this.route.options.llcVKey as string];
+        const onlyInRangeFromUrl = params[this.route.options.llcRKey as string];
+        if (keywordFromUrl && !this.layerListService.keywordInitializated) {
+          this.layerListService.keyword = keywordFromUrl;
+          this.layerListService.keywordInitializated = true;
+        }
+        if (sortedAplhaFromUrl && !this.layerListService.sortedAlphaInitializated) {
+          this.layerListService.sortedAlpha = sortedAplhaFromUrl === '1' ? true : false;
+          this.layerListService.sortedAlphaInitializated = true;
+        }
+        if (onlyVisibleFromUrl &&
+          !this.layerListService.onlyVisibleInitializated &&
+          this.component.hasLayerNotVisible) {
+          this.layerListService.onlyVisible = onlyVisibleFromUrl === '1' ? true : false;
+          this.layerListService.onlyVisibleInitializated = true;
+        }
+        if (onlyInRangeFromUrl &&
+          !this.layerListService.onlyInRangeInitializated &&
+          this.component.hasLayerOutOfRange) {
+          this.layerListService.onlyInRange = onlyInRangeFromUrl === '1' ? true : false;
+          this.layerListService.onlyInRangeInitializated = true;
+        }
+      });
+    }
+  }
+
   ngOnDestroy() {
     this.layers$$.unsubscribe();
   }
+
 }

projects/geo/src/lib/layer/layer-list/layer-list.component.html

@@ -1,72 +1,72 @@
 <igo-list [navigation]="false" [selection]="false">
-  <mat-list-item *ngIf="layers.length>=thresholdToFilterAndSort || keyword || onlyInRange || onlyVisible ">
+  <mat-list-item *ngIf="showFilterSortToolbar()">
     <ng-container>
     <mat-form-field class="inputFilter" [floatLabel]="floatLabel">
           <input
           matInput
           [placeholder]="placeholder"
           [matTooltip]="'igo.geo.layer.subsetLayersListKeyword' | translate"
            matTooltipShowDelay="500"
-          type="text" [(ngModel)]="keyword">
+          type="text" [(ngModel)]="layerListService.keyword">
           <button
           mat-button
-          *ngIf="keyword"
+          *ngIf="layerListService.keyword"
           matSuffix
           mat-icon-button
           aria-label="Clear"
           color="warn"
-          (click)="keyword = undefined">
+          (click)="layerListService.keyword = undefined">
           <mat-icon>close</mat-icon>
           </button>
     </mat-form-field>
     <button
-      *ngIf="!sortedAlpha"
+      *ngIf="!layerListService.sortedAlpha"
       mat-icon-button
       [matTooltip]="'igo.geo.layer.sortAlphabetically' | translate"
       matTooltipShowDelay="500"
-      (click)="sortedAlpha = true">
+      (click)="layerListService.sortedAlpha = true">
       <mat-icon color="primary">sort_by_alpha</mat-icon>
     </button>
     <button
-      *ngIf="sortedAlpha"
+      *ngIf="layerListService.sortedAlpha"
       mat-icon-button
       [matTooltip]="'igo.geo.layer.sortMapOrder' | translate"
       matTooltipShowDelay="500"
-      (click)="sortedAlpha = false">
+      (click)="layerListService.sortedAlpha = false">
       <mat-icon color="warn">warning</mat-icon>
     </button>
     <button
       mat-icon-button
       [disabled]="!hasLayerNotVisible"
-      [matTooltip]="onlyVisible ?
+      [matTooltip]="layerListService.onlyVisible ?
       ('igo.geo.layer.resetLayersList' | translate) :
       ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)"
       matTooltipShowDelay="500"
-      [color]="onlyVisible ? 'warn' : 'primary'"
+      [color]="layerListService.onlyVisible ? 'warn' : 'primary'"
       (click)="toggleOnlyVisible()">
       <mat-icon>
-        <ng-container *ngIf="!onlyVisible">
+        <ng-container *ngIf="!layerListService.onlyVisible">
           visibility
         </ng-container>
-        <ng-container *ngIf="onlyVisible">
+        <ng-container *ngIf="layerListService.onlyVisible">
             warning
         </ng-container>
       </mat-icon>
     </button>
     <button
       mat-icon-button
       [disabled]="!hasLayerOutOfRange"
-      [matTooltip]="onlyInRange ?
+      [matTooltip]="layerListService.onlyInRange ?
       ('igo.geo.layer.resetLayersList' | translate) :
       ('igo.geo.layer.subsetLayersListOnlyInRange' | translate)"
       matTooltipShowDelay="500"
-      [color]="onlyInRange ? 'warn' : 'primary'"
+      [color]="layerListService.onlyInRange ? 'warn' : 'primary'"
       (click)="toggleOnlyInRange()">
       <mat-icon>
-        <ng-container *ngIf="!onlyInRange">
+        <ng-container *ngIf="!layerListService.onlyInRange">
             playlist_add_check
         </ng-container>
-        <ng-container *ngIf="onlyInRange">
+        <ng-container *ngIf="layerListService.onlyInRange">
             warning
         </ng-container>
       </mat-icon>