fix(remove-layer): Removing single layer from catalogue would delete …

…all calatogue layers Refactor remove layer dialog, remove possiblity to delete all layman layers for now
hslayers · Mar 19, 2024 · 6c094f2 · 6c094f2
1 parent b9e9aa6
commit 6c094f2
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 65 deletions.
diff --git a/projects/hslayers/common/remove-multiple/remove-layer-dialog.component.ts b/projects/hslayers/common/remove-multiple/remove-layer-dialog.component.ts
@@ -1,13 +1,15 @@
 import {Component, OnInit, ViewRef} from '@angular/core';
-import {Layer} from 'ol/layer';
 
 import {HsCommonLaymanService} from 'hslayers-ng/common/layman';
 import {HsDialogComponent} from 'hslayers-ng/common/dialogs';
 import {HsDialogContainerService} from 'hslayers-ng/common/dialogs';
 import {HsDialogItem} from 'hslayers-ng/common/dialogs';
 import {HsLanguageService} from 'hslayers-ng/shared/language';
-import {HsRemoveLayerDialogService} from './remove-layer-dialog.service';
-import {getTitle} from 'hslayers-ng/common/extensions';
+import {
+  HsRemoveLayerDialogService,
+  RemoveLayerWrapper,
+} from './remove-layer-dialog.service';
+import {getName, getTitle} from 'hslayers-ng/common/extensions';
 
 export type HsRmLayerDialogResponse = {
   value: 'yes' | 'no';
@@ -49,7 +51,7 @@ export class HsRmLayerDialogComponent implements HsDialogComponent, OnInit {
     title: string;
     message: string;
     note?: string;
-    items?: any[];
+    items?: RemoveLayerWrapper[];
   };
 
   ngOnInit(): void {
@@ -89,19 +91,19 @@ export class HsRmLayerDialogComponent implements HsDialogComponent, OnInit {
     } else {
       item.toRemove = true;
     }
-    this.deleteAllowed = this.data.items.find((i) => i.toRemove);
+    this.deleteAllowed = !!this.data.items.find((i) => i.toRemove);
   }
 
   toggleAll(): void {
     this._selectAll = !this._selectAll;
     for (const item of this.data.items) {
       item.toRemove = this._selectAll;
     }
-    this.deleteAllowed = this.data.items.find((i) => i.toRemove);
+    this.deleteAllowed = !!this.data.items.find((i) => i.toRemove);
   }
 
-  getTitle(item): string {
-    let title = item instanceof Layer ? getTitle(item) : item.name;
+  getTitle(item: RemoveLayerWrapper): string {
+    let title = getTitle(item.layer) ?? getName(item.layer);
     if (!title) {
       title = this.hsLanguageService.getTranslation(
         'COMMON.unknown',

diff --git a/projects/hslayers/common/remove-multiple/remove-layer-dialog.service.ts b/projects/hslayers/common/remove-multiple/remove-layer-dialog.service.ts
@@ -15,6 +15,12 @@ import {
 import {HsToastService} from 'hslayers-ng/common/toast';
 import {getDefinition, getTitle} from 'hslayers-ng/common/extensions';
 
+export type RemoveLayerWrapper = {
+  layer: Layer<Source>;
+  toRemove: boolean;
+  displayTitle: string;
+};
+
 @Injectable({
   providedIn: 'root',
 })
@@ -28,6 +34,17 @@ export class HsRemoveLayerDialogService {
     private hsDialogContainerService: HsDialogContainerService,
   ) {}
 
+  /**
+   * Create a remove layer wrapper
+   */
+  wrapLayer(layer: Layer<Source>): RemoveLayerWrapper {
+    return {
+      layer,
+      toRemove: false,
+      displayTitle: undefined,
+    };
+  }
+
   /**
    * Removes selected drawing layer from both Layermanager and Layman
    * @param layer Layer to be deleted - use when trying to delete layer other than hsDrawService.selectedLayer
@@ -40,7 +57,9 @@ export class HsRemoveLayerDialogService {
         message: 'DRAW.reallyDeleteThisLayer',
         note: this.getDeleteNote(),
         title: 'COMMON.confirmDelete',
-        items: layer ? [layer] : [this.hsDrawService.selectedLayer],
+        items: layer
+          ? [this.wrapLayer(layer)]
+          : [this.wrapLayer(this.hsDrawService.selectedLayer)],
       },
     );
     const confirmed: HsRmLayerDialogResponse = await dialog.waitResult();
@@ -58,11 +77,10 @@ export class HsRemoveLayerDialogService {
   /**
    * Removes multiple selected layers from both Layermanager and Layman
    */
-  async removeMultipleLayers(items?: Layer<Source>[]): Promise<void> {
-    items ??= [
-      ...(this.hsDrawService.drawableLayers ?? []),
-      ...(this.hsDrawService.drawableLaymanLayers ?? []),
-    ];
+  async removeMultipleLayers(layers?: Layer<Source>[]): Promise<void> {
+    const layersToRemove = layers ?? this.hsDrawService.drawableLayers ?? [];
+    const items = layersToRemove.map((l) => this.wrapLayer(l));
+
     const dialog = this.hsDialogContainerService.create(
       HsRmLayerDialogComponent,
       {
@@ -85,30 +103,16 @@ export class HsRemoveLayerDialogService {
           customDelay: 600000,
         },
       );
-      const drawableLaymanRm = this.hsDrawService.drawableLaymanLayers.filter(
-        (l) => l.toRemove,
-      );
 
-      const drawableRm = (
-        items as (Layer<Source> & {toRemove: boolean})[]
-      ).filter((l) => l.toRemove);
+      const drawablesToRemove = items.filter((l) => l.toRemove);
 
       const fromMapOnly = confirmed.type === 'map';
-      if (
-        drawableLaymanRm?.length ==
-          this.hsDrawService.drawableLaymanLayers?.length &&
-        this.hsDrawService.drawableLaymanLayers?.length != 0 &&
-        !fromMapOnly
-      ) {
-        await this.hsLaymanService.removeLayer();
-        for (const l of drawableRm) {
-          await this.completeLayerRemoval(l, fromMapOnly);
-        }
-      } else {
-        const toRemove = [...drawableRm, ...drawableLaymanRm];
-        for (const l of toRemove) {
-          await this.completeLayerRemoval(l, fromMapOnly);
-        }
+      /**
+       * Remove checked layers, may be either - from layman and/or map
+       */
+      //}
+      for (const l of drawablesToRemove) {
+        await this.completeLayerRemoval(l.layer, fromMapOnly);
       }
       this.hsToastService.removeByText(
         this.hsLanguageService.getTranslation(
@@ -121,27 +125,26 @@ export class HsRemoveLayerDialogService {
     }
   }
 
+  /**
+   * Remove layer from map and layman if desirable and possible
+   */
   private async completeLayerRemoval(
-    layerToRemove: any,
+    layerToRemove: Layer<Source>,
     fromMapOnly: boolean,
   ): Promise<void> {
-    let definition;
-    const isLayer = layerToRemove instanceof Layer;
-    if (isLayer) {
-      this.hsMapService.getMap().removeLayer(layerToRemove);
-      definition = getDefinition(layerToRemove);
-      if (getTitle(layerToRemove) == TMP_LAYER_TITLE) {
-        this.hsDrawService.tmpDrawLayer = false;
-      }
-    }
+    const definition = getDefinition(layerToRemove);
     if (
-      (definition?.format?.toLowerCase().includes('wfs') &&
-        definition?.url &&
-        !fromMapOnly) ||
-      !isLayer
+      definition?.format?.toLowerCase().includes('wfs') &&
+      definition?.url &&
+      !fromMapOnly
     ) {
-      await this.hsLaymanService.removeLayer(layerToRemove.name);
+      await this.hsLaymanService.removeLayer(layerToRemove);
+    }
+    if (getTitle(layerToRemove) == TMP_LAYER_TITLE) {
+      this.hsDrawService.tmpDrawLayer = false;
     }
+
+    this.hsMapService.getMap().removeLayer(layerToRemove);
   }
 
   /**

diff --git a/projects/hslayers/components/draw/draw-panel/draw-panel.component.html b/projects/hslayers/components/draw/draw-panel/draw-panel.component.html
@@ -18,15 +18,15 @@
             <p class="m-0 text-danger">{{'DRAW.noSuitableLayer' | translateHs }}</p>
         </ng-template>
 
-        <div *ngIf="HsDrawService.hasSomeDrawables || HsDrawService.tmpDrawLayer; else noLayerAvailable"
+        <div *ngIf="HsDrawService.drawableLayersAvailable || HsDrawService.tmpDrawLayer; else noLayerAvailable"
             class="flex-row w-100 m-auto justify-content-center align-items-center text-primary py-3 py-md-0"
             style="display: flex;">
             <p class="m-0 p-0">{{'DRAW.drawingTo' | translateHs }}</p>
             <div ngbDropdown style="max-width: 50%;" placement="bottom">
                 <button type="button" class="btn btn-sm rounded-0 hs-toolbar-button d-flex align-items-center mw-100"
                     ngbDropdownToggle (click)="HsDrawService.fillDrawableLayers()"
-                    [ngClass]="{'btn-light btn-outline-danger border-0' : HsDrawService.tmpDrawLayer,'dropdown-toggle' : HsDrawService.hasSomeDrawables }"
-                    [disabled]="!HsDrawService.hasSomeDrawables">
+                    [ngClass]="{'btn-light btn-outline-danger border-0' : HsDrawService.tmpDrawLayer,'dropdown-toggle' : HsDrawService.drawableLayersAvailable }"
+                    [disabled]="!HsDrawService.drawableLayersAvailable">
                     <div class="text-truncate">{{HsDrawService.selectedLayerString()}}</div>
                 </button>
                 <div ngbDropdownMenu style="max-width: 15em;">
@@ -73,7 +73,7 @@
                     <div ngbDropdown placement="bottom-right" display="dynamic" style="white-space: nowrap;"
                         #removeLayersDropdown="ngbDropdown">
                         <button type="button" ngbDropdownToggle class="btn btn-light  btn-outline-danger btn-sm"
-                            [disabled]="!HsDrawService.hasSomeDrawables" style="border: none !important;">
+                            [disabled]="!HsDrawService.drawableLayersAvailable" style="border: none !important;">
                             <i class="glyphicon icon-trash"></i>
                         </button>
                         <div ngbDropdownMenu class="flex-column px-1 py-2">

diff --git a/projects/hslayers/components/draw/draw-toolbar/draw-toolbar.component.html b/projects/hslayers/components/draw/draw-toolbar/draw-toolbar.component.html
@@ -9,7 +9,7 @@
         <div class="btn-group" ngbDropdown placement="bottom-left" display="dynamic">
             <button type="button" ngbDropdownToggle
                 class="btn btn-light rounded-0 btn-secondary dropdown-toggle hs-draw-layer-toggle d-flex align-items-center"
-                [hidden]="!(HsDrawService.hasSomeDrawables || HsDrawService.tmpDrawLayer)"
+                [hidden]="!(HsDrawService.drawableLayersAvailable || HsDrawService.tmpDrawLayer)"
                 (click)="controlLayerListAction(); HsDrawService.fillDrawableLayers() "
                 style="max-width: 125px; overflow: hidden; font-size: 0.9rem; z-index: 2;"
                 [ngClass]="HsDrawService.tmpDrawLayer ? 'btn-outline-danger' : 'btn-outline-primary'">
@@ -24,8 +24,7 @@
                         (click)="selectLayer(layer)">{{getTitle(layer) | translateHs : {module: 'LAYERS'}
                         }}</a>
                 </div>
-                <div class="d-flex align-items-center w-100 flex-column"
-                    *ngIf="HsDrawService.drawableLaymanLayers.length > 0">
+                <div class="d-flex align-items-center w-100 flex-column" *ngIf="HsDrawService.hasSomeDrawables">
                     <div class=" bg-primary w-100 text-light m-0 p-1">
                         <div class="d-flex justify-content-between">
                             {{'DRAW.serverLayers' | translateHs }}
@@ -58,7 +57,7 @@
             [title]="'DRAW.saveDrawingToLayer' | translateHs ">
             <i class="glyphicon icon-save-floppy"></i>
         </button>
-        <ng-container *ngIf="HsDrawService.hasSomeDrawables">
+        <ng-container *ngIf="HsDrawService.drawableLayers.length > 0">
             <ng-container *ngIf="HsDrawService.moreThenOneDrawable === true; else deleteButton">
                 <div class="btn-group">
                     <div ngbDropdown placement="bottom-right" display="dynamic" style="white-space: nowrap;"

diff --git a/projects/hslayers/components/draw/draw.component.ts b/projects/hslayers/components/draw/draw.component.ts
@@ -15,7 +15,8 @@ import {HsPanelBaseComponent} from 'hslayers-ng/common/panels';
 })
 export class HsDrawComponent
   extends HsPanelBaseComponent
-  implements OnInit, OnDestroy {
+  implements OnInit, OnDestroy
+{
   name = 'draw';
   selectedOption = new BehaviorSubject('draw');
   private end = new Subject<void>();

diff --git a/projects/hslayers/shared/draw/draw.service.params.ts b/projects/hslayers/shared/draw/draw.service.params.ts
@@ -1,7 +1,6 @@
 import {Collection} from 'ol';
 import {DragBox, Draw, Modify, Snap} from 'ol/interaction';
 import {EventsKey} from 'ol/events';
-import {Geometry} from 'ol/geom';
 import {Layer} from 'ol/layer';
 import {Source} from 'ol/source';
 import {Subject} from 'rxjs';
@@ -14,7 +13,17 @@ export class HsDrawServiceParams {
    * Drawable layers available on Layman not currently added to map
    */
   drawableLaymanLayers: Array<any> = [];
+  /**
+   * Whether there are some available drawable layers either visible in map or on server
+   */
+  drawableLayersAvailable = false;
+  /**
+   * Whether there are some drawable layers in a map
+   */
   hasSomeDrawables = false;
+  /**
+   * Whether there are multiple drawable layers in a map
+   */
   moreThenOneDrawable = false;
   draw: Draw;
   modify: Modify;

diff --git a/projects/hslayers/shared/draw/draw.service.ts b/projects/hslayers/shared/draw/draw.service.ts
@@ -536,11 +536,9 @@ export class HsDrawService extends HsDrawServiceParams {
         );
       }
     }
-    this.hasSomeDrawables =
-      this.drawableLayers.length > 0 || this.drawableLaymanLayers.length > 0;
-
-    this.moreThenOneDrawable =
-      this.drawableLayers?.length + this.drawableLaymanLayers?.length > 1;
+    this.drawableLayersAvailable = this.drawableLayers.length > 0 || this.drawableLaymanLayers.length > 0;
+    this.hasSomeDrawables = this.drawableLayers.length > 0 ;
+    this.moreThenOneDrawable = this.drawableLaymanLayers?.length > 1;
   }
 
   private selectedLayerNotAvailable(drawables) {