Show the selected copy layer in different style, deactivate copy layer when clicking selected copy layer again

Author: matthijsln

projects/core/src/lib/components/edit/edit/edit.component.css

@@ -37,6 +37,10 @@
   padding-top: 6px;
 }
 
+.mat-mdc-menu-item.selected {
+  color: var(--primary-color);
+}
+
 @media screen and (max-width: 730px) {
   .edit-container--is-active {
     padding: 0;

projects/core/src/lib/components/edit/edit/edit.component.html

@@ -75,8 +75,13 @@
             <mat-icon svgIcon="split"></mat-icon>
           </button>
           <mat-menu #layerToCreateNewFeaturesFromMenu="matMenu" xPosition="after" yPosition="below">
+            @let selectedCopyLayerId = selectedCopyLayer$ | async;
             @for (layer of layersToCreateNewFeaturesFrom(); track layer) {
-              <button mat-menu-item (click)="createFeatureFromLayer(layer.id)">{{layer.title || layer.layerName}}</button>
+              @let selected = layer.id === selectedCopyLayerId;
+              <button mat-menu-item [class.selected]="selected" (click)="createFeatureFromLayer(layer.id)">
+                <mat-icon [svgIcon]="selected ? 'check' : ''" color="primary"/>
+                <span>{{layer.title || layer.layerName}}</span>
+              </button>
             }
           </mat-menu>
         }

projects/core/src/lib/components/edit/edit/edit.component.ts

@@ -1,13 +1,14 @@
 import { ChangeDetectionStrategy, Component, DestroyRef, OnInit, inject, signal } from '@angular/core';
 import {
   selectCopiedFeatures,
-  selectEditActive, selectEditCopyOtherLayerFeaturesActive, selectEditCreateNewFeatureActive,
+  selectEditActive, selectEditCopyOtherLayerFeaturesActive, selectEditCreateNewFeatureActive, selectSelectedCopyLayer,
   selectSelectedEditLayer,
 } from '../state/edit.selectors';
 import { Store } from '@ngrx/store';
 import { combineLatest, map, of, take } from 'rxjs';
 import {
-  setEditActive, setEditCopyOtherLayerFeaturesActive, setEditCreateNewFeatureActive, setSelectedEditLayer,
+  setEditActive, setEditCopyOtherLayerFeaturesActive, setEditCopyOtherLayerFeaturesDisabled, setEditCreateNewFeatureActive,
+  setSelectedEditLayer,
 } from '../state/edit.actions';
 import { FormControl } from '@angular/forms';
 import { selectEditableLayers, selectOrderedVisibleLayersWithServices } from '../../../map/state/map.selectors';
@@ -38,6 +39,7 @@ export class EditComponent implements OnInit {
   public createNewFeatureActive$ = this.store$.select(selectEditCreateNewFeatureActive);
   public copyActive$ = this.store$.select(selectEditCopyOtherLayerFeaturesActive);
   public copiedFeaturesCount$ = this.store$.select(selectCopiedFeatures).pipe(map(features => features.length));
+  public selectedCopyLayer$ = this.store$.select(selectSelectedCopyLayer);
   public editableLayers$ = this.store$.select(selectEditableLayers);
   public layer = new FormControl();
   public editGeometryType: GeometryType | null = null;
@@ -144,25 +146,22 @@ export class EditComponent implements OnInit {
     if (!this.layer.value) {
       return;
     }
-    // get layer attribute details for edit form
-    this.applicationLayerService.getLayerDetails$(this.layer.value)
-      .pipe(take(1))
-      .subscribe(layerDetails => {
-        // show edit dialog
-        this.store$.dispatch(setEditCreateNewFeatureActive({
-          active: true,
-          geometryType,
-          columnMetadata: layerDetails.details.attributes.map(attribute => {
-              return {
-                layerId: layerDetails.details.id,
-                name: attribute.name,
-                type: attribute.type as unknown as AttributeType,
-                alias: attribute.editAlias,
-              };
-            },
-          ),
-        }));
-      });
+
+    this.applicationLayerService.getLayerDetails$(this.layer.value).pipe(take(1)).subscribe(layerDetails => {
+      this.store$.dispatch(setEditCreateNewFeatureActive({
+        active: true,
+        geometryType,
+        columnMetadata: layerDetails.details.attributes.map(attribute => {
+            return {
+              layerId: layerDetails.details.id,
+              name: attribute.name,
+              type: attribute.type as unknown as AttributeType,
+              alias: attribute.editAlias,
+            };
+          },
+        ),
+      }));
+    });
   }
 
   public createFeatureIfSingleGeometryType() {
@@ -175,13 +174,15 @@ export class EditComponent implements OnInit {
   }
 
   public createFeatureFromLayer(id: string) {
-    // get layer attribute details for edit form
-    this.applicationLayerService.getLayerDetails$(this.layer.value)
-      .pipe(take(1))
-      .subscribe(layerDetails => {
-        // show edit dialog
+
+    this.selectedCopyLayer$.pipe(take(1)).subscribe(selectedCopyLayer => {
+      if (id == selectedCopyLayer) {
+        this.store$.dispatch(setEditCopyOtherLayerFeaturesDisabled());
+        return;
+      }
+
+      this.applicationLayerService.getLayerDetails$(this.layer.value).pipe(take(1)).subscribe(layerDetails => {
         this.store$.dispatch(setEditCopyOtherLayerFeaturesActive({
-          active: true,
           layerId: id,
           columnMetadata: layerDetails.details.attributes.map(attribute => {
               return {
@@ -194,5 +195,6 @@ export class EditComponent implements OnInit {
           ),
         }));
       });
+    });
   }
 }

projects/core/src/lib/components/edit/state/edit.actions.ts

@@ -19,9 +19,12 @@ export const setEditCreateNewFeatureActive = createAction(
 
 export const setEditCopyOtherLayerFeaturesActive = createAction(
   `${editActionsPrefix} Set Copy Other Layer Features Active`,
-  props<{ active: boolean; layerId: string; columnMetadata: FeatureInfoColumnMetadataModel[] }>(),
+  props<{ layerId: string; columnMetadata: FeatureInfoColumnMetadataModel[] }>(),
 );
 
+export const setEditCopyOtherLayerFeaturesDisabled = createAction(
+  `${editActionsPrefix} Set Copy Other Layer Features Disabled`);
+
 export const setSelectedEditLayer = createAction(
   `${editActionsPrefix} Set Selected Layer`,
   props<{ layer: string | null }>(),

projects/core/src/lib/components/edit/state/edit.reducer.ts

@@ -101,19 +101,30 @@ const onSetCopyOtherLayerFeaturesActive = (
     payload: ReturnType<typeof EditActions.setEditCopyOtherLayerFeaturesActive>,
 ): EditState => ({
   ...state,
-  isCopyOtherLayerFeaturesActive: payload.active,
+  isCopyOtherLayerFeaturesActive: true,
   isCreateNewFeatureActive: false,
+  dialogVisible: true,
+  dialogCollapsed: false,
   selectedCopyLayer: payload.layerId,
-  dialogVisible: payload.active,
+  columnMetadata: payload.columnMetadata,
+  // Do not reset copiedFeatures, so features from different layers can be copied
   selectedFeature: 'new',
   features: [{
     layerId: payload.columnMetadata[0].layerId,
     __fid: 'new',
     attributes: {},
   }],
-  columnMetadata: payload.columnMetadata,
   loadStatus: LoadingStateEnum.INITIAL,
-  dialogCollapsed: false,
+});
+
+const onSetCopyOtherLayerFeaturesDisabled = (
+  state: EditState,
+): EditState => ({
+  ...state,
+  isCreateNewFeatureActive: false,
+  dialogVisible: false,
+  dialogCollapsed: true,
+  ...initialEditCopyState,
 });
 
 const onSetCreateNewFeatureActive = (
@@ -248,6 +259,7 @@ const editReducerImpl = createReducer<EditState>(
   initialEditState,
   on(EditActions.setEditActive, onSetIsActive),
   on(EditActions.setEditCopyOtherLayerFeaturesActive, onSetCopyOtherLayerFeaturesActive),
+  on(EditActions.setEditCopyOtherLayerFeaturesDisabled, onSetCopyOtherLayerFeaturesDisabled),
   on(EditActions.setEditCreateNewFeatureActive, onSetCreateNewFeatureActive),
   on(EditActions.setSelectedEditLayer, onSetSelectedLayer),
   on(EditActions.loadEditFeatures, onLoadFeatureInfo),