Only show edit icon when user is authenticated, refactor using signals

Author: matthijsln

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

@@ -6,7 +6,7 @@
     [layersWithoutWebMercator]="layersWithoutWebMercator()"
     [tiles3DLayerIds]="tiles3DLayerIds()"
     [filteredLayerIds]="filteredLayerIds()"
-    [editableLayerIds]="getEditableLayerIds()"
+    [editableLayerIds]="getCurrentlyEditableLayerIds()"
     (zoomToScale)="zoomToScale($event)"
     (editLayer)="editLayer($event)"
   ></tm-toc-node-layer>

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

@@ -1,23 +1,20 @@
-import { Component, computed, NgZone, OnDestroy, OnInit, Signal, signal, inject } from '@angular/core';
+import { Component, computed, inject, NgZone, OnDestroy, OnInit, signal, Signal } from '@angular/core';
 import { filter, Observable, of, Subject, takeUntil } from 'rxjs';
 import {
-  BaseTreeModel, BrowserHelper, DropZoneHelper, NodePositionChangedEventModel, TreeDragDropService,
-  TreeService,
+  BaseTreeModel, BrowserHelper, DropZoneHelper, NodePositionChangedEventModel, TreeDragDropService, TreeService,
 } from '@tailormap-viewer/shared';
 import { map, tap } from 'rxjs/operators';
 import { MenubarService } from '../../menubar';
 import { TocMenuButtonComponent } from '../toc-menu-button/toc-menu-button.component';
 import { Store } from '@ngrx/store';
-import {
-  AppLayerModel, AuthenticatedUserService, BaseComponentConfigHelper, BaseComponentTypeEnum, EditConfigModel, TocConfigModel,
-} from '@tailormap-viewer/api';
+import { AppLayerModel, AuthenticatedUserService, BaseComponentTypeEnum, TocConfigModel } from '@tailormap-viewer/api';
 import { MapService } from '@tailormap-viewer/map';
 import { selectFilteredLayerTree, selectFilterEnabled } from '../state/toc.selectors';
 import { toggleFilterEnabled } from '../state/toc.actions';
 import {
   select3dTilesLayers, selectEditableLayers, selectIn3dView, selectLayersWithoutWebMercatorIds, selectSelectedNode, selectSelectedNodeId,
 } from '../../../map/state/map.selectors';
-import { moveLayerTreeNode, setLayerVisibility, toggleSelectedLayerId, toggleLevelExpansion } from '../../../map/state/map.actions';
+import { moveLayerTreeNode, setLayerVisibility, toggleLevelExpansion, toggleSelectedLayerId } from '../../../map/state/map.actions';
 import { selectFilteredLayerIds } from '../../../state/filter-state/filter.selectors';
 import { setEditActive, setSelectedEditLayer } from '../../edit/state/edit.actions';
 import { ComponentConfigHelper } from '../../../shared';
