Only show edit icon when user is authenticated (#1054)

Author: matthijsln

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

@@ -6,7 +6,7 @@
     [layersWithoutWebMercator]="layersWithoutWebMercator()"
     [tiles3DLayerIds]="tiles3DLayerIds()"
     [filteredLayerIds]="filteredLayerIds()"
-    [editableLayerIds]="config?.showEditLayerIcon && editComponentEnabled ? editableLayerIds() : []"
+    [editableLayerIds]="getCurrentlyEditableLayerIds()"
     (zoomToScale)="zoomToScale($event)"
     (editLayer)="editLayer($event)"
   ></tm-toc-node-layer>

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

@@ -13,7 +13,7 @@ import {
 import { setLayerVisibility, toggleSelectedLayerId } from '../../../map/state/map.actions';
 import { TocNodeLayerComponent } from '../toc-node-layer/toc-node-layer.component';
 import { ToggleAllLayersButtonComponent } from '../toggle-all-layers-button/toggle-all-layers-button.component';
-import { getAppLayerModel, getLayerTreeNode } from '@tailormap-viewer/api';
+import { AuthenticatedUserService, getAppLayerModel, getLayerTreeNode } from '@tailormap-viewer/api';
 import { TocFilterInputComponent } from '../toc-filter-input/toc-filter-input.component';
 import { toggleFilterEnabled } from '../state/toc.actions';
 import { selectFilterEnabled, selectFilterTerm, selectInfoTreeNodeId } from '../state/toc.selectors';
@@ -72,6 +72,7 @@ const setup = async (visible: boolean, selectedLayer = '') => {
       getMapServiceMock().provider,
       { provide: Store, useValue: mockStore },
       getMenubarService(visible, registerComponentFn),
+      { provide: AuthenticatedUserService, useValue: { getUserDetails$: jest.fn(() => of({ isAuthenticated: false })) } },
     ],
   });
   return { registerComponentFn, mockStore, mockDispatch };

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

@@ -1,24 +1,24 @@
-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, 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';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 interface AppLayerTreeModel extends BaseTreeModel {
   metadata: AppLayerModel;
@@ -39,6 +39,7 @@ export class TocComponent implements OnInit, OnDestroy {
   private menubarService = inject(MenubarService);
   private mapService = inject(MapService);
   private ngZone = inject(NgZone);
+  private authenticatedUserService = inject(AuthenticatedUserService);
 
   private destroyed = new Subject();
   public visible$: Observable<boolean> = of(false);
@@ -55,11 +56,24 @@ 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;
+  private config = ComponentConfigHelper.componentConfigSignal<TocConfigModel>(this.store$, BaseComponentTypeEnum.TOC);
 
-  public editComponentEnabled = !BaseComponentConfigHelper.isComponentDisabledByDefault(BaseComponentTypeEnum.EDIT);
+  public editComponentEnabled= ComponentConfigHelper.componentEnabledConfigSignal(this.store$, BaseComponentTypeEnum.EDIT);
+  private authenticatedUserDetails = toSignal(this.authenticatedUserService.getUserDetails$());
+
+  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()
+      : [];
+  });
 
   public ngOnInit(): void {
     this.visible$ = this.menubarService.isComponentVisible$(BaseComponentTypeEnum.TOC);
@@ -100,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() {
@@ -167,4 +163,5 @@ export class TocComponent implements OnInit, OnDestroy {
     this.store$.dispatch(setSelectedEditLayer( { layer }));
     this.store$.dispatch(setEditActive({ active: true }));
   }
+
 }

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

@@ -2,7 +2,8 @@ import { LoadingStateEnum, RegisteredComponent } from '@tailormap-viewer/shared'
 import { BaseComponentConfigHelper, BaseComponentTypeEnum, ComponentBaseConfigModel, ComponentModel } from '@tailormap-viewer/api';
 import { Store } from '@ngrx/store';
 import { selectComponentsConfigForType, selectViewerLoadingState } from '../../state/core.selectors';
-import { filter, switchMap, take } from 'rxjs';
+import { filter, map, switchMap, take } from 'rxjs';
+import { toSignal } from '@angular/core/rxjs-interop';
 
 export class ComponentConfigHelper {
 
@@ -13,22 +14,45 @@ 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);
+          if (config) {
+            return { ...config.config, enabled };
+          }
+          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 => {
-        if (config) {
-          callback(config.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 });
+  }
 }