feat(add-data): Remove catalogue layers via panel-header buttons

projects/hslayers/components/add-data/add-data.component.html

@@ -1,14 +1,30 @@
 <div class="card hs-main-panel overflow-hidden h-100" style="margin-top: 0 !important;" *ngIf="isVisible$ | async"
     [ngClass]="panelWidthClass">
-    <hs-panel-header name="addData" [panelTabs]="'catalogue,url,file'"
-        [selectedTab$]="hsAddDataService.datasetSelected"></hs-panel-header>
-    <div class="card-body" style="overflow-y: auto;"
-        *ngIf="{selected: hsAddDataService.datasetTypeSelected | async} as dataset">
-        <hs-add-data-url *ngIf="dataset.selected === 'url' || dataset.selected === 'OWS'">
-        </hs-add-data-url>
-        <hs-add-data-file *ngIf="dataset.selected === 'file'">
-        </hs-add-data-file>
-        <hs-add-data-catalogue class="h-100 d-block" *ngIf="dataset.selected === 'catalogue'">
-        </hs-add-data-catalogue>
-    </div>
-</div>
+    <ng-container *ngIf="{selected: hsAddDataService.datasetTypeSelected | async} as dataset">
+        <hs-panel-header name="addData" [panelTabs]="'catalogue,url,file'"
+            [selectedTab$]="hsAddDataService.datasetSelected">
+            @if(dataset.selected === 'catalogue' && hsAddDataCatalogueService.data.onlyMine){
+            <extra-buttons>
+                <ng-container *ngIf="{enabled: layersAvailable | async} as removal">
+                    <a class="dropdown-item" (click)="removeMultipleLayers()" [class.disabled]="!removal.enabled">
+                        <i class="icon-trash"></i>&nbsp;{{'DRAW.removeMultipleLayers' | translateHs }}
+                    </a>
+                    <a class="dropdown-item" (click)="removeAllLayers()" [class.disabled]="!removal.enabled">
+                        <i class="icon-trash"></i>&nbsp;{{'LAYERMANAGER.removeAllLayers' | translateHs }}
+                    </a>
+                </ng-container>
+
+            </extra-buttons>
+            }
+        </hs-panel-header>
+        <div class="card-body" style="overflow-y: auto;">
+            <hs-add-data-url *ngIf="dataset.selected === 'url' || dataset.selected === 'OWS'">
+            </hs-add-data-url>
+            <hs-add-data-file *ngIf="dataset.selected === 'file'">
+            </hs-add-data-file>
+            <hs-add-data-catalogue class="h-100 d-block" *ngIf="dataset.selected === 'catalogue'">
+            </hs-add-data-catalogue>
+        </div>
+    </ng-container>
+
+</div>

projects/hslayers/components/add-data/add-data.component.ts

@@ -1,17 +1,21 @@
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {Subject, takeUntil} from 'rxjs';
+import {Observable, Subject, of, switchMap, takeUntil} from 'rxjs';
 
 import {AddDataUrlType} from 'hslayers-ng/types';
 import {DatasetType} from 'hslayers-ng/types';
-import {HsAddDataService} from 'hslayers-ng/shared/add-data';
+import {
+  HsAddDataCatalogueService,
+  HsAddDataService,
+} from 'hslayers-ng/shared/add-data';
 import {HsAddDataUrlService} from 'hslayers-ng/shared/add-data';
+import {HsConfirmDialogComponent} from 'hslayers-ng/common/confirm';
 import {HsDialogContainerService} from 'hslayers-ng/common/dialogs';
-import {HsEventBusService} from 'hslayers-ng/shared/event-bus';
 import {HsGetCapabilitiesErrorComponent} from './common/capabilities-error-dialog/capabilities-error-dialog.component';
+import {HsLaymanService} from 'hslayers-ng/shared/save-map';
 import {HsLayoutService} from 'hslayers-ng/shared/layout';
 import {HsPanelBaseComponent} from 'hslayers-ng/common/panels';
