Ajouter un oeil dans la sélection multiple de layer list

packages/geo/src/lib/layer/layer-item/layer-item.component.ts

@@ -7,7 +7,8 @@ import {
   Output,
   EventEmitter,
   Renderer2,
-  ElementRef
+  ElementRef,
+  ChangeDetectorRef
 } from '@angular/core';
 import { Subscription, BehaviorSubject } from 'rxjs';
 
@@ -96,6 +97,8 @@ export class LayerItemComponent implements OnInit, OnDestroy {
 
   @Input() selectionMode;
 
+  @Input() changeDetection;
+
   get removable(): boolean {
     return this.layer.options.removable !== false;
   }
@@ -116,7 +119,8 @@ export class LayerItemComponent implements OnInit, OnDestroy {
   constructor(
     private networkService: NetworkService,
     private renderer: Renderer2,
-    private elRef: ElementRef) {}
+    private elRef: ElementRef,
+    private cdRef: ChangeDetectorRef) {}
 
   ngOnInit() {
     if (
@@ -147,6 +151,10 @@ export class LayerItemComponent implements OnInit, OnDestroy {
         this.renderer.addClass(this.elRef.nativeElement, this.focusedCls);
       }
     });
+
+    if (this.changeDetection) {
+      this.changeDetection.subscribe(() => this.cdRef.detectChanges());
+    }
   }
 
   ngOnDestroy() {

packages/geo/src/lib/layer/layer-list-tool/layer-list-tool.component.html

@@ -1,5 +1,3 @@
-
-
   <mat-list-item>
       <mat-form-field class="inputFilter" [floatLabel]="floatLabel">
         <input
@@ -28,13 +26,18 @@
         </button>
       </div>
 
-
        <div [matTooltip]="onlyVisible ?
         ('igo.geo.layer.resetLayersList' | translate) :
         ('igo.geo.layer.subsetLayersListOnlyVisible' | translate)" matTooltipShowDelay="500">
          <button mat-icon-button [disabled]="layersAreAllVisible && !onlyVisible"
            [color]="onlyVisible ? 'warn' : 'primary'" (click)="toggleOnlyVisible()">
-           <mat-icon [svgIcon]="onlyVisible ? 'sort-variant-remove' : 'eye'"></mat-icon>
+           <mat-icon
+             matBadge
+             [matBadgeDisabled]="layersAreAllVisible && !onlyVisible"
+             igoMatBadgeIcon="eye"
+             igoMatBadgeInverseColor="true"
+             [svgIcon]="onlyVisible ? 'sort-variant-remove' : 'filter'">
+           </mat-icon>
          </button>
        </div>
 

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

@@ -24,13 +24,15 @@
         [selectionMode]="selection"
         [selectAll]="selectAllCheck"
         [layerCheck]="layer.options.check"
+        [changeDetection]="layerItemChangeDetection$"
         (action)="toggleLayerTool($event)"
         (checkbox)="layersCheck($event)">
     </igo-layer-item>
   </ng-template>
 </igo-list>
 
 <igo-panel *ngIf="!selection && layerTool && activeLayer" class="igo-layer-actions-container" [title]="activeLayer.title">
+
   <div class="igo-layer-button-group">
   <ng-container igoLayerItemToolbar
     [ngTemplateOutlet]="templateLayerToolbar"
@@ -175,6 +177,17 @@
                 svgIcon="arrow-down"></mat-icon>
     </button>
 
+    <button
+      mat-icon-button
+      color="primary"
+      tooltip-position="below"
+      matTooltipShowDelay="500"
+      [disabled]="layersChecked.length === 0"
+      [matTooltip]="statusSelectedLayersCheck === 'ALL_HIDDEN' ? ('igo.geo.layer.showSelectedLayers' | translate) : ('igo.geo.layer.hideSelectedLayers' | translate)"
+      (click)="toggleVisibility(layersChecked)">
+      <mat-icon	[svgIcon]="(statusSelectedLayersCheck === 'ALL_HIDDEN') ? 'eye-off' : 'eye'"></mat-icon>
+    </button>
+
     <button
       mat-icon-button
       color="warn"
@@ -185,5 +198,6 @@
       (click)="removeLayers(layersChecked)">
       <mat-icon svgIcon="delete"></mat-icon>
     </button>
+
   </div>
 </igo-panel>

packages/geo/src/lib/layer/layer-list/layer-list.component.ts

@@ -14,6 +14,7 @@ import type { TemplateRef } from '@angular/core';
 import { FloatLabelType } from '@angular/material/form-field';
 import { Layer } from '../shared';
 import { LayerListControlsEnum } from './layer-list.enum';
+import { LayerListSelectVisibleEnum } from './layer-list.enum';
 import {
   BehaviorSubject,
   ReplaySubject,
@@ -47,12 +48,15 @@ export class LayerListComponent implements OnInit, OnDestroy {
   showToolbar$: BehaviorSubject<boolean> = new BehaviorSubject(false);
 
   public layerTool: boolean;
+
+  public hideSelectedLayers: boolean = true;
   activeLayer$: BehaviorSubject<Layer> = new BehaviorSubject(undefined);
 
   layersChecked: Layer[] = [];
-  public selection;
+  public selection: boolean;
 
   private change$$: Subscription;
+  public layerItemChangeDetection$ = new BehaviorSubject(undefined);
 
   @ContentChild('igoLayerItemToolbar', /* TODO: add static flag */ {})
   templateLayerToolbar: TemplateRef<any>;
@@ -207,9 +211,8 @@ export class LayerListComponent implements OnInit, OnDestroy {
 
   public toggleOpacity = false;
 
+  public selectAllCheck: boolean;
   public selectAllCheck$ = new BehaviorSubject<boolean>(undefined);
-  selectAllCheck$$: Subscription;
-  public selectAllCheck;
 
   constructor(private elRef: ElementRef) {}
 
@@ -234,7 +237,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
         });
       });
 
