searchable countries

ui-ngx/src/app/shared/components/contact.component.html

@@ -18,12 +18,13 @@
 <section [formGroup]="parentForm">
   <mat-form-field class="mat-block">
     <mat-label translate>contact.country</mat-label>
-    <mat-select class="country-select" formControlName="country">
-      <mat-option *ngFor="let country of countries" [value]="country.name">
+    <input type="text" matInput [formControl]="parentForm.get('country')" [matAutocomplete]="countryAutoComplete">
+    <mat-autocomplete #countryAutoComplete="matAutocomplete" [displayWith]="displayCountryWithFlag" (optionSelected)="onCountryChange($event)">
+      <mat-option *ngFor="let country of countriesFiltered | async" [value]="country.name">
         <span style="font-size: 20px;">{{country.flag}}</span>
         <span> {{country.name }}</span>
       </mat-option>
-    </mat-select>
+    </mat-autocomplete>
   </mat-form-field>
   <div fxLayout.gt-sm="row" fxLayoutGap.gt-sm="10px">
     <mat-form-field class="mat-block">
@@ -56,7 +57,9 @@
     <mat-label translate>contact.address2</mat-label>
     <input matInput formControlName="address2">
   </mat-form-field>
-  <tb-phone-input [required]="false"
+  <tb-phone-input #phoneInput
+                  [required]="false"
+                  [defaultCountry]="phoneInputDefaultCountry"
                   label="{{ 'contact.phone' | translate }}"
                   [enableFlagsSelect]="true"
                   formControlName="phone">

ui-ngx/src/app/shared/components/contact.component.ts

@@ -14,9 +14,12 @@
 /// limitations under the License.
 ///
 
-import { Component, Input } from '@angular/core';
+import { Component, Input, OnInit, ViewChild } from '@angular/core';
 import { UntypedFormGroup } from '@angular/forms';
-import { CountryData } from '../models/country.models';
+import { Country, CountryData } from '../models/country.models';
+import { Observable, map, startWith } from 'rxjs';
+import { PhoneInputComponent } from './phone-input.component';
+import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 @Component({
   selector: 'tb-contact',
   templateUrl: './contact.component.html',
@@ -24,14 +27,53 @@ import { CountryData } from '../models/country.models';
     CountryData
   ]
 })
-export class ContactComponent {
+export class ContactComponent implements OnInit {
 
   @Input()
   parentForm: UntypedFormGroup;
 
   @Input() isEdit: boolean;
+  @Input() phoneInputDefaultCountry = 'US';
+
+  @ViewChild('phoneInput') phoneInput: PhoneInputComponent | undefined;
 
   countries = this.countryData.allCountries;
+  countriesFiltered: Observable<Country[]>;
+
+  constructor(private countryData: CountryData) {
+    this.displayCountryWithFlag = this.displayCountryWithFlag.bind(this);
+  }
+
+  ngOnInit() {
+    this.countriesFiltered = this.parentForm.get('country').valueChanges
+      .pipe(
+        startWith(''),
+        map((countryName: string) => this._filterCountries(countryName))
+      );
+  }
+
+  private _filterCountries(countryName: string): Country[] {
+    const filterValue = countryName.toLowerCase();
+    return this.countries.filter(country => this.displayCountryWithFlag(country.name).toLowerCase().includes(filterValue));
+  }
+
+  displayCountryWithFlag(countryName: string): string {
+    const country = this.countries.find(c => c.name === countryName);
+    if (!country) {
+      return '';
+    }
+    return country ? `${country.flag} ${country.name}` : '';
+  }
 
-  constructor(private countryData: CountryData) {}
+  onCountryChange(select: MatAutocompleteSelectedEvent) {
+    // Get the selected country and check if the phone number is empty
+    // If it is, set the country code to the selected country
+    const countryName = select.option.value;
+    const country = this.countries.find(c => c.name === countryName);
+    if (country && this.phoneInput) {
+      if (!this.phoneInput.phoneFormGroup.get('phoneNumber').value) {
+        this.phoneInput.phoneFormGroup.get('country').setValue(country.iso2);
+      }
+    }
+  }
 }