Edit: copy features from other layer (#1045)

Author: matthijsln

projects/admin-core/assets/locale/messages.admin-core.de.xlf

@@ -150,6 +150,10 @@
         <source>Copy application <x id="INTERPOLATION" equiv-text="{{data.application.title}}"/></source>
         <target>Anwendung kopieren <x id="INTERPOLATION" equiv-text="{{data.application.title}}"/></target>
       </trans-unit>
+      <trans-unit id="admin-core.application.copy-layers-info" datatype="html">
+        <source>Select one or more layers that are available for copying features from. If no layers are selected, all layers will be available. Note that incompatible layer geometry types may prevent successful copying.</source>
+        <target>Wählen Sie eine oder mehrere Ebenen aus, von denen Features kopiert werden können. Wenn keine Ebenen ausgewählt sind, stehen alle Ebenen zur Verfügung. Beachten Sie, dass inkompatible Geometrietypen der Ebenen ein erfolgreiches Kopieren verhindern können.</target>
+      </trans-unit>
       <trans-unit id="admin-core.application.create-application" datatype="html">
         <source>Create application</source>
         <target>Anwendung erstellen</target>

projects/admin-core/assets/locale/messages.admin-core.en.xlf

@@ -113,6 +113,9 @@
       <trans-unit id="admin-core.application.copy-application" datatype="html">
         <source>Copy application <x id="INTERPOLATION" equiv-text="{{data.application.title}}"/></source>
       </trans-unit>
+      <trans-unit id="admin-core.application.copy-layers-info" datatype="html">
+        <source>Select one or more layers that are available for copying features from. If no layers are selected, all layers will be available. Note that incompatible layer geometry types may prevent successful copying.</source>
+      </trans-unit>
       <trans-unit id="admin-core.application.create-application" datatype="html">
         <source>Create application</source>
       </trans-unit>

projects/admin-core/assets/locale/messages.admin-core.nl.xlf

@@ -150,6 +150,10 @@
         <source>Copy application <x id="INTERPOLATION" equiv-text="{{data.application.title}}"/></source>
         <target>Kopieer applicatie <x id="INTERPOLATION" equiv-text="{{data.application.title}}"/></target>
       </trans-unit>
+      <trans-unit id="admin-core.application.copy-layers-info" datatype="html">
+        <source>Select one or more layers that are available for copying features from. If no layers are selected, all layers will be available. Note that incompatible layer geometry types may prevent successful copying.</source>
+        <target>Selecteer één of meerdere lagen waarvan objecten kunnen worden gekopiëerd. Als geen lagen zijn aangevinkt is dit mogelijk van alle lagen. Let op dat door incompatibele geometrie-types een object mogelijk niet gekopiëerd kan worden.</target>
+      </trans-unit>
       <trans-unit id="admin-core.application.create-application" datatype="html">
         <source>Create application</source>
         <target>Applicatie aanmaken</target>

projects/admin-core/src/lib/application/components/components.module.ts

@@ -17,6 +17,7 @@ import { GeolocationConfigComponent } from './geolocation-config/geolocation-con
 import { InfoConfigComponent } from './info-config/info-config.component';
 import { DrawingConfigComponent } from './drawing-config/drawing-config.component';
 import { TocComponentConfigComponent } from './toc-config/toc-component-config.component';
+import { SharedAdminComponentsModule } from '../../shared/components';
 
 @NgModule({
   declarations: [
@@ -39,6 +40,7 @@ import { TocComponentConfigComponent } from './toc-config/toc-component-config.c
         BaseComponentConfigComponent,
         SelectUploadModule,
         MarkdownEditorComponent,
+        SharedAdminComponentsModule,
     ],
   exports: [
     ComponentsListComponent,
@@ -50,7 +52,7 @@ export class ComponentsModule {
     const configurationComponentService = inject(ConfigurationComponentRegistryService);
 
     /* eslint-disable max-len */
-    configurationComponentService.registerConfigurationComponents(BaseComponentTypeEnum.TOC, $localize `:@@admin-core.application.component-table-of-contents:Table of contents`, TocComponentConfigComponent);
+    configurationComponentService.registerConfigurationComponents(BaseComponentTypeEnum.TOC, $localize `:@@admin-core.application.component-table-of-contents:Table of contents`, BaseComponentConfigComponent);
     configurationComponentService.registerConfigurationComponents(BaseComponentTypeEnum.LEGEND, $localize `:@@admin-core.application.component-legend:Legend`, BaseComponentConfigComponent);
     configurationComponentService.registerConfigurationComponents(BaseComponentTypeEnum.DRAWING, $localize `:@@admin-core.application.component-drawing:Drawing`, DrawingConfigComponent);
     configurationComponentService.registerConfigurationComponents(BaseComponentTypeEnum.PRINT, $localize `:@@admin-core.application.component-print:Print`, BaseComponentConfigComponent);

projects/admin-core/src/lib/application/components/edit-config/edit-component-config.component.css

@@ -0,0 +1,7 @@
+div {
+  margin-bottom: 8px;
+}
+
+.copy-layers {
+  max-width: 500px;
+}

projects/admin-core/src/lib/application/components/edit-config/edit-component-config.component.html

@@ -6,5 +6,22 @@
   <div [formGroup]="formGroup">
     <mat-checkbox formControlName="closeAfterAddFeature"
                   i18n="@@admin-core.components.edit-close-after-add-feature">Close window after adding new feature</mat-checkbox>
+
+    <div class="copy-layers">
+      <div class="copy-layers-info">
+        <span i18n="@@admin-core.application.copy-layers-info">Select one or more layers that are available for copying features from. If no layers are selected, all layers will be available. Note that incompatible layer geometry types may prevent successful copying.</span>
+      </div>
+      <tm-admin-list-filter [formControl]="copyLayerFilter"
+                            [filterTerm]="copyLayerFilterSignal()"
+                            i18n-label="@@admin-core.application.filter-tree"
+                            label="Filter application layers"></tm-admin-list-filter>
+      <mat-selection-list (selectionChange)="onCopyLayerSelectionChange($event)">
+        @for (layer of filteredLayerList(); track layer.id) {
+          <mat-list-option [value]="layer.id" [selected]="layer.selected">
+            <div class="layer-label">{{ layer.label }}</div>
+          </mat-list-option>
+        }
+      </mat-selection-list>
+    </div>
   </div>
 </tm-admin-base-component-config>

projects/admin-core/src/lib/application/components/edit-config/edit-component-config.component.ts

@@ -1,12 +1,18 @@
-import { ChangeDetectionStrategy, Component, DestroyRef, Input, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, DestroyRef, Input, inject, signal, OnInit, computed, effect } from '@angular/core';
 import {
   BaseComponentTypeEnum, EditConfigModel,
 } from '@tailormap-viewer/api';
 import { FormControl, FormGroup } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ComponentConfigurationService } from '../../services/component-configuration.service';
 import { ConfigurationComponentModel } from '../configuration-component.model';
-import { debounceTime } from 'rxjs';
+import { debounceTime, take } from 'rxjs';
+import { MatSelectionListChange } from '@angular/material/list';
+import { selectExtendedAppLayerNodesForSelectedApplication } from '../../state/application.selectors';
+import { Store } from '@ngrx/store';
+import { FilterHelper, LoadingStateEnum } from '@tailormap-viewer/shared';
+import { selectCatalogLoadStatus } from '../../../catalog/state/catalog.selectors';
+import { loadCatalog } from '../../../catalog/state/catalog.actions';
 
 @Component({
   selector: 'tm-admin-edit-component-config',
@@ -15,10 +21,10 @@ import { debounceTime } from 'rxjs';
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: false,
 })
-export class EditComponentConfigComponent implements ConfigurationComponentModel<EditConfigModel> {
+export class EditComponentConfigComponent implements ConfigurationComponentModel<EditConfigModel>, OnInit {
   private componentConfigService = inject(ComponentConfigurationService);
   private destroyRef = inject(DestroyRef);
-
+  private store$ = inject(Store);
 
   @Input()
   public type: BaseComponentTypeEnum | undefined;
@@ -39,8 +45,36 @@ export class EditComponentConfigComponent implements ConfigurationComponentModel
   public formGroup = new FormGroup({
     closeAfterAddFeature: new FormControl<boolean>(false),
   });
+  public selectedCopyLayers = signal<string[]>([]);
+
+  // Not in formGroup for config properties, used for layer filter control
+  public copyLayerFilter = new FormControl<string>('');
+  public copyLayerFilterSignal = signal<string>('');
+  public allLayers = this.store$.selectSignal(selectExtendedAppLayerNodesForSelectedApplication);
+
+  public filteredLayerList = computed(() => {
+    const allLayers = this.allLayers();
+    const selectedLayerIds = this.selectedCopyLayers();
+    const filterTerm = this.copyLayerFilterSignal();
+    const layersWithSelected = allLayers.map(layer => ({
+      ...layer,
+      selected: selectedLayerIds.includes(layer.id),
+    }));
+    if (filterTerm) {
+      return FilterHelper.filterByTerm(layersWithSelected, filterTerm, l => l.label);
+    }
+    return layersWithSelected;
+  });
 
   constructor() {
+    this.store$.select(selectCatalogLoadStatus)
+      .pipe(take(1))
+      .subscribe(loadStatus => {
+        if (loadStatus === LoadingStateEnum.INITIAL || loadStatus === LoadingStateEnum.FAILED) {
+          this.store$.dispatch(loadCatalog());
+        }
+      });
+
     this.formGroup.valueChanges
       .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(250))
       .subscribe(() => {
@@ -49,14 +83,38 @@ export class EditComponentConfigComponent implements ConfigurationComponentModel
         }
         this.saveConfig();
       });
+
+    effect(() => {
+      this.componentConfigService.updateConfigForKey<EditConfigModel>(this.type, 'copyLayerIds', this.selectedCopyLayers());
+    });
+  }
+
+  public ngOnInit(): void {
+    this.copyLayerFilter.valueChanges
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(filterTerm => {
+        this.copyLayerFilterSignal.set(filterTerm || '');
+      });
   }
 
   public initForm(config: EditConfigModel | undefined) {
     this.formGroup.patchValue({ closeAfterAddFeature: config?.closeAfterAddFeature ?? false }, { emitEvent: false });
+    this.selectedCopyLayers.set(config?.copyLayerIds ?? []);
   }
 
   private saveConfig() {
     this.componentConfigService.updateConfigForKey<EditConfigModel>(this.type, 'closeAfterAddFeature', this.formGroup.value.closeAfterAddFeature);
   }
 
+  public onCopyLayerSelectionChange($event: MatSelectionListChange) {
+    const selectedLayers = [...this.selectedCopyLayers()];
+    $event.options.forEach(option => {
+      if (option.selected) {
+        selectedLayers.push(option.value);
+      } else {
+        selectedLayers.splice(selectedLayers.indexOf(option.value), 1);
+      }
+    });
+    this.selectedCopyLayers.set(selectedLayers);
+  }
 }

projects/admin-core/src/lib/application/models/extended-app-tree-layer-node.model.ts

@@ -0,0 +1,12 @@
+import { ExtendedGeoServiceModel } from '../../catalog/models/extended-geo-service.model';
+import { ExtendedFeatureTypeModel } from '../../catalog/models/extended-feature-type.model';
+import { ExtendedGeoServiceLayerModel } from '../../catalog/models/extended-geo-service-layer.model';
+import { AppLayerSettingsModel, AppTreeLayerNodeModel } from '@tailormap-admin/admin-api';
+
+export interface ExtendedAppTreeLayerNodeModel extends AppTreeLayerNodeModel {
+  label: string;
+  appLayerSettings: AppLayerSettingsModel;
+  geoService: ExtendedGeoServiceModel | undefined;
+  geoServiceLayer: ExtendedGeoServiceLayerModel | undefined;
+  featureType: ExtendedFeatureTypeModel | undefined;
+}

projects/admin-core/src/lib/application/state/application.selectors.ts

@@ -11,6 +11,7 @@ import { ApplicationModelHelper } from '../helpers/application-model.helper';
 import { GeoServiceLayerInApplicationModel } from '../models/geo-service-layer-in-application.model';
 import { ExtendedGeoServiceLayerModel } from '../../catalog/models/extended-geo-service-layer.model';
 import { ExtendedFilterGroupModel } from '../models/extended-filter-group.model';
+import { ExtendedAppTreeLayerNodeModel } from '../models/extended-app-tree-layer-node.model';
 
 const selectApplicationState = createFeatureSelector<ApplicationState>(applicationStateKey);
 
@@ -205,6 +206,36 @@ export const selectStylingConfig = createSelector(selectDraftApplication, applic
 
 export const selectFilterGroups = createSelector(selectDraftApplication, application => application?.settings?.filterGroups || []);
 
+export const selectExtendedAppLayerNodesForSelectedApplication = createSelector(
+  selectAppLayerNodesForSelectedApplication,
+  selectGeoServices,
+  selectGeoServiceLayers,
+  selectSelectedApplicationLayerSettings,
+  selectFeatureTypes,
+  (appLayerTreeNodes, geoServices, geoServiceLayers, layerSettings, featureTypes) => {
+    const geoServiceLayerMap = ApplicationTreeHelper.getLayerMap(geoServiceLayers);
+    return appLayerTreeNodes
+      .filter(node => ApplicationModelHelper.isLayerTreeNode(node))
+      .map((appLayerNode): ExtendedAppTreeLayerNodeModel => {
+        const geoServiceLayer = geoServiceLayerMap.get(ApplicationTreeHelper.getLayerMapKey(appLayerNode.layerName, appLayerNode.serviceId));
+        const geoService = geoServices.find(service => service.id === geoServiceLayer?.serviceId);
+        const appLayerSettings = layerSettings[appLayerNode.id];
+        const featureType = featureTypes.find(ft => {
+          return ft.featureSourceId === geoServiceLayer?.layerSettings?.featureType?.featureSourceId.toString()
+            && ft.name === geoServiceLayer.layerSettings?.featureType?.featureTypeName;
+        });
+        return {
+          ...appLayerNode,
+          label: ApplicationTreeHelper.getTreeModelLabel(appLayerNode, geoServiceLayerMap, layerSettings, 'layer'),
+          appLayerSettings,
+          geoService,
+          geoServiceLayer,
+          featureType,
+        };
+      });
+  },
+);
+
 export const selectFilterableLayersForApplication = createSelector(
   selectAppLayerNodesForSelectedApplication,
   selectGeoServiceLayers,

projects/api/src/lib/models/component-config/edit-config.model.ts

@@ -2,4 +2,5 @@ import { ComponentBaseConfigModel } from '../component-base-config.model';
 
 export interface EditConfigModel extends ComponentBaseConfigModel {
   closeAfterAddFeature: boolean;
+  copyLayerIds?: string[];
 }