Merged in task/ux-plus-2023_02_x/UXP-206 (pull request #26)

Task/ux plus 2023 02 x/UXP-206

Approved-by: Francesco Molinaro

Author: Andrea Barbasso

src/app/core/services/location.service.spec.ts

@@ -32,7 +32,7 @@ describe('LocationService', () => {
       expect(service.isDecimalCoordinateString('45,45,45')).toBeFalse();       // invalid pattern, wrong array size
       expect(service.isDecimalCoordinateString('.0,.0')).toBeFalse();          // valid numbers, but invalid pattern
       expect(service.isDecimalCoordinateString('45.000,45.000')).toBeTrue();
-      expect(service.isDecimalCoordinateString('45.000, 45.000')).toBeFalse(); // it contains a space
+      expect(service.isDecimalCoordinateString('45.000, 45.000')).toBeTrue();  // it contains a space but it can be trimmed
       expect(service.isDecimalCoordinateString('200,200')).toBeTrue();         // invalid numbers, but valid pattern
     });
 

src/app/core/services/location.service.ts

@@ -25,7 +25,7 @@ export enum LocationErrorCodes {
   API_ERROR = 'api-error',
 }
 
-const IS_DD_COORDINATE_PAIR_REGEXP = /^\d+\.?\d*,\d+\.?\d*$/;
+const IS_DD_COORDINATE_PAIR_REGEXP = /^\d+\.?\d*,\s?\d+\.?\d*$/;
 const IS_SG_COORDINATE_PAIR_REGEXP = /^[NS] *\d+° *\d+['′] *\d+(?:"|″|\.\d+),? *[EW] *\d+° *\d+['′] *\d+(?:"|″|\.\d+)|\d+° *\d+['′] *\d+(?:"|″|\.\d+) *[NS],? *\d+° *\d+['′] *\d+(?:"|″|\.\d+) *[EW]$/;
 
 const NOMINATIM_RESPONSE_FORMAT = 'jsonv2';
@@ -176,8 +176,8 @@ export class LocationService {
   public isValidCoordinateString(coordinateString: string): boolean {
     if (this.isDecimalCoordinateString(coordinateString)) {
       const coordinateArray = coordinateString.split(',');
-      const latitude = parseFloat(coordinateArray[0]);
-      const longitude = parseFloat(coordinateArray[1]);
+      const latitude = parseFloat(coordinateArray[0].trim());
+      const longitude = parseFloat(coordinateArray[1].trim());
       return !isNaN(latitude) && !isNaN(longitude) && this.isValidDecimalCoordinatePair(latitude, longitude);
     } else {
       return false;

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metadata/rendering-types/metadataGroup/googlemaps-group/googlemaps-group.component.spec.ts

@@ -7,10 +7,10 @@ import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
 import { TranslateLoaderMock } from '../../../../../../../../shared/mocks/translate-loader.mock';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { LoadMoreService } from '../../../../../../../services/load-more.service';
-import { GooglemapsComponent } from '../../../../../../../../shared/googlemaps/googlemaps.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ConfigurationDataService } from '../../../../../../../../core/data/configuration-data.service';
 import { createSuccessfulRemoteDataObject$ } from '../../../../../../../../shared/remote-data.utils';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('GooglemapsGroupComponent', () => {
   let component: GooglemapsGroupComponent;
@@ -80,7 +80,9 @@ describe('GooglemapsGroupComponent', () => {
           provide: TranslateLoader,
           useClass: TranslateLoaderMock
         }
-      }), BrowserAnimationsModule],
+      }),
+        BrowserAnimationsModule,
+        HttpClientTestingModule],
       providers: [
         { provide: 'fieldProvider', useValue: mockField },
         { provide: 'itemProvider', useValue: testItem },
@@ -91,8 +93,8 @@ describe('GooglemapsGroupComponent', () => {
       ],
       schemas: [NO_ERRORS_SCHEMA],
       declarations: [
-        GooglemapsGroupComponent,
-        GooglemapsComponent]
+        GooglemapsGroupComponent
+      ]
     })
     .compileComponents();
 

src/app/shared/googlemaps/googlemaps.component.spec.ts

@@ -4,11 +4,12 @@ import { By } from '@angular/platform-browser';
 import { ConfigurationDataService } from '../../core/data/configuration-data.service';
 import { createSuccessfulRemoteDataObject$ } from '../remote-data.utils';
 import { GooglemapsComponent } from './googlemaps.component';
+import { LocationService } from '../../core/services/location.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 
 describe('GooglemapsComponent', () => {
 
   let component: GooglemapsComponent;
-
   let fixture: ComponentFixture<GooglemapsComponent>;
 
   const coordinates = '@41.3455,456.67';
@@ -19,17 +20,29 @@ describe('GooglemapsComponent', () => {
 
   const confResponse$ = createSuccessfulRemoteDataObject$({ values: ['valid-googlemap-key'] });
 
+  const locationService = jasmine.createSpyObj('locationService', {
+    findPlaceCoordinates: jasmine.createSpy('findPlaceCoordinates'),
+    findPlaceAndDecimalCoordinates: jasmine.createSpy('findPlaceAndDecimalCoordinates'),
+    searchByCoordinates: jasmine.createSpy('searchByCoordinates'),
+    isValidDecimalCoordinatePair: jasmine.createSpy('isValidDecimalCoordinatePair'),
+    isDecimalCoordinateString: jasmine.createSpy('isDecimalCoordinateString'),
+    isSexagesimalCoordinateString: jasmine.createSpy('isSexagesimalCoordinateString'),
+    isValidCoordinateString: jasmine.createSpy('isValidCoordinateString'),
+    parseCoordinates: jasmine.createSpy('parseCoordinates'),
+  });
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
+      imports: [ HttpClientTestingModule ],
       declarations: [ GooglemapsComponent ],
       providers: [
-      { provide: ConfigurationDataService, useValue: configurationDataService },
+        { provide: ConfigurationDataService, useValue: configurationDataService },
+        { provide: LocationService, useValue: locationService }
       ]
     })
-    .compileComponents();
+      .compileComponents();
   });
 
-
   beforeEach(() => {
     fixture = TestBed.createComponent(GooglemapsComponent);
     component = fixture.componentInstance;

src/app/shared/googlemaps/googlemaps.component.ts

@@ -6,6 +6,7 @@ import { getFirstCompletedRemoteData } from '../../core/shared/operators';
 import { isNotEmpty } from '../empty.util';
 import { RemoteData } from '../../core/data/remote-data';
 import { ConfigurationProperty } from '../../core/shared/configuration-property.model';
+import { LocationService } from '../../core/services/location.service';
 
 @Component({
   selector: 'ds-googlemaps',
@@ -48,6 +49,7 @@ export class GooglemapsComponent implements OnInit {
     private renderer: Renderer2,
     private configService: ConfigurationDataService,
     private cdr: ChangeDetectorRef,
+    private locationService: LocationService,
   ) {
   }
 
@@ -85,14 +87,26 @@ export class GooglemapsComponent implements OnInit {
    * Set latitude and longitude when metadata has an address
    */
   setLatAndLongFromAddress() {
-    return new Promise((reslove, reject) => {
+    return new Promise((resolve, reject) => {
       new google.maps.Geocoder().geocode({ 'address': this.coordinates }, (results, status) => {
         if (status === google.maps.GeocoderStatus.OK) {
           this.latitude = results[0].geometry.location.lat().toString();
           this.longitude = results[0].geometry.location.lng().toString();
-          reslove(1);
+          resolve(1);
         } else {
-          reject(1);
+          console.error('Error from Geocoder API: ', results, status);
+          try {
+            const coordinates = this.locationService.parseCoordinates(this.coordinates);
+            if (coordinates) {
+              this.latitude = coordinates.latitude.toString();
+              this.longitude = coordinates.longitude.toString();
+              resolve(1);
+            } else {
+              reject(1);
+            }
+          } catch (e) {
+            reject(1);
+          }
         }
       });
     });

src/app/shared/open-street-map/open-street-map.component.html

@@ -7,6 +7,6 @@
      [leafletLayers]="leafletLayers">
 </div>
 <div *ngIf="showDisplayName" class="my-1 text-muted">{{ displayName$ | async }}</div>
-<div *ngIf="(invalidLocationErrorCode | async) as errorCode"
+<div *ngIf="((coordinates$ | async) === null) && (invalidLocationErrorCode | async) as errorCode"
      class="text-danger">{{ 'location.error.' + errorCode | translate }}
 </div>

src/app/shared/open-street-map/open-street-map.component.ts

@@ -1,15 +1,10 @@
 import { Component, ElementRef, Input, OnInit } from '@angular/core';
-import {
-  LocationDDCoordinates,
-  LocationErrorCodes,
-  LocationPlace,
-  LocationService
-} from '../../core/services/location.service';
-import { filter, map, tap } from 'rxjs/operators';
+import { LocationService, LocationDDCoordinates, LocationPlace, LocationErrorCodes } from '../../core/services/location.service';
 import { BehaviorSubject, Observable } from 'rxjs';
+import { filter, map, tap } from 'rxjs/operators';
 import { TranslateService } from '@ngx-translate/core';
 import { isNotEmpty } from '../empty.util';
-import { icon, latLng, LatLng, Layer, MapOptions, marker, tileLayer } from 'leaflet';
+import { icon, LatLng, latLng, Layer, MapOptions, marker, tileLayer } from 'leaflet';
 
 @Component({
   selector: 'ds-open-street-map',
@@ -66,7 +61,7 @@ export class OpenStreetMapComponent implements OnInit {
   /**
    * Contains error codes from the location service
    */
-  invalidLocationErrorCode: BehaviorSubject<string> = new BehaviorSubject(undefined);
+  invalidLocationErrorCode = new BehaviorSubject<string>(undefined);
 
   /**
    * The place to be shown in the map
@@ -76,7 +71,7 @@ export class OpenStreetMapComponent implements OnInit {
   /**
    * The styles that are being applied to the map container
    */
-  mapStyle: {[key: string]: string} = {};
+  mapStyle: { [key: string]: string } = {};
 
   /**
    * The center of the map
@@ -96,11 +91,7 @@ export class OpenStreetMapComponent implements OnInit {
   /**
    * The options for the map
    */
-  leafletOptions: MapOptions = {
-    // attribution is still needed
-    // attributionControl: false,
-    zoomControl: this.showControlsZoom
-  };
+  leafletOptions: MapOptions = { zoomControl: this.showControlsZoom };
 
   constructor(
     protected translateService: TranslateService,
@@ -109,104 +100,75 @@ export class OpenStreetMapComponent implements OnInit {
   }
 
   ngOnInit(): void {
-
     this.mapStyle = {
       width: this.width || '100%',
       height: this.height || `${(+this.width || this.elementRef.nativeElement.parentElement.offsetWidth) / 2}px`
     };
 
     this.coordinates$ = this.place.asObservable().pipe(
-      filter((place) => isNotEmpty(place)),
-      map((place) => place.coordinates),
+      filter(isNotEmpty),
+      map(place => place.coordinates),
       tap(coordinates => this.setCenterAndPointer(coordinates))
     );
 
     this.displayName$ = this.place.asObservable().pipe(
-      filter((place) => isNotEmpty(place)),
-      map((place) => place.displayName),
+      filter(isNotEmpty),
+      map(place => place.displayName)
     );
 
-    const position = this.coordinates; // this may contain a pair or coordinates, a POI, or an address
+    const position = this.coordinates;
 
     if (this.locationService.isDecimalCoordinateString(position)) {
-
-      // Validate the coordinates, then retrieve the location name
-
-      if (this.locationService.isValidCoordinateString(position)) {
-        const coordinates = this.locationService.parseCoordinates(position);
-        this.locationService.searchByCoordinates(coordinates).subscribe({
-          next: (displayName) => {
-            const place: LocationPlace = {
-              coordinates: coordinates,
-              displayName: displayName, // Show the name retrieved from Nominatim
-            };
-            this.place.next(place);
-          },
-          error: (err) => {
-            // show the map centered on provided coordinates despite the possibility to retrieve a description for the place
-            const place: LocationPlace = {
-              coordinates: coordinates,
-            };
-            this.place.next(place);
-            if (err.message === LocationErrorCodes.API_ERROR) {
-              console.error(err.message);
-            } else {
-              console.warn(err.message);
-            }
-          },
-        });
-      } else {
-        console.error(`Invalid coordinates: "${position}"`);
-        this.invalidLocationErrorCode.next(LocationErrorCodes.INVALID_COORDINATES);
-      }
-
+      this.handleDecimalCoordinates(position);
     } else if (this.locationService.isSexagesimalCoordinateString(position)) {
-
-      // Retrieve the decimal coordinates and the place name for the provided coordinates
-
-      this.locationService.findPlaceAndDecimalCoordinates(position).subscribe({
-        next: (place) => {
-          this.place.next(place);
-        },
-        error: (err) => {
-          this.invalidLocationErrorCode.next(err.message); // either INVALID_COORDINATES or API_ERROR
-          if (err.message === LocationErrorCodes.API_ERROR) {
-            console.error(err.message);
-          } else {
-            console.warn(err.message);
-          }
-        },
-      });
-
+      this.handleSexagesimalCoordinates(position);
     } else {
+      this.handlePlaceOrAddress(position);
+    }
+  }
 
-      // Retrieve the coordinates for the provided POI or address
-
-      this.locationService.findPlaceCoordinates(position).subscribe({
-        next: (place) => {
-          place.displayName = position; // Show the name stored in metadata (comment out to show name retrieved from Nominatim)
-          this.place.next(place);
-        },
-        error: (err) => {
-          this.invalidLocationErrorCode.next(err.message); // either LOCATION_NOT_FOUND or API_ERROR
-          if (err.message === LocationErrorCodes.API_ERROR) {
-            console.error(err.message);
-          } else {
-            console.warn(err.message);
-          }
-        },
+  private handleDecimalCoordinates(position: string) {
+    if (this.locationService.isValidCoordinateString(position)) {
+      const coordinates = this.locationService.parseCoordinates(position);
+      this.locationService.searchByCoordinates(coordinates).subscribe({
+        next: displayName => this.place.next({ coordinates, displayName }),
+        error: err => this.handleError(err, coordinates)
       });
+    } else {
+      this.invalidLocationErrorCode.next(LocationErrorCodes.INVALID_COORDINATES);
     }
+  }
+
+  private handleSexagesimalCoordinates(position: string) {
+    this.locationService.findPlaceAndDecimalCoordinates(position).subscribe({
+      next: place => this.place.next(place),
+      error: err => this.handleError(err, this.locationService.parseCoordinates(position))
+    });
+  }
+
+  private handlePlaceOrAddress(position: string) {
+    this.locationService.findPlaceCoordinates(position).subscribe({
+      next: place => {
+        place.displayName = position;
+        this.place.next(place);
+      },
+      error: err => this.handleError(err, this.locationService.parseCoordinates(position))
+    });
+  }
 
+  private handleError(err: any, coordinates: LocationDDCoordinates) {
+    this.invalidLocationErrorCode.next(err.message);
+    this.place.next({ coordinates });
+    console.error(err.message);
   }
 
   private setCenterAndPointer(coordinates: LocationDDCoordinates) {
     this.leafletCenter = latLng(+coordinates.latitude, +coordinates.longitude);
     this.leafletLayers = [
-      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {maxZoom: 18, attribution: 'Leaflet'}),
-      marker(
-        [+coordinates.latitude, +coordinates.longitude],
-        {icon: icon({iconUrl: 'assets/images/marker-icon.png', shadowUrl: 'assets/images/marker-shadow.png'})})
+      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Leaflet' }),
+      marker([+coordinates.latitude, +coordinates.longitude], {
+        icon: icon({ iconUrl: 'assets/images/marker-icon.png', shadowUrl: 'assets/images/marker-shadow.png' })
+      })
     ];
   }
 }