-    this.selectAllCheck$$ = this.selectAllCheck$.subscribe(value => {
+    this.selectAllCheck$.subscribe((value) => {
       this.selectAllCheck = value;
     });
 
@@ -254,13 +257,13 @@ export class LayerListComponent implements OnInit, OnDestroy {
           this.selectAllCheck =
             checks ===
             this.layers.filter(
-              lay => lay.baseLayer !== true && lay.showInLayerList
+              (lay) => lay.baseLayer !== true && lay.showInLayerList
             ).length
               ? true
               : false;
         } else {
           this.selectAllCheck =
-            checks === this.layers.filter(lay => lay.showInLayerList).length
+            checks === this.layers.filter((lay) => lay.showInLayerList).length
               ? true
               : false;
         }
@@ -278,7 +281,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
 
   getLowerLayer() {
     return this.layers
-      .filter(l => !l.baseLayer)
+      .filter((l) => !l.baseLayer)
       .reduce(
         (prev, current) => {
           return prev.zIndex < current.zIndex ? prev : current;
@@ -288,7 +291,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
   }
 
   isLowerBaselayer(layer) {
-    const index = this.layers.findIndex(lay => layer.id === lay.id);
+    const index = this.layers.findIndex((lay) => layer.id === lay.id);
     if (
       this.layers &&
       this.layers[index + 1] &&
@@ -301,7 +304,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
 
   getUpperLayer() {
     return this.layers
-      .filter(l => !l.baseLayer)
+      .filter((l) => !l.baseLayer)
       .reduce(
         (prev, current) => {
           return prev.zIndex > current.zIndex ? prev : current;
@@ -311,7 +314,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
   }
 
   isUpperBaselayer(layer) {
-    const index = this.layers.findIndex(lay => layer.id === lay.id);
+    const index = this.layers.findIndex((lay) => layer.id === lay.id);
     if (
       this.layers &&
       this.layers[index - 1] &&
@@ -329,7 +332,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
     let response = false;
     let base = 0;
     for (const layer of layers) {
-      const mapIndex = this.layers.findIndex(lay => layer.id === lay.id);
+      const mapIndex = this.layers.findIndex((lay) => layer.id === lay.id);
       const currentLayer = this.layers[mapIndex];
       if (currentLayer.baseLayer) {
         base += 1;
@@ -339,7 +342,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
       if (
         previousLayer &&
         previousLayer.baseLayer !== true &&
-        !layers.find(lay => previousLayer.id === lay.id) &&
+        !layers.find((lay) => previousLayer.id === lay.id) &&
         currentLayer.baseLayer !== true
       ) {
         response = true;
@@ -372,7 +375,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
   raiseLayers(layers: Layer[]) {
     const layersToRaise = [];
     for (const layer of layers) {
-      const index = this.layers.findIndex(lay => lay.id === layer.id);
+      const index = this.layers.findIndex((lay) => lay.id === layer.id);
       if (this.raisableLayer(index)) {
         layersToRaise.push(layer);
       }
@@ -393,7 +396,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
     let response = false;
     let base = 0;
     for (const layer of layers) {
-      const mapIndex = this.layers.findIndex(lay => layer.id === lay.id);
+      const mapIndex = this.layers.findIndex((lay) => layer.id === lay.id);
       const currentLayer = this.layers[mapIndex];
       if (currentLayer.baseLayer) {
         base += 1;
@@ -403,7 +406,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
       if (
         nextLayer &&
         nextLayer.baseLayer !== true &&
-        !layers.find(lay => nextLayer.id === lay.id)
+        !layers.find((lay) => nextLayer.id === lay.id)
       ) {
         response = true;
       }
@@ -422,7 +425,10 @@ export class LayerListComponent implements OnInit, OnDestroy {
    * When multiple layers is selected but some may be allow to move
    */
   lowerableLayer(index: number) {
-    if (index > this.layers.filter(lay => lay.baseLayer !== true).length - 2) {
+    if (
+      index >
+      this.layers.filter((lay) => lay.baseLayer !== true).length - 2
+    ) {
       return false;
     }
 
@@ -435,7 +441,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
   lowerLayers(layers: Layer[]) {
     const layersToLower = [];
     for (const layer of layers) {
-      const index = this.layers.findIndex(lay => lay.id === layer.id);
+      const index = this.layers.findIndex((lay) => lay.id === layer.id);
       if (this.lowerableLayer(index)) {
         layersToLower.push(layer);
       }
@@ -588,7 +594,6 @@ export class LayerListComponent implements OnInit, OnDestroy {
     }
     layer.options.active = true;
     this.activeLayer = layer;
-    return;
   }
 
   removeLayers(layers?: Layer[]) {
@@ -601,20 +606,61 @@ export class LayerListComponent implements OnInit, OnDestroy {
       this.activeLayer.map.removeLayer(this.activeLayer);
       this.layerTool = false;
     }
-    return;
+  }
+
+  toggleVisibility(layers?: Layer[]) {
+    if (layers && layers.length > 0) {
+      for (const layer of layers) {
+        layer.visible = this.hideSelectedLayers;
+      }
+    }
+    this.layerItemChangeDetection$.next(true);
+  }
+
+  get statusSelectedLayersCheck(): LayerListSelectVisibleEnum {
+    let statusSelectedLayers: LayerListSelectVisibleEnum =
+      LayerListSelectVisibleEnum.NULL;
+    let findTrue: boolean = false;
+    let findFalse: boolean = false;
+
+    if (this.layersChecked.length === 0) {
+      statusSelectedLayers = LayerListSelectVisibleEnum.NULL;
+    } else {
+      statusSelectedLayers = LayerListSelectVisibleEnum.MIXED;
+      this.hideSelectedLayers = false;
+
+      for (const layer2 of this.layersChecked) {
+        if (layer2.visible === true) {
+          findTrue = true;
+        }
+        if (layer2.visible === false) {
+          findFalse = true;
+        }
+      }
+
+      if (findTrue === true && findFalse === false) {
+        statusSelectedLayers = LayerListSelectVisibleEnum.ALL_VISIBLE;
+      }
+      if (findTrue === false && findFalse === true) {
+        statusSelectedLayers = LayerListSelectVisibleEnum.ALL_HIDDEN;
+        this.hideSelectedLayers = true;
+      }
+    }
+
+    return statusSelectedLayers;
   }
 
   layersCheck(event: { layer: Layer; check: boolean }) {
     event.layer.options.check = event.check;
     if (event.check === true) {
       const eventMapIndex = this.layers.findIndex(
-        layer => event.layer.id === layer.id
+        (layer) => event.layer.id === layer.id
       );
       for (const layer of this.layersChecked) {
-        const mapIndex = this.layers.findIndex(lay => layer.id === lay.id);
+        const mapIndex = this.layers.findIndex((lay) => layer.id === lay.id);
         if (eventMapIndex < mapIndex) {
           this.layersChecked.splice(
-            this.layersChecked.findIndex(lay => layer.id === lay.id),
+            this.layersChecked.findIndex((lay) => layer.id === lay.id),
             0,
             event.layer
           );
@@ -623,7 +669,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
             if (
               this.layersChecked.length ===
               this.layers.filter(
-                lay => lay.baseLayer !== true && lay.showInLayerList
+                (lay) => lay.baseLayer !== true && lay.showInLayerList
               ).length
             ) {
               this.selectAllCheck = true;
@@ -633,7 +679,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
           } else if (!this.excludeBaseLayers) {
             if (
               this.layersChecked.length ===
-              this.layers.filter(lay => lay.showInLayerList).length
+              this.layers.filter((lay) => lay.showInLayerList).length
             ) {
               this.selectAllCheck = true;
             } else {
@@ -646,16 +692,17 @@ export class LayerListComponent implements OnInit, OnDestroy {
       this.layersChecked.push(event.layer);
     } else {
       const index = this.layersChecked.findIndex(
-        layer => event.layer.id === layer.id
+        (layer) => event.layer.id === layer.id
       );
       this.layersChecked.splice(index, 1);
     }
 
     if (this.excludeBaseLayers) {
       if (
         this.layersChecked.length ===
-        this.layers.filter(lay => lay.baseLayer !== true && lay.showInLayerList)
-          .length
+        this.layers.filter(
+          (lay) => lay.baseLayer !== true && lay.showInLayerList
+        ).length
       ) {
         this.selectAllCheck = true;
       } else {
@@ -664,7 +711,7 @@ export class LayerListComponent implements OnInit, OnDestroy {
     } else if (!this.excludeBaseLayers) {
       if (
         this.layersChecked.length ===
-        this.layers.filter(lay => lay.showInLayerList).length
+        this.layers.filter((lay) => lay.showInLayerList).length
       ) {
         this.selectAllCheck = true;
       } else {