Geospatial maps: Angular control flow refactor

Author: kshepherd

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,10 +1,12 @@
-<div class="item-page-field" *ngIf="isNotEmpty(points) || isNotEmpty(bboxes)">
-  <ds-metadata-field-wrapper [label]="label | translate">
-      <ds-geospatial-map [coordinates]="this.points"
-                         [bbox]="this.bboxes"
-                         [cluster]="this.cluster"
-                         [layout]="'item'"
-                         style="width: 100%;">
-      </ds-geospatial-map>
-  </ds-metadata-field-wrapper>
-</div>
+@if (isNotEmpty(points) || isNotEmpty(bboxes)) {
+  <div>
+    <ds-metadata-field-wrapper [label]="label | translate">
+        <ds-geospatial-map [coordinates]="this.points"
+                           [bbox]="this.bboxes"
+                           [cluster]="this.cluster"
+                           [layout]="'item'"
+                           style="width: 100%;">
+        </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>
-  <div #content class="simple-view-element-body">
-    <ng-content></ng-content>
-  </div>
+  @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)">
-  <ds-geospatial-map [mapInfo]="mapInfo"></ds-geospatial-map>
-</ng-container>
-
-
+@if (isPlatformBrowser(platformId)) {
+    <ds-geospatial-map [mapInfo]="mapInfo"></ds-geospatial-map>
+}

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

@@ -39,16 +39,21 @@
       class="btn btn-secondary"
       [attr.data-test]="'detail-view' | dsBrowserOnly">
       <i class="far fa-square"></i>
-    </button> <button *ngIf="isToShow(viewModeEnum.GeospatialMap)"
-       routerLink="."
-       [queryParams]="{view: 'geospatialMap'}"
-       queryParamsHandling="merge"
-       (click)="switchViewTo(viewModeEnum.GeospatialMap)"
-       routerLinkActive="active"
-       [class.active]="currentMode === viewModeEnum.GeospatialMap"
-       class="btn btn-secondary"
-       [attr.data-test]="'grid-view' | dsBrowserOnly">
-       <span class="fas fa-map"></span><span class="sr-only">{{'search.view-switch.show-geospatialMap' | translate}}</span>
     </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"
+         (click)="switchViewTo(viewModeEnum.GeospatialMap)"
+         routerLinkActive="active"
+         [class.active]="currentMode === viewModeEnum.GeospatialMap"
+         class="btn btn-secondary"
+         [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>