fix(location): correctly load locations for pre-matching map

Author: sleidig

src/app/features/location/map/map.component.spec.ts

@@ -15,6 +15,7 @@ import { MatDialog } from "@angular/material/dialog";
 import { MapPopupConfig } from "../map-popup/map-popup.component";
 import { FontAwesomeTestingModule } from "@fortawesome/angular-fontawesome/testing";
 import { EMPTY, of, Subject } from "rxjs";
+import { GeoLocation } from "../location.datatype";
 
 describe("MapComponent", () => {
   let component: MapComponent;
@@ -23,6 +24,11 @@ describe("MapComponent", () => {
   const config: MapConfig = { start: [52, 13] };
   let map: L.Map;
 
+  const TEST_LOCATION: GeoLocation = {
+    locationString: "test address",
+    geoLookup: { lat: 1, lon: 1, display_name: "test address" },
+  };
+
   beforeEach(async () => {
     mockDialog = jasmine.createSpyObj(["open"]);
     mockDialog.open.and.returnValue({ afterClosed: () => EMPTY } as any);
@@ -78,7 +84,7 @@ describe("MapComponent", () => {
   it("should create markers for entities and emit entity when marker is clicked", (done) => {
     Child.schema.set("address", { dataType: "location" });
     const child = new Child();
-    child["address"] = { lat: 1, lon: 1 };
+    child["address"] = TEST_LOCATION;
     component.entities = [child];
 
     const marker = getEntityMarkers()[0];
@@ -111,8 +117,10 @@ describe("MapComponent", () => {
     Child.schema.set("address", { dataType: "location" });
     Child.schema.set("otherAddress", { dataType: "location" });
     const child = new Child();
-    child["address"] = { lat: 1, lon: 1 };
-    child["otherAddress"] = { lat: 1, lon: 2 };
+    child["address"] = TEST_LOCATION;
+    child["otherAddress"] = {
+      geoLookup: { lon: 99, lat: 99, display_name: "other address" },
+    } as GeoLocation;
 
     component.entities = [child];
 

src/app/features/location/map/map.component.ts

@@ -24,6 +24,7 @@ import {
   LocationProperties,
   MapPropertiesPopupComponent,
 } from "./map-properties-popup/map-properties-popup.component";
+import { GeoResult } from "../geo.service";
 
 @Component({
   selector: "app-map",
@@ -158,9 +159,10 @@ export class MapComponent implements AfterViewInit {
       .filter((entity) => !!entity)
       .forEach((entity) => {
         this.getMapProperties(entity)
-          .filter((prop) => !!entity[prop])
-          .forEach((prop) => {
-            const marker = L.marker([entity[prop].lat, entity[prop].lon]);
+          .map((prop) => entity[prop]?.geoLookup)
+          .filter((loc: GeoResult) => !!loc)
+          .forEach((loc: GeoResult) => {
+            const marker = L.marker([loc.lat, loc.lon]);
             marker.bindTooltip(entity.toString());
             marker.on("click", () => this.entityClick.emit(entity));
             marker["entity"] = entity;

src/app/features/location/view-distance/view-distance.component.spec.ts

@@ -3,6 +3,7 @@ import { ViewDistanceComponent } from "./view-distance.component";
 import { Child } from "../../../child-dev-project/children/model/child";
 import { Subject } from "rxjs";
 import { Coordinates } from "../coordinates";
+import { GeoLocation } from "../location.datatype";
 
 describe("ViewDistanceComponent", () => {
   let component: ViewDistanceComponent;
@@ -17,7 +18,7 @@ describe("ViewDistanceComponent", () => {
     fixture = TestBed.createComponent(ViewDistanceComponent);
 
     entity = new Child();
-    entity["address"] = { lat: 52, lon: 13 };
+    entity["address"] = { geoLookup: { lat: 52, lon: 13 } } as GeoLocation;
     compareCoordinates = new Subject();
     component = fixture.componentInstance;
     component.id = "distance";
@@ -58,7 +59,7 @@ describe("ViewDistanceComponent", () => {
   });
 
   it("should display the shortest distance", () => {
-    entity["otherAddress"] = { lat: 52, lon: 14 };
+    entity["otherAddress"] = { geoLookup: { lat: 52, lon: 14 } } as GeoLocation;
     const c1 = { lat: 53, lon: 14 };
     const c2 = { lat: 52.0001, lon: 14 };
     compareCoordinates.next([c1, c2]);

src/app/features/location/view-distance/view-distance.component.ts

@@ -7,6 +7,7 @@ import { Observable } from "rxjs";
 import { DynamicComponent } from "../../../core/config/dynamic-components/dynamic-component.decorator";
 import { UntilDestroy, untilDestroyed } from "@ngneat/until-destroy";
 import { ReadonlyFunctionComponent } from "../../../core/common-components/display-readonly-function/readonly-function.component";
+import { GeoLocation } from "../location.datatype";
 
 /**
  * Config for displaying the distance between two entities
@@ -73,8 +74,10 @@ export class ViewDistanceComponent
     const results: number[] = [];
     for (const prop of this.config.coordinatesProperties) {
       for (const coord of compareCoordinates) {
-        if (e[prop] && coord) {
-          results.push(getKmDistance(e[prop], coord));
+        if (e[prop]?.geoLookup && coord) {
+          results.push(
+            getKmDistance((e[prop] as GeoLocation).geoLookup, coord),
+          );
         }
       }
     }

src/app/features/matching-entities/matching-entities/matching-entities.component.html

@@ -76,7 +76,7 @@
       [sideDetails?.[0].selected, sideDetails?.[1].selected] | flattenArray
     "
     (entityClick)="entityInMapClicked($event)"
-    [(displayedProperties)]="displayedProperties"
+    [(displayedProperties)]="displayedLocationProperties"
     (displayedPropertiesChange)="updateMarkersAndDistances()"
   ></app-map>
 </div>

src/app/features/matching-entities/matching-entities/matching-entities.component.spec.ts

@@ -23,6 +23,7 @@ import { MockedTestingModule } from "../../../utils/mocked-testing.module";
 import { School } from "../../../child-dev-project/schools/model/school";
 import { DynamicComponentConfig } from "../../../core/config/dynamic-components/dynamic-component-config.interface";
 import { Note } from "../../../child-dev-project/notes/model/note";
+import { GeoLocation } from "../../location/location.datatype";
 
 describe("MatchingEntitiesComponent", () => {
   let component: MatchingEntitiesComponent;
@@ -43,6 +44,13 @@ describe("MatchingEntitiesComponent", () => {
     leftSide: { entityType: "School" },
   };
 
+  const LOCATION_1: GeoLocation = {
+    geoLookup: { lat: 52, lon: 13, display_name: "loc 1" },
+  };
+  const LOCATION_2: GeoLocation = {
+    geoLookup: { lat: 52, lon: 14, display_name: "loc 1" },
+  };
+
   beforeEach(waitForAsync(() => {
     routeData = new Subject();
     mockConfigService = jasmine.createSpyObj(["getConfig"], {
@@ -288,11 +296,13 @@ describe("MatchingEntitiesComponent", () => {
     );
 
     const compare = new Child();
-    compare["address"] = { lat: 52, lon: 13 };
+    compare["address"] = LOCATION_1;
 
     component.sideDetails[0].selectMatch(compare);
 
-    expect(newCoordinates).toEqual([compare["address"]]);
+    expect(newCoordinates).toEqual([
+      (compare["address"] as GeoLocation)?.geoLookup,
+    ]);
 
     Child.schema.delete("address");
   }));
@@ -334,12 +344,12 @@ describe("MatchingEntitiesComponent", () => {
     Child.schema.set("otherAddress", { dataType: "location" });
     School.schema.set("address", { dataType: "location" });
     const leftEntity = new Child();
-    leftEntity["address"] = { lat: 52, lon: 14 };
-    leftEntity["otherAddress"] = { lat: 53, lon: 14 };
+    leftEntity["address"] = LOCATION_1;
+    leftEntity["otherAddress"] = LOCATION_2;
     const rightEntity1 = new School();
-    rightEntity1["address"] = { lat: 52, lon: 13 };
+    rightEntity1["address"] = LOCATION_1;
     const rightEntity2 = new School();
-    rightEntity2["address"] = { lat: 53, lon: 13 };
+    rightEntity2["address"] = LOCATION_2;
     spyOn(TestBed.inject(EntityMapperService), "loadType").and.resolveTo([
       rightEntity1,
       rightEntity2,
@@ -368,36 +378,47 @@ describe("MatchingEntitiesComponent", () => {
 
     expect(lastLeftValue).toEqual([]);
     expect(lastRightValue).toEqual([
-      leftEntity["address"],
-      leftEntity["otherAddress"],
+      (leftEntity["address"] as GeoLocation)?.geoLookup,
+      (leftEntity["otherAddress"] as GeoLocation)?.geoLookup,
     ]);
 
     // values should be emitted again
     lastLeftValue = undefined;
     lastRightValue = undefined;
     // select only one property
-    component.displayedProperties["Child"] = ["address"];
+    component.displayedLocationProperties["Child"] = ["address"];
     component.updateMarkersAndDistances();
 
     expect(lastLeftValue).toEqual([]);
-    expect(lastRightValue).toEqual([leftEntity["address"]]);
+    expect(lastRightValue).toEqual([
+      (leftEntity["address"] as GeoLocation)?.geoLookup,
+    ]);
 
     // select an entity for right
     rightSide.selectMatch(rightEntity1);
 
-    expect(lastLeftValue).toEqual([rightEntity1["address"]]);
-    expect(lastRightValue).toEqual([leftEntity["address"]]);
+    expect(lastLeftValue).toEqual([
+      (rightEntity1["address"] as GeoLocation)?.geoLookup,
+    ]);
+    expect(lastRightValue).toEqual([
+      (leftEntity["address"] as GeoLocation)?.geoLookup,
+    ]);
 
     lastLeftValue = undefined;
     lastRightValue = undefined;
     //select both properties
-    component.displayedProperties["Child"] = ["address", "otherAddress"];
+    component.displayedLocationProperties["Child"] = [
+      "address",
+      "otherAddress",
+    ];
     component.updateMarkersAndDistances();
 
-    expect(lastLeftValue).toEqual([rightEntity1["address"]]);
+    expect(lastLeftValue).toEqual([
+      (rightEntity1["address"] as GeoLocation)?.geoLookup,
+    ]);
     expect(lastRightValue).toEqual([
-      leftEntity["address"],
-      leftEntity["otherAddress"],
+      (leftEntity["address"] as GeoLocation)?.geoLookup,
+      (leftEntity["otherAddress"] as GeoLocation)?.geoLookup,
     ]);
 
     Child.schema.delete("otherAddress");

src/app/features/matching-entities/matching-entities/matching-entities.component.ts

@@ -41,6 +41,7 @@ import {
 import { RouteTarget } from "../../../route-target";
 import { EntitiesTableComponent } from "../../../core/common-components/entities-table/entities-table.component";
 import { DataFilter } from "../../../core/filter/filters/filters";
+import { GeoLocation } from "../../location/location.datatype";
 
 export interface MatchingSide extends MatchingSideConfig {
   /** pass along filters from app-filter to subrecord component */
@@ -109,7 +110,7 @@ export class MatchingEntitiesComponent implements OnInit {
 
   mapVisible = false;
   filteredMapEntities: Entity[] = [];
-  displayedProperties: LocationProperties = {};
+  displayedLocationProperties: LocationProperties = {};
 
   constructor(
     private route: ActivatedRoute,
@@ -367,7 +368,7 @@ export class MatchingEntitiesComponent implements OnInit {
       viewComponent: "DisplayDistance",
       additional: {
         coordinatesProperties:
-          this.displayedProperties[side.entityType.ENTITY_TYPE],
+          this.displayedLocationProperties[side.entityType.ENTITY_TYPE],
         compareCoordinates: new BehaviorSubject<Coordinates[]>([]),
       },
     };
@@ -376,7 +377,7 @@ export class MatchingEntitiesComponent implements OnInit {
   updateMarkersAndDistances() {
     this.sideDetails.forEach((side) => {
       const sideProperties =
-        this.displayedProperties[side.entityType.ENTITY_TYPE];
+        this.displayedLocationProperties[side.entityType.ENTITY_TYPE];
       if (side.distanceColumn) {
         side.distanceColumn.coordinatesProperties = sideProperties;
         const lastValue = side.distanceColumn.compareCoordinates.value;
@@ -389,13 +390,13 @@ export class MatchingEntitiesComponent implements OnInit {
   }
 
   private updateDistanceColumn(side: MatchingSide) {
-    const properties =
-      this.displayedProperties[side.highlightedSelected?.getType()];
+    const locationProperties =
+      this.displayedLocationProperties[side.highlightedSelected?.getType()];
     const otherIndex = this.sideDetails[0] === side ? 1 : 0;
     const distanceColumn = this.sideDetails[otherIndex].distanceColumn;
-    if (properties && distanceColumn) {
-      const coordinates = properties.map(
-        (prop) => side.highlightedSelected[prop],
+    if (locationProperties && distanceColumn) {
+      const coordinates: Coordinates[] = locationProperties.map(
+        (prop) => (side.highlightedSelected[prop] as GeoLocation)?.geoLookup,
       );
       distanceColumn.compareCoordinates.next(coordinates);
     }