+import {HsRemoveLayerDialogService} from 'hslayers-ng/common/remove-multiple';
 import {HsShareUrlService} from 'hslayers-ng/components/share';
-import {HsSidebarService} from 'hslayers-ng/shared/sidebar';
 import {servicesSupportedByUrl} from 'hslayers-ng/types';
 
 @Component({
@@ -23,16 +27,24 @@ export class HsAddDataComponent
   implements OnInit, OnDestroy {
   private end = new Subject<void>();
 
+  layersAvailable: Observable<boolean>;
   constructor(
     public hsAddDataService: HsAddDataService,
     public hsShareUrlService: HsShareUrlService,
     public hsLayoutService: HsLayoutService,
-    public hsEventBusService: HsEventBusService,
     public hsAddDataUrlService: HsAddDataUrlService,
-    private hsSidebarService: HsSidebarService,
     private hsDialogContainerService: HsDialogContainerService,
+    public hsAddDataCatalogueService: HsAddDataCatalogueService,
+    private hsRemoveLayerDialogService: HsRemoveLayerDialogService,
+    private hsLaymanService: HsLaymanService,
   ) {
     super(hsLayoutService);
+    this.layersAvailable =
+      this.hsAddDataCatalogueService.addDataCatalogueReloaded.pipe(
+        switchMap(() => {
+          return of(this.hsAddDataCatalogueService.catalogEntries.length > 0);
+        }),
+      );
   }
   name = 'addData';
 
@@ -78,4 +90,41 @@ export class HsAddDataComponent
       this.hsAddDataUrlService.typeSelected = type;
     }
   }
+
+  /**
+   * Create remove-layer dialog which allows for single/multiple layer removal
+   */
+  async removeMultipleLayers() {
+    const confirmed =
+      await this.hsRemoveLayerDialogService.removeMultipleLayers(
+        this.hsAddDataCatalogueService.catalogEntries
+          .filter((layer) => layer.editable)
+          .map((l) => {
+            return l.name;
+          }),
+        ['catalogue'],
+      );
+    if (confirmed) {
+      this.hsAddDataCatalogueService.reloadData();
+    }
+  }
+
+  /**
+   * Remove all user's layers from Layman catalogue
+   */
+  async removeAllLayers() {
+    const dialog = this.hsDialogContainerService.create(
+      HsConfirmDialogComponent,
+      {
+        message: 'LAYERMANAGER.dialogRemoveAll.dialogMessage',
+        note: 'DRAW.deleteNotePlural',
+        title: 'LAYERMANAGER.dialogRemoveAll.removeAllCatalogueLayers',
+      },
+    );
+    const confirmed = await dialog.waitResult();
+    if (confirmed === 'yes') {
+      await this.hsLaymanService.removeLayer();
+      this.hsAddDataCatalogueService.reloadData();
+    }
+  }
 }

projects/hslayers/components/add-data/catalogue/catalogue.component.ts

@@ -1,6 +1,9 @@
 import {Component, OnInit} from '@angular/core';
 
-import {HsAddDataCatalogueMapService} from 'hslayers-ng/shared/add-data';
+import {
+  HsAddDataCatalogueMapService,
+  HsAddDataService,
+} from 'hslayers-ng/shared/add-data';
 import {HsAddDataCatalogueService} from 'hslayers-ng/shared/add-data';
 import {HsAddDataLayerDescriptor} from 'hslayers-ng/types';
 import {HsCommonLaymanService} from 'hslayers-ng/common/layman';
@@ -36,6 +39,7 @@ export class HsAddDataCatalogueComponent implements OnInit {
     public hsUtilsService: HsUtilsService,
     public hsLaymanService: HsLaymanService,
     public hsCommonLaymanService: HsCommonLaymanService,
+    private hsAddDataService: HsAddDataService,
   ) {
     this.advancedSearch = false;
   }
