feat(package): integration of the new german address interface

Author: AnthonyNahas

projects/angular-material-extensions/google-maps-autocomplete/src/lib/directives/mat-google-maps-autocomplete.directive.spec.ts

@@ -2,8 +2,8 @@ import {MatGoogleMapsAutocompleteDirective} from './mat-google-maps-autocomplete
 import {async, TestBed} from '@angular/core/testing';
 import {Component, DebugElement, ElementRef, NgZone} from '@angular/core';
 import {MapsAPILoader} from '@agm/core';
-import {environment} from '../../../demo/src/environments/environment';
 import {MockNgZone} from '../testing/mock-ng-zone';
+import {environment} from '../../../../../../src/environments/environment';
 
 @Component({
   template: `<input type="text">`

projects/angular-material-extensions/google-maps-autocomplete/src/lib/directives/mat-google-maps-autocomplete.directive.ts

@@ -4,6 +4,7 @@ import {MatValidateAddressDirective} from '../directives/address-validator/mat-a
 import {MapsAPILoader} from '@agm/core';
 import {Location} from '../interfaces/location.interface';
 import {isPlatformBrowser} from '@angular/common';
+import {GermanAddress} from '../interfaces/germand.address.interface';
 import PlaceResult = google.maps.places.PlaceResult;
 import AutocompleteOptions = google.maps.places.AutocompleteOptions;
 
@@ -40,6 +41,9 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit {
   @Output()
   onAutocompleteSelected: EventEmitter<PlaceResult> = new EventEmitter<PlaceResult>();
 
+  @Output()
+  onGermanAddressMapped: EventEmitter<GermanAddress> = new EventEmitter<GermanAddress>();
+
   @Output()
   onLocationSelected: EventEmitter<Location> = new EventEmitter<Location>();
 
@@ -90,6 +94,57 @@ export class MatGoogleMapsAutocompleteDirective implements OnInit {
             // get the place result
             const place: PlaceResult = autocomplete.getPlace();
 
+            const germanAddress: GermanAddress = {
+              gmID: place.id,
+              icon: place.icon,
+              url: place.url,
+              placeID: place.place_id,
+              displayAddress: place.formatted_address,
+              name: place.name,
+              vicinity: place.vicinity,
+              locality: {},
+              state: {},
+              country: {},
+              geoLocation: {latitude: -1, longitude: -1},
+            };
+
+            if (place.geometry && place.geometry.location) {
+              germanAddress.geoLocation.latitude = place.geometry.location.lat();
+              germanAddress.geoLocation.longitude = place.geometry.location.lng();
+            }
+
+            place.address_components.forEach(value => {
+              if (value.types.indexOf('street_number') > -1) {
+                germanAddress.streetNumber = Number(value.short_name);
+              }
+              if (value.types.indexOf('route') > -1) {
+                germanAddress.streetName = value.long_name;
+              }
+              if (value.types.indexOf('postal_code') > -1) {
+                germanAddress.postalCode = Number(value.short_name);
+              }
+              if (value.types.indexOf('sublocality') > -1) {
+                germanAddress.sublocality = value.long_name;
+              }
+              if (value.types.indexOf('locality') > -1) {
+                germanAddress.locality.long = value.long_name;
+                germanAddress.locality.short = value.short_name;
+              }
+              if (value.types.indexOf('administrative_area_level_1') > -1) {
+                germanAddress.state.long = value.long_name;
+                germanAddress.state.short = value.short_name;
+              }
+              if (value.types.indexOf('country') > -1) {
+                germanAddress.country.long = value.long_name;
+                germanAddress.country.short = value.short_name;
+              }
+              if (value.types.indexOf('administrative_area_level_3') > -1) {
+                germanAddress.locality.short = value.short_name;
+              }
+            });
+
+            this.onGermanAddressMapped.emit(germanAddress);
+
             if (!place.place_id || place.geometry === undefined || place.geometry === null) {
               // place result is not valid
               return;

projects/angular-material-extensions/google-maps-autocomplete/src/lib/interfaces/germand.address.interface.ts

@@ -11,15 +11,24 @@ export interface GermanAddress {
   placeID: string;
   name?: string;
   icon?: string;
-  displayAddress: string;
-  postalCode: number;
-  streetNumber: number;
-  streetName: string;
-  sublocality: string;
-  locality: string;
-  state: string;
-  country: string;
+  displayAddress?: string;
+  postalCode?: number;
+  streetNumber?: number;
+  streetName?: string;
+  sublocality?: string;
+  locality?: {
+    short?: string;
+    long?: string;
+  };
+  state?: {
+    short?: string;
+    long?: string;
+  };
+  country?: {
+    short?: string;
+    long?: string;
+  };
   vicinity?: string;
   url?: string;
-  location?: Location;
+  geoLocation?: Location;
 }

projects/angular-material-extensions/google-maps-autocomplete/src/lib/interfaces/index.ts

@@ -0,0 +1,2 @@
+export * from './germand.address.interface';
+export * from './location.interface';

projects/angular-material-extensions/google-maps-autocomplete/src/lib/mat-google-maps-autocomplete.module.ts

@@ -1,8 +1,8 @@
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatInputModule} from '@angular/material';
-import {MatGoogleMapsAutocompleteDirective} from './directives/mat-google-maps-autocomplete.directive';
 import {MatGoogleMapsAutocompleteComponent} from './component/mat-google-maps-autocomplete.component';
+import {MatGoogleMapsAutocompleteDirective} from './directives/mat-google-maps-autocomplete.directive';
 import {MatValidateAddressDirective} from './directives/address-validator/mat-address-validator.directive';
 import {CommonModule} from '@angular/common';
 

projects/angular-material-extensions/google-maps-autocomplete/src/public-api.ts

@@ -2,8 +2,9 @@
  * Public API Surface of google-maps-autocomplete
  */
 
+export * from './lib/interfaces';
 export * from './lib/component/mat-google-maps-autocomplete.component';
 export * from './lib/directives/mat-google-maps-autocomplete.directive';
 export * from './lib/directives/address-validator/mat-address-validator.directive';
-export * from './lib/interfaces/location.interface';
 export * from './lib/mat-google-maps-autocomplete.module';
+

src/app/app.component.html

@@ -468,6 +468,7 @@ <h2>Usage</h2>
                          [country]="config.country"
                          (onAutocompleteSelected)="onAutocompleteSelected($event)"
                          (onLocationSelected)="onLocationSelected($event)"
+                         (onGermanAddressMapped)="onGermanAddressMapped($event)"
                          required>
                   <mat-error *ngIf="matGoogleMapsAutocomplete.addressSearchControl.hasError('required')">
                     {{config.requiredErrorText}}
@@ -489,7 +490,8 @@ <h2>Usage</h2>
                   [types]="['bank']"
                   [appearance]="config.appearance"
                   (onAutocompleteSelected)="onAutocompleteSelected($event)"
-                  (onLocationSelected)="onLocationSelected($event)">
+                  (onLocationSelected)="onLocationSelected($event)"
+                  (onGermanAddressMapped)="onGermanAddressMapped($event)">
                 </mat-google-maps-autocomplete>
               </div>
 

src/app/app.component.ts

@@ -1,7 +1,7 @@
 import {Component} from '@angular/core';
-import {Appearance, Location} from '@angular-material-extensions/google-maps-autocomplete';
-import PlaceResult = google.maps.places.PlaceResult;
+import {Appearance, GermanAddress, Location} from '@angular-material-extensions/google-maps-autocomplete';
 import {Angulartics2GoogleAnalytics} from 'angulartics2/ga';
+import PlaceResult = google.maps.places.PlaceResult;
 
 @Component({
   selector: 'app-root',
@@ -47,4 +47,8 @@ export class AppComponent {
     this.showAsDirective = !this.showAsDirective;
     this.showAsComponent = !this.showAsDirective;
   }
+
+  onGermanAddressMapped($event: GermanAddress) {
+    console.log('onGermanAddressMapped', $event);
+  }
 }