Geospatial maps: Angular control flow refactor

src/app/browse-by/browse-by-geospatial-data/browse-by-geospatial-data.component.html

@@ -1,11 +1,11 @@
 <div class="container">
   <h1>{{ 'browse.metadata.map' | translate }}</h1>
-  <ng-container *ngIf="isPlatformBrowser(platformId)">
+  @if (isPlatformBrowser(platformId)) {
     <ds-geospatial-map [facetValues]="facetValues$"
                        [currentScope]="this.scope$|async"
                        [layout]="'browse'"
                        style="width: 100%;">
     </ds-geospatial-map>
-  </ng-container>
+  }
 </div>
 

src/app/item-page/simple/field-components/specific-field/geospatial/geospatial-item-page-field.component.html

@@ -1,4 +1,5 @@
-<div class="item-page-field" *ngIf="isNotEmpty(points) || isNotEmpty(bboxes)">
+@if (isNotEmpty(points) || isNotEmpty(bboxes)) {
+  <div>
     <ds-metadata-field-wrapper [label]="label | translate">
         <ds-geospatial-map [coordinates]="this.points"
                            [bbox]="this.bboxes"
@@ -8,3 +9,4 @@
         </ds-geospatial-map>
     </ds-metadata-field-wrapper>
   </div>
+}

src/app/shared/metadata-field-wrapper/metadata-field-wrapper.component.html

@@ -1,6 +1,8 @@
 <div class="simple-view-element" [class.d-none]="hideIfNoTextContent && hasNoContent">
-  <h2 class="simple-view-element-header" *ngIf="label">{{ label }}</h2>
+  @if (label) {
+    <h2 class="simple-view-element-header">{{ label }}</h2>
     <div #content class="simple-view-element-body">
       <ng-content></ng-content>
     </div>
+  }
 </div>

src/app/shared/object-collection/object-collection.component.html

@@ -1,4 +1,9 @@
-@if ((currentMode$ | async) === viewModeEnum.ListElement) {
+@if ((currentMode$ | async) === viewModeEnum.GeospatialMap) {
+  <ds-object-geospatial-map [objects]="objects">
+  </ds-object-geospatial-map>
+}
+
+@if ((currentMode$ | async) === viewModeEnum.ListElement || (currentMode$ | async) === viewModeEnum.GeospatialMap) {
   <ds-object-list [ngClass]="placeholderFontClass"
     [config]="config"
     [sortConfig]="sortConfig"

src/app/shared/object-collection/object-collection.component.ts

@@ -35,6 +35,7 @@ import { PageInfo } from '../../core/shared/page-info.model';
 import { ViewMode } from '../../core/shared/view-mode.model';
 import { isEmpty } from '../empty.util';
 import { ObjectDetailComponent } from '../object-detail/object-detail.component';
+import { ObjectGeospatialMapComponent } from '../object-geospatial-map/object-geospatial-map.component';
 import { ObjectGridComponent } from '../object-grid/object-grid.component';
 import { ThemedObjectListComponent } from '../object-list/themed-object-list.component';
 import { ObjectTableComponent } from '../object-table/object-table.component';
@@ -51,7 +52,7 @@ import { ListableObject } from './shared/listable-object.model';
   styleUrls: ['./object-collection.component.scss'],
   templateUrl: './object-collection.component.html',
   standalone: true,
-  imports: [ThemedObjectListComponent, NgClass, ObjectGridComponent, ObjectDetailComponent, AsyncPipe, ObjectTableComponent],
+  imports: [ThemedObjectListComponent, NgClass, ObjectGridComponent, ObjectDetailComponent, AsyncPipe, ObjectTableComponent, ObjectGeospatialMapComponent],
 })
 export class ObjectCollectionComponent implements OnInit {
   /**

src/app/shared/object-geospatial-map/object-geospatial-map.component.html

@@ -1,5 +1,3 @@
-<ng-container *ngIf="isPlatformBrowser(platformId)">
+@if (isPlatformBrowser(platformId)) {
     <ds-geospatial-map [mapInfo]="mapInfo"></ds-geospatial-map>
-</ng-container>
-
-
+}

src/app/shared/view-mode-switch/view-mode-switch.component.html

@@ -39,7 +39,11 @@
       class="btn btn-secondary"
       [attr.data-test]="'detail-view' | dsBrowserOnly">
       <i class="far fa-square"></i>
-    </button> <button *ngIf="isToShow(viewModeEnum.GeospatialMap)"
+    </button>
+    @if (isToShow(viewModeEnum.GeospatialMap)) {
+      <button
+        [attr.aria-current]="currentMode === viewModeEnum.GeospatialMap"
+        [attr.aria-label]="'search.view-switch.show-geospatialMap' | translate"
          routerLink="."
          [queryParams]="{view: 'geospatialMap'}"
          queryParamsHandling="merge"
@@ -47,8 +51,9 @@
          routerLinkActive="active"
          [class.active]="currentMode === viewModeEnum.GeospatialMap"
          class="btn btn-secondary"
-       [attr.data-test]="'grid-view' | dsBrowserOnly">
+         [attr.data-test]="'geospatial-view' | dsBrowserOnly">
          <span class="fas fa-map"></span><span class="sr-only">{{'search.view-switch.show-geospatialMap' | translate}}</span>
       </button>
     }
+  }
 </div>