@@ -68,7 +72,14 @@ export class HsAddDataCatalogueComponent implements OnInit {
   }
 
   queryByFilter(): void {
-    this.hsAddDataCatalogueService.reloadData();
+    /**
+     * A bit tricky way how to force add-data hs-panel-header to refresh its template
+     * in order to show/hide buttons. Previously done by reloadData call.
+     * This achieves the same via datasetTypeSelected subscription in catalgoue service
+     */
+    this.hsAddDataService.datasetSelected.next(
+      this.hsAddDataService.datasetSelected.getValue(),
+    );
   }
 
   selectType(type: string): void {

projects/hslayers/components/layer-manager/layer-manager.component.ts

@@ -261,6 +261,7 @@ export class HsLayerManagerComponent
         .map((l) => {
           return l.layer;
         }),
+      ['map', 'mapcatalogue'],
     );
   }
 

projects/hslayers/shared/add-data/catalogue/catalogue.service.ts

@@ -2,7 +2,7 @@ import {Injectable, NgZone} from '@angular/core';
 
 import {Feature} from 'ol';
 import {Geometry} from 'ol/geom';
-import {Observable, forkJoin} from 'rxjs';
+import {Observable, Subject, forkJoin} from 'rxjs';
 
 import {DatasetType} from 'hslayers-ng/types';
 import {HsAddDataCatalogueMapService} from './catalogue-map.service';
@@ -49,6 +49,7 @@ class HsAddDataCatalogueParams {
   matchedRecords: number;
   extentChangeSuppressed = false;
 
+  addDataCatalogueReloaded: Subject<void> = new Subject();
   constructor() {}
 }
 