@@ -59,17 +56,21 @@ export class TocComponent implements OnInit, OnDestroy {
   public layersWithoutWebMercator: Signal<string[]> = signal([]);
   public tiles3DLayerIds: Signal<string[]> = signal([]);
   public filteredLayerIds: Signal<string[]> = signal([]);
-  public editableLayerIds: Signal<string[]> = signal([]);
-
-  public config: TocConfigModel | undefined;
 
-  public editComponentEnabled = !BaseComponentConfigHelper.isComponentDisabledByDefault(BaseComponentTypeEnum.EDIT);
+  private config = ComponentConfigHelper.componentConfigSignal<TocConfigModel>(this.store$, BaseComponentTypeEnum.TOC);
 
+  public editComponentEnabled= ComponentConfigHelper.componentEnabledConfigSignal(this.store$, BaseComponentTypeEnum.EDIT);
   private authenticatedUserDetails = toSignal(this.authenticatedUserService.getUserDetails$());
-  public getEditableLayerIds = computed(() => {
-    return this.config?.showEditLayerIcon
-        && this.authenticatedUserDetails()?.isAuthenticated
-        && this.editComponentEnabled
+
+  private editableLayerIds = computed(() => {
+    const editableLayers = this.store$.selectSignal(selectEditableLayers);
+    return editableLayers().map(layer => layer.id);
+  });
+
+  public getCurrentlyEditableLayerIds = computed(() => {
+    return this.config()?.showEditLayerIcon
+        && this.authenticatedUserDetails()?.isAuthenticated // remove when HTM-1762 is implemented
+        && this.editComponentEnabled()
       ? this.editableLayerIds()
       : [];
   });
@@ -113,29 +114,11 @@ export class TocComponent implements OnInit, OnDestroy {
 
     this.menubarService.registerComponent({ type: BaseComponentTypeEnum.TOC, component: TocMenuButtonComponent });
 
-    ComponentConfigHelper.useInitialConfigForComponent<TocConfigModel>(
-      this.store$,
-      BaseComponentTypeEnum.TOC,
-      config => {
-        this.config = config;
-      },
-    );
-
-    ComponentConfigHelper.useInitialConfigForComponent<EditConfigModel>(
-      this.store$,
-      BaseComponentTypeEnum.EDIT,
-      config => {
-        this.editComponentEnabled = config.enabled;
-      },
-    );
-
     this.in3D = this.store$.selectSignal(selectIn3dView);
     this.layersWithoutWebMercator = this.store$.selectSignal(selectLayersWithoutWebMercatorIds);
     const tiles3DLayers = this.store$.selectSignal(select3dTilesLayers);
     this.tiles3DLayerIds = computed(() => tiles3DLayers().map(l => l.id));
     this.filteredLayerIds = this.store$.selectSignal(selectFilteredLayerIds);
-    const editableLayers = this.store$.selectSignal(selectEditableLayers);
-    this.editableLayerIds = computed(() => editableLayers().map(layer => layer.id));
   }
 
   public getDropZoneConfig() {

projects/core/src/lib/shared/helpers/component-config.helper.ts

@@ -3,6 +3,7 @@ import { BaseComponentConfigHelper, BaseComponentTypeEnum, ComponentBaseConfigMo
 import { Store } from '@ngrx/store';
 import { selectComponentsConfigForType, selectViewerLoadingState } from '../../state/core.selectors';
 import { filter, map, switchMap, take } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 export class ComponentConfigHelper {
 
@@ -13,15 +14,13 @@ export class ComponentConfigHelper {
     return components.filter(c => BaseComponentConfigHelper.isComponentEnabled(config, c.type));
   }
 
-  public static useInitialConfigForComponent<ConfigType extends ComponentBaseConfigModel = ComponentBaseConfigModel>(
+  public static componentConfig$<ConfigType extends ComponentBaseConfigModel = ComponentBaseConfigModel>(
     store$: Store,
     type: string | BaseComponentTypeEnum,
-    callback: (config: ConfigType) => void,
   ) {
     return store$.select(selectViewerLoadingState)
       .pipe(
         filter(loadState => loadState === LoadingStateEnum.LOADED),
-        take(1),
         switchMap(() => store$.select(selectComponentsConfigForType<ConfigType>(type)).pipe(take(1))),
         map((config): ConfigType => {
           const enabled = BaseComponentConfigHelper.isComponentEnabled(config ? [config] : [], type);
@@ -30,10 +29,30 @@ export class ComponentConfigHelper {
           }
           return { enabled } as ConfigType;
         }),
-      )
+      );
+  }
+
+  public static useInitialConfigForComponent<ConfigType extends ComponentBaseConfigModel = ComponentBaseConfigModel>(
+    store$: Store,
+    type: string | BaseComponentTypeEnum,
+    callback: (config: ConfigType) => void,
+  ) {
+    ComponentConfigHelper.componentConfig$<ConfigType>(store$, type)
+      .pipe(take(1))
       .subscribe(config => {
         callback(config);
       });
   }
 
+  public static componentConfigSignal<ConfigType extends ComponentBaseConfigModel = ComponentBaseConfigModel>(
+    store$: Store,
+    type: string | BaseComponentTypeEnum) {
+    return toSignal(ComponentConfigHelper.componentConfig$<ConfigType>(store$, type));
+  }
+
+  public static componentEnabledConfigSignal(
+    store$: Store,
+    type: string | BaseComponentTypeEnum) {
+    return toSignal(ComponentConfigHelper.componentConfig$(store$, type).pipe(map(config => config.enabled)), { initialValue: false });
+  }
 }