@@ -142,6 +143,7 @@ export class HsAddDataCatalogueService extends HsAddDataCatalogueParams {
     this.queryCatalogs();
     // this.hsMickaFilterService.fillCodesets();
     this.calcExtentLayerVisibility();
+    this.addDataCatalogueReloaded.next();
   }
 
   /**

projects/hslayers/shared/draw/draw.service.ts

@@ -536,9 +536,10 @@ export class HsDrawService extends HsDrawServiceParams {
         );
       }
     }
-    this.drawableLayersAvailable = this.drawableLayers.length > 0 || this.drawableLaymanLayers.length > 0;
-    this.hasSomeDrawables = this.drawableLayers.length > 0 ;
-    this.moreThenOneDrawable = this.drawableLaymanLayers?.length > 1;
+    this.drawableLayersAvailable =
+      this.drawableLayers.length > 0 || this.drawableLaymanLayers.length > 0;
+    this.hasSomeDrawables = this.drawableLayers.length > 0;
+    this.moreThenOneDrawable = this.drawableLayers?.length > 1;
   }
 
   private selectedLayerNotAvailable(drawables) {

projects/hslayers/src/assets/locales/cs.json

@@ -580,7 +580,8 @@
     "dialogRemoveAll": {
       "dialogMessage": "Opravdu chcete odstranit všechny vámi přidané vrstvy?",
       "reloadComposition": "Obnovit kompozici",
-      "removeAllAdded": "Odstranit všechny přidané vrstvy"
+      "removeAllAdded": "Odstranit všechny přidané vrstvy",
+      "removeAllCatalogueLayers": "Odstranit všechny vaše vrstvy z katalogu"
     },
     "dialogRemoveLayer": {
       "dialogMessage": "Opravdu chcete odstranit vybranou vrstvu?"
@@ -667,8 +668,10 @@
     "newLayer": "Nová vrstva",
     "removeLayer": {
       "map": "Mapy",
-      "catalogue": "Mapy a Katalogu",
-      "deleteFrom": "Smazat z"
+      "catalogue": "Katalogu",
+      "deleteFrom": "Smazat z",
+      "mapcatalogue": "Mapy a Katalogu",
+      "noLayersToDelete": "Žádné vrstvy k odstranění"
     }
   },
   "LAYMAN": {
@@ -1036,4 +1039,4 @@
     "waypointLayer": "Vrstva s body trasy",
     "waypoints": "Body trasy"
   }
-}
+}

projects/hslayers/src/assets/locales/en.json

@@ -580,7 +580,8 @@
     "dialogRemoveAll": {
       "dialogMessage": "Do you really want to remove all your layers?",
       "reloadComposition": "Reload composition",
-      "removeAllAdded": "Remove all added layers"
+      "removeAllAdded": "Remove all added layers",
+      "removeAllCatalogueLayers": "Remove all your catalogue layers"
     },
     "dialogRemoveLayer": {
       "dialogMessage": "Do You really want to remove the selected layer?"
@@ -667,8 +668,10 @@
     "newLayer": "New layer",
     "removeLayer": {
       "map": "Map",
-      "catalogue": "Map & Catalogue",
-      "deleteFrom": "Delete from"
+      "catalogue": "Catalogue",
+      "deleteFrom": "Delete from",
+      "mapcatalogue": "Map & Catalogue",
+      "noLayersToDelete": "No layers to delete"
     }
   },
   "LAYMAN": {

projects/hslayers/src/assets/locales/lv.json

@@ -634,7 +634,10 @@
   "LAYERS": {
     "existingLayer": "Eksistējošs slānis",
     "newLayer": "Jauns slānis",
-    "featuresLoadError": "Grafisko objektu ielāde neizdevās"
+    "featuresLoadError": "Grafisko objektu ielāde neizdevās",
+    "removeLayer": {
+      "mapcatalogue": "Map & Catalogue"
+    }
   },
   "LAYMAN": {
     "allLayersSuccessfullyRemoved": "Visi slāņi veiksmīgi noņemti",

projects/hslayers/src/assets/locales/sk.json

@@ -580,7 +580,8 @@
     "dialogRemoveAll": {
       "dialogMessage": "Naozaj chcete odstrániť všetky vami pridané vrstvy?",
       "reloadComposition": "Obnoviť kompozíciu",
-      "removeAllAdded": "Odstrániť všetky pridané vrstvy"
+      "removeAllAdded": "Odstrániť všetky pridané vrstvy",
+      "removeAllCatalogueLayers": "Odstrániť všetky vaše vrstvy z katalógu"
     },
     "dialogRemoveLayer": {
       "dialogMessage": "Naozaj chcete odstrániť vybratú vrstvu?"
@@ -667,8 +668,10 @@
     "featuresLoadError": "Načítanie prvkov zlyhalo",
     "removeLayer": {
       "map": "Mapy",
-      "catalogue": "Mapy a Katalógu",
-      "deleteFrom": "Odstrániť z"
+      "catalogue": "Katalógu",
+      "deleteFrom": "Odstrániť z",
+      "mapcatalogue": "Mapy a Katalógu",
+      "noLayersToDelete": "Žiadne vrstvy na odstránenie"
     }
   },
   "LAYMAN": {

projects/test-app/src/hslayers-app/hslayers-app.component.ts

@@ -341,7 +341,7 @@ export class HslayersAppComponent {
     });
     this.hsConfig.update({
       panelsEnabled: {
-        draw: false,
+        draw: true,
         mapSwipe: true,
         language: true,
       },

tsconfig.json

@@ -25,15 +25,15 @@
       "hslayers-cesium": ["dist/hslayers-cesium"],
       "hslayers-cesium/*": [
         "projects/hslayers-cesium/*",
-        "projects/hslayers-cesium"
+        "projects/hslayers-cesium",
       ],
-      "cesium/*": ["node_modules/cesium/*"]
+      "cesium/*": ["node_modules/cesium/*"],
     },
-    "useDefineForClassFields": false
+    "useDefineForClassFields": false,
   },
   "angularCompilerOptions": {
     "enableResourceInlining": true,
     "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true
-  }
+    "strictInjectionParameters": true,
+  },
 }